I'm trying to figure out how I can load a partial page (div) into another div using AJAX in my php page.
basically I have a div with some php output stuff, and I need to put that div's content into another one using ajax but my code doesn't do anything (it doesn't put the div's content into the other one).
this is my current code:
<script type="text/javascript">
$(document).ready(function () {
function load() {
$.ajax({
type: "GET",
url: "<?php echo $actual_link; ?>",
dataType: "html",
success: function(response) {
// $("#ajaxContent").html(response);
$("#issomeone").html($(response).find("#notis"));
setTimeout(load, 4000);
}
});
}
load();
});
</script>
so the #notis div holds the php output and the #issomeone div is the div that i need to put the stuff in using ajax.
is there something missing in my code or I'm just doing it all wrong?
any help would be appreciated.
Thanks
EDIT:
THIS DOESN'T DO ANYTHING:
<script type="text/javascript">
$(document).ready(function () {
function load() {
$.ajax({
type: "GET",
url: "<?php echo $actual_link; ?>",
dataType: "html",
success: function(response) {
// $("#ajaxContent").html(response);
//$("#issomeone").html($(response).find("#notis"));
$('#issomeone').load("<?php echo $actual_link; ?> #notis");
setTimeout(load, 4000);
}
});
}
load();
});
</script>
You are finding the DOM element and then trying to set that as target element's innerHTML with html(). You in essence have a type mismatch.
You would need to get the innnerHTML of #notis to pass as the parameter to this function so:
$("#issomeone").html($(response).find("#notis").html());
Alternately, you could append the node if you want to keep the whole #notis element
$("#issomeone").append($(response).find("#notis"));
But really, since you are using a straight GET, you might be better off simply doing:
$('#issomeone').load('<?php echo $actual_link; ?> #notis');
This provides a more simple abstraction to what you are trying to do more manually with .ajax()
I would however encourage you to not get in the habit of loading full HTML pages and then scraping them for some particular element. It is better design architecture to have the AJAX target script serve up only content that is needed when possible.
Related
i have this script that does ajax using jquery but i want to update with specific content, when I did it return undefined..
<script type="text/javascript">
$(document).ready(function(e) {
$.ajax({
url:'n.php',
cache:false,
type:"GET",
success: function(data){
$('.list-ball').html($(data).find(".count").html());
console.log($(data).find(".count").html());
}
});
});
</script>
Start with console.log(data);
This way you can see the returned data.
From there you can populate an element like so:
$("#myElement").html(data);
You can use $(selector).load() function that will replace content:
$(document).ready(function() {
// [url] [any valid css selector]
$('.list-ball').load('n.php .count > *'); // Find `.count` content and place it instead of `.list-ball` content
});
If .list-ball element is not presented in DOM, than no ajax will be executed.
I'm trying to figure this out from 2 hours with no luck, maybe it's not that technical but I need help!
I've an AJAX script that needs to send a GET request to a php script that's on the same page.
The PHP script terminates like this
if ($success) {
print( $state );
}?>
The Javascript is rightly under the php termination and is this.
<script>
$('table button').click( function() {
var button = $(this);
/* if button inside the table is clicked */
var username = button.parent().parent().children('td').html();
var state = button.html();
/* send GET request */
$.ajax({
type: "GET",
url: 'index.php',
data: 'username='+username+'&state='+state,
success: function(response) {
alert(response);
}
});
});
</script>
What I don't understand is why I get the alert containing this text
inside // this is the state, so it's good
<script> // this is the script, not good
$('table button').click( function() {
var button = $(this);
/* if button inside the table is clicked */
var username = button.parent().parent().children('td').html();
var state = button.html();
/* send GET request */
$.ajax({
type: "GET",
url: 'index.php',
data: 'username='+username+'&state='+state,
success: function(response) {
alert(response);
}
});
});
</script>
I've to manipulate the HTML on success by I'm not able to do that because of the messy response that I get from my php code. I'm not sure if I've to post other code. If you need to know more just ask, I'll reply as soon as possible.
Any characters outside <?php ?> tags are sent back in the response. That's how you get that <script> tag in the first place when you access index.php from the browser.
echo and print are obviously going to also send data.
So I guess you should have that if($success) at the begining of index.php and exit; inside it, after print.
Characters outside <?php ?> tags are sent as part of the response for historical and practical reasons.
In our days having PHP code mixed with HTML is a bad practice (as some people already pointed out in the comments bellow). You either use a templating engine (most people know about Smarty) or use PHP itself as a templating engine.
But "back in the day" PHP started out as just a simple templating engine (no classes, external modules, namespaces, autoloaders, etc.), so mixing HTML with PHP was basically the purpose of this language.
As I said, today we still use PHP as a templating language so mixing PHP (control structures, loops) and HTML works.
A quick, but not recommended fix is to avoid the javascript content on an ajax request
Just demonstrating, how it could be,
if($success) {
print( $state );
}
if(!isset($_GET['ajax_call']))
{ ?>
<script>
$('table button').click( function() {
var button = $(this);
/* if button inside the table is clicked */
var username = button.parent().parent().children('td').html();
var state = button.html();
/* send GET request */
$.ajax({
type: "GET",
url: 'index.php?ajax_call=1',
data: 'username='+username+'&state='+state,
success: function(response) {
alert(response);
}
});
});
</script>
<?php
}?>
.....
and you should note that the new ajax call has an additional variable, ajax_call,
This is a quick fix, for you to move on, but i suggest you to use an MVC framework.
I have a PHP file which has code to echo some HTML. I would like to provide the PHP file to some end users which can be done like this:
<?php include 'file.php'; ?>
Unfortunately my users will for instance have index.html and this will not work. I don't want to ask my users to change there HTML file in to PHP. Another approach is to modify the .htaccess file:
<Files index.html>
AddType application/x-httpd-php .html
</Files>
I don't want to ask this of them as well. So what are my other options? Is it possible to show the echoed results in HTML file? Maybe with the help of some Javascript?
You can do this with AJAX. It might look a bit challenging, but it is frankly much simpler than many think. In fact, it's pretty easy.
Ajax goes in your javascript code, and looks like this:
$('#stSelect').change(function() {
var sel_stud = $(this).val();
//alert('You picked: ' + sel_stud);
$.ajax({
type: "POST",
url: "your_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
alert('Server-side response: ' + whatigot);
} //END success fn
}); //END $.ajax
}); //END dropdown change event
Note that the data from the PHP file comes into your HTML document in the success function of the AJAX call, and must be dealt with there. So that's where you insert the received data into the DOM.
For example, suppose your HTML document has a DIV with the id="myDiv". To insert the data from PHP into the HTML document, replace the line: alert('Server-side response: ' + whatigot); with this:
$('#myDiv').html(whatIgot);
Presto! Your DIV now contains the data echoed from the PHP file.
The ajax can be triggered by a change to an control's value (as in the above example), or just at document load:
$(function() {
//alert('Document is ready');
$.ajax({
type: "POST",
url: "your_php_file.php",
data: 'Iamsending=' + this_var_val,
success: function(whatigot) {
//alert('Server-side response: ' + whatigot);
} //END success fn
}); //END $.ajax
}); //END document.ready
Look at this example for ideas on how it works.
Note that the above examples use jQuery, and therefore require this reference in the tags of your page:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
This will replace the body of the html page with the contents of the url called.
$('body').load( url,[data],[callback] );
If they can add javascript, an ajax request should do the work...
<script>
var req = new Request({
method: 'get',
url: 'file.php',
onRequest: function() { // loading image
},
onSuccess: function(response) {
document.getElementById("destination").innerHTML = response;
}
}).send();
</script>
They will also need a div for the code to get in:
<div id="destination"></div>
this is an ajax method that inserts the data into a db and should supposedly display the new content.
<script type = "text/javascript">
$(document).ready(function() {
$('#submit').live('click', function(eve) {
eve.preventDefault() ;
var form_data = {
title: $('#title').val()
};
$.ajax({
url: "http://localhost/ci/index.php/chat/comment",
type: 'POST',
data: form_data,
success: function(msg) {
alert(msg);
}
});
});
});
</script>
However in my /chat/comment, i am loading the view again, i.e, user submits a comment, load the view again and the comment should be there. My response from server is the view's HTML. However the view comes with all the divs and there are many of them. I need to retrieve only part of the div, say, #commentspace from the ajax on success.
Look at the jQuery $.load() function?
Example
Inside "firstpage.html"
$('#content').load('secondpage.html #content');
I have a PHP file, Test.php, and it has two functions:
<?php
echo displayInfo();
echo displayDetails();
?>
JavaScript:
<html>
...
<script type="text/javascript">
$.ajax({
type:'POST',
url: 'display.php',
data:'id='+id ,
success: function(data){
$("#response").html(data);
}
});
</script>
...
<div id="response">
</div>
</html>
It returns the response from jQuery. The response shows as <a href=Another.php?>Link</a>. When I click the Another.php link in test.php, it loads in another window. But I need it to load the same <div> </div> area without changing the content of test.php, since it has displayInfo(), displayDetails(). Or is it possible to load a PHP page inside <div> </div> elements?
How can I tackle this problem?
If I understand correctly, you'd like for the a link to cancel navigation, but fire the AJAX function?
In that case:
$("#mylink").click(function() {
$.ajax({ type: "POST", url: "another.php", data: {id: "somedata"}, function(data) {
$("#response").html(data);
});
return false;
});
Krof is correct,
One possible unwanted behavior of this however is that it will query the data every time the link is clicked. You can set the event to only call the ajax query once by using one.
$("#mylink").one('click', function() {
// ajax call
return false;
});
Don't forget to set href="javascript:{}" in your link so after the event is fired once the link wont do anything;
You could just use MooTools and class Request.HTML.