conflit ajax + jquery
Posté : 11 févr. 2013, 11:50
Bonjour à tous,
Je suis entrain de développer un site mobile avec jquery mobile et je suis confronté à un véritable problème de conflit:
- J'utilise ajax pour charger mes pages a l'intérieur d'une page principale
- J'utilise jquerymobile pour faire tout ce qui est design pour mobile
Je constate que que lorsque je désactive le fichier jquery.js (jquerymobile), mon script ajax fonction bien.
Mais quand je l'active il ne marche plus.
Je suis entrain de développer un site mobile avec jquery mobile et je suis confronté à un véritable problème de conflit:
- J'utilise ajax pour charger mes pages a l'intérieur d'une page principale
- J'utilise jquerymobile pour faire tout ce qui est design pour mobile
Je constate que que lorsque je désactive le fichier jquery.js (jquerymobile), mon script ajax fonction bien.
Mais quand je l'active il ne marche plus.
<script type="text/javascript">
function new_xhr(){
var xhr_object = null;
if(window.XMLHttpRequest)
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject){
try {
xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr_object = false;
}
return xhr_object;
}
function load_page(url, divnom) {
var xhr2 = new_xhr();
xhr2.onreadystatechange = function(){
if ( xhr2.readyState == 4 ){
if(xhr2.status != 200){
document.getElementById(divnom).innerHTML ="Error code " + xhr2.status;
} else {
document.getElementById(divnom).innerHTML = xhr2.responseText;
}
} else {
document.getElementById(divnom).innerHTML = "Chargement en cours ...<br /><img src='images/ajax-loader.gif' alt=''/>";
}
}
xhr2.open("POST", url, true);
xhr2.send();
}
//////////////////////////////////////////////////////////////////
</script>
<script src="js/jqm-docs.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.2.0.js"></script>
<!--<script src="js/capture.js"></script>-->
<script src="js/cordova-1.6.0.js"></script>
</head>
<body onLoad="load_page('index.php', 'formulaire');">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>Framwork Géolocalisation</h1>
</div>
<div data-role="content" >
<!--/content-primary-->
<div id="formulaire" style="height:100px"></div>
<!--/content-primary-->
</div>