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 a theme-options page and i will that the save and reset button loaded without refresh the whole page... but i have no idea, how i can implement ajax in my theme-option... Thank you for your help.

The code is:

function mytheme_add_admin() {
    global $themename, $dirname, $themeurl, $shortname, $options;


    if ( $_GET['page'] == basename(__FILE__) ) {

        if ( 'save' == $_REQUEST['action'] ) {

                foreach ($options as $value) {
                    update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }

                foreach ($options as $value) {
                    if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }

                header("Location: admin.php?page=admin_interface.php&saved=true");
                die;

        } else if( 'reset' == $_REQUEST['action'] ) {

            foreach ($options as $value) {
                delete_option( $value['id'] ); }

            header("Location: admin.php?page=admin_interface&reset=true");
            die;

        }


        else if( 'export' == $_REQUEST['action'] ) export_settings();
        else if( 'import' == $_REQUEST['action'] ) import_settings();

    }




  $rp_page = add_menu_page($themename." Options", "".$themename." Options", 'edit_themes', basename(__FILE__), 'mytheme_admin');

    add_action("admin_print_scripts-$rp_page", 'rp_load_only');
    add_action("admin_print_styles-$rp_page",'rp_style_only');
} 



function rp_style_only() {
$file_dir=get_bloginfo('template_directory');
wp_enqueue_style("admin_style", $file_dir."/functions/admin/css/admin_style.css", false, "1.0", "all");
wp_enqueue_script("colorpicker", $file_dir."/functions/admin/js/jquery.color.picker.js", false, "1.0");
wp_enqueue_script("tabs", $file_dir."/functions/admin/js/jquery.tabs.js", false, "1.0");
wp_enqueue_script("custom", $file_dir."/functions/admin/js/custom.js", false, "1.0");
}


