Jquery replaceWith in a Foreach loop

Question

When I execute the below code all the img with the id of imgg will be replaced because they are in a foreach loop, but I want to apply that to the clicked one only. Can any one help?

Html:

<button type="submit" id="getRequest" class="btn btn-info btm-sm " role="button" style="width:100px;height:30px">
<p id="imgg">Add to Cart</p>
 </button>

JS:

   $(document).ready(function() {
$(document).on('submit', '#reg-form', function() {

    var data = $(this).find("#post_id").val();
    //var ln = $("#lname").val();

    //var data = 'fname='+fn+'&lname='+ln;

    //  var data = $(this).serialize();
    $.ajax({
        type: 'POST',
        url: '{{url("/ajax")}}',
        data: {
            'name': data,
            '_token': $('input[name=_token]').val()
        },
        success: function(data) {
            $(imgg).replaceWith('<img id=imgg   src=img/ajax.gif> ');

            setTimeout(function() {
                $(imgg).replaceWith('  <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
            }, 1300);
            console.log(data);
        },

        error: function(data) {
            alert("You must Login First");
        }
    });
    return false;
});

});

Check my New anwser @AchrafKhouadja . I posted what happened in anwser and comment on anwser. — amanuel2, Mar 26 '16 at 23:22
What is `imgg`? Which is the clicked one? What is this `success` method? — Oriol, Mar 26 '16 at 23:23
when the button is clicked,it does a post ajax request , and changes the
with for a little bit of time , imgg is the id — Achraf Khouadja, Mar 26 '16 at 23:26
So did it work now or still showing same error @AchrafKhouadja ? — amanuel2, Mar 26 '16 at 23:30

score -1 · Accepted Answer · answered Mar 26 '16 at 23:52

Thanks everyone i found the solution But you da real MVP, here it is

 $(document).ready(function()
{
 $(document).on('submit', '#reg-form', function()
 {
var imgid = $(this).find("#imgg");
var data = $(this).find("#post_id").val();
  //var ln = $("#lname").val();

  //var data = 'fname='+fn+'&lname='+ln;

//  var data = $(this).serialize();
  $.ajax({
  type : 'POST',
  url  : '{{url("/ajax")}}',
 data: {'name':data, '_token': $('input[name=_token]').val()},
 success: function(data) {
    $(imgid).replaceWith('<img id=imgg src=img/ajax.gif> ');
   var thisForm = this;
    setTimeout(function() {
        $(imgg).replaceWith('  <p id=imgg>Add to Cart</p> ').hide('blind', {}, 500)
    }, 1300);
    console.log(data);
},

      error :  function(data)
      {
          alert("You must Login First");
      }
  });
  return false;
 });

});
</script>
<script type="text/javascript">
$.ajaxSetup({
   headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});

score -2 · Answer 2 · edited May 23 '17 at 11:44

-2

Instead of using the $(imgg) use $(this), and you also missed the quotations when you where giving the id of iamge when you where using .replaceWith:

success: function(data) {
    $(this).replaceWith('<img id="imgg" src="img/ajax.gif>" ');
   var thisForm = this;
    setTimeout(function() {
        $(thisForm).replaceWith('  <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
    }, 1300);
    console.log(data);
},

Reason?

Simple. The this object doesn't change. It is the owner of the function. See more about why here: Jquery - When to use "this" and when to use "$(this)"?

EDIT2

Now i have to put that in the upper level so this:

  $(document).ready(function() {
     $(document).on('submit', '#reg-form', function() {

         var vm = this //Upper Level
         var data = $(this).find("#post_id").val();
         $.ajax({
             type: 'POST',
             url: '{{url("/ajax")}}',
             data: {
                 'name': data,
                 '_token': $('input[name=_token]').val()
             },
             success: function(data) {
                 $(vm).replaceWith('<img id=imgg   src=img/ajax.gif> ');

                 setTimeout(function() {
                     $(vm).replaceWith('  <p id="imgg">Add to Cart</p> ').hide('blind', {}, 500)
                 }, 1300);
                 console.log(data);
             },

             error: function(data) {
                 alert("You must Login First");
             }
         });
         return false;
     });
 });

Please refer here about this particular problem:
Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

edited May 23 '17 at 11:44

Community

1
1

answered Mar 26 '16 at 23:19

amanuel2

4,508
4
36
67

it throws this , Cannot read property 'createDocumentFragment' of undefined – Achraf Khouadja Mar 26 '16 at 23:20
Yes @AchrafKhouadja i edited anwser again. Can you check my the code? You forgot the quotations around the image id and src when you were using .replaceWith(); – amanuel2 Mar 26 '16 at 23:21
`this` inside `setTimeout` function is the `window` object. – Oriol Mar 26 '16 at 23:24
$(vm).replaceWith isnt this to select the whole form or something? while u need to select 1 thing inside the form with id of imgg? – Achraf Khouadja Mar 26 '16 at 23:41
Hmm What was it @AchrafKhouadja . you obviously have to get the solution posted so users can see. – amanuel2 Mar 26 '16 at 23:54
Omg. How did i not think of that. I was so silly @AchrafKhouadja – amanuel2 Mar 26 '16 at 23:56
No , thank you man, my skills are so bad in js, the question was bad int he first place because the answer was in front of my eyes (in the code it self ) thanks mate :D – Achraf Khouadja Mar 26 '16 at 23:59

Jquery replaceWith in a Foreach loop

2 Answers2

Reason?

EDIT2