The following code fetch all data (by clicking a.info link) from a php file "info.php" and prints in the #content div. The problem is that it prints everything from info.php file. Can I possibly select only some part of data from info.php file to load in #content?
The reason to ask this question is that, I want to load different data from the same php file for the different links.
$("a.info").click(function(){
var id=$(this).attr("id");
$("#box").slideDown("slow");
$.ajax({
type: "POST",
data: "id="+$(this).attr("id"),
url: "info.php",
success: function(html){
$("#content").html(html);
}
});
});
Html where content is loading:
<div id="box">
<div id="content"></div>
</div>
info.php
paragraph1.
paragraph2.
For example, In the above info.php file, i only want to load paragraph1 in the #content.
I hope my question is clear. Any help will be appreciated.
Assuming paragraph1 is a div element, change accordingly:
success: function(html){
var p1 = $(html).find("div#paragraph1");
$("#content").html(p1);
}
Related
I have this code and I want load from page load.php the text for each div in this page
only with a load request from page load.php.
The example below load the page load.php twice :(
$('#div1').load('load.php #div1');
$('#div2').load('load.php #div2');
<div id="div1"></div>
<div id="div2"></div>
load.php page I have the code code:
<div id="div1">test to load1</div>
<div id="div2">test to load2</div>
How can I do it?
You could load the php using jQuery.get and then insert each fragment in to the desired elements:
$.get({
url: 'page.php',
dataType: 'html',
success: function(response) {
var html = $($.parseHTML(response));
$('#div1').text(html.filter('#div1').text());
$('#div2').text(html.filter('#div2').text());
}
});
Edit/note if the elements (#div1 and #div2) are at the top level of the loaded html, use: html.filter('#div1'); otherwise use html.find('#div1') to select the desired node.
More about jQuery.get.
I make a html page and there is ajax call for get some data.
after success ajax call, I render to html element with the json data which is from the ajax call.
But, If I go to other page by click some link, and when I come back there is no data at all.
how can I preserve the data element when I come back from other page.
<!DOCTYPE HTML>
...
...
<body>
<div id='data'>
</div>
<a href='/next'> NEXT </a>
<script type='text/javascript'>
$.ajax({
type : 'GET',
url : '/data/user',
...
...
success: function(json) {
$('#data').append(json.username);
}
...
</script>
</html>
When I click 'NEXT' and history back. the username is go away.
When page is reloaded all data came from ajax will be lost definitely. you can faster your ajax call if you already make ajax call earlier by using cache property
$.ajax({
url: "test.html",
cache: true
})
.done(function( html ) {
$( "#results" ).append( html );
});
Here the situation:
In my html page I have a link, which onclick runs a PHP script.
<iframe style="display:none;" name="target"></iframe>
Load new tasks
I use an invisible iframe to execute the script but I stay on the same page.
This link executes script.php which updates mysql database, but in order to see new content the page must be reloaded.
Of course I can always create a separate button/link that reloads current page.
But I wonder if there is a way to execute the PHP script and reload current page with one html button.
Better use it this way:
1: Use a common Javascript Framework, for example JQuery
2: Create your Link and a Div for your Content:
Update my Data and reload my new Content
<div id="result"></div>
3: Use Jquery to add the click event to your link:
$('#reload').click(function(e) {
// Prevent from going to the link provided in href
e.preventDefault();
// make POST Request to script
$.post( "myScriptHandler.php", { value1: "1", value2: "2" })
.done(function( data ) {
// if done, refresh my Div with html content from your PHP Script
$('#result').html('')
$('#result').load('mydata.php');
});
}
You don't need AJAx - just return a script into the iframe which updates the toplevel page...
<?php
....
$new=run_updates();
print "<div id='newcontent'>$new</div>\n";
?>
<script>
var dest=parent.document.getElementById('oldcontent');
var src=document.getElementById('newcontent');
dest.innerHTML=src.innerHTML;
</script>
(not tested, YMMV)
I show you how to use Ajax in this case:
here is your html and js code:
<script type="text/javascript">
$(".link").on("click", function() {
$.ajax({
url: "your_php_script.php",
dataType: "json",
cache: false,
success: function(data) {
location.reload(true);
}
});
});
</script>
<html>
<body>
<a class="link" target="target">Load new tasks</a>
</body>
</html>
When you click the 'a' tag, the jQuery Ajax script call your php script, and when it return with success, then your page will be refresh.
I want to display the content of Division in one page to another.
<div id="box-cont" class="box-content">
<?php
echo $stat;// Contains multiple images with strings
?>
</div>
Here $stat will display multiple images with few contents. And i am using jQuery AJAX to display this html in another page.
var bcont = $('#box-cont').html();
$.ajax({
type:"POST",
url:"abc.php",
success: function(data) {
document.location.href='def.php?bcont='+bcont;
}
});
And i am getting this html in def.php as
$_GET['bcont'];
This is not working for me..
Thanks in advance
A shortcut method would be to use sessions to pass the html from one page to another.
<div id="box-cont" class="box-content">
<?php
echo $stat;
$_SESSION['stat'] = $stat; // make sure session_start(); is present on this page
?>
</div>
Then, in the success handler of your ajax call
$.ajax({
type:"POST",
url:"abc.php",
success: function(data) {
window.location.href='def.php';
}
});
Finally, in def.php
session_start();
echo $_SESSION['stat'];
Note: This is not an ideal approach but will do the job for you
Ok, you want to pass the html of #box-cont to def.php, right?
You're mixing post and get. Read: http://api.jquery.com/jquery.post/
and you'll find you need to use the data-parameter.
There's something odd with the success-part. You don't reload the frame/div
where def.php is sitting. What you've done is passing data to the server
but not getting anything back, (if I read your attempts correctly).
In fact there's currently little use for a server-via here, from what you
describe it can all be done at client / JS.
I'm trying to add through ajax/jquery a script into a div seconds after the page has loaded. The script itself is from a CPM network and loads a banner.
When I load it right when the page loads, the script is loaded, but if I add it through ajax, the script stays like this:
<script>content here...<script>
I get the following information after loading it by ajax: "Resource interpreted as Script but transferred with MIME type text/html"
I searched for some solutions but can't find one that works.
Here is the ajax call:
function showAds(){
$.ajax({
url:"pub-horizontal.php",
type:"POST",
async: false,
data: {link:link},
success:function(result){
$("#p1").html(result);
}
});
}
Here is pub-horizontal.php file
<div class="col-xs-12">
<div id="pub-horizontal" class="pub-horizontal">
<?php
$url = $_POST['link'];
if(!strpos($url,"article")){
include("****-horizontal.php");
}else{
include("cpmfun-horizontal.php");
}
?>
</div>
</div>
I tried to output something into the console using the script and it worked! Seems like that the problem is with the script of the CPM network that does not load after the document has loaded...
Thanks in advance.
Try adding header("content-type: application/javascript");
at the top of the php file