1

I built a menu for a page that displays array data by week and day. The menu is laid out with links for Day-1 | Day-2 | Day-3 ... thru Day-7. I then have a variable $day_number that I use to select a day row from an array to display content on the page. I can change the day displayed on the page manually by changing the $day_number value. I want to set up the menu to update the variable on click.

I was able to set up onClick function calls for each menu item, but then I have the problem of setting the variable $day_number outside of the function. Since I am calling the function from the I can't use the return result.

Here is the current menu structure. I am open to another option other than using the onClick function call.

<ul class="topnav" id="myTopnav">
    <li class="dayLink" id="day_1"><a href="#" onClick="setDay('Day1');">Day 1</a></li>
    <li class="dayLink" id="day_2"><a href="#" onClick="setDay('Day2');">Day 2</a></li>
    <li class="dayLink" id="day_3"><a href="#" onClick="setDay('Day3');">Day 3</a></li>
    <li class="dayLink" id="day_4"><a href="#" onClick="setDay('Day4');">Day 4</a></li>
    <li class="dayLink" id="day_5"><a href="#" onClick="setDay('Day5');">Day 5</a></li>
    <li class="dayLink" id="day_6"><a href="#" onClick="setDay('Day6');">Day 6</a></li>
    <li class="dayLink" id="day_7"><a href="#" onClick="setDay('Day7');">Day 7</a></li>
</ul>

Here is the function run by the onClick. It passes the setDay value so I know what day link was clicked. This works fine but I need to have the click event set the value for $day_number outside the function.

<script type="text/javascript">
function setDay($day)
{
    console.log($day);
}
</script>
  • instead adding on click directly in code use id of li to get the same value you are passing in setDay. jQuery('.dayLink a').click(function() { console.log(jQuery(this).closest('.dayLink').attr('id')); }) – BlueSuiter Jan 27 '17 at 6:56
  • This is what I was originally trying to do but having trouble getting the template script to recognize jQuery. It is supposed to be part of WordPress, but when I add the necessary opening statement (jQuery(document).ready(function($){) it still does not work. – David Cook Jan 27 '17 at 13:25
  • You can add this in template.php – BlueSuiter Jan 27 '17 at 16:06
  • I tried it in the template before and it did not work. On closer inspection the closing brackets are out of order. It now works. Question: How do I assign the var li_id to a php variable outside of the jQuery script? – David Cook Jan 27 '17 at 16:56
1

By this you can pass the value using ajax, you have fetch value from $_POST in your php script

jQuery(document).ready(function(){
  jQuery('.dayLink a').click(function(){
     var li_id = jQuery(this).closest('.dayLink').attr('id');
     jQuery.ajax({
        url: 'url_to_php_script',
        data: {dayValue: li_id,action:call_to_ajax},
        method: 'POST',
        success: function(res){
            console.log(res);
        }
     })
  });
});

The closing brackets were out of order.

<?php
if(isset($_GET['li_id'])){
    $test = $_GET['li_id'];
    echo $test;
    }
?>

New php script added to echo the value passed with the POST method.

Below is the entire script in the php file.

<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.dayLink a').click(function(){
  var li_id = jQuery(this).closest('.dayLink').attr('id');
  jQuery.ajax({
    url: 'https://grat-itudefitness/wp-content/themes/divi-child-gratitudefitness/includes/b2p_program_navigation.php',
    data: {dayValue: li_id},
    method: 'POST',
    success: function(res){
      console.log(res);
      }
    })
  });
});
</script>

<?php
if(isset($_GET['li_id'])){
  $test = $_GET['li_id'];
  echo $test;
  }
?>

<!-- Exercise Menu -->
<ul class="topnav" id="myTopnav">
  <li class="dayLink" id="day_1"><a href="javascript:void(0)">Day 1</a></li>
  <li class="dayLink" id="day_2"><a href="javascript:void(0)">Day 2</a></li>       
  <li class="dayLink" id="day_3"><a href="javascript:void(0)">Day 3</a></li>
  <li class="dayLink" id="day_4"><a href="javascript:void(0)">Day 4</a></li>
  <li class="dayLink" id="day_5"><a href="javascript:void(0)">Day 5</a></li>
  <li class="dayLink" id="day_6"><a href="javascript:void(0)">Day 6</a></li>
  <li class="dayLink" id="day_7"><a href="javascript:void(0)">Day 7</a></li>
</ul>

The code you need::

** Code to keep in template file **

<?php
  $actionName = 'callMyAjax';
  $nonce = wp_create_nonce($actionName);
?>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery('.dayLink a').click(function(){
  var li_id = jQuery(this).closest('.dayLink').attr('id');
  jQuery.ajax({
    url: 'https://example.com/wp-admin/admin-ajax.php',
    data: {dayValue: li_id,action:<?php echo $actionName; ?>,ajaxOrigin:<?php echo $nonce; ?>},
    method: 'POST',
    success: function(res){
      console.log(res);
      }
    })
  });
});
</script>

** Code to keep in Functions **

<?php
function myAjaxHanlder()
{
  if(isset($_POST['ajaxOrigin']) && wp_verify_nonce($_POST['ajaxOrigin'], 'callMyAjax')){
    if(isset($_POST['li_id'])){
      $test = $_POST['li_id'];
      echo $test;
    }
  }
}
add_action('wp_ajax_callMyAjax', 'myAjaxHanlder' );
add_action('wp_ajax_nopriv_callMyAjax', 'myAjaxHanlder' );
?>
  • Do I add this to the top of my template.php file or to a separate .js file? If I need this in a separate .js file, how do I tell the template.php file to use the .js file? – David Cook Jan 27 '17 at 13:43
  • i am updating my answer please look into that... – BlueSuiter Jan 27 '17 at 17:17
  • I have updated the script with your update and added some php code to echo the variable passed with the POST method (above in your answer). Now when I click the menu links it reloads the page but I am on seeing the value echo confirming php has the value. – David Cook Jan 27 '17 at 18:52
  • change # with javascript:void(0); it will stop page to reload OR you can try to event handler in the same script::: jQuery('.dayLink a').click(function(e){ e.preventDefault; ..... – BlueSuiter Jan 27 '17 at 18:56
  • Okay great, this prevents the page from reloading, but I am still not seeing the php value echoed by my test script. – David Cook Jan 27 '17 at 19:04

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.