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

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.