Using Ajax to change shortcode IDs on page in WordPress - php

I have a custom PHP page in WordPress and need to display buttons connected to a map plugin's shortcode. Each button needs to change the map displayed on the page. The Ajax action is working, but only displays the map's ID, not the full shortcode.
I found a similar post here on StackOverflow doing something similar with Contact Form 7 shortcodes.
Javascript used:
<script type="text/javascript">
$(function () {
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
$('.button-map').click(function () {
$.ajax({
url: ajaxurl, //global variable provided by WP
type: 'GET',
data: {
'action': 'get_map_frame',
'map_id': $(this).data('id')
},
success: function (data) {
$('#map_area').html(data);
}
});
});
});
</script>
Ajax Call in functions.php:
add_action('wp_ajax_get_map_frame', 'get_map_frame');
add_action('wp_ajax_nopriv_get_map_frame', 'get_map_frame' );
function get_map_frame() {
if (isset($_GET['map_id'])) {
$map_id = (int) $_GET['map_id'];
echo do_shortcode('[cspm_main_map id="' . $map_id . '"]');
}
exit();
}
On-page code HTML:
<div class="w-col w-col-12">
<div class="column-29 w-col w-col-3">
<div><a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5425">Dining and Drinks</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5695">Entertainment and Transportation</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5697">Shopping</a>
</div>
</div>
<div class="column-30 w-col w-col-3">
<div>
<a duplicate="fp-link-1" href="#" class="button-map stu w-button" data-id="5698">Pets and Parks</a>
</div>
</div>
<div id="map_area"></div>
</div>
What I'm trying to achieve is each button pulls up its individual map associated with the map ID. Currently when the button is clicked it only returns the actual map ID on the page, but not the rest of the shortcode to display the map intended.
http://aopmap.villagegreenmarketingservices.com/test123/

Related

Popover stops working after refreshing div?

I have anchor tags that when clicked, create popovers. After clicking a button in the popover, an ajax call is made which updates a database. The popover disappears and the div containing the popover anchor tags is refreshed. Following the div refresh, the anchor tags no longer display the popovers when clicked and when an anchor tag is hovered, it displays a title equal to the popover title. What is causing the popover not to work after a div refresh?
div that gets refreshed
<div class="content" id="content">
<div class="row">
<div class="col-3 heading">A</div>
<div class="col-3 heading">B</div>
</div>
<div class="row">
<a href="#" class="col-3 data
edit" data-toggle="popover" data-trigger:'click' data-html="true"
data-placement="top" title=""
data-content="
<div id='error'></div>
<form id='editForm'>
<input type='number' maxlength='5'class='form-control'
name='newAmount' id='newAmount'
value=''placeholder='New Amount'>
<br>
<input type='hidden' value='Car/Auto' name='catName'id='catName'>
<input type='submit' class='btn btn-primary btnPopover form-
control' value='Change'id='btnEdit' name='btnEdit'>
<a class='btn btn-warning btnPopover form-control'
id='btnCancelEdit'>Cancel</a>
</form>"
data-original-title="<div class='popoverTitle'>Edit </div>">
$900</a>
<div class="col-3 data">$500</div>
</div>
</div>
jquery to originally initialize popovers
$(function () {
loadPopovers();
})
function loadPopovers() {
$('[data-toggle="popover"]').popover();
$('.edit').click(function(){
$(this).popover('show');
$('[data-toggle="popover"]').not(this).popover('hide');
});
}
jquery ajax for div refresh
$(document).on('click','#btnEdit',function(e){
e.preventDefault();
var newAmount = $('#newAmount').val();
if(newAmount.length == 0){
document.getElementById("error").innerHTML = "<span
class='error'>Type a new amount or click cancel.</span>";
}else {
$.ajax({
type: 'post',
url: 'edit.php',
dataType: "json",
data: $('form').serialize(),
success: function (response) {
if(response.status === 'success'){
//Refresh div data
$.get("dataRefresh.php", {},
function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
}
}
});
}
});
Change
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
To
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
});
If you are going to use direct bindings, you have to run them after the data is rebuilt.

Div not showing in a jQuery Ajax Call

