2012-04-18 83 views
1

我有以下代碼:

<script language="javascript"> 
function add(idautomobile,marque,model,couleur,type,puissance,GPS){ 

$("#notification").ajaxStart(function(){ 
    $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>"); 
}); 



     $.ajax({ 
      type: "POST", 
      url: "ajoutAutomobile", 
      data: {idautomobile1:idautomobile,marque: marque,model:model,couleur:couleur,type:type,puissance:puissance,GPS:GPS}, 
      error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } , 
      success: function(retour){ 
      $("#notification").empty().append(retour).removeClass("error").addClass("success"); 
        } 
      }); 

    } 
    else{ 
    $("#notification").empty().append("* Vérifiez les types de données").addClass("error"); 
     } 

    } 

function init(){ 

    $("#GPSs").ajaxStart(function(){ 
    $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>"); 
});  
    $.ajax({ 
     type:"GET", 
     url: "selectImei" , 
     error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } , 
     success: function(retour){ 
      $("#GPSs").empty().append(retour) 
        } 
      }); 
    } 
</script> 

,你可以看到這裏,我有兩個功能init()add(..) : 的init()時,頁面加載其COLLED:

<body onload="init()"> 

,並添加(..)按鈕被點擊時:

<input type="button" value="Ajouter Automobile" OnClick="add(idautomobile.value,marque.value,model.value,couleur.value,type.value,puissance.value,GPS.value)"> 

我由GIF(裝載)在add(...)功能的AJAX請求期間顯示在<div id="notification">

$("#notification").ajaxStart(function(){ 
    $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>"); 
}); 

在init()函數是相同的(與來自數據庫選項初始化<select>):

$("#GPSs").ajaxStart(function(){ 
    $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>"); 
}); 

所有工作都很好,「ajax-loader.gif」被加載到<div id="GPSs">中,然後在接收到響應時顯示帶選項的呈現選擇。

的問題是,當我調用add(..)函數「AJAX-loader.gif」在<div id="GPSs">再次加載圖像...

最初加載頁面時,該功能init()被稱爲: enter image description here

當AJAX請求完成時,選擇從數據庫檢索顯示,然後進入<div id="GPSs">enter image description here

當我點擊該按鈕時,圖像的問題再次顯示: enter image description here

有沒有解決方案呢?

的完整代碼

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<!DOCTYPE html> 
<html> 
    <head> 

     <title>Ajout automobile</title> 
     <%@include file="includes/head.html" %> 
     <script language="javascript"> 
function add(idautomobile,marque,model,couleur,type,puissance,GPS){ 

$("#notification").ajaxStart(function(){ 
    $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>"); 
}); 


     select = document.getElementById("type"); 
     type = select.options[select.selectedIndex].value; 
     select2 = document.getElementById("GPS"); 
     GPS = select2.options[select2.selectedIndex].value; 
     Vidautomobile=document.getElementById('idautomobile').validity.valid; 
     Vmarque=document.getElementById('marque').validity.valid; 
     Vmodel=document.getElementById('model').validity.valid; 
     Vcouleur=document.getElementById('couleur').validity.valid; 
     Vtype=document.getElementById('type').validity.valid; 
     Vpuissance=document.getElementById('puissance').validity.valid; 
     VGPS=document.getElementById('GPS').validity.valid; 

if(Vidautomobile&&Vmarque&&Vmodel&&Vcouleur&&Vtype&&Vpuissance&&VGPS) 
{ 
     $.ajax({ 
      type: "POST", 
      url: "ajoutAutomobile", 
      data: {idautomobile1:idautomobile,marque: marque,model:model,couleur:couleur,type:type,puissance:puissance,GPS:GPS}, 
      error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } , 
      success: function(retour){ 
      $("#notification").empty().append(retour).removeClass("error").addClass("success"); 
        } 
      }); 

    } 
    else{ 
    $("#notification").empty().append("* Vérifiez les types de données").addClass("error"); 
     } 

    } 

function init(){ 

    $("#GPSs").ajaxStart(function(){ 
    $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>"); 
});  
    $.ajax({ 
     type:"GET", 
     url: "selectImei" , 
     error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } , 
     success: function(retour){ 
      $("#GPSs").empty().append(retour) 
        } 
      }); 
    } 
</script> 
    </head> 
    <body onload="init()"> 
     <%@include file="includes/header.html" %> 


<div id="notification"><!-- zone de notification --> 

</div> 
<!-- Le contenu --> 
    <div id="content">  
    <form name="f"> 
     <table> 
     <tr> 
      <td><b><i>Immatricule</i></b> </td> 
      <td><input type="text" pattern="\w{5,30}" required placeholder="Immaticule" name="idautomobile" id="idautomobile"></td> 
     </tr> 

     <tr> 
      <td> <b><i>Marque</i></b></td> 
      <td> <input type="text" required placeholder="Marque" name="marque" id="marque"></td> 
     </tr> 

     <tr>  
      <td><b><i>Model</i></b> </td> 
      <td><input type="text" pattern="\w{3,30}" required placeholder="Model" name="model" id="model"></td> 
     </tr> 
     <tr> 
      <td><b><i>Couleur</i></b> </td> 
      <td> <input type="text" pattern="\w{3,30}" required placeholder="Couleur" name="couleur" id="couleur"></td> 
     </tr> 

     <tr> 
      <td> <b><i>type</i></b> </td> 
      <td><select name="type" id="type"> 
      <option value="voiture" >Voiture </option> 
      <option value="camion" >Camion </option> 
       </select> </td> 
     </tr> 

      <tr> 
      <td><b><i>Puissance</i></b> </td> 
      <td> <input type="text" pattern="\d{1}" required placeholder="Puissance" name="puissance" id="puissance"></td> 
     </tr> 

     <tr> 
      <td><b><i>GPS</i></b></td> 
      <td id="GPSs"></td> 
     </tr> 

    </table> 
    <input type="button" value="Ajouter Automobile" OnClick="add(idautomobile.value,marque.value,model.value,couleur.value,type.value,puissance.value,GPS.value)"> 



</form> 

     </div> 
    <!-- iclure le footer--> 
<%@include file="includes/footer.html" %> 
<!-- fin iclure-->  
    </body> 
</html> 
+3

如果您發佈您的完整代碼,我們可以爲您提供幫助。但就目前而言,你已經包含了一部分「if」語句。 – Tim 2012-04-18 17:11:54

+0

完整代碼加入.. – 2012-04-18 17:16:53

回答

2

你打電話.ajaxStart()的兩倍,因此它是有道理的,你會得到你的時候啓動第二AJAX調用(假設沒有已經在運行)都被調用。什麼你需要做的是,一旦最初的AJAX調用已完成,解除綁定連接到#GPSs元素ajaxStart事件處理程序,就像這樣:

$('#GPSs').off('ajaxStart'); 

使用的.off()功能,這是在jQuery的1.7推出。如果您使用的是早期版本,請改用.unbind()

+0

工程好哥們!謝謝。 – 2012-04-18 17:28:04