javascript - Ajax issue with input, textarea blur -
have problem submiting information via ajax.
have example 20 rows. click on row , opens information services.
$('tr').click(function() { var servicesupdateid = $(this).attr('data'); $("#"+servicesupdateid).css({"display":"block", 'opacity':'0'}).animate({left: '0',opacity: '1',}); // save form class ajax submit localstorage.setitem("formid", servicesupdateid); }); here html:
<tbody> <?php $allservices = services::where('user_id', $mainuser->id); foreach($allservices $oneservices) { ?> <tr class="services-table-hover" data="services_<?php echo $oneservices->id; ?>"> <td> <div class="services-color"></div> <img src="/assets/images/provider_img2.png" alt=""> </td> <td class="title-name"> <?php echo $oneservices->name; ?> </td> <td> <?php echo $oneservices->description; ?> </td> <td> <?php echo $oneservices->duration; ?> mins </td> <td> <?php echo $oneservices->currency; ?> <?php echo $oneservices->price; ?> </td> <td style="line-height: 50px;"> <i class="icon-arrow-right"></i> </td> </tr> <?php } ?> then div info
<?php foreach($allservices $onesservices) { ?> <div id="services_<?php echo $onesservices->id; ?>"> <div class="portlet light minheigh staff-hover"> <form action="" method="post" class="services_<?php echo $onesservices->id; ?>"> <div class="portlet-title tabbable-line"> <a class="gobackone"><i class="icon-arrow-left"></i></a><h3 style="display: inline-block;"><?php echo $lang['services_left_menu_all']; ?></h3> </div> <div class="col-sm-7"> <div class="portlet-body"> <div class="tab-content"> <div class="tab-pane active" id="portlet_tab1"> <div class="form-body input-smaller"> <div class="form-group"> <label class="col-md-3 control-label" for="form_control_1"><img class="imgs" src="/assets/images/provider_img2.png" alt=""></label> <div class="col-md-9"> <input type="text" class="form-control" name="update_service_name" style="margin-bottom:10px; font-size: 26px; font-weight: 600;" value="<?php echo $onesservices->name; ?>"> <textarea name="update_service_description" id="" cols="30" rows="10" class="form-control" style="margin-bottom:10px;" placeholder="description"><?php echo $onesservices->description; ?></textarea> </div> </div> <div class="form-group"> <label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['services_inside_cost']; ?></label> <div class="col-md-9"> <input type="text" class="form-control" name="update_service_price" value="<?php echo $onesservices->price; ?>"> </div> </div> <div class="clearfix"></div> <div class="form-group"> <label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['services_inside_time']; ?></label> <div class="col-md-9"> <input type="text" class="form-control" name="update_service_duration" value="<?php echo $onesservices->duration; ?>"> </div> </div> <div class="clearfix"></div> <div class="form-group"> <?php $servicescat = $onesservices->service_categories_id; $servicescat = json_decode($servicescat); ?> <label class="col-md-3 control-label" for="form_control_1"><?php echo $lang['services_inside_list']; ?></label> <div class="col-md-9"> <select id="multiple2" name="update_services_category" class="form-control select2-multiple" multiple placeholder="select categories"> <?php foreach($servicescategories $oncategory) { ?> <?php if(in_array($oncategory->id, $servicescat)) { ?> <option value="<?php echo $oncategory->id; ?>" selected><?php echo $oncategory->name; ?></option> <?php } else { ?> <option value="<?php echo $oncategory->id; ?>"><?php echo $oncategory->name; ?></option> <?php } ?> <?php } ?> </select> </div> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div> <div class="col-sm-5"> <h4><?php echo $lang['services_inside_provide']; ?></h4> <?php $staffs_eupdate = staffs::where('id_users', $mainuser->id); $servicestaff = servicestaffs::find_by_query("select staff_id service_staffs user_id = '$mainuser->id' , services_id = '$onesservices->id' "); $newstaffid = array(); foreach($servicestaff $index => $sstaff) { $newstaffid[$index] = $sstaff->staff_id; } foreach($staffs_eupdate $staff_update) { ?> <div class="full-services"> <div class="all-services"> <?php if(in_array($staff_update->id, $newstaffid)) { ?> <div class="all-around all-around-on"> <div class="float-on-left"> <div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div> <?php echo $staff_update->name; ?> </div> </div> <?php } else { ?> <div class="all-around all-around-non"> <div class="float-on-left"> <div class="ignore_img"><input type="hidden" name="update_staffs_id[]" value="<?php echo $staff_update->id; ?>"></div> <?php echo $staff_update->name; ?> </div> </div> <?php } ?> </div> </div> <?php } ?> </div> </form> </div> i'm saving class in localstorage. , user edits value in field , hes out off field, update information ajax
$('.'+localstorage.getitem("formid")+' input, .'+localstorage.getitem("formid")+' textarea').blur(function(event) { var updatestaffid = $("."+localstorage.getitem("formid")+" .all-around-on input[name='update_staffs_id[]']").map(function(){return $(this).val();}).get(); var updatecategoriesid = $("."+localstorage.getitem("formid")+" select[name=update_services_category] option:selected").map(function(){return $(this).val();}).get(); var formdata = { 'from' : 'serviceupdate', 'user_id' : '<?php echo $mainuser->id; ?>', 'services_id' : localstorage.getitem("formid"), 'update_services_name' : $('.'+localstorage.getitem("formid")+' input[name=update_service_name]').val(), 'update_services_description' : $('.'+localstorage.getitem("formid")+' textarea[name=update_service_description]').val(), 'update_services_price' : $('.'+localstorage.getitem("formid")+' input[name=update_service_price]').val(), 'update_services_duration' : $('.'+localstorage.getitem("formid")+' input[name=update_service_duration]').val(), 'update_services_category' : updatecategoriesid, 'update_services_staff' : updatestaffid }; $.ajax({ type : 'post', url : 'ajax/servicesajax.php', data : formdata, datatype : 'json', encode : true }) // using done promise callback .done(function(data) { if(data['success'] == true) { toastr.success("information updated successfuly!", "services"); } }) // using fail promise callback .fail(function(data) { // show errors // best remove production console.log(data); }); // stop form submitting normal way , refreshing page event.preventdefault(); }); the problem it's works last row. first row, second, 5 , 10 opens information , edit field value, on blur don't work. last row works perfectly. can problem ?
updated
problem solve, add ajax in $('tr').click , change localstore var servicesupdateid = $(this).attr('data');. maybe problem localstore. in console, shows true value.
replace
$('.'+localstorage.getitem("formid")+' input, .'+localstorage.getitem("formid")+' textarea').blur(function(event) { with
$('.'+localstorage.getitem("formid")+' input, .'+localstorage.getitem("formid")+' textarea').on("blur",function(event) { as .blur() functions bind elements loaded first time during page load.
when make html new elements in existing page using ajax need bind event again looks boring task.
for use jquery.on() , , pass event name first param, , rest same .bind()/.click() or other event functions.
so better use jquery.on("eventname").
Comments
Post a Comment