Show content from external php file with GET parameter inside div - javascript

Im struggling to make links for files appear on same page inside DIV.
Simply nothing happens when I a href click link, no links appear.. however I can see links when I'm going directly to example.com/ajaxdetails.php?id=OneOftheIDs
Here is mine main HTML file:
<script src="/jquery-1.11.2.min.js"></script>
<script>
function getSummary(id)
{
$.ajax({
type: "GET",
url: "detailsajax.php",
data: "id=" + id,
success: function(data) {
$('#returned-details').html(data);
}
});
}
</script>
PHP part:
foreach ($pirmiRezai as $key=>$rezultatas)
{ $i++;
echo '<div class="r">
'.$rezultatas['desc'].'
Some unrelated php code here
<div id="returned-details"></div>
</div>';
if($i>=10)
break;
}
And the detailsajax.php file contains simple textarea with returned download link from database for specific ID (detailsajax.php?id=random). I need that html code with returned download link to appear inside returned-details DIV next to a href that was clicked.
Hope its clear.

First of all id's should be always unique or else u could replace it with the class attribute.In your case something like this might help u mate.. :)
Script
<script src="/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
$(".r a").on("click", function() {
var id = $(this).attr("myId");
$.ajax({
type: "GET",
url: "detailsajax.php",
data: "id=" + id,
context: this,
success: function(data) {
$(this).next('.returned-details').html(data);
}
});
});
});
</script>
PHP
foreach ($pirmiRezai as $key=>$rezultatas)
{ $i++;
echo '<div class="r">
'.$rezultatas['desc'].'
Some unrelated php code here
<div class="returned-details"></div>
</div>';
if($i>=10)
break;
}

Related

How refresh particular div without reload whole page?

<div id="success_hold">
<?php
if($row['mandate_end']!=date('Y-m-d') && $row['job_position']=='unhold')
{
echo '<span class="badge badge-success">Open</span>';
}
else
{
echo '<span class="badge badge-warning">Hold</span>';
}
?>
</div>
<script>
$(document).ready(function(){
var flag = 1;
$(".hold").click(function(){
job_id = this.id;
if(flag == 1)
{
$.ajax({
type:"POST",
data:{"job_id":job_id},
url:"<?php echo base_url(); ?>pausehold",
success:function(data){
$("#success_hold").load("#success_hold");
}
});
flag = 0;
}
else
{
$.ajax({
type:"POST",
data:{"job_id":job_id},
url:"<?php echo base_url(); ?>resumehold",
success:function(data){
$("#success_hold").load("#success_hold");
}
});
flag = 1;
}
});
});
</script>
I have div where id="success_hold". Now, what happens when I click on class="hold" I am updating my data. Now, I want to refresh my <div id="success_hold"> without reload whole page where I am using .load() function But the problem is that when I use .load() the function shows the whole page in success_hold. So, How can I fix this issue? I want to refresh only success_hold.
Thank You
The problem is because load() is used to make another AJAX request and place the a portion of the HTML retrieved from that request in the target element.
As you're already making an AJAX request to get the data, which is presumably HTML, you simply need to append() data to the container.
Also note that the only difference between the two sides of your condition is the URL the request is sent to, so you can easily DRY this code up:
$(document).ready(function() {
var flag = true;
$(".hold").click(function() {
var url = '<?php echo base_url(); ?>' + (flag ? 'pausehold' : 'resumehold');
flag = !flag;
$.ajax({
type: "POST",
data: { job_id: this.id },
url: url,
success: function(data) {
$("#success_hold").append(data);
}
});
});
});
If data contains the entire page, then you should change that PHP file to return only the relevant HTML as it will help to speed up the request. If, for whatever reason, you can't do that then you can extract the required element from the response like this:
$("#success_hold").append($(data).find('#success_hold'));
success:function(data){
$("#success_hold").load("#success_hold");
}
This is your success method in ajax. You want to pur the content of data into your div #success_hold ?
If you want that, just do this :
success:function(data){
$("#success_hold").html(data);
}

Ajax test (wordpress)

So, I have been struggling with making ajax work.
Here is my previous question: AJAX (admin_url('admin-ajax.php');?action=) Not Found
Anyway, I decided to narrow down and only have necessary files.
Here is the set up.
test.php
<div class="test">
Items
</div>
<div id="test_demo"> </div>
<script>
jQuery(document).ready(function() {
jQuery('.test a').click(function(e) {
e.preventDefault();
var tab_id = jQuery('this').attr('id');
jQuery.ajax({
type: "GET",
url: "<?php echo admin_url('admin-ajax.php'); ?>",
dataType: 'html',
data: ({ action: 'test_tab', id: tab_id}),
success: function(data){
jQuery('#test_' + tab_id).html(data);
},
error: function(data)
{
alert("Error!");
return false;
}
});
});
});
</script>
function.php
function test_tab_callback() {
$template_part_path = 'page-parts/test_' . $_GET['id'];
get_template_part($template_part_path);
exit;
}
add_action('wp_ajax_test_tab', 'test_tab_callback');
add_action('wp_ajax_nopriv_test_tab', 'test_tab_callback');
test_demo.php
<div id="test_demo_content">Demo Content</div>
Here is the my idea on how it should work.
test.php: When user clicks Items button, then the tab_idvariable in the jQuery saves the anchor id (in this case, it will be id="demo").
Then admin-ajax.php is called.
The saved id ("demo") is then passed onto the function.php and it is used in the variable $template_part_path = 'page-parts/test_' . $_GET['id']; which gives page-parts/test_demo for test_demo.php
Then the template part is called and calledback to the jQuery.
Then the data is "insert" into the jQuery('#test_' + tab_id).html(data); which is id="test_demo.
The test_demo.php content should be displayed in the #test_demo div.
But it is not working. I used console.log(data) but showed no result.
What am I doing wrong?
When your getting the jquery object of "this" you can't use the quotes. This was making tab_id as undefined and ruining the rest.
Here is what I mean:
http://jsfiddle.net/7r1dg7L4/2/
jQuery(document).ready(function() {
jQuery('.test a').click(function(e) {
e.preventDefault();
var tab_id = jQuery(this).attr('id');
alert(tab_id);
});
});

