Ajax: How to pass variable one function to another jQuery

Question

I have been trying to use variable as selector but its limited to one function, how to pass that variable value to other functions as well. I'm new to ajax, please help me to solve this issue.

I tried local storage but that also didn't work.

Here is my HTML code:

<td class="info-group jname">
    <p class="pro-info-right text-per jname"><?php echo $jsdata['js_fname']; ?></p>
    <div class="edit jname" style="display:none">
        <input class="editbox jname" name="js_fname_edit" value="">
    </div>
    <?php if($this->user_valid == TRUE) {  ?>
    <a href="#"><span title="Edit"  class="edit-icon jname ctrl glyphicon glyphicon-pencil"></span></a>
    <a href="#"><span title="Delete" class="del-icon ctrl glyphicon glyphicon-remove-sign"></span></a>
    <?php } ?>
</td>

<td class="info-group jaddr">
    <p class="pro-info-right text-per jaddr"><?php echo $jsdata['js_address']; ?></p>
    <div class="edit jaddr" style="display:none">
        <input class="editbox jaddr" name="js_fname_edit" value="">
    </div>
    <?php if($this->user_valid == TRUE) {  ?>
    <a href="#"><span title="Edit" class="edit-icon jaddr glyphicon glyphicon-pencil"></span></a>
    <a href="#"><span title="Delete" class="jaddr del-icon glyphicon glyphicon-remove-sign"></span></a>
    <?php } ?>
</td>

JavaScript:

$(document).ready(function(){
    var slctd;
    $('.info-group').click(function(e) {
        e.preventDefault();
        slctd = ($(this).attr('class').split(' ')[1]);
        $('.'+ slctd +' .text-per').hide();
        $('.'+ slctd +' .ctrl').hide();
        var data = $('.'+ slctd +' .text-per').html();
        $('.'+ slctd +' .edit').show();
        $('.'+ slctd +' .editbox').val(data);
        $('.'+ slctd +' .editbox').focus();//comming up to here
    });
    $('.'+ slctd +' .editbox').mouseup(function(e) {
        e.preventDefault();//not comming here
        return false;
    });
    $('.'+ slctd +' .editbox').change(function(e) {
        alert(slctd);//not comming here
        e.preventDefault();
        $('.'+ slctd +' .edit').hide();
        var js_address = $('.'+ slctd +' .editbox').val();
        var dataString = 'js_address='+ js_address;
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>"+'_'+ slctd +'',
            data: dataString,
            cache: false,
            success: function(html) {
                $('.'+ slctd +' .text-per').html(js_address);
                $('.'+ slctd +' .text-per').show();
            }
        });
    });
    $(document).mouseup(function(e) {
        e.preventDefault();//not comming here
        $('.'+ slctd +' .edit').hide();
        $('.'+ slctd +' .text-per').show();
        $('.'+ slctd +' .ctrl').show();
    });
});

Answer 1

If slctd is not determined until $('.info-group').click , then you must put all your code that depends on slctd inside the click function.

$('.info-group').click(function(e) {
    e.preventDefault();

    // this is the ONLY place that slctd is being defined at.
    slctd = ($(this).attr('class').split(' ')[1]);

    $('.'+ slctd +' .text-per').hide();
    $('.'+ slctd +' .ctrl').hide();
    var data = $('.'+ slctd +' .text-per').html();
    $('.'+ slctd +' .edit').show();
    $('.'+ slctd +' .editbox').val(data);
    $('.'+ slctd +' .editbox').focus();//comming up to here

    // PUT ALL OTHER CODE THAT USES slctd HERE
});

Since other users have asked. Please be careful about this technique because it will only bind events to the slctd element every time you click on .info-group.

You may want to look at a different technique or perhaps unbind the previous events:

var current_slctd;

$('.info-group').click(function(e) {
    e.preventDefault();

    // code below will be about binding to new slctd

    // this is the ONLY place that slctd is being defined at.
    var slctd = ($(this).attr('class').split(' ')[1]);

    if (current_slctd == slctd) {
       // return since this value of slctd has already been done
       return;
    } else {
       // UNBIND events on current_slctd
    }

    // start over and bind new events
    current_slctd = slctd;

    $('.'+ slctd +' .text-per').hide();
    $('.'+ slctd +' .ctrl').hide();
    var data = $('.'+ slctd +' .text-per').html();
    $('.'+ slctd +' .edit').show();
    $('.'+ slctd +' .editbox').val(data);
    $('.'+ slctd +' .editbox').focus();//comming up to here

    // PUT ALL OTHER CODE THAT USES slctd HERE
});

Answer 2

Here is the same code written in other style. This is more efficient and better code.

Basically slctd is nothing but .info-group element and you can use context selector to select the elements inside the clicked td by passing the selector.

$(document).ready(function () {
    // When clicked on the element having class info-group
    $('.info-group').on('click', function (e) {
        e.preventDefault();
        var $this = $(this); // Cache the context for performance

        $this.find('.text-per, .ctrl').hide(); // Hide the elements inside the clicked td matching the classes
        var data = $('.text-per', this).html(); // This is context selector, passing this here will search for .text-per element inside the this i.e. td element
        $('.edit', this).show();
        $('.editbox', this).val(data).focus(); // You can chain methods here
    }).on('mouseup', '.editbox', function (e) {
        // when mouseup of .editbox inside the .info-group
        return false; // preventDefault is not needed when using return false
    }).on('change', '.editbox', function (e) {
        var parentTd = $(this).closest('.info-group'); // Get the parent <td> object, so that this can be used as context for selecting the elements inside it

        $('.edit', parentTd).hide(); // Hide .edit element inside the td
        var value = $('.editbox', parentTd).val();
        var dataString = $('.editbox', parentTd).attr('name') + '=' + value; // Create data-string as Name=Value format

        // Send AJAX request using appropriate data
        $.ajax({
            type: "POST",
            url: "<?php echo base_url().'index.php/Jobseeker/edit_personal' ?>" + '_' + parentTd + '',
            data: dataString,
            cache: false,
            success: function (html) {
                $('.text-per', parentTd).html(value).show(); // Update html after successful completion of ajax
            }
        });
    });

    $(document).mouseup(function (e) {
        e.preventDefault();
        $('.edit').hide();
        $('.text-per').show();
        $('.ctrl').show();
    });
});