1

For various reasons I am currently working on a module with a version of jQuery and jQuery UI that is not core. In other words,

scripts[]=js/jquery.js
scripts[]=js/jquery-ui.js

are declared in the .info file. While this gives me the correct look and feel of my module, the form callbacks I used previously with Drupal.behaviors are not working anymore.

My first approach was to remove the (function($) {...})(jQuery); enclosures in the Drupal.behaviors function, to no avail.

My question is then: Is there a way to write these callbacks using standard (non-Drupal) jQuery or do I have to refactor everything 'the drupal way?'

Here is what I have on the .module side:

function        ggent_form($form, &$form_state) {

$form['Input type'] = array(
    '#type'=>'fieldset',
    '#title'=>'Upload your image'
);

$form['Input type']['file'] = array(
    '#type' => 'managed_file',
    '#title'=> t('Upload image'),
    '#description' => t('An optional description'),
    '#upload_validators' => array(
        'file_validate_extensions' > array('gif png jpg jpeg'),
        'file_validate_size'=>array(512*512*512),
    ),
    '#upload_location'=>'public://',

);

$form['Input type']['submit'] = array(
    '#type'=>'submit',
    '#value' =>t('Submit'),
 '#ajax' => array(
            'callback'=> 'ggent_update_image_callback',
            'wrapper'=>'mywrapper'
        ),
);

return $form;
}

///*
// * Form callbacks
// */
function        ggent_update_image_callback($form,$form_state) {
$picture_settings = array( 
    'image' => file_create_url($form['Input type']['file']['#file']->uri)
    );
    drupal_add_js(array('ggent' => $picture_settings),'setting');
    return;

Which should send to my .js file to be used as:

    if (input_type === 'image') {
        img.src = '....../standardbg.png';
        Drupal.behaviors.imgupload = {
            attach: function( context, settings ) {
                if (typeof Drupal.settings.ggent.image!=='undefined' && img.src !== Drupal.settings.ggent.image) { //typeof img.src !== 'undefined' && 
                    img.src = Drupal.settings.ggent.image;
                }
            }
        };
    }

But this doesn't work. The Drupal.behaviors event doesn't fire at all! Any suggestions would be greatly valued. EDIT: Updating my jQuery using the suggested module does nothing.

  • First, if you'll read jQuery documentation you will see that you should not include 2 versions on one page. Certainly not so carelessly. But you do. So you shouldn't expect anything jQuery-based to work properly. Second thing: Why not to use jQuery Update or jQuery Multi? These modules already solve a lot of basic problems like yours, I see no point in recreating them here in answer. – Mołot Aug 6 '14 at 12:50
  • What is the reasoning behind just updating the jQuery to a newer version? As I understand it jQuery within Drupal has it's own conventions anyway, as the example I have given in my code (function($) {...})(jQuery);. EDIT: I also would not be using 2 versions of the same script if I could avoid it! But it doesn't seem to work just using the core jquery.js. – Alex Aug 6 '14 at 13:18
  • Main reason is to avoid having two version, because... Well, you see exactly what's the reason to avoid it, right now, don't you? – Mołot Aug 6 '14 at 13:19
  • What can I do to bring my code to work with core? Wrap all my jQuery up in the standard formula, as above? – Alex Aug 6 '14 at 13:23
  • 2
    There's nothing in the code in the question that won't work with the core jquery version. Your confusion is that (function($) {...})(jQuery); is in any way a convention specific to Drupal - it's just a plain old anonymous javascript function, used for scoping. Managing Javascript in Drupal 7 goes into this in plenty of detail, you should read and understand those docs before going any further. There's no such thing as 'Drupal jQuery' and 'non-Drupal jQuery' - they are one and the same – Clive Aug 6 '14 at 13:25
0

If for some reason you need multiple versions of jQuery you can use the jQuery Multi module:

(libraries module is also required) and you put the different version in the libraries directory then you wrap your JavaScript code in something like this:

(function($) {...})(jqxxxxx);

where jqxxxxx is the version of jQuery you are using (see the documentation of jqmulti for more info)

do not include jquery scripts like you did. JQury Multi will do it automatically for you

0

To all who answered or commented, thanks.

I found that the simplest way to make this work was indeed to get rid of my versions of jQuery and go with the core, but I had to add the UI libraries one by one (although it works out which co-dependencies also must be imported for you) in the hook_init() function with drupal_add_library('system','ui.button');.

I then wrapped the entirety of my js code in one big (function($) {...})(jQuery); and it ran fine.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.