jQuery conflict! Shows White Screen on POST EDIT p

Question

I have a made a small jQuery script to import values from other file and insert this values in WordPress POST page as Custom Meta Tags.

When I Create A New Post the form is shown below the Post content area and every thing works 100%.

The problem is if I press "Edit Post" Button/link then it loads the Post Edit page but nothing is shown. Just a White screen loads, so I cant Edit this Post.

Here is my Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<input name="file" type="text" id="file">
<script type="text/javascript">
    $(document).ready(function() {
        $('.button').click(function() {
            var val = $('#file').val();
            $.get('import.php', {file: val}, function(data) {            
                result = $.parseJSON(data);
                $("input[name='nick_name']").val(result.name);
                $("input[name='work_city']").val(result.location);

            });
        });
    });
    </script>

<input type="button" class="button" value="GET/IMPORT">

I also tried to add this script (after jquery.min.js):

<script type="text/javascript">
$.noConflict(true);
</script>

Then Edit Post page worked but I could not use my custom form/button.

My question is: How can I load this Script without getting any conflict with WordPress Edit Post page?

If I remove:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

From my script then All pages load OK but then my custom made form/button don't work.

LATEST UPDATE: I GOT IT WORKING :D :D :D Just testing when or where I should load this script to get my results successfully. I started editing /wp-admin/admin-header.php (I know its NOT recommended to edit CORE files but Im just doing it for debuggig!) First of all I inserted the jQuery script that Im using on Line 1 before opening of

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

Then I went to POST NEW page, I could see some different in font sizes but the function I wanted was there, I could use my button. So I opened EDIT POST page and I could see the EDIT PAGE! Now EDIT PAGE is working also. Finally I figured out if I insert this jQuery script in beginning on LINE 59 in /wp-admin/admin-header.php then every thing works 100% :D The design CSS looks good and the functionality is there!

Now I need help to insert/paste this script to LINE 59 in admin-header.php How can I do that using functions.php?

Answer 1

First off this seems like a bad thing to be doing editing the wordpress core. But if you want to do this, don't include jQuery again. And don't use the $ sign, see this example:

jQuery(".SomeClass").click(function(){
    console.log("Some Text");
});

//Therefore you could do something like this
<script type="text/javascript">
  jQuery(document).ready(function() {
       jQuery('.button-test-class').click(function() {
             //Do what you want here, for this we'll write some text to the console
             console.log("Some Text");
        });
  });
</script>

<input type="button" class="button-test-class button" value="Button Test">

Answer 2

How to add scripts The WordPress Way:

add_action( 'wp_enqueue_scripts', 'pjso_my_scripts' );
function pjso_my_scripts() {
    $handle = 'script_name';
    $src = '/path/to/script.js';
    $deps = array( 
        'jquery',
    );
    // add any other dependencies to the array, using their $handle
    $ver = 'x.x';  // if you leave this NULL, 
                   // then it'll use WordPress's version number
    $in_footer = true; // if you want it to load in the page footer
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}

To do it only on the Edit Post screen in the backend, you can use the admin_enqueue_scripts hook combined with get_current_screen():

add_action( 'admin_enqueue_scripts', 'pjso_my_scripts' );
function pjso_my_scripts() {
    $screen = get_current_screen();
    if( 'post' != $screen->base || 'edit' != $screen->parent_base ) {
        return; // bail out if we're not on an Edit Post screen
    }
    $handle = 'script_name';
    $src = '/path/to/script.js';
    $deps = array( 
        'jquery',
    );
    // add any other dependencies to the array, using their $handle
    $ver = 'x.x';  // if you leave this NULL, 
                   // then it'll use WordPress's version number
    $in_footer = true; // if you want it to load in the page footer
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}

That should work, though I haven't tested it.

This code can go in your theme's functions.php file, or you could write a custom plugin so that it will persist across any future theme changes.

References

• wp_enqueue_script() -- note the list of scripts that WP automatically loads, which includes jQuery
• get_current_screen()