I have a page using bootstrap 3 framework that has a button which when pressed collects data from another page (mydata.php) with ajax and echoes it out within <div id="results"> on the page. The code works fine but as soon as I add <div class=\"col-xs-6\"> to mydata.php nothing appears on the page although I can see it within firebug.
If I change $("#results").append(html); to $("#results").text(html); the html echoes onto the page but as text without any formatting. If I remove <div class=\"col-xs-6\"> from mypage.php the data gets displayed on the page as expected. Why is the data from mydata.php not displayed when I add <div class=\"col-xs-6\">?
<div class="container">
<div class="row">
<div class="col-xs-12 col-centered">
<div class="col-xs-8 col-md-3 col-lg-3">
<button type="submit" name="btn" value="search" id="myButton" class="search_button btn btn-small btn-default btn-pull-right">Press</button>
</button>
</div>
</div>
</div>
<div class="row">
<div id="results"><!--data displayed here-->
</div>
</div><!--Row-->
</div><!--Cont-->
jQuery
$(document).ready(function(){
$(function() {
$("#myButton").click(function() {
var btn = $("#myButton").val();
var data = 'btn='+ btn;
// if location is not empty
if(data) {
// ajax call
$.ajax({
type: "POST",
url: "mydata.php",
data: data,
success: function(html){
$("#results").append(html);
}
});
}
return false;
});
});
});
mydata.php looks like this:
<?php
if (isset($_POST['btn'])) {
echo "
<div class=\"col-xs-6\">
<ul>
<li><h4>Data in this Div</h4></li>
</ul>
</div>
<div class=\"col-xs-6\">
<ul>
<li><h4>And Data in this Div</h4></li>
</ul>
</div>";
}
?>
if you do not add jQuery library then include it
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-xs-12 col-centered">
<div class="col-xs-8 col-md-3 col-lg-3">
<button type="submit" name="btn" value="search" id="myButton"
class="search_button btn btn-small btn-default btn-pull-right">Press
</button>
</button>
</div>
</div>
</div>
<div class="row">
<div id="results"><!--data displayed here-->
</div>
</div><!--Row-->
</div><!--Cont-->
<script>
$(document).ready(function () {
$(function () {
$("#myButton").click(function () {
var btn = $("#myButton").val();
var data = 'btn=' + btn;
// if location is not empty
if (data) {
// ajax call
$.ajax({
type: "POST",
url: "http://localhost/edit.php", // your file path
data: data,
success: function (html) {
$("#results").append(html); // if you want to replace results div then change $("#results").html(html);
}
});
}
return false;
});
});
});
</script>
it is working fine my side, i have tested in my local side
this is output:
Removing the ajax part works without problems... Are you sure you are receiving that exact HTML?
$('#result').append("<div class=\"col-xs-6\">"+
"<ul>"+
"<li><h4>Data in this Div</h4></li>"+
"</ul>"+
"</div>"+
""+
"<div class=\"col-xs-6\">"+
""+
"<ul>"+
"<li><h4>And Data in this Div</h4></li>"+
"</ul>"+
"</div>");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
</div>
$('#myButton').on('click',function(){
var form = jQuery("#form");
$.ajax({
url: 'mydata.php',
type: 'POST',
data: form.serialize(),
cache: false,
dataType : 'json',
success: function(data){
if(data==true){
$("#results").append(data);
}
if(data==false){
}
},
error: function(){
}
});
return false;
});

Change input type number value using jquery

All the other attribute changes seem to work fine inside the modal. The rating button inside the modal doesn't load its value on loading. But the inspect element seems to display the proper rating value.
I am new to php and jquery. Kindly excuse me from silly programming methodologies implemented in the above mentioned code.
Any help would be deeply appreciated.
HTML :
<div class="item" style="width: 400px; height: 230px">
<!-- Link trigger modal -->
<a data-img-url="upload/<?php echo $row['image_name'] ?>" data-toggle=
"modal" href="#myModal" id="<?php echo $row['image_id'] ?>" onclick=
"modalload(this.id, '<?php echo $row['image_title'] ?>' , '<?php echo $row['image_description'] ?>', <?php echo $TAVG ?> );"><img class="img-responsive carousal_scale"
src="upload/%3C?php%20echo%20$row['image_name']%20?%3E"></a>
<div class="carousel-caption">
<p><?php echo $row['image_title'] ?></p>
</div>
</div><!-- Modal -->
<div class="modal fade modal-dialog modal-content" id="myModal" tabindex="-1">
<div class="modal-header">
<button class="close" data-dismiss="modal" type=
"button"><span>×</span><span class="sr-only">Close</span></button>
<h2 class="modal-title" id="myModalLabel"></h2>
</div>
<div class="modal-body well">
<img class="img-responsive carousal_scale" src=""> <input class="rating"
data-size="xs" id="" max="5" min="0" onchange="test(this.id, this.value);"
step="0.1" style="alignment-adjust: auto;" type="number" value="">
</div>
<div>
<p style="text-align: center; font-size: 15px;"></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type=
"button">Close</button>
</div>
</div>
JS :
$(document).ready(function() {
$(".rating-kv").rating();
});
function modalload(id, title, description, avg) {
alert(avg);
// alert(description);
$('#myModal img').attr('src', $('#' + id).attr('data-img-url'));
$('#myModal input').attr('value', avg);
$('#myModal input').attr('id', id);
$('#myModal h2').text(title);
$('#myModal p').text(description);
}
function test(id, val) {
var pic_id = id;
var pic_val = val;
$.ajax({
type: 'POST',
url: 'rating.php',
data: {
'pic_id': pic_id,
'pic_val': pic_val
},
}).done(function(data) {
// alert(data);
});
}
"The rating button inside the modal doesn't load its value on loading." You currently have your modalload()function only activate on click of an a tag so your rating isn't going to get it's value/id populated on load, but rather on click.
Try this instead inside your modalload() function,
$('.rating').attr('value', avg);
$('.rating').attr('id', id);
Also, note that there is no jQuery rating() function, and that you have no element with the class rating-kv in your HTML, therefore the below code will do nothing.
$(".rating-kv").rating();
In other words, you have a lot of bad coding practices and incomplete code. You should consider revising what you have and re posting it.

