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!
Kinderly WadeprogrammerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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 WadeprogrammerAuthor Commented:
Hi Chris!

Thanks for quick response. Exactly like you described:

        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()
    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
Chris StanyonWebDevCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kinderly WadeprogrammerAuthor 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 WadeprogrammerAuthor 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!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.