WordPress.org

Ready to get started?Download WordPress

Forums

Editing Widget options from the frontend. (3 posts)

  1. chriswhittle
    Member
    Posted 1 year ago #

    So I need a way to change widget settings from the frontend.
    I would love it to be ajax so I don't have to refresh the page but I've not found a way to get a hold of the instance by id (I can get the ID) and then save the changes.

    Is this possible?

  2. chriswhittle
    Member
    Posted 1 year ago #

    ok so here is what I came up with... Not perfect and not complete but here you go.

    Does anyone see any major flaws with what I have?

    class Control_Widget extends WP_Widget {
    
        function Control_Widget() {
            add_action('init', array($this, 'init'));
            $this->WP_Widget('control_widget', __('Control'), $widget_ops);
        }
    
        function init() {
            self::move_defines_to_js();
            add_action('wp_ajax_update_control_widget', array(&$this, 'update_via_front_end'));
        }
    
        function move_defines_to_js() {
            $defines .= "var control_widget_ajax_url='" . admin_url('admin-ajax.php') . "';";
            $js_defined = 'echo "<script>' . $defines . '</script>";';
            add_action('wp_footer', create_function('', $js_defined));
        }
    
        /*
          widget() - outputs the content of the widget, in our case: a random picture.
         */
    
        function update_via_front_end() {
            $data = $_POST["data"];
            $error = "Unknown Error";
            $fields = array();
            $instance_id = null;
            foreach ($_POST["data"] as $item) {
                $name = $item["name"];
                $value = $item["value"];
                $pos = strpos($name, $this->id_base);
                if (!$pos === false) {
                    $id_and_field_name = substr($name, $pos + strlen($this->id_base), strlen($name));
                    $array = explode("][", $id_and_field_name);
                    if ($instance_id == null) {
                        $tmp_instance_id = $array[0];
                        $instance_id = str_replace("[", "", $tmp_instance_id);
                    }
                    $tmp_field_id = $array[1];
                    $field_id = str_replace("]", "", $tmp_field_id);
    
                    if (in_array($field_id, $acceptable_fields)) {
                        $fields[$field_id] = $value;
                    }
                }
            }
            if (!empty($instance_id)) {
                $all_instances = $this->get_settings();
                if (array_key_exists($instance_id, $all_instances)) {
                    $instance = $all_instances[$instance_id];
                    foreach ($fields as $key => $value) {
                        $instance[$key] = $value;
                    }
                    $all_instances[$instance_id] = $instance;
                    parent::save_settings($all_instances);
                    die(json_encode(array("success" => 1)));
                }
            }
            die(json_encode(array("success" => 1, "message" => $error)));
        }
    
        function widget($args, $instance) {
            extract($args);
            echo $before_widget;
            echo "<form class='mutual_mind_control_widget'>";
            self::get_form($instance, false, false);
            echo "<button id='mutual_mind_control_widget_change'>Change</button>";
            echo "</form>";
            echo $after_widget;
        }
    
        function form($instance) {
            self::get_form($instance);
        }
    
        function get_form($instance, $show_title = true, $show_report_type = true) {
            $instance = wp_parse_args((array) $instance, array('title' => ''));
            $title = $instance['title'];
            $campaign_id = $instance['campaign_id'];
            $start_date = $instance['start_date'];
            $end_date = $instance['end_date'];
            $report_type = $instance['report_type'];
            if ($show_title == true) {
                ?>
                <p class='title'><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
            <?php } ?>
            <p><label for="<?php echo $this->get_field_id('campaign_id'); ?>">Campaign: <?php echo $this->widget_helper->get_campaign_selector(attribute_escape($campaign_id), $this->get_field_name('campaign_id')); ?></label></p>
            <?php if ($show_report_type == true) { ?>
                <p><label for="<?php echo $this->get_field_id('report_type'); ?>">Report Type: <?php echo $this->widget_helper->mutual_mind->get_report_types_select($this->get_field_name('report_type'), attribute_escape($report_type)); ?></label></p>
            <?php } ?>
            <p><label for="<?php echo $this->get_field_id('start_date'); ?>">Start Date: <input id="<?php echo $this->get_field_id('start_date'); ?>" name="<?php echo $this->get_field_name('start_date'); ?>" type="text" value="<?php echo attribute_escape($start_date); ?>" /></label></p>
            <p><label for="<?php echo $this->get_field_id('end_date'); ?>">End Date: <input id="<?php echo $this->get_field_id('end_date'); ?>" name="<?php echo $this->get_field_name('end_date'); ?>" type="text" value="<?php echo attribute_escape($end_date); ?>" /></label></p>
            <?php
        }
    
        function update($new_instance, $old_instance) {
            $instance = $old_instance;
            $instance['title'] = $new_instance['title'];
            $instance['campaign_id'] = $new_instance['campaign_id'];
            $instance['start_date'] = $new_instance['start_date'];
            $instance['end_date'] = $new_instance['end_date'];
            $instance['report_type'] = $new_instance['report_type'];
    
            return $instance;
        }
    
    }
  3. chriswhittle
    Member
    Posted 1 year ago #

    JS for frontend

    function control_widget_save(event) {
            var $this = jQuery(this);
            //alert(JSON.stringify($this.serializeObject()));
            var data = {
                action: 'update_control_widget',
                data: $this.serializeArray()
            };
            //TODO show loading
            //
            jQuery.post(control_widget_ajax_url, data, function(response) {
                try{
                    var message = "There was an unknown error";
                    //  alert(response);
                    data_obj = JSON.parse(response);
                    if(data_obj.success == "1"){
                        //$this.html(JSON.stringify(data_obj.data.sizebefore + "," +data_obj.data.sizeafter));
                        $this.attr("data-keys",JSON.stringify(data_obj.keys));
                        alert($this.attr("data-keys"));
                        reload_chart_widgets();
                    }else{
                        if(data_obj.message){
                            message = data_obj.message;
                        }else{
                            console.log(JSON.stringify(response));
                        }
                        $this.html(message);
                    }
                }catch(err){
    
                    if(typeof(console) !== 'undefined' && console != null) {
                        console.log(err.message);
                        console.log(JSON.stringify(response));
                    }else{
                        alert(err.message + "-" +JSON.stringify(response));
                    }
                }
                $loading.hide();
            });
        }

Topic Closed

This topic has been closed to new replies.

About this Topic