Note that there are some explanatory texts on larger screens.

plurals
  1. POAJAX Possible Conflict
    primarykey
    data
    text
    <p>I am using AJAX to navigate smoothly between page tabs that are setup like this on my Wordpress theme options page:</p> <p><img src="https://i.stack.imgur.com/rsDkx.png" alt="Theme Options Page"></p> <p>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.</p> <p>Here is my code for handling the AJAX tab navigation:</p> <pre><code>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 &gt; *', function() { jQuery('.page-form').fadeIn(100).load(link + ' .page-form &gt; *', function() { }); }); }); </code></pre> <p>UPDATE: CODE ADDED FOR MEDIA UPLOAD:</p> <pre><code>&lt;tr&gt; &lt;td&gt; &lt;label for="upload_image"&gt; &lt;input style="float:left; width:80%" id="upload_image" type="text" name="upload_image" value="&lt;?php echo $options['upload_image']; ?&gt;" /&gt; &lt;input style="float:right" id="upload_image_button" type="button" value="Upload Image" /&gt; &lt;br/&gt; &lt;/label&gt; &lt;div id="image-holder"&gt; &lt;img id="upload_image" name="upload_image" src="&lt;?php if ($options['upload_image'] != "" ) { echo $options['upload_image']; } ?&gt;" /&gt; &lt;/div&gt; &lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt; </code></pre> <p>HERE IS JQUERY I'M USING TO CALL THE IMAGE UPLOADER</p> <pre><code>jQuery(document).ready(function() { jQuery('#upload_image_button').click(function() { formfield = jQuery('#upload_image').attr('name'); tb_show('', 'media-upload.php?type=image&amp;amp;TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery('#upload_image').val(imgurl); imgsrc = '&lt;img src="'+imgurl+'"&gt;'; jQuery('#image-holder').html(imgsrc); tb_remove(); } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload