Changing an element with jquery

Question

Changing an element with jquery

Asked 10 years, 1 month ago

Viewed 794 times

3

I have a list of items and each item on that list is a link with a lot of attributes and items within that link.

summarizing my link like this:

<a href="#" class="editItem list-group-item" data-id="1001" data-validate="2014-09-08">
    <h4>Meu Item</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</a>

What I am doing is that I click on this item, then opens a modal that has a form that the user fills this form and when saving I should update this item, but remembering that I have to change the <a> whole, for it may have attributes of it that alter and the texts as well. I’ve done all the ajax part, this sending right, I’m just not able to replace even.

I tried something like

$.ajax({
    type : 'POST',
    url : 'pagina.php',
    data : dados,
    success : function ( html ) {
        var itens = $("a.editItem");
        $.each(itens, function(i, item) {
            // item_id é uma variavel que tenho que da o item clicado
            if ( $(item).data('id') == item_id ) {

                // AQUI ESTA O MEU PROBLEMA
                $(item).before(html);
                $(item).remove();
            }
        });
    }
});

And what do you get from ajax? HTML with a new element? o data-id of the element?

– Sergio

2014/08/13 at 20:22
ajax return is html with the item <a href="#" class="editItem list-group-item" data-id="1001" data-validate="2014-09-08">
 <h4>Meu Item</h4>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
 </a> but that item can have different date-validate and text as well, already the data-id is the same

– Marcelo Diniz

2014/08/13 at 20:25
And that element you receive from ajax should override the right click?

– Sergio

2014/08/13 at 20:26
that’s right, I thought to remove the clicked item and then put the return in place because I have other items and with that the user knows what he changed and just continues the list

– Marcelo Diniz

2014/08/13 at 20:28

2 answers

3

To replace elements with jQuery you can use .replaceWith(). The syntax is

$(elementosOriginais).replaceWidth(<novo conteudo>);

So in the function where listening to the click can do:

$("a.editItem").on('click', function(){

    var este = this;

    // chamar o ajax
    // etc...
    success : function (html) {
        $(este).replaceWith(html);

And so the clicked element will be replaced by the new one coming from ajax.
It is important to do var este = this; before ajax, because the this inside the ajax does not refer to the element clicked;

Note that this method removes all the handlers associated with the removed element. Then I suggest delegating the event receiver to something like:

$(document).on('click', 'a.editItem', function(){

Edit: From the comment you left below I realize that you can’t take the step var este = this;. It would be interesting to see the code to see what ajax is called. Anyway you can get the data-id of the element that ajax returns and use this data-id to find the link you want to remove.

Example: http://jsfiddle.net/Sergio_fiddle/b481ozrk/

success: function (html) {
    var este = $('a[data-id="' + $(html).data('id') + '"]');
    este.replaceWith(html);

You still keep removing the item, and I have no way to store the this in the variable este as in the example, because when the user clicks to save the item in the modal dai will scroll the save ajax in the bank in another function in another file and to make this update this being in another function as well. It seems a little confusing, but with this I am using these functions in many other parts of the system

– Marcelo Diniz

2014/08/13 at 20:35
@Marcelodiniz the element coming from ajax has the same data-id as the element clicked? this data-id must be unique?

– Sergio

2014/08/13 at 20:36
that’s right, I have several items, each one has a unique id

– Marcelo Diniz

2014/08/13 at 20:42
I even tried to put this variable este for testing, but as this outside the scope of the function it does not even find.

– Marcelo Diniz

2014/08/13 at 20:45
@Marcelodiniz updated the answer

– Sergio

2014/08/13 at 20:49
So @Sergio, I understood what you did but it still didn’t work. But just for the record, I did a test like this $(item).replaceWith( "<a href='#' class=''>teste</a>" ); And then he put this link with the test in place. What I see is that having the same data-id is not working. Now I’m thinking of a solution.

– Marcelo Diniz

2014/08/13 at 20:57
1

@Marcelodiniz Can do console.log(html); in the sequence of the ajax?

– Sergio

2014/08/13 at 20:58
@Marcelodiniz give one to this example: http://jsfiddle.net/Sergio_fiddle/b481ozrk/

– Sergio

2014/08/13 at 21:03
There is no more need for me to show the return, because when I went to do this I realized that at the end of the return I had an error and so he stopped the execution. But still thank you so much for everything. It helps a lot.

– Marcelo Diniz

2014/08/13 at 21:05

Show 4 more comments

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.

by Victor_Magalhaes • 71 points · Answer 1 · 2014-08-13T20:42:09+00:00

In jQuery version 1.9 you can try using . replaceWith().

The use, in your case, would be something like:

$(item).replaceWith(html);

Now, get smart 'cause the new <a> inserted does not have the callback registered, which means that if you click on this new <a> subsequently, it will not call the function that opens the modal window you quoted earlier.