function mytheme_admin() {

    global $themename, $dirname, $themeurl, $shortname, $options;


    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated"><p><strong>Options Saved</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated"><p><strong>Options Reset</strong></p></div>';





?>







<div id="repra-panel" class="wrap">

<div id="header">

<div id="icon-rp" class="icon32 icon32-rp"></div>
    <h2><?php _e("Options Panel","repra"); ?></h2> 

</div>
        <div id="info_bar">


<div class="button-zone">   

 <input type="submit" name="save" value="Save changes" class="button-primary" />
    <input type="hidden" name="action" value="save" />
</div>


</div><!--.info_bar--> 


<div class="clear"></div>










<div id="panels">

<?php foreach ($options as $value) {
switch ( $value['type'] ) {
case "open":
?>

<?php break;
case "close":
?>

</div>

<?php break;
case "title":
?>

    <div class="panel option-tab" title="<?php echo $value['name']; ?>">


<?php break;
case "header":
?>

    <div class="option option-header">
        <h3><?php echo $value['name']; ?></h3>
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php break;
case "divider":
?>

<div class="divider"></div>

<?php break;
case 'text':
?>

    <div class="option">
        <h3><?php echo $value['name']; ?></h3>
        <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="theme-input" />
        <?php if($value['extras'] == "uploadbutton") { ?><a href="media-upload.php?post_id=&amp;type=image&amp;TB_iframe=true&amp;width=640&amp;height=500" id="add_image" class="thickbox button" title='Add an Image' onclick="return false;">Get Image</a><?php } ?>
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php break;
case 'text_small':
?>

    <div class="option">
        <h3><?php echo $value['name']; ?></h3>
        <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="theme-input text-small" />
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php break;
case 'dimension':
?>

    <div class="option dimensions">
        <h3><?php echo $value['name']; ?></h3>
        <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="text" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="theme-input" /><span>px</span>
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php
break;

case 'textarea':
?>

    <div class="option">
        <h3><?php echo $value['name']; ?></h3>
        <textarea name="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" cols="" rows="" class="theme-textarea<?php if($value['height'] == "yes") { ?> large-textarea<?php } ?>"><?php if ( get_settings( $value['id'] ) != "") { echo stripslashes(get_settings( $value['id'] )); } else { echo $value['std']; } ?></textarea>
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php
break;
case 'select':
?>

    <div class="option">
        <h3><?php echo $value['name']; ?></h3>
        <select class="theme-select" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>"><?php foreach ($value['options'] as $option) { ?><option value="<?php echo $option; ?>" <?php if ( get_settings( $value['id'] ) == $option) { echo ' selected="selected"'; } ?>><?php echo $option; ?></option><?php } ?></select>
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php
break;
case "checkbox":
?>

<div class="option <?php if($value['extras'] == "multi") { ?>multi-checkbox<?php } ?>">
    <h3><?php echo $value['name']; ?></h3>
    <? if(get_settings($value['id'])){ $checked = "checked=\"checked\""; }else{ $checked = ""; } ?><input class="theme-checkbox" type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
    <div class="theme-checkbox-desc"><?php echo $value['desc']; ?></div>
</div>

<?php        
break;
case "radio":
?>

    <div class="option">
        <h3><?php echo $value['name']; ?></h3>  
        <?php foreach ($value['options'] as $key=>$option) {
        $radio_setting = get_option($value['id']);
        if($radio_setting != ''){
            if ($key == get_option($value['id']) ) {
                $checked = "checked=\"checked\"";
                } else {
                    $checked = "";
                }
        }else{
            if($key == $value['std']){
                $checked = "checked=\"checked\"";
            }else{
                $checked = "";
            }
        }?>
            <div class="theme-radio-wrapper">
            <input type="radio" name="<?php echo $value['id']; ?>" id="<?php echo $value['id'] . $key; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><label for="<?php echo $value['id'] . $key; ?>"><?php echo $option; ?></label>
            </div>  
        <?php } ?>
        <div class="option-desc"><?php echo $value['desc']; ?></div>
    </div>

<?php        
break;
case "colorpicker":
?>

  <div class="option option-colorpicker">
    <h3><?php echo $value['name']; ?></h3>
    <div class="section">
      <div class="element">
        <script type="text/javascript">
        jQuery(document).ready(function($) {  
          $("#<?php echo $value['id']; ?>").ColorPicker({
            onSubmit: function(hsb, hex, rgb) {
                $("#<?php echo $value['id']; ?>").val("#"+hex);
            },
            onBeforeShow: function () {
                $(this).ColorPickerSetColor(this.value);
                return false;
            },
            onChange: function (hsb, hex, rgb) {
                $("#cp_<?php echo $value['id']; ?> div").css({"backgroundColor":"#"+hex, "backgroundImage": "none", "borderColor":"#"+hex});
                $("#cp_<?php echo $value['id']; ?>").prev("input").attr("value", "#"+hex);
            }
          })    
          .bind('keyup', function(){
            $(this).ColorPickerSetColor(this.value);
          });
        });
        </script>
        <input type="text" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" class="cp_input" />
        <div id="cp_<?php echo $value['id']; ?>" class="cp_box">
          <div style="background-color:<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo '#fff'; } ?>;<?php if ( get_settings( $value['id'] ) != "") { echo 'background-image:none; border-color:' . get_settings($value['id']) . ';'; } ?>"> 
          </div>
        </div> 
      </div>
      <div class="clear"></div>
      <div class="option-desc">Click the text box for color picker.</div>
    </div>
  </div>


<?php        
break;
case "import_export":
?>

    </form>

    <div class="option submit">

        <h3>Import Theme Settings</h3>
        <div class="option-desc">If you have a back up of your theme settings you can import them below.</div>

        <form method="post" enctype="multipart/form-data">
        <p><input type="file" name="file" id="file" />
        <input type="submit" name="import" value="Upload" /></p>
        <input type="hidden" name="action" value="import" />
        </form>

    </div>

    <div class="divider"></div>

    <div class="option submit">

        <h3>Export Theme Settings</h3>
        <div class="option-desc">If you want to create a back up of all your theme settings click the Export button below. <em>Note: This option only backs up your theme settings and not your post/page data.</em></div>

        <form method="post">
        <p><input name="export" type="submit" value="Export Theme Settings" /></p>
        <input type="hidden" name="action" value="export" />
        </form> 

    </div>

<?php        
break;
}}
?>

</div>

<div class="clear"></div>

<div class="theme-buttons-bottom submit">

    <form method="post" onSubmit="if(confirm('Are you sure you want to reset all the theme settings?')) return true; else return false;">
    <input name="reset" type="submit" value="Reset" />
    <input type="hidden" name="action" value="reset" />
    </form>

<div class="clear"></div>

<?php } 

if (function_exists('wp_enqueue_style')) {
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-sortable');        
    wp_enqueue_script('thickbox');
    wp_enqueue_style('thickbox');
}

add_action('admin_menu', 'mytheme_add_admin'); 

// Export Theme Settings
function export_settings() {
    global $options;
    header("Cache-Control: public, must-revalidate");
    header("Pragma: hack");
    header("Content-Type: text/plain");
    header('Content-Disposition: attachment; filename="theme-options-'.date("dMy").'.dat"');
    foreach ($options as $value) $theme_settings[$value['id']] = get_settings( $value['id'] );  
    echo serialize($theme_settings);
}

// Import Theme Settings
function import_settings() {
    global $options;
    if ($_FILES["file"]["error"] > 0) {
        echo "Error: " . $_FILES["file"]["error"] . "<br />";
    } else {
        $rawdata = file_get_contents($_FILES["file"]["tmp_name"]);      
        $theme_settings = unserialize($rawdata);        
        foreach ($options as $value) {
            if ($theme_settings[$value['id']]) {
                update_option( $value['id'], $theme_settings[$value['id']] );
                $$value['id'] = $theme_settings[$value['id']];
            } else {
                if ($value['type'] == 'checkbox_multiple') $$value['id'] = array();
                else $$value['id'] = $value['std'];
            }
        }

    }
    if (in_array('cacheStyles', get_option('theme_misc'))) cache_settings();
    wp_redirect($_SERVER['PHP_SELF'].'?page=admin_options.php');
}

?>
share|improve this question
add comment

Your Answer

 
discard

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

Browse other questions tagged or ask your own question.