javascript - JQuery change event only fire when the page is not fully loaded and fail to fire when page is fully loaded -
my webpage uses quite number of jquery scripts, pre-populating location field based on input in state input field , using some of alert ensure on change event fires. noticed event fires while web page loading , not after page loaded.
this url's : http://mmarket.vas2nets.com/request.php , http://mmarket.vas2nets.com/register.php
am guessing there confliction in scripts, appreciated.
note: please not mind long script, it's enable through @ it.
<head> //load jquery script , test function. <script src='http://code.jquery.com/jquery-latest.min.js'></script> <script type='text/javascript'> $(document).ready(function(){ $("div.span3 #state").change(function(){ var data = $("div.span3 #state").serialize(); alert(data); $.ajax({ url : 'populatelocation.php', type : 'post', data : data, success:function(data){ $('#location').html(data) } }) }); }); </script> </head> <body> <div id="wrapper"> <section class="container"> <div class="dynamiccontent"> <div class="inner"> <div class="row"> <div class="span8 offset2"> <header> <h2>provider's registration</h2> </header> <div> <div> <div class="outside"> <div class=""> <div> <div class="row"> <div class="span3 offset1"> <dl class="dl-horizontal"> <dt>m</dt> <dd> <p>m-market</p> <p><a href="#" class="btn btn-link">more<span></span></a></p> </dd> </dl> </div> <div class="span3"> <form name="register" id="register" method="post" class="form_login" action=""> <label name="username">name</label> <input type="text" name="name" id="name"/> <label name="phone">mobile number</label> <input type="text" onfocus="if(this.value =='2348xxxxxxxx' ) this.value=''" onblur="if(this.value=='') this.value='2348xxxxxxxx'" value="2348xxxxxxxx" name="phone"/> <label name="password">password</label> <input type="password" name="password" id="password"/> <label name="password2">retype password</label> <input type="password" name="password2" id="password2"/> <label>service</label> <select name="provider" id="provider"> <option value="">select service</option> <?php echo $service_fields; ?> </select> <label>state</label> <select id ="state" name="state"> <option value='0'>--- select state------</option> <?php echo $state_fields; ?> </select></div> <label>location</label>enter code here <select id='location'> </select>
use $(window).load()
rather $(document).ready()
components require page loaded.
it's reasonable this:
$(window).load(function() { // code requires page loaded }); $(document).ready(function() { // other code });
$(window).load()
waits elements including images, while $(document).ready()
waits basic dom elements.
Comments
Post a Comment