Geek Answers Handbook

Loading a function on an AJAX page

I have a page (orderhistory), where we have an "email" button, which, when selected, executes an ajax request and loads the ajax page (email form) onto the previous div "display: none". I want to be able to bind a function to something on this ajax page.

I understand that I could do this work on the orderhistory page, binding the function to the success of the ajax request. However, the same ajax page is used throughout our website, and it will save a lot of time if I can just add a function to the ajax page and not change every function on each of the host pages that invoke the ajax page.

The problem I am facing is that there is no event to run the function. I cannot use $ (document) .ready because the ajax page is loading in a div that is in an already finished document.

Am I missing something? Is there an easy way to do this? Hope I cleared up.

Thanks in advance.

<script> $(function(){ alert('loaded') $('#EmailFrm_Sender').select2(); }) </script>

This is a call function. If I define the select2 function, it will work on the ajax page. If I put the same function directly on the ajax page, it will not load.

 $(".SOEmailLink").click(function(){ $.get('/SAM/AJAX/BalloonEmailForm.asp', {FormKey:$(this).attr('Formkey'), FormName:('SalesOrder')}, function(data){ hr_CenterBalloon(data);/* $('#EmailFrm_Sender').select2();*/ }) });

This is simple code. As I said in the comments, if I launch this page myself (with the proper connection to the links and the jquery file), the functions are linked and a warning is generated.

+4
source share
3 answers

There is no need for an event to trigger a function. Just put the function call directly inside the <script> tags in the HTML snippet:

 <div id="EmailFrm_Sender"> your form content </div> <script> // common functions defined here ... // and then invoke stuff that needs to be run now $('#EmailFrm_Sender').select2(); </script>
+1
source

Your email file:

 <script> $(function() { alert('LOADED!!!'); }); </script> <div> <!-- form --> </div>
0
source

If you use jQuery, the $.ajax function has a successful callback that you can use to call such a function.

0
source

More articles:


All Articles