javascript - jQuery function works intermittently -
i'm pretty stuck here.
i'm using live search lookup script (ajax) lookup customers in database using input field. upon selection click chosen customer. form filling out customer filled details database. problem of time once clicked fields populated data. intermittent, if repetitively click same customer populate, appears though works in bursts , fails appears though there no pattern.
thanks in advance :)
// ########## live search function ########## // $(function(){ $(".search").keyup(function() { var searchid = $(this).val(); var datastring = 'search='+ searchid; if(searchid!='') { $.ajax({ type: "post", url: "search.php", data: datastring, cache: false, success: function(html) { $("#result").html(html).show(); } }); }return false; }); jquery(document).live("click", function(e) { var $clicked = $(e.target); if (! $clicked.hasclass("search")){ jquery("#result").fadeout(); } }); $('#searchid').click(function(){ jquery("#result").fadein(); }); }); // ########## live search function ########## // // ########## data populate function ########## // not working time $( document ).ajaxcomplete(function() { jquery("#result").live("click",function(e){ var $clicked = $(e.target); $('#custid').val($clicked.find('.customerids').text()); $('#firstname').val($clicked.find('.firstnames').text()); $('#lastname').val($clicked.find('.lastnames').text()); $('#companyname').val($clicked.find('.companynames').text()); $('#streetaddressp').val($clicked.find('.streetaddresss').text()); $('#suburbp').val($clicked.find('.suburbs').text()); $('#statep').val($clicked.find('.states').text()); $('#postcodep').val($clicked.find('.postcodes').text()); $('#phonenumber').val($clicked.find('.phonenumbers').text()); $('#emailaddress').val($clicked.find('.emailaddresss').text()); }); }); // ########## data populate function ########## // not working time
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <div class="content" style="float:right;"> <input id="searchid" class="search" type="text" placeholder="search customer using first name, last name or company name."></input> <br></br> <div id="result" style="display: none;"> <div class="show" align="left"> <div class="selection"> <span class="customerids"> 3628 </span> <span class="firstnames"> david </span> <span class="lastnames"> dodrel </span> - <span class="companynames"></span> , <span class="streetaddresss"> 101 woodward place </span> , <span class="suburbs"> suburb </span> <span class="states"> state </span> <span class="postcodes"> postcode </span> <span class="phonenumbers"></span> <span class="emailaddresss"></span> </div> </div> </div> <div id="customerdetails" class="row"> <div class="col-sm-6"> <label for="firstname">first name</label> <input type="text" name="firstname" id="firstname"> <label for="lastname">last name</label> <input type="text" name="lastname" id="lastname"> <label for="companyname">company name</label> <input type="text" name="companyname" id="companyname"> </div> <div class="col-sm-6"> <label for="phonenumber">phone number</label> <input type="text" name="phonenumber" id="phonenumber"> <label for="emailaddress">email address</label> <input type="text" name="emailaddress" id="emailaddress"> </div> </div>
try using code below, instead yours. also, please, check comments explaining think wrong code.
jquery(function(){ jquery(".search").on("keyup", function() { var searchid, datastring; searchid = jquery(this).val(); datastring = "search=" + searchid; if (searchid) { jquery.ajax({ type: "post", url: "search.php", data: datastring, cache: false, success: function(html) { jquery("#result").html(html).show(); } }); } }); jquery(document).on("click", function(e){ //no need use "live" here since whole block of code executed once dom ready var $clicked = jquery(e.target); if (!$clicked.hasclass("search")) { jquery("#result").fadeout(); } }); jquery("#searchid").on("click", function(){ jquery("#result").fadein(); }); //this attached once since "#results" div there beginning , change content, don't remove , attach again. jquery("#result").on("click", ".selection", function(e){ //you getting jquery(e.target) assume wasn't wanted since getting element clicked inside "#result" , not "#result" (that find content , assign values based on it) var $clicked = jquery(this); jquery('#custid').val($clicked.find('.customerids').text().trim()); jquery('#firstname').val($clicked.find('.firstnames').text().trim()); jquery('#lastname').val($clicked.find('.lastnames').text().trim()); jquery('#companyname').val($clicked.find('.companynames').text().trim()); jquery('#streetaddressp').val($clicked.find('.streetaddresss').text().trim()); jquery('#suburbp').val($clicked.find('.suburbs').text().trim()); jquery('#statep').val($clicked.find('.states').text().trim()); jquery('#postcodep').val($clicked.find('.postcodes').text().trim()); jquery('#phonenumber').val($clicked.find('.phonenumbers').text().trim()); jquery('#emailaddress').val($clicked.find('.emailaddresss').text().trim()); }); });
Comments
Post a Comment