Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have created a custom options page for a slider that you can upload slides to. Everything works great except when trying to save the data. It will get saved and I can use it on the front end. But the options screen won't update, it will even do a flickr on the screen (I'm assuming a page refresh when it sends the form).

I am using a jQuery plugin called Apendo to clone the slides to add multiples, I'm not sure if that is the culprit. If the page is manually refreshed then the right content shows up, it's so weird! Any ideas why this could be happening?

This is handling the creation of the page and setting up the slides global:

global $slides;
$slides = get_option('slides');

// Add Menu Link
add_action('admin_menu', 'slider_menu_options');
function slider_menu_options() {    

// Check If Form Is Posted & Save An Array
if (isset($_POST['action']))  {
$slides = array();
    foreach($_POST['src'] as $k => $v) {
        $slides[] = array(
            'src' => $v,
            'link' => $_POST['link'][$k],
update_option('slides', $slides);
add_object_page('Slider', 'Slider', 'edit_themes', 'slider_settings', 'slider_options_page');           


And here is the html handling the options:

function slider_options_page() {
global $slides; 
<div class="wrap" id="manager_wrap">
    <h2>Slider Manager</h2>
    <form id="manager_form" method="post">
        <ul id="manager_form_wrap">
            <?php foreach($slides as $k => $slide) : ?>
            <li class="slide">
                <input type="text" name="link[]" id="slide_link" value="<?php echo $slide['link'] ?>">
                <input type="text" name="src[]" class="logo_url" value="<?php echo $slide['src'] ?>"/>
                <input class="upload_button" type="button" class="button" value="<?php _e( 'Choose Slide' ); ?>" />
                <div class="upload_preview">
                    <img style="max-width:100%;" src="<?php echo $slide['src'] ?>" />
                <button class="remove_slide button-secondary">Remove This Slide</button>            
            <?php endforeach; ?>

        <input type="submit" value="Save Changes" id="manager_submit" class="button-primary">
        <input type="hidden" name="action" value="save">

<?php }

And here is the jQuery handling everything:

jQuery(document).ready(function($) { 
$('.upload_button').click(function() {
     targetfield = $(this).prev('.logo_url');
     imgpreview = $(this).parent().find('img');
     tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true');
window.send_to_editor = function(html) {
     imgurl = $('img',html).attr('src');
     $(imgpreview).attr('src', imgurl);
return false;

// calls appendo
    allowDelete: false,
    copyHandlers: true,
    focusFirst: false,
    labelAdd: 'Add New Slide',
    subSelect: 'li.slide:last'

// slide delete button
$('#manager_form_wrap li.slide .remove_slide').live('click', function() {
    if($('#manager_form_wrap li.slide').size() == 1) {
        alert('Sorry, you need at least one slide');    
    else {
        $(this).parent().slideUp(300, function() {
    return false;

// jQuery UI sortable
        placeholder: 'slide-highlight'

share|improve this question
Your save code isn't checking if you submitted your form, so it will also run when comments are deleted, posts are trashed, and any other form in the admin panel that has an 'action' parameter. You need to be more specific. Wether this is related to your problem or not I can't say, but it is an issue. –  Tom J Nowell Oct 20 '14 at 0:33
Also why are you using a global to store $slides rather than just calling get_option? Also if there are no slides your code will generate warnings and notices. –  Tom J Nowell Oct 20 '14 at 0:37

1 Answer 1

If the page is manually refreshed then the right content shows up, it's so weird!

I am pretty sure this is the problem, and its not that weird.

If you update with AJAX (in your case with jQuery/Javascript) the generated page-- the page in the browser-- is not going to reflect any changes unless your Javascript instructs the page to change. It isn't automatic. Your Javascript is working up to the point that your data is being saved, but it is not finishing the job by updating the DOM to reflect the changes, or there is an error in the script that is preventing the update. It is hard to say. The important code, the Javascript, you didn't post so it isn't possible to push you along the right path any further than that.

share|improve this answer
I have posted the jQuery I am using. Is there anyway to refresh the page on submission with PHP or jQuery? It doesn't bother me if the while page reloaded. –  ftntravis Nov 7 '12 at 21:43
The form might submit without any javascript at all. Try disabling Javascript in your browser. If you can still submit the form and it works correctly, then you just need to find and remove the .js file responsible, or comment out parts of the file. That is the HTML/PHP way to do it. I don't know if it will work. Yes, you can also use jQuery to update the page. I am surprised that isn't already being done. That is why I wondered if your are getting a Javascript error somewhere. –  s_ha_dum Nov 8 '12 at 0:01
So I tried disabling javascript then sending the form, but it flickrs then shows everything that was there before still. I can't figure it out for the life of me why it would do this. –  ftntravis Nov 8 '12 at 1:50
So if say I sort the slides different, then I push save, it goes back to where it was. If I put it where I wanted it again, then submit once again it will show right. I have no idea why it isn't displaying correct the first time on the backend. –  ftntravis Nov 8 '12 at 1:53

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.