All geek questions in one place

Ajax issue with input, blur textarea

There were problems sending information through ajax.

Have, for example, 20 lines. Click on the line and all the information about the services will open.

$('tr').click(function() { var servicesUpdateId = $(this).attr('data'); $("#"+servicesUpdateId).css({"display":"block", 'opacity':'0'}).animate({left: '0',opacity: '1',}); // save form class for ajax submit localStorage.setItem("formId", servicesUpdateId); });

Here's the html:

 <tbody> <?php $allServices = Services::where('user_id', $mainUser->id); foreach($allServices as $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 its div with information

 <?php foreach($allServices as $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 as $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 FROM service_staffs WHERE user_id = '$mainUser->id' AND services_id = '$onesServices->id' "); $newStaffId = array(); foreach($serviceStaff as $index => $sStaff) { $newStaffId[$index] = $sStaff->staff_id; } foreach($staffs_eupdate as $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 am saving a class in localStorage. And then the user edits the value in the field and disables that field, I update this information with 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 the done promise callback .done(function(data) { if(data['success'] == true) { toastr.success("Information updated successfuly!", "Services"); } }) // using the fail promise callback .fail(function(data) { // show any errors // best to remove for production console.log(data); }); // stop the form from submitting the normal way and refreshing the page event.preventDefault(); });

The problem is that it only works with the last line. The first line, the second, 5, 10 then opens the information and edits the value of the field; when blurring, this does not work. But the last row works great. Where could the problem be?

UPDATED

PROBLEM SOLVE, I add my ajax to $('tr').click and change localStore to var servicesUpdateId = $(this).attr('data'); . Perhaps the problem was localStore. But in the console, it always shows the true value.

+5
source share
1 answer

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

The .blur () function is associated only with elements that are loaded for the first time during page loading.
But when you create new html elements on an existing page using ajax, you need to bind the event again, but it looks boring.

To do this, use jQuery.on () and pass the name of the event as the first parameter and leave the same as .bind () /. click () or any other event function.

So, it is better to use jQuery.on ("eventName").

+1
source

Source: https://habr.com/ru/post/1259682/

More articles:


All Articles