Question

I’ve added a javascript element I found in a guide. It is as follows

$(document).ready(function ()
    {
        $('.dropdownbutton').click(function ()
        {
        $.post("send.php", $(".mycontactform").serialize(),  function (data) 
            {   
            });
        $('#success').html('Message sent!');
        $('#success').hide(2000);
    });
});

The existing javascript was

        function toggleDisplayWait(divId, imgId, durationmSec) {
        if(!$(divId).visible()) {
            move = Effect.BlindDown;
            newImage = "./img/minus.png";
        }
        else {
            move = Effect.BlindUp;
            newImage = "./img/plus.png";  
        }        
        move(divId, {duration: durationmSec / 1000.0 });
        setTimeout(function() { $(imgId).src = newImage; }, durationmSec)
    }



function BDEffect(divId, imgId)
    {
        /* new Effect.BlindDown(element, {duration:3});
        }*/

        if(!$(divId).visible()) 
            {
                move = Effect.BlindDown;
                newImage = "./img/feedbacktab_open.png";
                setTimeout(function() { $(imgId).src = newImage; }, 0)
            }
        else 
            {
                move = Effect.BlindUp;
                newImage = "./img/feedbacktab.png";
                setTimeout(function() { $(imgId).src = newImage; }, 2)
            }        
            move(divId, {duration:2});
            /*setTimeout(function() { $(imgId).src = newImage; }, 0)*/
    }
</script>

But neither the OLD code nor the NEW code works now.

Error console now reporting “$(divId).visible is not a function” when i try to use the old script

Answer 1

The old code looks like it’s using the Prototype framework, and the new code is using jQuery.

When you use the two together, you need to use jQuery’s noConflict() so that they don’t both try to use the $ variable.

First, after including the jQuery library, add a script like this:

<script>
  jQuery.noConflict()
</script>

Then modify your jQuery code to look like this:

jQuery(function ($) {
    $('.dropdownbutton').click(function() {
    $.post("send.php", $(".mycontactform").serialize(), function(data) {});
    $('#success').html('Message sent!');
    $('#success').hide(2000);
});

With noConflict, everywhere you want to use jQuery, you must use the jQuery variable instead of $. However, you can still pass $ in as a local variable, and it will not conflict with Prototype.

Also, note that I changed your document.ready(function() { ... }) function into jQuery’s shorthand version: jQuery(function() { ... }). The function will also get passed the jQuery object, which I name $ for convenience.