$(function(){
$('p.load_it a').click(function(){
$('#demo_content').load('http://d.com/myphp.php? nice=1149632');
return false;
});
});
Click me to load some HTML with AJAX.
<div id='demo_content'>
</div>
I wanted to know if anyone can give me advice as to how I can load this kind of Effect not by a click, but by an animated "loading" effect.
Let me know if anyone has any suggestions.
This will execute your load() call when the DOM on the page is ready.
$(document).ready(function() {
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
return false;
});
As for your 'loading' request, I suggest you take a look at this StackOverflow question. Nevermind, I just saw you already had something in mind.
$(document).ready(function() {
$.ajax({
url: 'http://example.com/myphp.php?nice=1149632',
success: function(data) {
$('#demo_content').html(data);
}
beforeSend: function(){
//show loading here
$('#demo_content').html("Loading...");
}
});
});
If you want the javascript code to be executed when the page has been loaded, you can also add the script at the bottom of the page, like this:
<script>
$('#demo_content').load('http://example.com/myphp.php? nice=1149632');
</script>
Related
Hopefully someone will be able to answer my question.
I have a php script, inventory_edit.php, that has the GET variable ID=xxx passed to it from which it does a search to return the results.
What this loads is an edit product screen, which has JQuery enabled divs which load individual PHP scripts once the tab has been clicked. The scripts called by JQuery use a session set within inventory_edit.php, $_SESSION['Product_ID'].
The JQuery is called by inventory_edit.php with the following code.
<script src="js/pm/inventory_edit.js"></script>
The content of inventory_edit.js is as follows
$(document).ready(function(){
$.get('functions/inventory_edit_stock.php', function(data) {
$('#stock_contents').html(data);
});
$("#stock").click(function(){
$("#stock_contents").load('functions/inventory_edit_stock.php');
});
$("#pricing").click(function(){
$("#pricing_contents").load('functions/inventory_edit_pricing.php');
});
$("#suppliers").click(function(){
$("#suppliers_contents").load('functions/inventory_edit_suppliers.php');
});
$("#reordering").click(function(){
$("#reordering_contents").load('functions/inventory_edit_reordering.php');
});
$("#other").click(function(){
$("#other_contents").load('functions/inventory_edit_other.php');
});
$("#tecdoc").click(function(){
$("#tecdoc_contents").load('functions/inventory_edit_tecdoc.php');
});
});
What i really need to do is pass the GET['ID'] variable to these files in some way to achieve the following WITHOUT using sessions.
$(document).ready(function(){
$.get('functions/inventory_edit_stock.php?ID=xxx', function(data) {
$('#stock_contents').html(data);
});
$("#stock").click(function(){
$("#stock_contents").load('functions/inventory_edit_stock.php?ID=xxx');
});
$("#pricing").click(function(){
$("#pricing_contents").load('functions/inventory_edit_pricing.php?ID=xxx');
});
$("#suppliers").click(function(){
$("#suppliers_contents").load('functions/inventory_edit_suppliers.php?ID=xxx');
});
$("#reordering").click(function(){
$("#reordering_contents").load('functions/inventory_edit_reordering.php?ID=xxx');
});
$("#other").click(function(){
$("#other_contents").load('functions/inventory_edit_other.php?ID=xxx');
});
$("#tecdoc").click(function(){
$("#tecdoc_contents").load('functions/inventory_edit_tecdoc.php?ID=xxx');
});
});
Any help would be much appreciated. I am new to JQuery so i am trying to get as much advice as i can.
Thanks In advance
Pete
I've got a dynamic page which I'm loading from an external PHP file when the booking link is clicked.
My issue is the jQuery code I need to run straight after it sometimes tries to execute before the PHP page is fully loaded (the follow and remove parts specifically). So when I try load the div, jQuery works sometimes, and other times not.
From what I've seen on other examples $(document).ready(function() is supposed to prevent the jQuery executing until the page is fully loaded, however since I'm loading a specific div (content) and not the entire page it seems to not work?
$(document).ready(function(){
$(document).on('click', '.booking', function (){
$('#content').load('calendar.php');
$.getJSON(url,data, function(data) {
$.each(data, function(index, data) {
$("#blocksid"+data.slot_id).css("background-color","#009cd0");
$("#follow"+data.slot_id).hide();
$("#remove"+data.slot_id).show();
});
});
return false;
});
});
Thanks in advance for any assistance!
To achieve what you are expecting in a predicable way you should run dependent javascript code
after loading content to div. Just create a call-back function for load method and have your dependent code inside it.
$('#content').load("calendar.php", function() {
//put the code here, that you need to run after loading content to above div
});
You need to set:
$.ajaxSetup({ async: false });
and then turn it back on by:
$.ajaxSetup({ async: true });
or use
$.ajax({
async:false
});
So, I have a div that im using the following code on, but it will flash when it reloads. I understand 1000 is ridiculous - it's simply set at that while im testing. Is there anyway to avoid the "flash" as if that div were a page reload?
Thanks, so much!!
<script type="text/javascript">
$(document).ready(function(){
$("#timelinerContainers").load("jquery_timeline.php");
var refreshId = setInterval(function() {
$("#timelinerContainers").load('jquery_timeline.php');
}, 1000);
$.ajaxSetup({ cache: false });
});
</script>
If I click ANYWHERE on the page it then will stop flashing... Rather odd.
Thanks so much for any help!!!
have you tried
$("#timelinerContainers").fadeOut().load('jquery_timeline.php').fadeIn();
or
$("#timelinerContainers").fadeOut().load('jquery_timeline.php',function(){
$(this).fadeIn()
});
Try this code:
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({ cache: false });
$.ajax({
url: "jquery_timeline.php",
success: function(data) {
$("#timelinerContainers").html(data);
}
});
});
</script>
The change is that I've used the jQuery.ajax() function for loading the contents. What I've done here is to first load the contents and then update the div, instead of clearing the contents, before making the ajax request.
I am implementing the search functionality through ajax jquery, though I am new in this. I have done that by using keyup event. Whenever type something, according to that letter(s), my searching list has been coming. But thing is that, I am not getting any record when refresh the page. If I search something then only I am getting record and if in that position I delete all the texts typed over the search field, then the correct list of records are coming, but not initially.
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("user-account-other.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
<div id="search_results"></div>
Now please tell me how can solve this issue.
Put ajax_search() funcion in on onload of document and also on blur of a text box element then it will work perfectly
Im not 100% sure what you're asking. I'd be happy to update this answer with some more information once I can understand the problem. I did, however, want to show you how to better streamline your code.
See: http://api.jquery.com/load/
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
var url = "user-account-other.php?search_term=" + $("#search_term").val();
$("#search_results").load(url, function(){
//Ajax Load is Done
}).show();
}
I'm trying to load a PHP document dynamically which uses some jQuery events on the same script so after loading the webpage the jQuery effects don't work.
For example:
$(document).ready(
function(){
main();
function main()
{
$('#game1').hover(
function(){ $('#info1 p').slideDown('fast'); },
function(){ $('#info1 p').slideUp('fast'); }
);
$("#izquierda a").click(function()
{
$('#izquierda ul').hide();
$('#content').slideDown();
$('#menu').slideDown();
$('#contentMin').hide();
$("#gameContent").load("content.php", main()); // i try loading main() again so the effects would have some effect? doesn't work though
});
}
});
And in content.php I load data from a database and place it in a div called #game1 which uses the hover effect but it doesn't work after I loaded content.php. Without having it loaded from content.php the same script works.
So how can i make it work?
Sorry im new to this, thanks!
Since the server needs to render the code, you need to use AJAX here. Look up the jQuery ajax function: http://api.jquery.com/jQuery.ajax/.
$("#gameContent").ajax({
url: "content.php",
success: function(){ main(); }
});