Question

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

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….!!!