Home/ Questions/Q 7803753
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T01:41:13+00:00

I have the following code: <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({

  • 0

I have the following code:

<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>

as you can see here,I have two functions init() and add(..):
init() its colled when page is loaded:

 <body onload="init()">

and add(..) when the button is clicked:

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

I made an gif (loader) showed in <div id="notification"> during an ajax request in the add(...) function:

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

the same in the init() function(initialize <select> with options from database):

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

all works very well, the “ajax-loader.gif” is loaded into the <div id="GPSs"> , then the rendered select with options is showed when the response is received.

the problem is when i call the add(..) function the image ‘ajax-loader.gif’ is loaded again in the <div id="GPSs">…

Initially the page is loaded, the function init () is called:
enter image description here

when the ajax request is finished , the options is retrieved from database then showed into the <div id="GPSs"> :
enter image description here

the problem when i click on the button,the image is showed again :
enter image description here

is there a solution for that ?

Full code:

<%@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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re calling .ajaxStart() twice, so it makes sense that you’ll get both being called when you initiate a second AJAX call (assuming none are already running). What you’ll need to do is, once the initial AJAX call has completed, unbind the ajaxStart event handler attached to the #GPSs element, like so:

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

    That uses the .off() function, which was introduced in jQuery 1.7. If you’re using an earlier version, use .unbind() instead.

    • 0