JQuery prepend a function

Question

The admin_menu hook is not for displaying the menu, it’s actually part of the menu construction process to figure out exactly what goes in the menu, and this is where you should be making calls to functions like add_submenu_page. So when this action is fired, nothing has been printed out yet, there’s no head/body tags yet.

But even then I don’t see how your code works. Your second function attempts to prepend the code via AJAX, but it’s calling a PHP variable in the middle of what is Javascript code. For this to work would require the code ot posess some kind of supernatural psychic powers. That JQuery code has no knowledge of PHP variables.

But lets say it did have those supernatural psychic powers, or say a Google Engineer appeared with soem magic tech that let your javascript reach into the memory of the PHP process ( which has already exited once the page had finished loading anyway ), we have a whole new problem.

Your trying to use the variable $menuprofile, yet that variable is not declared anywhere., and if it was declared, what would it contain? It wouldn’t contain your menu profile html, that got echo’d out to the frontend, it didn’t get put in a variable called $menuprofile.

Remember, everything in code is there for a reason, it’s in a particular order for a particular reason, if you don’t know why you put ‘echo’ in there you should read up because you’ll probably spend more time flailing about copy pasting random things on the off chance it works.

So lets start with your JS code:

function profile_script() {
    echo '<script type="text/javascript">
    /* <![CDATA[ */
    (function($) {
        var menuprofile = ?; // where do we get this value from?
        $("#adminmenu").prepend(menuprofile);
    })(jQuery);
    /* ]]> */
    </script>';
}
add_action( "admin_footer", 'profile_script' );

We need to get menuprofile from somewhere, we have 2 choices:

Echo out the code as a js string and create a html element out of it in JS
Echo it out in PHP then grab the element using JQuery and move it to the correct position

I’m going to use the second option as an example:

function profile_script() {
    echo '<div id="example>Hello World</div>";
    echo '<script type="text/javascript">
    /* <![CDATA[ */
    (function($) {
        var menuprofile = $("#example"); // grab that html element from before
        $("#adminmenu").prepend(menuprofile);
    })(jQuery);
    /* ]]> */
    </script>';
}
add_action( "admin_footer", 'profile_script' );

You should also namespace your funcitons or at least prefix them to prevent collisions with other people writing functions who had the same naming ideas. You should also wait until the DOM is ready:

function wpse73532_profile_script() {
    echo '<div id="example>Hello World</div>";
    echo '<script type="text/javascript">
    /* <![CDATA[ */
    jQuery(document).ready(function(){
        var menuprofile = jQuery("#example"); // grab that html element from before
        jQuery("#adminmenu").prepend(menuprofile);
    });
    /* ]]> */
    </script>';
}
add_action( "admin_footer", 'wpse73532_profile_script' );

Instead have you considered modifying the admin bar? Also what will you do when the menu is collapsed? or if the CSS and menu layout changes in a future version of WordPress?

Disclaimer: Copious quantities of sarcasm were used in this answer, but no offence was intended

Related Posts: