Wordpress do shortcode using ajax - javascript

I'm trying to do shortcode by ajax, i'm getting page content using ajax , and shortcode's added to content are displaying like plain text. I was searching for solution but there's nothing that's help me solve this problem.
For example i have metaslider shortcode in content, and i want to display it on several pages. The main problem is that there will be diffrent slider on every page, so i need load sliders depends on their ID.
get page content method:
ajax_get_post: function(postid) {
var loader = $('#pop-single .loader');
loader.show();
var data = {
'action': 'get_single_post',
'post_id': postid
};
$.ajax({
type: 'POST',
url: ajaxurl,
data: data,
success: function(data) {
var content = $('#pop-single .popup');
loader.hide();
content.show();
//console.log(data);
var post = JSON.parse(data),
title = post.post_title,
content = post.post_content;
$('#pop-single h1.title').html(title);
$('#pop-single .content-ajax').html(content);
},
error: function(data) {
alert('nope');
}
});
},
get post php - functions.php
add_action('wp_ajax_get_single_post', 'ajax_get_single_post');
add_action('wp_ajax_nopriv_get_single_post', 'ajax_get_single_post');
function ajax_get_single_post() {
if (!empty($_POST['post_id'])) {
$id = $_POST['post_id'];
$post = get_page($id);
echo json_encode($post);
}
die();
}
Now in same way i want to display any shortode added to content, or maybe there's other way, but it should be done dynamically, that's why im using ajax.
Thank's in advice for any help or example how to do that.

Related

Not receiving data from ajax to php

I want to send data from javascript to another php page where I want to display it. I found that I need to use Ajax to pass the data to php so I tried myself.
My file where is the javascript:
$('#button').on('click', function () {
$.jstree.reference('#albero').select_all();
var selectedElmsIds = [];
var selectedElmsIds = $('#albero').jstree("get_selected", true);
var i = 0;
$.each(selectedElmsIds, function() {
var nomenodo = $('#albero').jstree('get_selected', true)[i].text;
//var idnodo = selectedElmsIds.push(this.id);
var livellonodo = $('#albero').jstree('get_selected', true)[i].parents.length;
//console.log("ID nodo: " + selectedElmsIds.push(this.id) + " Nome nodo: " + $('#albero').jstree('get_selected', true)[i].text);
//console.log("Livello: " + $('#albero').jstree('get_selected', true)[i].parents.length);
i++;
$.ajax({
type: "POST",
data: { 'namenodo': nomenodo,
'levelnodo': livellonodo
},
success: function(data)
{
$("#content").html(data);
}
});
});
});
I want to send the data to another php page which consists of:
<?php echo $_POST["namenodo"]; ?>
But when I try to go to the page there's no data displayed.
This is a very basic mistake I think every beginner (including me) does while posting a data using ajax to another php page.
Your ajax code is actually posting the data to lamiadownline.php (if you are using the variables correctly) but you can't get that data by simply using echo.
Ajax post method post data to your php page (lamiadownline.php) but when you want to echo the same data on the receiver page (lamiadownline.php), you are actually reloading the lamiadownline.php page again which makes the $_POST["namenodo"] value null.
Hope this will help.
First of all you won't be able to see what you have post by browsing to that page.
Secondly, is this
<?php echo $_POST["namenodo"]; ?>
in the current page?
Otherwise, specify the url
$.ajax({
url: "lamiadownline.php",
type: "POST",
data: { 'namenodo': nomenodo,
'levelnodo': livellonodo},
success: function(data) {
$("#content").html(data);
}
});
//try this
$.ajax({
type: "POST",
url:"Your_php_page.php"
data: { namenodo: nomenodo levelnodo: livellonodo},
success: function(data)
{
$("#content").html(data);
}
});

AJAX call returns undefined in Header / form-data

I am trying to get the contents from some autogenerated divs (with php) and put the contents in a php file for further processing. The reason for that is I have counters that count the number of clicks in each div. Now, I ran into a problem. When I echo back the data from the php file, the call is made, but I get undefined in the form-data section of the headers, and NULL if I do var_dump($_POST). I am almost certain I am doing something wrong with the AJAX call. I am inexperienced to say the least in AJAX or Javascript. Any ideas? The code is pasted below. Thanks for any help / ideas.
The AJAX:
$(document).ready(function(e) {
$("form[ajax=true]").submit(function(e) {
e.preventDefault();
var form_data = $(this).find(".test");
var form_url = $(this).attr("action");
var form_method = $(this).attr("method").toUpperCase();
$.ajax({
url: form_url,
type: form_method,
data: form_data,
cache: false,
success: function(returnhtml){
$("#resultcart").html(returnhtml);
}
});
});
});
The PHP is a simple echo. Please advise.
Suppose you have a div
<div id="send_me">
<div class="sub-item">Hello, please send me via ajax</div>
<span class="sub-item">Hello, please send me also via ajax</span>
</div>
Make AJAX request like
$.ajax({
url: 'get_sorted_content.php',
type: 'POST', // GET is default
data: {
yourData: $('#send_me').html()
// in PHP, use $_POST['yourData']
},
success: function(msg) {
alert('Data returned from PHP: ' + msg);
},
error: function(msg) {
alert('AJAX request failed!' + msg);
}
});
Now in PHP, you can access this data passed in the following manner
<?php
// get_sorted_content.php
if(!empty($_POST['yourdata']))
echo 'data received!';
else
echo 'no data received!';
?>
It's sorted. Thanks to everyone. The problem was I didn't respect the pattern parent -> child of the divs. All I needed to do was to wrap everything in another div. I really didn't know this was happening because I was echoing HTML code from PHP.

apply datatables.js style to table loaded by ajax

$(document).on('click', '.manage', function (event)
{
var userid = $(this).data('userid');
$.ajax(
{
type: "POST",
dataType:'html',
url:"../user/ajax/doclist.php",
async:true,
data:{userid:userid,task:'view'},
success:function(html)
{
$('.doclistdiv').html(html);
},
error:function(request,errorType,errorMessage)
{
alert ('error - '+errorType+'with message - '+errorMessage);
},
complete:function(html)
{
}
});
});
as above code shown i'm loading ajax data(as a html) to my page.
in among those data i have table.i want to after loading that table convert to table as table in datatable.js(www.datatables.net/)
i think because data come as a html there server side processing is not working
Try the following in your success section:
var root = $('.doclistdiv');
root.html(html);
root.find('table').dataTable();

Loading content in page via jQuery - codeigniter

I have two views main.php and details.php. In main.php there are numerous content and under each content there is a "view more" button. If somebody clicks view more an ajax call will dynamically load rest of the content from details.php which will fetch the data from database w.r.t the ID of the content. And it's a list style view in details.php.
In the header of main.php my main script file contains this code snippet to fetch data from details.php -
$('.view_more').click(function(e) {
$.ajax({
type: 'POST',
url: '/path/to/my/controller/method',
dataType: 'html',
success: function (html) {
$('#details_container').html(html);
}
});
});
Data is loading perfectly. But the problem is there is a add content button in details.php along with each content which has been loaded dynamically is not working. The content adding script is in my main.js added in main.php. But I have to add this particular jquery code snippet of adding the content in details.php, otherwise it's not working. So, whenever view more is being clicked it is returning html data along with a ....code for adding the content.... stick with it. Which is not at all desired.
How to solve this issue? Please help. Thanks in advance.
Here is the code of adding the content.
<script type="text/javascript">
$('.add_this').click(function(){
var t = jQuery(this);
var id_add = t.attr("id");
var content_category_id = t.attr("rel");
var add_content_id = id_add.substring(id_add.indexOf('_')+1);
var content_creator_id = t.attr("data-clip-id");
$.ajax({
type: "POST",
url: "/path/to/my/controller/method",
data: add_content_id,
cache: false,
success: function(response){
if(response)
{
$("#"+id_clip).text("Clipped");
}
}
});
});
</script>
I want to add again I am able to add the contents but to do so I have to embed this code snippet in details.php that I dont want to do. I need torun from my main script file.
This should work:
$(document).on('click','.add_this',function(){
var t = jQuery(this);
var id_add = t.attr("id");
var content_category_id = t.attr("rel");
var add_content_id = id_add.substring(id_add.indexOf('_')+1);
var content_creator_id = t.attr("data-clip-id");
$.ajax({
type: "POST",
url: "/path/to/my/controller/method",
data: add_content_id,
cache: false,
success: function(response){
if(response)
{
$("#"+id_clip).text("Clipped");
}
}
});
});

Make page refresh if successful login with ajax/jquery

Ajax code
$("#login_btn").click(function() {
var url = "core/login.php";
$.ajax({
type: "POST",
url: url,
data: $("#sr").serialize(),
success: function(data) {
var responseData = jQuery.parseJSON(data);
$('.oops').html('<div class="error">'+responseData.oops+'</div>');
alert(responseData.good);
if(responseData.good === 1) {
alert(good)
location.reload();
}
}
});
});
Php code if everything passes
else {
$_SESSION['id'] = $login;
$good = 1;
exit();
}
How come it's not freshing the page with location.reload? Should I be using .done .try?
Dont refresh, the whole idea of using ajax is that you dont need to.
You can set your sessions in the ajax php script and pull new content based on the change in session.
That being said, you are missing a ';' at
alert(good);

Categories