Show modal on click using AJAX and JavaScript

Question

Having an issue showing a modal window after I have parsed the JSON and placed the values into a TABLE TR.

 $('#serviceload').change(function()  // on dropdown select change
 {
   var page = $('#serviceload').val();  // dropdown selection set to page
   if(page == "")
   {
     $('#completeProfile').hide();  // if page is blank, hide content
   }
   else
   {
     $.post('api/vesselSearch.php', {page: page}, function(data)
     {
       var obj = JSON.parse(data); // parse the data
       $('#vesselinfo').empty(); // clear previous vessel content
       var htmlToInsert = obj.map(function (item)
       {
         return '<tr><td><a href="#" id="editVesselLink" data-toggle="modal" data-vessel="'+item.VESSEL_NAME+'">Edit</a></td><td>'+item.VESSEL_NAME+'</td></tr>';
       });
       $('#vesselinfo').html(htmlToInsert); // insert new vessel content
     });
   $('#completeProfile').show(); // show all content on page
   }
 });

As you will see above, after the JSON is parsed, I display the values in a TABLE row, which may have more than 1 row. The first TD cell contains a hyperlink which should open my edit modal.

The code to transfer the data from the row and display it in the modal looks like this:

 $('#editVesselLink').click(function(e)
 { 
   e.preventDefault();
   $('#editVesselForm input').val(''); // clear previous values
   $vessel= $(this).attr('data-vessel'); 
   $('#editvesselname').val($vessel);
   $('#editVesselInfoModal').modal('show');  // show the modal
 });

Here is where my problem begins.

I am not sure where to place the code directly above. I have placed it inside the $.post beneath $('#vesselinfo').html(htmlToInsert);, and that was the only place I could get the modal to even open, but only for the first record.

Basically, I can only get the modal to open for the first record when I place the second piece of code inside the $.post . The modal will not open at all in any other place that I put the code.

I tried to use a $(document).ready(function{}); to no avail.

What am I missing?

I think deFreitas answer is only part of the problem. I would imagine that since the element is being created after the page is being created no click event is being attached to your dynamic element. I had this issue recently and had to add a click event to the element when dynamically creating the element itself. — ChaBuku Bakke
– ChaBuku Bakke, Commented Aug 18, 2015 at 14:05
@ChaBukuBakke, how did you fix the problem? I was able to change the ID to CLASS and so far, everything seems to be ok. I hope I don't run into another problem. Thank you. — John Beasley
– John Beasley, Commented Aug 18, 2015 at 14:12
I created the elements together and then added (within the creation of them) the click function. It seems you were able to fix it with just using classes instead of ids though. :) — ChaBuku Bakke
– ChaBuku Bakke, Commented Aug 18, 2015 at 14:14

deFreitas · Accepted Answer · 2015-08-18 14:01:47Z

3

Ok, I think that the problem is on:

...
return '<tr><td><a href="#" id="editVesselLink" data-toggle="modal" data-vessel="'+item.VESSEL_NAME+'">Edit</a></td><td>'+item.VESSEL_NAME+'</td></tr>';
...

You can not repeat id property on the code, so, where is id="editVesselLink" put class="editVesselLink" and on $('#editVesselLink') put $('.editVesselLink')

why did it happens?

By HTML convection's the id have to be unique on HTML, so jQuery expects to recover only one element with that id, by default jQuery recover the first with that id if it is duplicated

answered Aug 18, 2015 at 14:01

deFreitas

4,4982 gold badges38 silver badges46 bronze badges

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

2 Comments

John Beasley Over a year ago

I will give it a shot. I'll let you know if it works.

John Beasley Over a year ago

You, sir, are a mufuggin' genius. Thank you. Changing it from ID to CLASS did the trick. Now the modal opens for all the links, and displays the correct vessel. Thank you sir.

Collectives™ on Stack Overflow

Show modal on click using AJAX and JavaScript

1 Answer 1

why did it happens?

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

why did it happens?

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related