jquery replacing and removing variables

Question

I have replaced chosen replaced and inserted dom elements this way:

$(".editLink").click(function () {
    var $temp = $(".editLink").parent().prev().find("label").html();

    var $tempBox = $(".editLink").parent().prev().find("label").replaceWith("<input type='text' name='dataUpdate'/>");

    $tempBox.insertAfter("<input type='submit' value='Update'/>");
});

However, changes flicker,..and dont persist. They only persist for one second..(I guess only for the time of the event. How can I make them persist forever ?

UPDATE:

<table width="400px">
<form action="/Admin/Update?Length=4" method="post">
<tr>
    <td>
        <label for="fadsf">
            fadsf</label>
    </td>
    <td>
        <a class="editLink" href="/Admin/MenuManagement?Length=5">Edit</a>
    </td>
    <td>
        <a class="deleteLink" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#1"
            href="/Admin/Delete?deleteID=1&amp;unDelete=1" id="1" title="0">Delete</a>
    </td>
</tr>
</form>

They persist forever by default. If you get different behavior then something else in your page is also modifying the DOM. — Jon
– Jon, Commented Mar 5, 2012 at 13:43
Could you please provide us you HTML code? It seems like another event callback is reverting changes back. — Guillaume Poussel
– Guillaume Poussel, Commented Mar 5, 2012 at 13:44
make a demo that replicates issue...provided info is not enough to troublleshoot — charlietfl
– charlietfl, Commented Mar 5, 2012 at 13:50

shanabus · Accepted Answer · 2012-03-05 15:21:25Z

1

I'll guess you suggest they only persist for the time of the event because you are binding to an <a> tag which causes the page to reload or navigate somewhere else. You need to prevent that default behavior like so:

$(".editLink").click(function (e) {
   ... other code

   $(e).preventDefault();

   ... other code
});

And the documentation - https://developer.mozilla.org/en/DOM/event.preventDefault

UPDATE - Based on the HTML you have now provided

Your HTML does not look valid. You cannot nest a form tag in between a table tag and a tr tag and expect it to work. First off, move the form tag outside of the table. Secondly, close the table with a matching </table> tag. Maybe that will help.

Hope this helps!

edited Mar 5, 2012 at 15:21

answered Mar 5, 2012 at 13:52

shanabus

13.1k6 gold badges55 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

charlietfl Over a year ago

will throw error in jQuery....incorrect implementaion api.jquery.com/event.preventDefault

shanabus Over a year ago

@charlietfl updated implementation, thanks for catching that.

BlackFire27 Over a year ago

I dont think it matters. I create many forms with each row..I must use it that way

charlietfl · Accepted Answer · 2012-03-05 14:04:14Z

1

returning false from the click handler will prevent the browser following the url in the href

$(".editLink").click(function () {
    var $temp = $(".editLink").parent().prev().find("label").html();

    var $tempBox = $(".editLink").parent().prev().find("label").replaceWith("<input type='text' name='dataUpdate'/>");

    $tempBox.insertAfter("<input type='submit' value='Update'/>");

    return false;
});

You can also use event.preventdefault() http://api.jquery.com/event.preventDefault/

  $(".editLink").click(function (event) {
         event.preventDefault();
         /* your code*/

  })

answered Mar 5, 2012 at 14:04

charlietfl

172k14 gold badges125 silver badges154 bronze badges

7 Comments

BlackFire27 Over a year ago

I see..thats why i was wrong.. I also use insertAfter..but no button appears ..why is that?

charlietfl Over a year ago

insertAfter( jQuerySelector) ....you have a string...not sure what you are trying to do api.jquery.com/insertAfter

BlackFire27 Over a year ago

I am trying to get the element that I replaced, and insert after it another element..A submit button

charlietfl Over a year ago

I think this is what you want: $("<input type='submit' value='Update'/>").insertAfter($tempBox);

BlackFire27 Over a year ago

I am trying to insert this: $("<input type='submit' value='Update' />").insertAfter($tempBox); ... submit button after the textbox

|

Collectives™ on Stack Overflow

jquery replacing and removing variables

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related