jQuery Ajax Drop Down

J'ai un menu déroulant qui, une fois cliqué, fait une requête ajax pour mettre à jour le menu déroulant avec les derniers niveaux de stock. Lorsque je clique sur la liste déroulante, la demande est faite et la liste déroulante est mise à jour et descend avec les dernières données. Le problème est lorsqu'un utilisateur sélectionne une option, la requête Click ajax est à nouveau effectuée, ce qui empêche la sélection d'une option. J'ai essayé de déconnecter la fonction Click qui a fonctionné mais je n'ai pas pu relier le clic au cas où un utilisateur voudrait changer ce qu'il a sélectionné.jQuery Ajax Drop Down

DropDown

<select name="Qty" id="88" class="ProQty"> 
    <option value="0">Qty</option> 
    ... 
</select>

jQuery

//Update Qty Levels Automatically 
$(function QtyCheck() { 
    $("select.ProQty").click(function() { 
     var ProductID = $(this).attr('id'); 

     var Startdd = $("#Startdd").val(); 
     var Startmm = $("#Startmm").val(); 
     var Startyy = $("#Startyy").val(); 
     var StartHours = $("#StartHours").val(); 
     var StartMinutes = $("#StartMinutes").val(); 
     var Enddd = $("#Enddd").val(); 
     var Endmm = $("#Endmm").val(); 
     var Endyy = $("#Endyy").val(); 
     var EndHours = $("#EndHours").val(); 
     var EndMinutes = $("#EndMinutes").val(); 

     var dataString = 'Startdd=' + Startdd + '& Startmm=' + Startmm + '& Startyy=' + Startyy + '& StartHours=' + StartHours + '& StartMinutes=' + StartMinutes + '& Enddd=' + Enddd + '& Endmm=' + Endmm + '& Endyy=' + Endyy + '& EndHours=' + EndHours + '& EndMinutes=' + EndMinutes; 

     $("#" + ProductID).empty(); 
      //$("#" + ProductID).empty().unbind(); 

     $.ajax({ 
      type: "POST", 
      url: "./ajax/QtyCheck.asp?ID=" + ProductID, 
      data: dataString, 
      cache: false, 
      success: function(html) { 
         //setTimeout(function() { 
          $("#" + ProductID).append(html); 
         //},600); 
      }, 
      error: function (XMLHttpRequest, textStatus, errorThrown) { 
         //setTimeout(function() { 
          $("#" + ProductID).append(XMLHttpRequest.responseText); 
         //},600); 
      } 
     }); 
    }); 
});

Source

2010-07-19 Jemes

Utilisez une variable simple booléenne ...

$(function QtyCheck() { 
    var loaded = false;  
    $("select.ProQty").click(function() { 
    if(loaded) return; 
    loaded = true; 
    // rest of your code 
    }); 
});

Vous pouvez le réinitialiser au besoin.

Source

2010-07-19 14:19:11

Si je ne me méprends pas, il semble que ce soit juste un problème de bulles. Essayez d'ajouter:

$('option').click(function(event){ 
    event.stopPropagation(); 
}

Source

2010-07-19 14:32:28 Squirkle

Merci pour votre replay, je ne sais pas ce que vous entendez bien? – Jemes

événement bouillonnement: l'événement de clic que vous avez sur $('select.ProQty') affecte également les enfants de l'élément. C'est pourquoi la requête ajax est envoyée à nouveau lorsque l'utilisateur clique sur un <option>. Le clic sur une option "se lève" à $('select.ProQty').click()

Si vous voulez arrêter ce bouillonnement et que la requête ajax ne soit pas renvoyée, vous devez arrêter la propagation d'événement. Le bloc de code suivant accomplira ceci.

$('option').click(function(event){ 
    event.stopPropagation(); 
}

Source

2010-07-19 15:34:02 Squirkle

Je ne peux pas faire fonctionner stopPropagation. Où devrais-je ajouter cela à mon code? – Jemes

Jquery ajax drop down testajax 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> 
<head> 
    <title>Multiple Select Boxes</title> 
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#loader').hide(); 
      $('#type').change(function(){ 
       $('#make').fadeOut(); 
       $('#loader').show(); 

       $.post("ajax_make.php", { 
        type: $('#type').val() 
       }, function(response){ 
        setTimeout("finishAjax('make', '"+escape(response)+"')", 400); 
       }); 
       return false; 
      }); 
     }); 

     $(document).ready(function() { 
      $('#btn-add').click(function(){ 
       $('#select-from option:selected').each(function() { 
        $.post("ajax_add_item.php", { 
         product_id: $(this).val(), 
         type: $('#type').val() 
        },function(response){ 
         window.location.reload(true); 
        }); 
        $('#select-to').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); 
        $(this).remove(); 
       }); 

      }); 
      $('#btn-remove').click(function(){ 
       $('#select-to option:selected').each(function() { 
        $.post("ajax_remove_item.php", { 
         product_id: $(this).val(), 
         type: $('#type').val(), 
         removeItem: $(this).text() 
        },function(response){ 
         window.location.reload(true); 
        }); 

        $('#select-from').append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>"); 
        $(this).remove(); 
       }); 
      }); 
      $('#btn-up').bind('click', function() { 
       $('#select-to option:selected').each(function() { 
        var newPos = $('#select-to option').index(this) - 1; 
        if (newPos > -1) { 
         $('#select-to option').eq(newPos).before("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>"); 
         $(this).remove(); 
        } 
       }); 
      }); 
      $('#btn-down').bind('click', function() { 
       var countOptions = $('#select-to option').size(); 
       $('#select-to option:selected').each(function() { 
        var newPos = $('#select-to option').index(this) + 1; 
        if (newPos < countOptions) { 
         $('#select-to option').eq(newPos).after("<option value='"+$(this).val()+"' selected='selected'>"+$(this).text()+"</option>"); 
         $(this).remove(); 
        } 
       }); 
      }); 
     }); 


     function finishAjax(id, response){ 
     $('#loader').hide(); 
     $('#'+id).html(unescape(response)); 
     $('#'+id).fadeIn(); 
     } 
    </script> 
