Insert a jQuery value in a php

Question

I've some buttons on a page and I wanna make a div with the content of a WordPress post to be show only when the related button is clicked.

Once I have so many buttons and posts, I was wondering if that is a way to get the value with the name of the button ID that will be clicked with jQuery and since the post name related is the same, insert it on php to get the content.

I'm not sure if I could do something like this:

<div id="btn-group">
<button id="History">History</button>
<button id="Mathematic">Mathematic</button>
<button id="Geography">Geography</button>
<button id="Biology">Biology</button>
</div>

<div id="pages-content">
<?php $page = get_page_by_title( '*something to put the var currentID*' ); echo apply_filters('the_content', $p->post_content);?>
</div>

And the jQuery

    jQuery(document.body).click(function(evt){
      var clicked = evt.target;
      var currentID = clicked.id;
    })

// show the div only when the button is clicked    
    jQuery(document).on('click', function(e) {
        if ( jQuery(e.target).closest('#btn-group').length ) {
            jQuery('#pages-content').show();
        }
    });

Ajax for Wordpress is your friend, its a bit messy at the beginning, but it works fine and its the only way that I know to share information between PHP and JS — Jordi Vicens
– Jordi Vicens, Commented Nov 20, 2017 at 12:58
Use Ajax or as alternative you could hide div with post content and then show it when button is clicked. — Zvezdas1989
– Zvezdas1989, Commented Nov 20, 2017 at 13:00
JQuery happens on browser, PHP happens on server. If you need communicate each other you can use Ajax. — José M. Carnero
– José M. Carnero, Commented Nov 20, 2017 at 13:00
I see! But I'm not sure how to use Ajax... sorry for my bad knowledge — crloa
– crloa, Commented Nov 20, 2017 at 13:11

Giulio Bambini · Accepted Answer · 2017-11-20 14:10:40Z

3

That's possible and in more cooler way :)

OK, lets dig into code.

HTML Side:

<div id="btn-group">
    <button id="History" onclick = function() {getData(1)};>History</button>
    <button id="Mathematic" onclick = function() {getData(2)};>Mathematic</button>
    <button id="Geography" onclick=function() {getData(3)};>Geography</button>
    <button id="Biology" onclick = function() {getData(4)};>Biology</button>
</div>

<div id="pages-content">

</div>

Now we have added alert function to HTML content, but we need to create this function, I mean we need to write logic how this function works.

<script>
    function getData(code)
    { 
        var code = code; //we know that each code describes each subject, that's preliminary known for programmer
        var formData = new FormData(); //we create formData object to send data with it to server
            formData.append("SubjectCode", code); //we have sent code value with name "SubjectCode", it's actually like sending data from php via "Submit" button
        var xmlHttp = new XMLHTTPRequest(); //we create XHR Object
            xmlHttp.onreadystatechange = function()
            {
                if(xmlHttp.readyState === 4 && xmlHttp.status === 200)
                { 
                    var responseText = JSON.parse(xmlHttp.responseText);
                    var div = document.querySelector("#pages-content");
                     div.innerHTML = responseText;
                }
            } //here we are monitoring request status
            xmlHttp.open("POST", "Server.php"); //same like method="POST" action="server.php", but you write here and not in html form
            xmlHttp.send(formData); //what are we sending to server.
    }    
</script>

And server side (PHP):

<?php
    $subjectCode = $_POST["SubjectCode"];
    //select * WHERE `subjectCode` = our subject
    //and output that data so that ajax function could receive it..
?>

That's all, after that you will have complete asynchronous functionality related to content output.

edited Nov 20, 2017 at 14:10

answered Nov 20, 2017 at 13:12

Giulio Bambini

4,7554 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Giulio Bambini Over a year ago

Can you tell me what exactly didn't work ? show me screen or something

crloa Over a year ago

I inserted the script on my js file and put this on the php

<?php global $post; ?> <?php if(is_page('Projetos e Agentes')){ ?>  <div id="btn-group">     <button id="ANAC" onclick="function() {getData(1)};">ANAC</button>     <button id="ADEMG" onclick="function() {getData(2)};">ADEMG</button> </div>  <div id="pages-content"> <?php $my_post = get_page_by_title( $subjectCode = $_POST["SubjectCode"], OBJECT, 'post' );?><?php echo $my_post->post_content;?> </div> 				 <?php } ?>

Giulio Bambini Over a year ago

I can help you if you send me teamviewer user/pass and it will be faster for both of us to solve this problem. Also it will be easier to explain some of the key parts

crloa Over a year ago

user: 313 321 389 / pass: z77ya9 ! Thanks a lot!!

Giulio Bambini Over a year ago

if additional help needed, just add me on skype -> dato-deme :)

|

Vishal Lunagariya · Accepted Answer · 2017-11-20 13:28:20Z

HTML :-

<div id="btn-group">
    <button class="sub-btn" value="History" id="History">History</button>
    <button class="sub-btn" value="Mathematic" id="Mathematic">Mathematic</button>
    <button class="sub-btn" value="Geography" id="Geography">Geography</button>
    <button class="sub-btn" value="Biology" id="Biology">Biology</button>
</div>
<div id="pages-content">

</div>

jQuery :-

<script type="text/javascript">
    $(document).ready(function () {
        $(".sub-btn").click(function (e) {
            e.preventDefault();
            var $this = $(this);
            $.ajax({
                url: 'server.php',
                type: 'POST',
                data: {SubjectCode: $this.val()},
                success: function (result) {
                    $("#pages-content").html(result);
                }
            });
        });
    });
</script>

PHP :-

<?php
$subjectcode = $_POST['SubjectCode'];

Collectives™ on Stack Overflow

Insert a jQuery value in a php

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related