div content after html() is not showing

I've got an issue with an ajax call and .html(), as you can see with the javascript below i'm using the geoloc callback to make a ajax call and refresh the content of a div.
The id of the div can be either "result-shops-ajax-desktop" or "result-shops-ajax-mobile" and in my case the php variable $type = "desktop"
The problem is that the content of the div is not reloaded despite the use of .html()
My ajax call is working because msg.response got the content i want. The .html() seems to work because the alert show the content of msg.response but I can't see it on the page :/
Another thing is weird when i put directly the id of the div, the content is shown, but when i echo the $type it's not working despite the fact that the html produced is good (the id of the div is "result-shops-ajax-desktop").
I hoped i made myself clear with my bad english, i would really appreciate any help for this weird issue.
Thanks !
Here is the javascript in my php file :
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
function geolocShow(position) {
$.ajax({
type: "POST",
url: "<?php echo $this->getUrl('shops/index/checkavailability'); ?>",
dataType : "json",
data: "sku=<?php echo $product->getSku(); ?>&lat="+position.coords.latitude+"&lng="+position.coords.longitude,
success: function(msg){
$("#result-shops-ajax-<?php echo trim($type); ?>").html(msg.response);
alert($("#result-shops-ajax-<?php echo trim($type); ?>").html());
}
});
}
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geolocShow);
}
});
</script>
The html generated:
jQuery.noConflict();
jQuery(document).ready(function($){
function geolocShow(position) {
$.ajax({
type: "POST",
url: "http://localhost/shops/index/checkavailability/",
dataType : "json",
data: "sku=abc&lat="+position.coords.latitude+"&lng="+position.coords.longitude,
success: function(msg){
$("#result-shops-ajax-desktop").html(msg.response);
alert($("#result-shops-ajax-desktop").html());
}
});
}
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geolocShow);
}
});
Try this: jQuery(document).ready(function($){ this line change to $(window).load(function(){

sending span text to another page with JS and php

I have a dynamically changing span on a page displaying the number of votes a project has received. On another (target) page i have a list of projects. i want to be able to display that vote count there. i know how to grab the text from the span on the page.
it would be something like this.
<span id="count1"></span>
var prj1c = $("#count1").text;
in know that on the other page i end up using
<?php echo $prj1c(this being after i assign the prj1c var to php somewhere) ?>
i also know i could create a php include page and call it on the target page, though i would like not to create a separate page for each of these instances.
so to sum up: how do i change a JS var to php and call it from another page- remember the text in the span changes (when users vote up or down)?
Try this, use .text() instead of .text
var prj1c = $("#count1").text(); //instead of var prj1c = $("#count1").text;
$.ajax({
type: "POST",
url: "yourpage.php",
data: {count :prj1c},
success: function(response) {
alert("Response "+response);
}
});
in yourpage.php add this <?php echo $_POST['count']; ?>
Update:
$(function(){
$("#count1").click(function(){
window.location='page2.php?count='+$(this).text();
});
});
in page2.php:
<ul>
<li id="projectName">
<img><span>vote count goes HERE: <?php echo $_GET['count']; ?></span>
</li></ul>
You can try with jQuery Ajax request. When user vote up/down you can make an ajax call to the target page.
Eg.
var prj1c = $("#count1").text();
$.ajax({
type: "POST",
url: "targetPage.php",
data: "count="+prj1c,
success: function(response) {
alert("Response "+response);
}
});
Get the prj1c value in targetPage.php
$prj1c = $_REQUEST['count'];
// Follow appropriate steps later in targetPage.php

PHP removing everything after HTML tags

I have a contenteditable div like this:
<form>
<div name="new_post" class="post" contenteditable="true"></div>
<button type="submit">Submit</button>
</form>
The contenteditable div allows bold and italic tags, but no other tag.
My issue is that if the user types something like Hello there <u>world</u>!, it will save in the database as Hello there. It seems to remove everything after the tags and I don't know why.
I'm using AJAX and PHP to handle posts, so here's the rest of the code.
Ajax:
$(document).ready(function() {
$(document).on("submit", "form", function(event) {
event.preventDefault();
alert($('.post').html()); // added this to debug it. This prints "Hello there <u>world</u>!"
$.ajax({
url: 'php/post.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize() + "&post_field=" + $('.post').html(),
success: function(data) {
alert(data.message);
}
});
});
});
PHP:
<?php
$post = $_POST["post_field"];
// query to insert post into database goes here
$array = array('message' => $post);
echo json_encode($array);
?>
Please help!
Change:
$('.post').html()
to:
encodeURIComponent($('.post').html())
The HTML characters need to be encoded in a URL parameter.

Categories