prifs prifs - 5 months ago 19
jQuery Question

Why does my modal jquery won't work when link to these .js files

I have a pop-up modal that I need when to confirm if a user will do a certain action

$(document).ready(function(){
$("#button").click(function(){
$("#the-dialog").dialog({
resizable: false,
height: 140,
modal: true,
buttons:{
"Option One": function(){
//Perform Action
$(this).dialog("close");
},
Cancel: function(){
//Do nothing
$(this).dialog("close");
}
}
});
});
});


This modal needs this to links to work

<script src="//code.jquery.com/jquery-1.12.4.js"></script>

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


It works okay, when I run it at my test page. Now I tried to integrate it to my main page and suddenly it doesn't work, but when I remove this two links it suddenly works fine.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery.js"></script>


Why does this happen?

Answer

In order to extend my explanation a bit, you are loading 3 different jquery scripts, at least 2 of which are different versions as well:

<script src="//code.jquery.com/jquery-1.12.4.js"></script> // v: 1.12.4

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> //this is ok, it's jQuery UI which extends jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> // v: 1.4.2
<script src="js/jquery.js"></script> //don't know which versions is this one

The reason your modal doesn't work (and i'm pretty sure it's not the only thing not working if you keep digging into it) is that you're probably having some conflicts between them.

It makes no sense uploading 3 versions of the same script, except if you want a pile of bugs in your application. Just pick, preferably the newest one since that will most probably work with all your cases.

And one more thing to make sure is that your jquery script that you choose is the first one to load (so just make sure is the first script in your header).