Calling a function in the parent page from an element ajax - loaded into a div

Question

Hi y'all...

I think this is a common problem... yet i have not been able to find an answer for this...

I load some text boxes into a div within a page using ajax when a link is clicked...

and during the onFocus event of this newly added elements of the page, i have to call a javascript function that is in the parent page...

My problem is.... these elements... i.e the text boxes are not able to call the functions when an event is fired.....

My guess is that the newly loaded elements are not updated to the DOM tree of the parent page

I am also using jquery, but leaving it aside for the moment, what should i do so that the newly added elements onFocus will call the function that is written in the parent page..?

Here goes the code.

<script type = "text/javascript">
$(document).ready(function(){

                // binding elements

                $('.formContainer input[type=file]').live('change',function(){
                   alert("hi"); // here i bind the newly added file chooser
                  uploadImage();
                });

            });
</script>

The HTML is...

<div class="formContainer">
    <form name="frmCreateHotel" action="uploadImage.php" method="post">
        <table>
            <tr>
                <td  colspan="2">
                    <div class="elementRow">
                       Hotel Image
                    </div>
                </td>

                <td>
                    <div class="elementRow" style="height:100px">
                       <input name="imageToUpload" 
                              id="imageToUpload"
                              type="file"
                              size="30"
                              class="imageSelector"/> // the function should be called during this elements onchange

                       <input name="oldImageToDelete"
                                id="oldImageToDelete"
                                type="hidden" size="50" />

                        <input type="hidden" name="MAX_FILE_SIZE"
                                value="2000000" />

                        <input name="imageDescription"
                                id="imageDescription"
                                type="hidden" />

                        <div class="toolTip image">

                              <iframe id="uploadedImage" 
                                      name="uploadedImage"
                                      src=""
                                      style="width:160px; height:160px;"
                                      frameborder="0"
                                      marginheight="0"
                                      marginwidth="0"></iframe>
                        </div>

                    </div>
                </td>
            </tr>

        </table>
</div>

When the file path changes the function should be called...

Hope i am clear..

Thanks and Regards....

Answer 1

If you have jQuery then you could do something like:

function ajaxCallback() {
    /* create text boxes */
    $('text box selector').bind('focus', functionName);
}

Check out jQuery bind for more info. You may want to consider using jQuery for placing your text boxes into the div. Then you don't have to worry about whether or not your dynamic elements are properly inserted in the DOM.

Answer 2

Hi everyone...

Made it work finally...

I used jquery's ajax functions to load the html elements and used document.getElementbyId() to get reference to the elemnts...

Works like a charm....!!!