So I have a function that uses jQuery's $.post mechanism to fill in a div with contents from another page. I want to fire this method in the very beginning to show the content in the div right away. To do this I call the method in the document.ready script.
This is how the code looks:
function OnloadFunction()
{
alert("HELP!");
var url = "<?php echo $this->url('public', array('id'=>'ajax')); ?>";
$.post(url, {contentVar:cv}, function(data){
$("#shoppingCart").load(data).show();
});
}
//when document loads, do the following
$(document).ready(function(){
OnloadFunction();
})
When I load the page, the alert saying "HELP!" shows up, but the $.post function is not making any difference and the div is not filled with the contents from the url.
P.S This shouldn't make a difference but I am using ZF2 (hence the url('public', array('id'=>'ajax')); ?>)
Any help would be appreciated :)
Thanks!
You need to use .html() instead of .load(), assuming data is html content
$("#shoppingCart").html(data)
The load function takes a URL as an argument, makes an XHR request for it, and then populates the element with the response.
Presumably data is not a URL.
Related
I tried to refresh some div in my page with ajax load by using .load() but didn't work. I have to create new file page that use php to echo my div again. So Question is Do I have to create new file for echo that div, if I just want to refresh some div in my page?
$("button").click(function(){
$("#div1").load("currentpage.php");
});
above is not work.
I have to use below code.
$("button").click(function(){
$("#div1").load("otherpage.php");
});
Use Ajax for this.
Build a function that will fetch the current page via ajax, but not the whole page, just the div in question from the server. The data will then (again via jQuery) be put inside the same div in question and replace old content with new one.
Relevant function:
http://api.jquery.com/load/
eg
$('#thisdiv').load(document.URL + ' #thisdiv');
Note, load automatically replaces content. Be sure to include a space before the hastag.
Reference link : Refresh Part of Page (div)
Okay let's say I have a page that inserts data into database
page1.php
//INSERT CODE
//HTML FORM
Whenever I access page1.php, url at the top seems like this
www.abc.com/page1.php
if I am at the home page of website and url seems to be
www.abc.com/home
At the same page I can call other page's div through jquery ajax call but the url seems not to change. Even if i call any other page url won't change at all...
What I am looking for is that a solution that when I call the page1.php to the same page that is home.php url changes like this
www.abc.com/home?view=page1
or
www.abc.com/home/page1
and also do I have to write page1.php functionality of DATABASE INSERT in home.php?
So you can't change the URL without redirecting. What you can do though is to change the hash. This will not redirect, but it will show the value in URL.
// AJAX CALL
// GET NAME OF PAGE YOU CALLED
// SET IT TO "var toHash"
// Whenever AJAX call finishes make a callback function with this code.
document.location.hash = toHash;
// or you can something like this for each time it changes at all.
window.onhashchange = function(){
var doThis = document.location.hash;
if (doThis=="#thisLink")
doSomething();
}
You can change your URL by
var myNewUrl = 'www.abc.com/home?view=page1';
window.history.replaceState('', '', myNewUrl);
jQuery is not required. window.location.replace() will simulate an HTTP redirect.
window.location.replace("http://google.com");
When the page is loaded contents from the PHP file has to load, for that i am using JQuery .load() function, content is successfully loading but it keep loading, i can see it from chrome Developer tools. I have to load content only once.
var userName =$('#dT').data('uname');
$('#dT').load('load_table.php', {userName:userName});
So i tried another Jquery ajax method that also same as loads the contents continuously..
$(document).ready(function(){
function loadTable(){
var userName =$('#dT').data('uname');
$.ajax({
url:'load_table.php',
data:{'userName':userName},
success: function(results){
$('#dT').html(results);
setTimeout(loadTable,5000);
}
});
}
loadTable();
});
Above setTimeout function not working, any way to load content from PHP file only once?
I think in your first load attempt you are loading the html with the exact same code, so it will keep on loading itself infinity.
Doing it with ajax is much better, however if I were you I would move the settimeout outside the function itself. Currently it will only trigger if the initial call was successful, you want it to run every 5 seconds I am guessing. So where you call it the first time at the bottom, instead of just
loadTable();
You have:
setTimeout(loadTable,5000);
Now you do not need to do the settimeout in the success function.
If you go to this website: http://www.w3schools.com/ajax/
You wil see an example where on the click of a button an ajax call is made to this URL: /ajax/ajax_info.txt
You can see the request in console. I'm trying to get this URL with Jquery like this:
$( document ).ready(function() {
$(document).ajaxSend(function(evt, request, settings) {
alert("Starting request at " + settings.url + ".");
});
});
The problem is that it is not alerting anything. Why is that? I'm testing this in two ways, first: implementing the jquery library and code in the console and second: scraping with PHP and injecting the code. Neither method is working. So how can I get the last URL?
The event being fired on the page you have listed is a jquery ajax event - from the jquery docs.
Description: Attach a function to be executed before an Ajax request
is sent. This is an Ajax Event.
The page you are trying to test the code on is using plain ol' javascript and not jquery, therefore, the ajax event is never fired, and the ajaxSend function is never triggered.
You would need to get the data via a jquery ajax call to get the correct functionality.
I've used jQuery's .html() function to update content before, but it has always been inside an .ajax() function, for example:
$.ajax({
padding : 15,
type : "POST",
cache : false,
url : "anyPage.php?page=ajax",
data : $(this).serializeArray(),
success: function(data) {
$("#Div").html(data);
}
});
Problem is, in order to utilize TinyMCE, I had to open it in Fancybox inside of an iframe, but I ran into the problem of Posting data, which was solved by submitting the form to a PHP $_GET URL (pretty sure that's not what it's actually called), and then closing Fancybox:
<? if($_GET['page'] == "X"){
$_SESSION["X"] = $_POST['X'];
echo '<script type="text/javascript">
parent.$.fancybox.close();
</script>';
die();} ?>
That successfully passes the Post variable into a Session variable, which I can then call from inside the main page. Problem is, I'd like to also refresh a div on the main page, and am encountering problems.
I don't think I can use .ajax(), at least I haven't had any luck with trying to use it.
I've also tried using different combinations of .html() and .load() with .parent() and whatnot. A couple examples of things I've tried (the others have been long since overwritten):
parent.document.getElementById("Div").innerHTML = "something";
and
parent.$("Div").html("Some updated text");
Inserted both as follows:
echo '<script type="text/javascript">
parent.$("Div").html("Some updated text");
parent.$.fancybox.close();
</script>';
Haven't found anything that will work. Wondering if anyone can lend me some assistance.
If the domains match, in the iframe and the parent document you should be able to access the parent using either of the following:
window.parent
parent
top // If the parent is the top-level document
window.top
Since parent and top can be overwritten by javascript I would go with window.parent or window.top