Separate Jquerys and Css

Question

I own a index.php which uses the following JQuery and CSS:

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

And from this index, call a second page example.php through a normal link without passing forms or anything and using another JQuery and CSS:

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="http://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css" rel="stylesheet">

My question is:

The JQuery and CSS of index is affecting and overwriting the page example.php.

How can I fix this ?

Answer 1

Hi, Diego Lucas! Blz?

example.php is being called within of the content of index php.? I say that because if the example.php for another page, being called in the browser separately of index.php, jQuery and CSS have no reason to affect it.

But... If you are inserting new scripts in index.php, through a page call example.php, recommend nay call back jQuery.

Take a look at this post from William Bruno that talks a little bit about script conflicts: http://wbruno.com.br/jquery/noconflict-jquery-usando-2-bibliotecas-javascript-alias/

If they are pages called separately, normally include the scripts and styles you want. They should be loaded normally and with no connection with index.php.

Abs.

---

Complementing

Since the pages have link, you can identify the tags p/ manipulate them.

<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script id="jqMobileJs" src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link id="jqMobileCss" rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

And on the example.php page

<script>
var novoJs = "http://code.jquery.com/ui/1.11.4/jquery-ui.min.js";
var novoCss = "http://code.jquery.com/ui/1.11.4/themes/dark-hive/jquery-ui.css";
$('#jqMobileJs').attr('src', novoJs);
$('#jqMobileCss').attr('href', novoCss);
</script>

Note: I believe that it is better to identify where the call from the archives is coming from index php. and separate that from the example.php. Anyway, I left this code here, so you can test.