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.
Related
I want to show my php page in android mobile app. I use cordova and i added a php page in my project with this directory "php/load.php". I tried to show this page on index.html i tried like this but it doesn't work.
<button type="submit" onclick="show();">Show it</button>
<script type="text/javascript">
$(document).ready(function() {
function show(){
$.ajax({
method: 'GET',
url: 'php/load.php',
dataType: 'text'
})
.done(function(data) {
alert(data);
})
alert("Pause");
}
});
});
</script>
And this is my php file:
<?php
$a = "AAAAAAAA";
echo $a ;
?>
You've got syntax errors in your JavaScript that's likely causing most of the problem. Have a look at this and give it a try.
<script>
$(function() {
$("#btn_show").on("click", function() {
$.ajax({
method: 'GET',
url: 'php/load.php',
dataType: 'text'
}).done(function(data) {
alert(data);
});
});
});
</script>
<button type="submit" id="btn_show" >Show it</button>
Four important points:
Listen to the cordova deviceready event
Your url in your ajax request is not local and it can't be local because on your device is no server running. So it has to be something like: https://www.example.com/load.php
You have to whitelisten all your external sources.
You should use https.
I would suggest using json_encode function in php.
For example:
<?php
$a = "AAAAAAAA";
echo json_encode($a) ;
?>
this would return a json array object which you can use to be rendered by javascript then put on to those html element.
changing the url for ajax For example: "url:localhost/website/load.php" i think it must be done too for ajax to work properly.
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.
I'm a beginner using the Yii web framwork , and I'd like know why this code is not working.
In main.php
test modal
In script.js
function modal(){
$.ajax({
url: 'index.php?r=Site/ModalRegister',
success: function(){
$('.large.modal').modal('show');
}
});
}
In siteController.php
public function actionModalRegister(){
$this->renderPartial('//site/ModalRegister');
}
In site/ModalRegister.php
<div class="ui large modal">ddd</div>
Well, you do this
function modal(){
$.ajax({
url: 'index.php?r=Site/ModalRegister',
success: function(){
$('.large.modal').modal('show');
}
});
}
On success you try to show the <div class="ui large modal">ddd</div> that comes from the ajax itself. But before you show it you have to insert it someplace in the DOM of the page. You should change it to something like
function modal(){
$.ajax({
url: 'index.php?r=Site/ModalRegister',
success: function(html){
$( "body" ).append(html);
$('.large.modal').modal('show');
}
});
}
I think it is because the code that defines function modal() isn't loaded when you re-render your page using ajax.
Check whether you get a javascript error in your browser when you click on the link but the modal doesn't show. You probably do.
You will need to add the function definition code in your partial view too so that when you render your view partially using ajax, function modal() is defined.
I have the following ajax call:
$("#welcome a.close").click(function(e) {
$.ajax({
type: "GET",
url: "/visitors/hide_welcome",
success: function(){
$("#welcome").hide(0);
e.preventDefault();
}
});
});
Aimed at the following piece of my site:
<div id="welcome">
<h2>Welcome <a class="close" href="Javascript:;"></a></h2>
<div class="left">
</div>
<div class="right">
<div class="loginElement">
</div>
</div>
<div class="clear"></div>
</div>
With the following code to answer the ajax request:
<?php
class VisitorsController extends AppController {
function hide_welcome() {
if($this->RequestHandler->isAjax()) {
$this->Session->write('Welcome.hidden', true);
echo 'Success.';
}
else {
echo 'I am, in fact, here.<br>';
$this->autoRender = false;
}
}
}
?>
It's pretty straight forward. It calls to /visitors/hide_welcome to set a session variable noting that they've hidden the welcome. But it doesn't seem to complete. If I place alerts on either side of it, like so:
$("#welcome a.close").click(function(e) {
alert("Begin.");
$.ajax({
type: "GET",
url: "/visitors/hide_welcome",
success: function(){
$("#welcome").hide(0);
e.preventDefault();
}
});
alert("End.");
});
They will trigger. But alerts placed in success are ignored. The same goes for error and complete. This was working just fine on my test machine. The page in question is definitely there, I can reach it with out ajax. Firebug reports nothing, neither does the error console. Success simply never fires.
The strangest part is that often if I reload manually the welcome disappears, indicating that the ajax call did fire. It just never returned. What is going on here? I'm at wits end. Any one see any trees I haven't barked up yet?
SOLUTION:
CakePHP is supposed to auto detect ajax calls. But in this instance, it wasn't. As a result it was running the code I had for the Ajax, but then returning a 404 when it failed to find a view. The solution was to append $this->autoRender= false; to the end of the ajax handling controller function. After that everything worked beautifully.
I think given your symptoms, you're redirecting to whatever URL the <a class="close"> you're clicking on pointed to - since the default behavior isn't prevented.
The e.preventDefault() call should happen in the base method, not a callback, like this:
$("#welcome a.close").click(function(e) {
$.ajax({
type: "GET",
url: "/visitors/hide_welcome",
success: function(){
$("#welcome").hide(0);
}
});
e.preventDefault();
});
Try adding data to your success callback like so:
$.ajax({
type: "GET",
url: "/visitors/hide_welcome",
success: function(data){
$("#welcome").hide(0);
e.preventDefault();
}
});
EDIT:
Try supplying the absolute path of your url:
$.ajax({
type: "GET",
url: "http://fridgetofood.com/visitors/hide_welcome",
success: function(data){
$("#welcome").hide(0);
e.preventDefault();
}
});
This jQuery ajax request is not working. The form submit just reloads the page, there are no alerts, nothing. Where am I going wrong?
$("#newfolder").submit(function() {
alert("1")
$.ajax({
type : "POST",
url : "<?php echo $cfg->wwwroot ?>/pages/media/async/newfolder.php",
data : $(this).serializeArray(),
success: function(data) {
alert(data)
//$.fancybox(data);
}
});
return false;
});
This can have several causes.
Ensure that you've included jQuery as one of first <script>s in HTML <head>.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Ensure that you're calling this function when the document is ready loading.
<script>
$(document).ready(function() {
// Here.
});
</script>
Ensure that the element with id="newFolder" is present in HTML DOM tree and supports the submit event.
<form id="newFolder">