Support » Developing with WordPress » Need Ajax to refresh my admin page without reloading

  • Resolved mortenamdk

    (@mortenamdk)


    Hi there

    Need help to get the admin page to refresh by the Ajax style ;o)

    This is my Php function:

    function l_next_top_count_callback() {
        global $wpdb;
        $next_top_count = intval($_POST['next_top_count']);
        echo $next_top_count;
    
                wp_die();
    }
    add_action('wp_ajax_l_next_top_count_callback', 'l_next_top_count_callback');
    add_action('wp_ajax_nopriv_l_next_top_count_callback', 'l_next_top_count_callback');

    This is my jQuery ajax action:

    (function($) {
    $(document).ready(function() {
    
          $('#next_top_count').on('click',function(e){
            e.preventDefault();
    
            var next_top_count = $("#next_top_count").val();
            var data = {
                action: 'l_next_top_count_callback',
                next_top_count: next_top_count,
            };
    $.ajax({
        type: 'post',
        url: ajaxurl.ajax_url,
        data: data,
        success : function( response ){ console.log(data); },
        error : function( response ){
            alert("fejl")
            
        }
    });
    
          });
       
      });
    })(jQuery);

    This is my update_option function:

    add_option( 'next_top_count_', '');
       register_setting( 'next_top_count_group', 'next_top_count', 'next_top_count_callback' );

    My wp-admin.php call:

    wp_localize_script( 'ajax_count', 'ajaxurl', admin_url( 'admin-ajax.php' ) );
    wp_enqueue_script( 'ajax_count' );

    My code is working with the database :o)

    But, my options-general.php does noget refresh without refresh f5.
    Hope the Ajax will du it automatic so my for loop can do the job. here is the for loop:

     for ($next_top = 0; $next_top <= get_option( 'next_top_count_' ); $next_top++) {
    
    	// Save attachment ID
        if ( 
        isset($_POST['(hidden)_top_banner_name'.$next_top.'']) || 
        isset($_POST['(hidden)_top_banner_name_color'.$next_top.'']) || 
        isset($_POST['(hidden)_top_banner_name_top_height'.$next_top.'']) || 
        isset($_POST['(hidden)_top_banner_name_top_text_line'.$next_top.'']) || 
        isset($_POST['(hidden)_top_banner_name_top_start_date'.$next_top.'']) || 
        isset($_POST['(hidden)_top_banner_name_top_stop_date'.$next_top.'']) || 
        isset( $_POST['submit_image_selector'.$next_top.''] ) && 
        isset( $_POST['image_attachment_id'.$next_top.''] ) ) :
    		update_option( 'media_selector_attachment_id'.$next_top.'', absint( $_POST['image_attachment_id'.$next_top.''] ) );
            update_option( '(hidden)_top_banner_name'.$next_top.'', wp_kses_post( $_POST['(hidden)_top_banner_name'.$next_top.''] ) );
            update_option( '(hidden)_top_banner_name_color'.$next_top.'', wp_kses_post( $_POST['(hidden)_top_banner_name_color'.$next_top.''] ) );
            update_option( '(hidden)_top_banner_name_top_height'.$next_top.'', wp_kses_post( $_POST['(hidden)_top_banner_name_top_height'.$next_top.''] ) );
            update_option( '(hidden)_top_banner_name_top_text_line'.$next_top.'', wp_kses_post( $_POST['(hidden)_top_banner_name_top_text_line'.$next_top.''] ) );
            update_option( '(hidden)_top_banner_name_top_start_date'.$next_top.'', wp_kses_post( $_POST['(hidden)_top_banner_name_top_start_date'.$next_top.''] ) );
            update_option( '(hidden)_top_banner_name_top_stop_date'.$next_top.'', wp_kses_post( $_POST['(hidden)_top_banner_name_top_stop_date'.$next_top.''] ) );
    
    	endif;
    
    	wp_enqueue_media();
    
    	?>
    <div class="plugin_box">
    <form method='post'>
        <div class="plugin_(hidden)_banner">
          
            <div><label for="(hidden)_top_banner_name<?php echo $next_top; ?>"><b>Banner tekst</b></label></div>
            <?php settings_fields( '(hidden)_top_banner_group' );
    
            
                      $(hidden)_top_banner_name = get_option('(hidden)_top_banner_name'.$next_top.'');
            wp_editor( $(hidden)_top_banner_name, '(hidden)_top_banner_name'.$next_top.'', array(
                'wpautop'       => true,
                'media_buttons' => true,
                'textarea_rows' => 1,
            ) );?>
        </div>
      
          <style>
              body.settings_page_(hidden)_top_banner .wp-editor-wrap {
                width: 76%;
                float: right;
            }
              .plugin_(hidden)_top_banner {
                  float: left;
                  width: 22%;
            }
              .plugin_box {
                display: flow-root;
                padding-top: 1em;
            }
              .plugin_(hidden)_top_banner_dato {
                width: 85px;  
            }
        </style>
        <div class="plugin_(hidden)_top_banner">
          <div><label><b>Baggrundsfarve</b><br></label><input type="text" class="color-picker" data-alpha="true" name="(hidden)_top_banner_name_color<?php echo $next_top; ?>" id="(hidden)_top_banner_name_color<?php echo $next_top; ?>" value="<?php echo get_option( '(hidden)_top_banner_name_color'.$next_top.'' ); ?>" /></div>
            <label><b>Baggrundsbillede</b></label>
            <div class='image-preview-wrapper<?php echo $next_top; ?>'>
    			<img id='image-preview<?php echo $next_top; ?>' src='<?php echo wp_get_attachment_url( get_option( 'media_selector_attachment_id'.$next_top.'' ) ); ?>' width='100%'>
    		</div>
    		<input id="upload_image_button<?php echo $next_top; ?>" type="button" class="button" value="<?php _e( 'Upload banner billede' ); ?>" />
    <label><b>Vis billede</b></label>
    		<input type='checkbox' name='image_attachment_id<?php echo $next_top; ?>' id='image_attachment_id<?php echo $next_top; ?>' value='<?php echo get_option( 'media_selector_attachment_id'.$next_top.'' ); ?>' checked><br><br>
    <div><b>Height på banner linjen</b></div>
            <input type="number" maxlength="4" size="4" name="(hidden)_top_banner_name_top_height<?php echo $next_top; ?>" id="(hidden)_top_banner_name_top_height<?php echo $next_top; ?>" value="<?php echo get_option( '(hidden)_top_banner_name_top_height'.$next_top.'', '28' ) ?>">
    <div><b>Tekst linje højde</b></div>
            <input type="text" size="4" name="(hidden)_top_banner_name_top_text_line<?php echo $next_top; ?>" id="(hidden)_top_banner_name_top_text_line<?php echo $next_top; ?>" value="<?php echo get_option( '(hidden)_top_banner_name_top_text_line'.$next_top.'', '1.8' ) ?>">
            <div><b>Start</b></div>
            <input type="text" class="date_picker plugin_(hidden)_top_banner_dato" name="(hidden)_top_banner_name_top_start_date<?php echo $next_top; ?>" id="(hidden)_top_banner_name_top_start_date<?php echo $next_top; ?>" value="<?php echo get_option( '(hidden)_top_banner_name_top_start_date'.$next_top.'' ) ?>">
            <div><b>Slut</b></div>
            <input type="text" class="date_picker plugin_(hidden)_top_banner_dato" name="(hidden)_top_banner_name_top_stop_date<?php echo $next_top; ?>" id="(hidden)_top_banner_name_top_stop_date<?php echo $next_top; ?>'" value="<?php echo get_option( '(hidden)_top_banner_name_top_stop_date'.$next_top.'' ) ?>"><br><br>
    		<input type="submit" name="submit_image_selector<?php echo $next_top; ?>" value="Gem ændringer" class="button-primary">
    	</div>
            </form>
        </div>
    <hr>
        <?php
        
        }

    All this work, but not before i have refresh the page.
    Is there not way to do that with ajax, and how do i do it, have try many this but can’t get it to work, have use Google many times, can’t move on, really need some help to do this.

    Hope you will help.

    I dont have so mush hair anymore :oD

    Best Regards
    Morten

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator bcworkz

    (@bcworkz)

    You can only localize scripts after the script has been enqueued 😉 Reverse the lines of what you call the “wp-admin.php” call.

    Hehe wp-admin mean wp-ajax 😊
    Thanks I will try that.
    But the funny thing is my code work get the data in database but the for loop does not response.

    I tryet but nothing change.
    Are there something else I can try?

    Moderator bcworkz

    (@bcworkz)

    In localize script, try admin_url( 'admin-ajax.php?action=l_next_top_count_callback' )
    I’m not sure what the problem is with arbitrary data: passed to .ajax(), but admin-ajax.php doesn’t like it. It works fine when passed as a form field.

    Similarly, there may be a problem with $_POST['next_top_count']. To ensure something comes back to .ajax(), for now just print_r($_POST); as your callback output and examine it with an alert(). Obviously this will not drive your loop properly, but it should be a clue on how to access the passed data.

    Hi

    Good idea I will try that, and I will return when I have tryet. Thank you so much for your time and help.

    Best regards
    Morten

    mortenamdk

    (@mortenamdk)

    Hi

    So have i tryet it, when i do this alert my data comes data as it should. Here is what i have done, for the result:

    (function($) {
    $(document).ready(function() {
    
          $('#next_top_count').on('click',function(e){
            e.preventDefault();
    
            var next_top_count = $("#next_top_count").val();
            var data = {
                action: 'l_next_top_count_callback',
                next_top_count: next_top_count,
            };
    $.ajax({
        type: 'post',
        url: ajaxurl.ajax_url,
        data: data,
        beforeSend: function( response ) {
            <strong>alert(next_top_count);</strong>
            $('body').fadeTo(1000, '0.4');
        },
        success : function( response ){
            $('body').fadeTo(1000, '0.4');
        },
        complete: function( response ) {
             $('body').load('options-general.php?page=teenstyle_top_banner', 'body'); 
             $('body').fadeTo(4000, '1');
            console.log(data); },
        error : function( response ){
            alert("fejl")
            
        }
    });
    
          });
       
      });
    })(jQuery);

    But there is something i dont understand that is, i don’t how my callback do anything i can not see any changes.
    And if my callback works?

    function l_next_top_count_callback() {
        global $wpdb;
        $next_top_count = isset($_POST['next_top_count']) ? update_option( 'next_top_count_', absint( $_POST['next_top_count'] )) : 'N/A';
        echo $next_top_count;
    
                wp_die();
    }
    add_action('wp_ajax_l_next_top_count_callback', 'l_next_top_count_callback');
    add_action('wp_ajax_nopriv_l_next_top_count_callback', 'l_next_top_count_callback');
    mortenamdk

    (@mortenamdk)

    When i want to see some result from the function l_next_top_count_callback()
    Comes it with NA, so i thing there is a problem there maybe i dont have connection to it in wp-ajax.php

    mortenamdk

    (@mortenamdk)

    array (size=0)
    empty

    I made a var_dump on $_POST
    It was empty

    I have tryet something like this, is not Ajax metode but it work.

    (function($) {
    $(document).ready(function() {
    
          $('#next_top_count').on('click',function(e){
            e.preventDefault();
    
            var next_top_count = $("#next_top_count").val();
            var data = {
                action: 'l_next_top_count_callback',
                next_top_count: next_top_count,
            };
    $.ajax({
        type: 'post',
        url: ajaxurl.ajax_url,
        data: data,
        beforeSend: function( response ) {
            // setting a timeout
            $('body').fadeTo(1000, '0.4');
        },
        success : function( response ){
            $('body').fadeTo(1000, '0.4');
        },
        complete: function( response ) {
             $('body').load('options-general.php?page=teenstyle_top_banner', 'body'); 
             $('body').fadeTo(4000, '1');
            console.log(data); },
        error : function( response ){
            alert("fejl")
            
        }
    });
    
          });
       
      });
    })(jQuery);

    But i hope i can do this with Ajax so it will be better.

    i have also tryet this:

    function l_next_top_count_callback() {
        $next_top_count = $_POST['next_top_count'];
        echo $next_top_count;
        
                wp_die();
    }
    add_action('wp_ajax_l_next_top_count_callback', 'l_next_top_count_callback');
    add_action('wp_ajax_nopriv_l_next_top_count_callback', 'l_next_top_count_callback');
    Moderator bcworkz

    (@bcworkz)

    I’m not sure what the actual issue is with arbitrary object data passed to .ajax(). It works fine with .post(), so I’ve always used that instead, rather than faff about trying to resolve the same thing with .ajax(). If you must use .ajax(), try converting your data object to new FormData, as sending forms with .ajax() seems to work fine.

    mortenamdk

    (@mortenamdk)

    Thank you i will try that :o)
    And thank you for your time to help me.

    I close this Topic for now.

    Best Regards
    Morten

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.