Conflict with script and prototype.js

Question

I have the following code and it looks like my first script is conflicting with prototype.js. Whenever I remove prototype.js the functionality of the first script works fine. When added back in, the functionality of prototype on the form is back, but my first script fails to work at all. How can I make this work?

<script>
$(document).ready(function() {    
    $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight});
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);    
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
        $("#textbox").focus();
    });

    $("#textbox").blur(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
    }).keyup(function (e) {
        if($(this).val().substr($(this).val().length-1)=="?") {
            $('#mask').hide();
            $('.window').hide();
            setFromCCS($("#textbox").val());
        }
    });    
    $('.window .close').click(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
        setFromCCS($("#textbox").val());
    });        

    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });            

}); 

    function setFromCCS(ccs) {

        var index1 = ccs.indexOf("%B") + 2;
        var index2 = ccs.indexOf("^") + 1;
        var index3 = ccs.indexOf("^", index2 + 1) + 1;

        var cardNumber = ccs.substring( index1, index2 - 1);
        var expMonth = ccs.substr(index3 +2, 2);
        var expYear = ccs.substr(index3, 2);
        var holderName = ccs.substring(index2, index3 - 1);

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var d = new Date(expMonth+"-01-20"+expYear);

        $("#input_6_cc_number").val(cardNumber);
        $("#input_6_cc_exp_month").val(monthNames[d.getMonth()]);
        $("#input_6_cc_exp_year").val("20"+expYear);
    }
</script> 


<!--[if lt IE 9]><script src="https://cdn.jotfor.ms/js/vendor/flashcanvas.js?3.3.17929" type="text/javascript"></script><![endif]-->
<script src="https://cdn.jotfor.ms/js/vendor/jquery-1.8.0.min.js?v=3.3.17929" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/js/vendor/jSignature.min.noconflict.js?3.3.17929" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/js/vendor/jotform.signaturepad.js?3.3.17929" type="text/javascript"></script>    
<script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.17929" type="text/javascript"></script>
<script src="https://cdn.jotfor.ms/static/prototype.forms.js"></script>

Jquery versions 1.4.4 1.2.6 and 1.8.0 are being used

RickL · Accepted Answer · 2017-03-28 18:54:46Z

1

If I recall correctly, change all $ in your script to jQuery, so:

$(document).ready(function() {    
    $('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = $(this).attr('href');

becomes:

jQuery(document).ready(function() {    
    jQuery('a[name=modal]').click(function(e) {
        e.preventDefault();
        var id = jQuery(this).attr('href');

and so on.

And put:

<script type="text/javascript">
    jQuery.noConflict();
</script>

directly below your reference to the jQuery script file in <head>

edited Mar 28, 2017 at 18:54

answered Mar 28, 2017 at 18:13

RickL

3,42410 gold badges42 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RickL Over a year ago

I think jQuery also needs to be running in 'no conflict' mode - I've added this to the answer. Also see learn.jquery.com/using-jquery-core/…

MHeredia Over a year ago

Works! Thank you so much

Danil Korablev · Accepted Answer · 2017-03-28 18:22:42Z

0

If you give "$" as parameter, you can use "$" instead of jQuery.

jQuery(document).ready(function($) { $('a[name=modal]').click(function(e) { e.preventDefault(); var id = $(this).attr('href');

answered Mar 28, 2017 at 18:22

Danil Korablev

11 bronze badge

Comments

Adrian Preuss · Accepted Answer · 2017-03-28 19:02:20Z

0

It's only a Scope problem.

Move your function setFromCCS in the $(document).ready(function() { context!

Sample:

$(document).ready(function() {
    // Other Code

    function setFromCCS(ccs) {
       // Code...
    }
});

Additional, create a new scope with anonymous function and add the jQuery context like this:

(function($) { // The jQuery-Context is "$"
     // Your Code

     function setFromCCS(ccs) {
       // Code...
    }
}(jQuery)); // Add jQuery-Context

answered Mar 28, 2017 at 19:02

Adrian Preuss

3,1212 gold badges28 silver badges46 bronze badges

Collectives™ on Stack Overflow

Conflict with script and prototype.js

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related