Question

I am using AJAX to navigate smoothly between page tabs that are setup like this on my WordPress theme options page:

The tabs are working great and only content in the middle of the page is changed, which is the way I want it…..however due to AJAX loading only partial HTML on each page, my media upload button is no longer working (at least I believe that is the cause of the problem). I would like to know if there is a way to reset the scripts in each page so that my media uploader will work after each AJAX call.

Here is my code for handling the AJAX tab navigation:

jQuery.noConflict();

jQuery('.nav-tab').live('click', function(e){ 
   e.preventDefault();
   var link = jQuery(this).attr('href'); 

jQuery('.page-form').fadeOut(100).load(link + ' .page-form > *', function() { 
jQuery('.page-form').fadeIn(100).load(link + ' .page-form > *', function() {
  });
});
});

UPDATE: CODE ADDED FOR MEDIA UPLOAD:

<tr>
    <td>
        <label for="upload_image">
     <input style="float:left; width:80%" id="upload_image" type="text" name="upload_image" value="<?php echo $options['upload_image']; ?>" />
     <input style="float:right" id="upload_image_button" type="button" value="Upload Image" />

    <br/>
        </label>
<div id="image-holder">
   <img id="upload_image" name="upload_image" src="<?php if ($options['upload_image'] != "" ) { echo $options['upload_image']; } ?>" />
</div>

</td>

<td></td>

</tr>

HERE IS JQUERY I’M USING TO CALL THE IMAGE UPLOADER

jQuery(document).ready(function() {

jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});

window.send_to_editor = function(html) 
{

imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
imgsrc = '<img src="'+imgurl+'">';
jQuery('#image-holder').html(imgsrc);
tb_remove();
}
});

Answer 1

Change

jQuery('#upload_image_button').click(function() {

to

jQuery(document).on('click', '[id=upload_image_button]', function() {

It’s not ideal to use the same id (in fact you should see if you can find a way to get around that), but this should make the click event on the Upload button work even if it was loaded asynchronously.