how can add jquery code in metabox?

  • hey can i add my following code into the metabox?

    <html>
    <head>
        <title>You Have To Have a Title</title>
    </head>
    <body>
        <form method="post" autocomplete="on" action="process_form.php">
                search: <input type="text" name="gname" >
                </br>  </br>
                ID:  <input type="text" name="idgame">
                <input type="submit" name="submit" value="Submit">
        </form>

        <div id="MyResultsDiv"> Your results will display here.</div>        

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

        <script>
        $('form').submit(function (e) { 

            e.preventDefault(); 

            var gnameInput = this.children["gname"].value; // the "gname" input 

            var idgameInput = this.children["idgame"].value;// the "idgame" input 

            var postVariables = {
                gname: gnameInput,
                idgame: idgameInput
            }; 

            var postUrl = this.action; // the "action" attribute of your form. 

            $.post(postUrl, postVariables, function (result) { 

                $("#MyResultsDiv").html(result); 

            }).fail(function (result) {
                console.log("Wean Error!");
            });
        });
        </script>
    </body>
</html>

Viewing 12 replies - 1 through 12 (of 12 total)

  • Yes, but you won’t want the outer HTML tags, like <head> and <body>. Just the actual HTML code that makes up that are of the page.

    Thread Starter Banshee01

    (@banshee01)

    i know can you help me for js? how can i use js in function?

    Something like this?

    https://codex.www.ads-software.com/AJAX_in_Plugins#Ajax_on_the_Administration_Side

    Thread Starter Banshee01

    (@banshee01)

    like this?

    echo '<form method="post" autocomplete="on" action="("admin/process_form.php");">
				<input type="text" name="gname" >
				<input type="submit"name="submit" value="search">', $gmeta ? $gmeta : $field['std'], '</form>', '<br />', $field['desc'];
                break;

			case 'echogame':
	        echo '<div id="MyResultsDiv"> ', $gmeta ? $gmeta : $field['std'], '</div>', '<br />', $field['desc'];
		    break;

    and js:

    function my_template_jquery() {
wp_enqueue_script( '/js/games.js' );
}
add_action( 'wp_enqueue_scripts', 'my_template_jquery' );

    so i made like this but not work can you just see my code and help me to find problems

    Exactly what doesn’t work?

    That code looks liek it would work OK, but there’s no JavaScript in there so there’s no way to tell if that’s OK.

    Thread Starter Banshee01

    (@banshee01)

    see i want show result serch with java script under search bar so how can i made it? its possibel?

    OK, so what code have you got, and where is it breaking?

    As bad as it sounds, we are not here to do your coding for you. You have to show a bit of initiative yourself, and let us see what you’ve done so far.

    Thread Starter Banshee01

    (@banshee01)

    my code :

    function my_template_jquery() {
wp_enqueue_script( '/js/games.js' );
}
add_action( 'wp_enqueue_scripts', 'my_template_jquery' );

//////////////////////////////////////////////////////////////////
// Register games Metabox
//////////////////////////////////////////////////////////////////
$prefixg = 'games_';

$game_box = array(
    'id' => 'game-meta-box',
    'title' => 'gamesprofile',
    'page' => 'post',
    'context' => 'normal',
    'priority' => 'high',
    'fields' => array(
		   array(
            'name' => 'GameName',
            'desc' => 'add game name here',
            'id' => $prefixg  . 'gname',
            'type' => 'form',
            'std' => ''
        ),
				   array(
            'name' => 'game lists',
            'desc' => '',
            'id' => $prefixg  . 'glist',
            'type' => 'echogame',
            'std' => ''
        ),
		    array(
            'name' => 'add your game ID here',
            'desc' => 'add gameID',
            'id' => $prefixg  . 'gameid',
            'type' => 'text',
            'std' => ''
        ),
		 array(
            'name' => 'platforms',
            'desc' => 'chose your platforms',
            'id' => $prefixg  . 'platforms',
            'type' => 'text',
            'std' => ''
        )
    )
);

