Develop Reference

Ajax Tabs for Wordpress that loads and runs different shortcodes when user changes the tab

How does one execute a shortcode, which is placed in a tab, only when the user clicks on the Tab's Title. How do we do this for five tabs? MY objective is to reduce load time of me website. So, only that content which the user wants must load when he clicks on the tab.
I'm fairly certain the best way to do this is by utilizing Wordpress's admin-ajax.php. I've searched a great deal. And I've found most of the code (I think) to create the AJAX tabs. But, when I fire the code it doesn't show up. Rather the HTML shows us, the AJAX doesn't.
$(document).ready(function() {
$('.my_tabs a').click(function(e) {
e.preventDefault();
var tab_id = $('this').attr('id');
$.ajax({
type: "POST",
url: "wp-admin/admin-ajax.php",
dataType: 'html',
data: ({
action: 'my_tab_menu',
id: tab_id
}),
success: function(data) {
$('#my_tab' + tab_id).html(data);
},
error: function(data) {
alert("Error!");
return false;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_tabs">
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
</div>
<div class="my_section" id="my_tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my_section" id="my_tab2">
<?php echo do_shortcode ('[shortcode-2]'); ?>
</div>
<div class="my_section" id="my_tab3">
<?php echo do_shortcode ('[shortcode-3]'); ?>
</div>
<div class="my_section" id="my_tab4">
<?php echo do_shortcode ('[shortcode-4]'); ?>
</div>
<div class="my_section" id="my_tab5">
<?php echo do_shortcode ('[shortcode-5]'); ?>
</div>
I add all the code directly into the page using a page-builder. So, I'm not using functions.php to add_action for this particular tab that I'm trying to implement.
I found all the code from a similar post on stackover:
Ajax tabs (wordpress)
They call template_parts into the tabs. Where as I want to execute a shortcode.
I'm what you'd call a coding bimbo. All help shall be much appreciated.
Thank you. And if you've managed to read till here, you deserve to have a pleasant day. :D

Okay, so you can't achieve it the way you have laid your template. As soon as you echo the shortcode and the browser renders the page, the shortcode contents must have printed. You need to create a custom-page-template.php, create a page and on that page you need to send the shortcode handler as soon as you click on the tab through GET or POST method using ajax.
In your Custom Template you receive the [shortcode-1]. An example code would be like you see below:
<?php
/*
Template Name: Shortcode Processor
*/
$current_shortcode = $_POST['shortcode_name'];
?>
<div id="shortcode-contents">
<?php echo do_shortcode($current_shortcode); ?>
</div>
Now you have the response in your Ajax Call. You can now inject the success html inside your desired tab.

Try
<button class="tabs" id="my-tabid1" data-target=".my-section1.box">Tab 1</button>
<button class="tabs" id="my-tabid2" data-target=".my-section2.box">Tab 2</button>
<button class="tabs" id="my-tabid3" data-target=".my-section3.box">Tab 3</button>
<div class="my_section1 box active" id="my-tab1">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section2 box" id="my-tab2">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<div class="my-section3 box" id="my_tab3">
<?php echo do_shortcode ('[shortcode-1]'); ?>
</div>
<style>
.box {
display: none;
}
.box.active {
display: block;
}
</style>
<script>
$('.tabs').on('click', function(){
var $target = $($(this).data('target'));
$target.siblings().removeClass('active');
$target.addClass('active');
});
</script>

Javascript function doesn't work after adding content dynamically through ajax

I have a function
function reply(id) {
$('#reply_'+id).toggle();
return false;
}
And Ajax function
<script type="text/javascript">
function post()
{
var comment = document.getElementById("comment").value;
var course_id = document.getElementById("course_id").value;
var user_id = document.getElementById("user_id").value;
if(comment)
{
$.ajax
({
type: 'post',
url: 'comments.php',
data:
{
comment:comment,
course_id:course_id,
user_id:user_id
},
success: function (response)
{
document.getElementById("comment-list").innerHTML=response+document.getElementById("comment-list").innerHTML;
document.getElementById("comment").value="";
}
});
}
return false;
}
</script>
And the content that is added after ajax call
...
...
<p class="text-right"><i class="fa fa-reply"></i> reply</p>
...
...
<div class="row" id="reply_<?php echo $i; ?>" style="display: none;">
...
...
So basically that javascript functions toggle the div and it is working perfectly fine on page refresh but when adding through ajax success call the javascript toggle doesn't work. It will work after I refresh the page.
Anyway to fix this so toggle work when content added through ajax without refresh.
Thanks.

Change your content that is added after ajax call as below:
<p class="text-right">
<a href="#" data-id="<?php echo $i; ?>" class="btn btn-default btn-sm btnReply">
<i class="fa fa-reply"></i> reply</a></p>
and write jquery code as below
$("body").on("click", ".btnReply", function(event){
var id =$(this).attr('data-id');
reply(id);
});

How to change displayed html content in view using jquery - codeigniter

I'm not so sure about how to type this question title, but anyway
I have code like this in my view called content.php
<div class="fix single_content floatleft">
<h2><img src="<?php echo base_url('assets/images/New.png')?>" alt="" width="24" height="24"></img><a href="<?php echo base_url('index.php/Main_Controller/loadKeluhan')?>" >New</a> </h2>
<?php include 'tableLoad.php' ?>
<p class="viewall">view more <i class="fa fa-hand-o-right"></i></p>
</div>
And in its looks like this in tableLoad.php
<div class="fix"><ul id="newTable"><?php
$i=0;
while($i<count($array)){
echo '<li>
<div class="entry_name floatleft"><img src="assets/images/mozilla.png" alt="">'.$array[$i].'</div>
<div class="download-count floatright"><i class="fa fa-download"></i> 4578</div>
</li>';
$i++;
}
?></ul></div>
$array[i] is a forwarded variable from my controller which have list of item I need from my database.
I want to have it refreshed every 2 second so it will change the display if something changed from the database. I use my code in jQuery like this to do it:
$(document).ready(function(){setInterval(function(){
$('#newTable').html("<?php include 'tableLoad.php'; ?>")
}, 2000);});
The problem is that every time jQuery code run, it show nothing and there is no error report in browser's console. The codes in php run well, but the one from jQuery did not.
Can anybody please give me some enlightment?
Thanks in advance and sorry for my bad English
SOLVED
Solution :
I change my js code to Ajax and call function from controller with it like poonam said. The js file become like this :
$(document).ready(function(){
setInterval('autoRefresh_div()', 2000);
});
function autoRefresh_div()
{
$.ajax({
dataType:'text',
type: "POST",
url: BASE_URL+'index.php/Main_Controller/loadKeluhan',
success: function (response){
$("#newTable").html(response);
}
});}
with loadKeluhan is a function in my Main_Controller to load tableLoad view and pass new array value to it.

You should use load()
Try this:
function autoRefresh_div()
{
$("#newTable").load("tableLoad.php");// a function which will load data from other file after x seconds
}
setInterval('autoRefresh_div()', 2000); // refresh div after 2 secs
And use this:
<div class="fix single_content floatleft">
<h2><img src="<?php echo base_url('assets/images/New.png')?>" alt="" width="24" height="24"></img><a href="<?php echo base_url('index.php/Main_Controller/loadKeluhan')?>" >New</a> </h2>
<div class="fix"><ul id="newTable">
<?php include 'tableLoad.php' ?>
</ul>
</div>
<p class="viewall">view more <i class="fa fa-hand-o-right"></i></p>
</div>
Get only <li> from tableLoad.php.
Similarly you can use $.ajax() or $.post() etc instead of load() function and put the response in div or ul.
With $.ajax()
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div()
{
$.ajax({
dataType:'text',
type: "POST",
url: 'url_to_your_file or function',
success: function (response){
$("#newTable").html(response);
}
});
}
setInterval('autoRefresh_div()', 2000); // refresh div after 2 secs
</script>

PHP Code into Javascript

I am using fullcalendar.js and the calendar is working as it should right now. If a user clicks on an entry at the calendar, a modal appears with some information. What I need now is, that those information inside the modal are information from the database, so I would like to insert some PHP code but I have no idea how.
Let me show you which PHP code I would like to use so that the data from my database are displayed at the modal:
<?php
$dates=getPcalInfoOfHour($gl_userid,0,0);
for ($x=0;$x<count($dates["id"]);$x++) {
Title: '".$dates["title"][$x]."';
Selected Date: '".$dates["date"][$x]."';
Selected Time: '".$dates["start"][$x]."' '".$dates["end"][$x]."';
Topic: '".$dates["topic"][$x]."';
Location: '".$dates["location"][$x]."';
Address: '".$dates["address"][$x]."';
}
?>
Here is the part of my Javascript Code where I would like to enter my php code:
eventClick: function(calEvent, jsEvent, view) {
//display a modal
var modal =
'<div class="modal fade">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-body">\
<button type="button" class="close" data-dismiss="modal" style="margin-top:-10px;">×</button>\
<label> <strong>Topic:</strong> Topic</label>\
<label> <strong>Selected Dated:</strong> Date</label>\
<label> <strong>Selected Time:</strong> Time</label>\
<label> <strong>Title:</strong> Title</label>\
<label> <strong>Location:</strong> Location</label>\
<label> <strong>Address:</strong> Address</label>\
<label> <strong>Phone:</strong> Phone</label>\
</div>\
<div class="modal-footer">\
<button type="button" class="btn btn-sm" data-dismiss="modal"><i class="ace-icon fa fa-times"></i> Close Window</button>\
</div>\
</div>\
</div>\
</div>';
var modal = $(modal).appendTo('body');
modal.modal('show').on('hidden', function(){
modal.remove();
});
console.log(calEvent.id);
console.log(jsEvent);
console.log(view);
}
I know that PHP is a server side language and JavaScript is client based language but there must be a way, that my data from the database will be shown inside the modal am I right? I know a little bit about PHP programming but I never wrote something in JavaScript.
I would really appreciate if someone can tell me what my code should look like so that I get my information from the database inside the modal window.
Thanks,
Chris

I believe this would do:
var js_string = "<?php echo $php_string; ?>";

You have to make request to server to php script what will fetch data from DB and generate html.
Example javascript to use with php generated html for modal:
$.post('/script_generating_html.php', params, function(response) {
var modal = $(response).appendTo('body');
modal.modal('show').on('hidden', function(){
modal.remove();
});
});

Think of it this way. PHP generates what the browser will read before sending anything. So if you had the following code
<?php
$data = "Super Important";
?>
<script>
alert("<?php print $data; ?>");
</script>
It would generate for the client
<script>
alert("Super Important");
</script>
If you're going to be working with modifying javascript with php, also look into json_encode()
as another way to acheive the same thing is
<?php
$data = "Super Important";
?>
<script>
alert(<?php print json_encode($data;) ?>);
</script>

Changing two div's with one ajax call

I have a function on my project which allows users to set certain rss source as favourite.
I'm using codeigniter, and my view is something like that:
<a href="#" data-toggle="collapse">
<h5><b> <span class="glyphicon glyphicon-star-empty"></span> Favorites </b></i></h5>
</a>
<ul class="list-unstyled collapse in" id="favorites">
<?php foreach( $source as $fav ) : if( $fav->favourite == 1 ) {?>
<li>
<a id="some_id"> <?php echo $fav->rss_title; ?></a>
</li>
<?php } endforeach; } ?>
</ul>
<!-- all favorite links are placed in a left sidebar....in header, i have a div with different opperations... -->
<div class="col-sm-12">
<?php if ( $isFavourite == 0 ) { ?>
<li><h4><a class="addfav" id='just_id' href="#favorite">Add this Rss Source to Favourites</a></h4></li>
<?php } else { ?>
<li><h4><a class="removefav" id='just_id' href="#favorite">Remove this Rss Source from Favourites</a></h4></li>
<?php } ?>
// and other options ...
</div>
Here is the script where i use ajax:
<script>
$(document).ready(function(){
$(document).on('click','.addfav',function(){
var id=this.id;
$.ajax( {
type: "POST",
data: {id:id},
url: "<?php echo site_url('rssFeedReader/addFavorites'); ?>",
success: function(msg)
{
$("#favorites").append(msg);
}
})
});
});
</script>
Everything is working fine, but i cannot do something...after i add to favourites the link( via 'append' ), I want to change the option in my header from 'Add this Rss Source to favourites' to 'Remove this rss Source to favourites'. I did this, but only work if i reload the page...I want to do this when i add the link with ajax....
How can i change the div which contain those options, in the same ajax call ? Can i do something after the line '$('#favorites').append(msg); ?

If you want to change the option, do this:
$('.addfav').addClass('removefav').removeClass('addfav').text('Remove this Rss Source from Favourites');
after the
$("#favorites").append(msg);
line
This will transform
<a class="addfav" id='just_id' href="#favorite">Add this Rss Source to Favourites</a>
to
<a class="removefav" id='just_id' href="#favorite">Remove this Rss Source from Favourites</a>
and after you can obviously add listener to the object to add fucntionnalities.