asked on

using ajax sync in modal

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!

Chris Stanyon

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 Wade

ASKER

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
}

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Kinderly Wade

ASKER

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 Wade

ASKER

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!