Ajax not posting the variable to another page

Hi I have problem of sending my variable to another PHP page using ajax.
My problem is am getting the id of the element from main page. Its for edit operation.
Main page modal:
<a href='javascript:' data-id={$row['customer_id']} class='btn small bg-blue-alt tooltip-button modal-customeredit' data-placement='top' title='Edit'><i class='glyph-icon icon-edit' ></i>
</a>
it will open modal on same page:
<div class="hide" id="modal-projedit" title="Edit Project Info">
<div class="pad10A">
<h3>Edit Project Info</h3>
<p class="font-gray-dark"> Fides Admin uses colors & styles from both the default theme color schemes and the included core color helpers. </p>
<div class="divider mrg25B"></div>
<form id="project-edit" action="" class="col-md-12 center-margin" method="">
<div class="form-row">
<div class="form-label col-md-3">
<label for="name">
Project Name:
<span class="required">*</span>
</label>
</div>
<div class="form-input col-md-9">
<input id="project_name" name="project_name" placeholder="Name" data-required="true" class="parsley-validated" type="text">
</div>
</div>
<div class="divider"></div>
<div class="form-row">
<div class="form-input col-md-8 col-md-offset-3">
<a href="javascript:;" class="btn medium primary-bg radius-all-4" id="project-edit-valid" onclick="javascript:$('#project-edit').parsley( 'validate' );" title="Validate!">
<span class="button-content">
Update
</span>
</a>
</div>
</div>
</form>
</div>
</div>
SCRIPT:
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).data('id');
alert( myGroupId);
$.ajax({
type: "POST",
url: "sample.php",
data: { id: myGroupId }, // data retrieve on server-side ($_POST['id'])
})
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
});
Try the following:
Change the ajax function,
var myGroupId = $(this).attr('data-id'); // data-id
data = {'id':myGroupId };
$.ajax({
type: "POST",
url: "sample.php",
data: data, // data retrieve on server-side ($_POST['id'])
success:function(response){
alert(response); //do the rest of operations.
}
});
You didn't mention what the alert says.
Though I guess it shows a Null value since the ajax request seems good.
My bet goes for your selector, try this :
var myGroupId = $(this).attr('data-id');
HTML (with quotes) :
<a href="javascript:void(0)" data-id="{$row['customer_id']}" class="...">
<i class='glyph-icon icon-edit' ></i>
</a>
jQuery (width data-id and callback):
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).attr('data-id'); // data-id
$.ajax({
type: "POST",
url: "sample.php",
data: { id: myGroupId },
}).done(function(response) { // data returned by server
var d = $('<div id="dialog">'+response+'</div>').appendTo('body');
d.load(function(){
$( "#dialog").dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
});
});
You will not get the value because you are using echo to your php code in data-id attribute.
This is what you need to do to your html
<a href="javascript:void(0)" data-id="<?php echo $row['customer_id']?>" class="...">
<i class='glyph-icon icon-edit' ></i>
</a>
and use #seenath's code to check if you get the value

jQuery AJAX response not displaying PHP

I don't know what I am doing wrong, but the PHP does run (I can notice it with the POST data on Firebug), but isn't echoed.
Here's my JS file :
$('.table_item').click(function() {
var ticket_nbr = $(this).children('td').attr("class");
var dataString = 'ticket_nbr='+ ticket_nbr;
$.ajax({
url: 'display.php',
type: 'POST',
data: dataString,
success: function(data) {
console.log(data);
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
error: function(e) {
console.log(e)
}
});
});
and the called PHP file :
if($_POST)
{
$ticket_nbr=$_POST['ticket_nbr'];
?>
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
<?php
}
And here's the output I get on Firebug :
<div id="DisplayTicket" class="ui large modal transition hidden" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
ticket_3 // The post data sent
</div>
<div class="content">
<p>Merci, <span class="test_display"></span>.
</div>
</div>
Any help or hint would be great !
Thanks.
You're returning HTML but never adding it to body
success: function(data) {
console.log(data);
$(data).appendTo('body'); // <----------------------
$("#DisplayTicket").modal('setting', 'transition', 'vertical flip').modal('show');
},
Also, ideally dataString = 'ticket_nbr='+ ticket_nbr should be dataString = {'ticket_nbr': ticket_nbr}
You have to show/append the below div in the body or div.
<div id="DisplayTicket" class="ui large modal transition active visible" style="margin-top: -110px;">
<i class="close icon"></i>
<div class="header">
<?php echo $ticket_nbr; ?>
</div>
</div>
then use the below code on success.
$('#DisplayTicket').addClass('active');
$('#DisplayTicket').css('visibility','visible');

Categories