add_action('admin_menu', 'game_add_box');
// Add meta box
function game_add_box() {
    global $game_box;
   add_meta_box($game_box['id'], $game_box['title'], 'game_show_box', $game_box['page'], $game_box['context'], $game_box['priority']);
}
// Callback function to show fields in meta box
function game_show_box() {
    global $game_box, $post;
    // Use nonce for verification
    echo '<input type="hidden" name="game_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
    echo '<table class="form-table">';
    foreach ($game_box['fields'] as $field) {
        // get current post meta data
        $gmeta = get_post_meta($post->ID, $field['id'], true);
        echo '<tr>',
                '<th style="width:20%"><label for="', $field['id'], '">', $field['name'], '</label></th>',
                '<td>';
        switch ($field['type']) {
            case 'text':
                echo '<input type="text" name="', $field['id'], '" id="', $field['id'], '" value="', $gmeta ? $gmeta : $field['std'], '" size="30" style="width:97%" />', '<br />', $field['desc'];
                break;
            case 'form':
			// define variables and set to empty values
                echo '<form method="post" autocomplete="on" action="("admin/process_form.php");">
				<input type="text" name="gname" >
				<input type="submit"name="submit" value="search">', $gmeta ? $gmeta : $field['std'], '</form>', '<br />', $field['desc'];
                break;

			case 'echogame':
	        echo '<div id="MyResultsDiv"> ', $gmeta ? $gmeta : $field['std'], '</div>', '<br />', $field['desc'];
		    break;
        }
        echo     '</td><td>',
            '</td></tr>';
    }
    echo '</table>';
}

    all work fines i just want know where is my problem to resulte game names under the search game i just need call my JS for show results

    And again….

    There’s no JavaScript code in there, so it’s impossible to tell why the JavaScript part isn’t working.

    Unless it’s the PHP that’s not sending the right results, but you still haven’t said where the error is occuring, so again we’re still guessing about pretty much everything here.

    Thread Starter Banshee01

    (@banshee01)

    hi there
    here is my js and php codes
    java:

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

        <script>
        $('form').submit(function (e) { 

            e.preventDefault(); 

            var gnameInput = this.children["gname"].value; // the "gname" input 

            var postVariables = {
                gname: gnameInput
            }; 

            var postUrl = this.action; // the "action" attribute of your form. 

            $.post(postUrl, postVariables, function (result) { 

                $("#MyResultsDiv").html(result); 

            }).fail(function (result) {
                console.log("Wean Error!");
            });
        });
        </script>

    and PHP:

    <?php
// define variables and set to empty values
$gname =  "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
   $gname = test_input($_POST["gname"]);
}
function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}
$urls= ("https://thegamesdb.net/api/GetGamesList.php?name=".$gname."");
$search = new SimpleXMLElement(file_get_contents($urls));

// HERE IS WHERE YOUR RESULTS ARE OUTPUT
// THIS GETS SENT TO THE JavaScript CODE

foreach($search as $object){
echo "<li>".$object->GameTitle."?????";
echo "?????ID:".$object->id."</li>";
}
?>

    my js and php is working fine i just dont know how to use it in function.php

    I’m really lost tyring to figure out where your problem actually is?? ??

    To add the JavaScript, you’ll need to use something like this:

    add_action ('admin_enqueue_script', 'my_function_name');

function my_function_name () {
   wp_enqueue_script ('my_script_name', 'path/to/jsfile.js');
}

    Note because it’s a meta box, it’s on the admin side, so you need the admin_enqueue_scripts action, and not wp_enqueue_scripts like you would for a public-facing JavaScript code.

    To set up the metabox, you’d use something like this:

    add_action ('add_meta_boxes', 'my_metabox_function');

function my_metabox_function () {
    add_meta_box ('metabox_id', 'My Metabox', 'metabox_setup', 'post_type', 'normal', 'default');
}

function metabox_setup () {
    echo '<p>The metabox content goes in this area.</p>';
}

    for the jquery code, you need to either replace “$” with “jQuery” or define $ as jQuery. WP uses non.conflict jQuery as default. If you are using chrome, right click and go to “inspect element” and click on console, you will see “$” is not defined. You can insert this into a metabox (is it the content metabox???) but you have to make sure jquery is loaded before the metabox is outputted into the page. i.e. if in the content metabox, recent themes load jquery in the footer so any jquery in the_content will not be defined, if that makes sense?

    BTW the code you have there at the top of the page is a static page, the wp theme you are using will add the head and body tags in your header as caustastic has mentioned (right click and view source code), so you are duplicating these…look up wp page templates or rewrite rule to create a page for the code above rather than adding into a metabox (which is stored in the db).

    Your php code is also not suitable for functions.php. You should not ideally run code here as it will run for every load, you should only define functions here and add_actions or filters to run the functions as needed. research these as well.

    My advice to you would be to learn the load pattern of wp (https://theme.fm/2011/09/wordpress-internals-how-wordpress-boots-up-2315) then you easily understand where to add your code.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘how can add jquery code in metabox?’ is closed to new replies.

Tags