using ajax sync in modal

Kinderly Wade
Kinderly Wade used Ask the Experts™
on
Hi experts!

I was working on the bootstrap modal. I was able to insert a datatable into the modal and everything displays properly via ajax sync. The datatable also has a input field for quantity (I inserted <input> as text) and I wished to do another ajax sync and took the input from user and updated the database (mysql). For some reason I had a js script to do that but I couldn't get it to work. I found a way to get around was that when I worked on the 1st ajax sync (insert data into datatable in the modal) I needed to add a <script src="xxxx/xxx.js"/> into the ajax section. I could then make my 2nd ajax sync work. was this a good way to update the database or there is a better way?  (Is there a way for me not to add that <script src="xxx/xx.js"/> into the ajax code but rather include in my original js script?) Let me know Thanks!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018

Commented:
Hey Kinderly,

Without seeing any of your code it's difficult to know what's going on. And when you say 'it doesn't work' - that doesn't really give us any useful info.

It sounds like your 2nd AJAX sync is trying to work against something that was injected by the 1st AJAX sync (such as a button click). When you add dynamic elements to your page using AJAX, you need to delegate the events to something that exists when the code is first called (such as your Modal wrapper), so instead of:

$('#myButton').click(function() { .. });

You would do:

$('#myModal').on('click', '#myButton', function() { ... } );

If you can show us some code, then we can offer you some specific advice.
Kinderly Wadeprogrammer

Author

Commented:
Hi Chris!

Thanks for quick response. Exactly like you described:

$('#addtocart').click(function(){
        ajax .....
         
});

if used the above code in my 2nd ajax, I simply type console.log("HI") into the above code (I commented out the ajax) I didn't get a response of "HI".  If I somehow incorporate the above js code into a js file test.js and stick it into the 1st ajax (this is the ajax that I obtain the datatable information) like this: "<script src="xxxx/test.js"></script> then I will get that response of "HI" back.

This is my 1st AJAX:

// I triggered this function call when I open up my modal
function getcart()
{
   ajax.....
    success: ........
    //I stick the <script src="xxxx/test.js"/> here right in the success bracket
   //if I can successfully query the data first with my 1st ajax then I can continue
   //with my 2nd ajax to update the quantity into the database
}
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Yep - exactly what I thought.

When you call this code:

$('#addtocart').click(function(){ ...

It tries to bind the click event to the #addtocart button. Now if that element doesn't exist when the code is called (i.e. when the page first loads), then it has nothing to bind to, so it will never fire. The reason it works when you add the script to the 1st AJAX result is because the code isn't called until after you've created the #addtocart button, at which point it does have something to bind to.

In order for it work the way you want, you have to delegate the event rather than directly binding it to the #addtocart button. To do this, you actually bind the event to something that you know already exists when the page first loads:

$('#myModal').on('click', '#addtocart', function() { ... } );

This will bind the event to the myModal element, and fire when the #addtocart button is clicked, even if that #addtocart button is dynamically added later on (through your AJAX call).

You'll need to switch out the #myModal selector with something that already exists in your own HTML.
Kinderly Wadeprogrammer

Author

Commented:
Hi Chris!

Thanks for the suggestion. Sorry I wasn't able to give you the exact code but you are right on the target. I will try it today and let you know. Thanks again!
Kinderly Wadeprogrammer

Author

Commented:
Hey Chris!

Good news! Your suggestions work like a wonder! It resolved the issues. I tried some more and it works great! You have a good knowledge of what I was going to ask and know the pattern of JS that I might have coded already. Thanks again Chris!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial