1

I tried to do a small thing using Ajax. I just try to replace a div.

This is what I have done so far.

I created a admin menu using add_menu_page.

Then I add a form to that page with a text field. I just need to replace a div when click the submit button. But it did not works. When I check console in browser it says Uncaught TypeError: Cannot read property 'ajax' of undefined


function myajaxfunction() {
    $.ajax({ //ajax request
        url: ajaxurl,
        data: {
            'action':'rs_like_request',
            'post_type' : $('#post_type').val() // value of text box having id "post_type"

        },
        success:function(data) {  //result
         $(".showdiv").html(data); //showdiv is the class of the div where we want to show the results
        },
        error: function(errorThrown){
            console.log(errorThrown);
        }
    });  

}

<form action="" method="post">
    <label>Write post type : </label>
    <input type="text" name="post_type" id="post_type" value=""/>
    <input type="button" value="Show Post Titles" onclick="myajaxfunction()"/>

    <div class="showdiv"></div>

</form>

function rs_like_count() {

    if ( isset($_REQUEST) ) {   // $_REQUEST is having all the data sent using ajax
        $post_type= $_REQUEST['post_type'];
        echo $post_type;

}
 die();
}
add_action( 'wp_ajax_rs_like_request', 'rs_like_count' );
1

Uncaught TypeError: Cannot read property 'ajax' of undefined

@Sasa1234, it happen cause your jQuery is undefined. Please take a look @EAMann answer. So, your JS code should like this:

function myajaxfunction() {
    if ( undefined !== window.jQuery ) {
        jQuery.ajax({ //ajax request
            url: ajaxurl,
            data: {
                'action':'rs_like_request',
                'post_type' : jQuery('#post_type').val() // value of text box having id "post_type"

            },
            success:function(data) {  //result
             jQuery(".showdiv").html(data); //showdiv is the class of the div where we want to show the results
            },
            error: function(errorThrown){
                console.log(errorThrown);
            }
        });  
    }
}
| improve this answer | |
  • Thanks for the answer. I added it. But still there is same error :-( – Sasa1234 Apr 24 '16 at 6:08
  • Check your jQuery file. if your form in front end, then you should add add_action( 'wp_ajax_nopriv_rs_like_request', 'rs_like_count' ); and make it sure your js code put in footer. – Jevuska Apr 24 '16 at 6:10
  • Thanks, No, it is an admin page. Then I added <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> to that page(plugin page). Now it is working. Is it a problem adding it? – Sasa1234 Apr 24 '16 at 6:15
  • I don't recommend you use that, WordPress have jQuery built-in, I think you need to check it if it's exists. – Jevuska Apr 24 '16 at 6:17
  • function textdomain_load_jquery() { wp_enqueue_script( 'jquery' ); } add_action( 'wp_enqueue_script', 'textdomain_load_jquery' ); This is not working. Do you have any idea about that? But <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script‌​> working. – Sasa1234 Apr 24 '16 at 6:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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