Ajax issue with input, textarea blur

Question

Have problem with submiting information via ajax.

Have for example 20 rows. Click on row and it opens all information about services.

    $('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 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 info

<?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'm saving class in localStorage. And then user edits value in field and hes out off that field, I update that 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's only works with last row. First row, second, 5 , 10 then opens information and edit field value, on blur it don't work. But last row works perfectly. Where can the problem be ?

UPDATED

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

the forms have class, all class'es are unique. I tested with ID, same problem. — Kintamasis, Nov 13 '16 at 13:37
Why are you storing into local storage? Why not just call the ajax with the selected class or unique id? Is there a specific reason to store? — Mohamed Athif, Nov 13 '16 at 13:44
I store information on localStorage to know which form is editing. And then user edit field on blur it's update. — Kintamasis, Nov 13 '16 at 13:46
can you update question with html? you are making data attribute value your id but you are calling the id of tr to blur? — Mohamed Athif, Nov 13 '16 at 13:54
tr data attribute are data="services_214" (services and number is id) then I click on tr I know which div to open (it has id="services_214") and in what div are form with class="services_214" where are alot of services and alot of forms. — Kintamasis, Nov 13 '16 at 13:59
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127993/discussion-between-mohamed-athif-and-mantas-mg-g). — Mohamed Athif, Nov 13 '16 at 14:03
PROBLEM SOLVE, I add my ajax in $('tr').click and change localStore with var servicesUpdateId = $(this).attr('data');. Maybe the problem was localStore. But in console, it always shows true value. — Kintamasis, Nov 13 '16 at 14:59

score 1 · Answer 1 · answered Nov 13 '16 at 14:30

1

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 is bind only with the elements which are loaded for the first time during page load.
But when you make html new elements in an existing page using ajax you need to bind the event again but this looks a boring task.

For this use jQuery.on() , and pass event name as first param, and rest same as .bind()/.click() or any other event functions.

So its better to use jQuery.on("eventName").

answered Nov 13 '16 at 14:30

Niranjan Kumar

1,438
1
12
29

it's stop working at all, know and last tr form not working. – Kintamasis Nov 13 '16 at 14:37
Is your project deployed some where or can you pass on the working model on jsfiddle so that i can have a look over working prototype. – Niranjan Kumar Nov 13 '16 at 14:39
it's with php, so in jsfiddle can't handle. But i add all page code https://jsfiddle.net/anonimnos/v64rbzf2/ – Kintamasis Nov 13 '16 at 14:48
on fiddle it is looking quiet clumsy, can you go through http://stackoverflow.com/questions/10082031/why-use-jquery-on-instead-of-click , I hope this will help – Niranjan Kumar Nov 13 '16 at 14:49
the problem is not on live, on or else. The problem is why it submits only the last form. – Kintamasis Nov 13 '16 at 14:51

score 0 · Accepted Answer · answered Mar 21 '19 at 18:49

0

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

answered Mar 21 '19 at 18:49

Kintamasis

265
6
27

Ajax issue with input, textarea blur

2 Answers2