0

I am trying to figure out how to link a custom jquery to my custom meta box created in wordpress custom post type but I can't find it working.

What I want to do is add a line of text when the button is clicked. But it is only reload the "add new post" page and generating a message "Post updated." after I clicked the button.

Here is my code:

File: doubleit.js

jQuery(document).ready(function($){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});

Register and Enqueue Script

add_action( 'admin_enqueue_scripts', 'add_mytweetjs' );

function add_mytweetjs() {

    wp_deregister_script('jquery');

    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');

    wp_register_script( 'myjquerydoubler', plugins_url( '/js/doubleit.js', __FILE__ ), array( 'jquery' ) );

    wp_enqueue_script( 'myjquerydoubler' );
}

HTML Script On The Custom Meta Box

echo '<p>This is a paragraph.</p>';
echo '<p>This is another paragraph.</p>';
echo '<ol>';
echo '<li>List item 1</li>';
echo '<li>List item 2</li>';
echo '<li>List item 3</li>';
echo '</ol>';
echo '<button id="btn1">Append text</button>';
echo '<button id="btn2">Append list items</button>';

May be somebody know where is the fault of my code above.

Thanks..

1

Because YOU CAN'T DEREGISTER JQUERY IN THE ADMIN

Why would you even want to?

See src: http://core.trac.wordpress.org/browser/tags/3.6/wp-includes/functions.wp-scripts.php?order=name#L105

// Do not allow accidental or negligent deregistering of critical scripts in the admin. Show minimal remorse if the correct hook is used.
if ( is_admin() && 'admin_enqueue_scripts' !== current_filter() ) {
    $no = array(
        'jquery', 'jquery-core', 'jquery-migrate', 'jquery-ui-core', 'jquery-ui-accordion',
        'jquery-ui-autocomplete', 'jquery-ui-button', 'jquery-ui-datepicker', 'jquery-ui-dialog',
        'jquery-ui-draggable', 'jquery-ui-droppable', 'jquery-ui-menu', 'jquery-ui-mouse',
        'jquery-ui-position', 'jquery-ui-progressbar', 'jquery-ui-resizable', 'jquery-ui-selectable',
        'jquery-ui-slider', 'jquery-ui-sortable', 'jquery-ui-spinner', 'jquery-ui-tabs',
        'jquery-ui-tooltip', 'jquery-ui-widget',
        'underscore', 'backbone',
    );

    if ( in_array( $handle, $no ) ) {
        $message = sprintf( __( 'Do not deregister the %1$s script in the administration area. To target the frontend theme, use the %2$s hook.' ),
            "<code>$handle</code>", '<code>wp_enqueue_scripts</code>' );
        _doing_it_wrong( __FUNCTION__, $message, '3.6' );
        return;
    }
}
  • Hi.. thank you! It works now! The only problem I get now is it is reload the page each time I click one of the buttons in the meta box. – Ari Aug 11 '13 at 8:24
  • You need to use the event object on the click listener and call preventDefault(). jQuery("#some_div").click(function(event) { event.preventDefault(); //your code }); – Chris_O Aug 11 '13 at 10:46
  • Awesome. It is perfect now! Thank you very much Chris.O :) – Ari Aug 11 '13 at 14:22

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.