CODEWITHSUNDEEP
javascriptjquery
user2341406
user2341406

Reputation:

Select previous "this" element

I have a piece of javascript code where I am trying to get to the previous element declared. Currently I have two onclick functions within eachother.

$('#formIngredient').on("click", '.newIngredient', function() {
    value = $(this).attr('data-name');
    $(this).attr('data-isactive', 'true');

    $('#newIngredientInput').val(value);
    $('#newIngredient').modal('show')

    $('#createNewIngredient').click(function() {
        inputName = $('#newIngredientInput').val();
        inputCategory = $('#newIngredientCategory').val();

        var newIngredient = $.ajax({
            type: "GET",
            url: '/content/includes/ajax/createNewIngredient.php',
            data: {name: inputName, id_category: inputCategory}
        });

        newIngredient.done(function(result) {
            //PAI.showPage(PAI['PAGE']);
            $(this).parent().replaceWith('Hello');
            $('#newIngredient').modal('hide');
        });
    });
});

I am trying to use the previous element with this code.

$(this).parent().replaceWith('Hello');

Any ideas?

Upvotes: 2

Views: 207

Answers (3)

A. Wolff
A. Wolff

Reputation: 74420

I'll pass about your code logic (nested click events), but your problem seems to by about 'this' reference (scoping):

var self = this;
var newIngredient = $.ajax({
            type: "GET",
            url: '/content/includes/ajax/createNewIngredient.php',
            data: {name: inputName, id_category: inputCategory}
        });

        newIngredient.done(function(result) {
            //PAI.showPage(PAI['PAGE']);
            $(self ).parent().replaceWith('Hello');
            $('#newIngredient').modal('hide');
        });

This was the simplest way, but better would be to use closure:

(function(self){
var newIngredient = $.ajax({
                type: "GET",
                url: '/content/includes/ajax/createNewIngredient.php',
                data: {name: inputName, id_category: inputCategory}
            });

            newIngredient.done(function(result) {
                //PAI.showPage(PAI['PAGE']);
                $(self ).parent().replaceWith('Hello');
                $('#newIngredient').modal('hide');
            });

})(this);

Upvotes: 0

Chris Dixon
Chris Dixon

Reputation: 9167

The scope of $(this) seems to be your issue here... you need to correct your code.

$('#createNewIngredient').click(function() {
    var self = this; // This is the #createNewIngredient element

    inputName = $('#newIngredientInput').val();
    inputCategory = $('#newIngredientCategory').val();

    var newIngredient = $.ajax({
        type: "GET",
        url: '/content/includes/ajax/createNewIngredient.php',
        data: {name: inputName, id_category: inputCategory}
    });

    newIngredient.done(function(result) {
        //PAI.showPage(PAI['PAGE']);
        // $(this).parent().replaceWith('Hello'); // $(this) scope is lost to current function... so
        $(self).parent().replaceWith('Hello'); // This is now the scope you need
        $('#newIngredient').modal('hide');
    });
});

Upvotes: 1

MAK
MAK

Reputation: 775

Use the below code: 

$(this).parent().prev().replaceWith('Hello');

Upvotes: 0

Related Questions