</head> 
<body> 
<div id="loader"><strong>Loading...</strong></div> 
    <fieldset> 
     <form name="theform" id="form" method="POST" action="search.php"> 
       <div style="width:500px;" align="center"> 
        <label for="type">Websites:</label> 
        <select id="type" name="type"> 
         <?php 
          include('class_dbcon.php'); 
          $connect = new doConnect(); 

          $q = mysql_query("SELECT * FROM website ORDER BY website_id ASC"); 
          while($row = mysql_fetch_assoc($q)) 
          { 
           $intWebsiteId = $row['website_id']; 
           echo '<option value="'.$row['website_id'].'">'.$row['website_name'].'</option>'; 
          } 
         ?> 
        </select> 
        <br><br> 
       <label for="make">Product:</label> 
        <select id="make" name="make"> 
         <option value="">-- Select Product --</option> 
        </select> 
       </div> 
       <br> 
       <div style="width:500px;" align="center"> 
        <select name="selectfrom" id="select-from" multiple size="5"> 
         <?php 
         if(!empty($intWebsiteId)) { 
          $pna = mysql_query("SELECT * FROM products p WHERE p.product_id NOT IN (SELECT pa.product_id FROM product_associate pa WHERE pa.team_id = ". $intWebsiteId. ")"); 
         } else { 
          $pna = mysql_query("SELECT * FROM products p WHERE p.product_id NOT IN (SELECT pa.product_id FROM product_associate pa WHERE pa.team_id = 1)"); 
         } 

         while($rowPna = mysql_fetch_assoc($pna)) 
         { 
          $intWebsiteId = $row['website_id']; 
          echo '<option value="'.$rowPna['product_id'].'">'.$rowPna['product_name'].'</option>'; 
         } 
         ?> 
        </select> 

        <a href="JavaScript:void(0);" id="btn-up"><img src="http://localhost:8080/website/IMG/Up-Arrow.jpg" alt="Pulpit rock" width="25" height="20"></a> 
        <a href="JavaScript:void(0);" id="btn-down"><img src="http://localhost:8080/website/IMG/arrow-down.jpg" alt="Pulpit rock" width="25" height="20"></a> 
        <select name="selectto" id="select-to" multiple size="5"> 
         <?php 

          if(!empty($intWebsiteId)) { 
           $ipa = mysql_query("SELECT * FROM products p INNER JOIN product_associate pa ON p.product_id = pa.product_id AND pa.team_id =". $intWebsiteId); 
          } else { 
           $ipa = mysql_query("SELECT * FROM products p INNER JOIN product_associate pa ON p.product_id = pa.product_id AND pa.team_id =1"); 
          } 
          while($rowIpa = mysql_fetch_assoc($ipa)) 
          { 
           echo '<option value="'.$rowIpa['product_id'].'">'.$rowIpa['product_name'].'</option>'; 
          } 

          $connect->disc(); 
         ?> 
        </select> 
        <br><br> 
        <a href="JavaScript:void(0);" id="btn-add">Add &raquo;</a> 
        <a href="JavaScript:void(0);" id="btn-remove">&laquo; Remove</a> 
       </div> 
      </form> 
     </fieldset> 

</body> 
</html>

Source

2013-05-08 12:44:51 Bhushan

<?php 
/* 

    In this class we instantiate an SQL Connection object. Connection details are assinged to 
    object variabes so that they can be used when connecting to the database. The two main 
    functions are conn() and disc(). They are for connecting and disconnecting to the SQL database. 

*/ 
class doConnect 
{ 
    private $databasehost; 
    private $databasename; 
    private $databaseusername; 
    private $databasepassword; 

    function __construct() 
    { 
     $this->setRes(); 
     $this->conn(); 
    } 

    function setRes() 
    { 
     $this->databasehost = "localhost"; 
     $this->databasename = "db_website"; 
     $this->databaseusername ="root"; 
     $this->databasepassword = ""; 
    } 

    function conn() 
    { 
     $con = @mysql_connect($this->databasehost,$this->databaseusername,$this->databasepassword) or die(mysql_error()); 
     @mysql_select_db($this->databasename) or die(mysql_error()); 

    } 

    function disc() 
    { 
     mysql_close(); 
    } 
} 
?>

Source

2013-05-08 12:58:34 Bhushan

jQuery Ajax Drop Down

Répondre

Questions connexes