I have two questions in mind to ask you guys here,
I'm working everyday with PHP scripts but I don't know very good javascript so my questions are:
I have script and for every navbar I'll click or button then page will refresh,
So can I get any method from you guys, how to show IMG LOADER instead reloading page?
Also per example: For button called "Update", in PHP I use /update.php?id=10 , Can I hide parameters just to be in URL: /update.php and to works like with parameter, and to show client IMG loader instead refreshing page/
Please, Just tell me methods which I can use to do them!
bro its very very easy through javascript, once just try to javascript.
you just copy paste this code, and result will showing as you want
<script type="text/JavaScript">
<!--
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
//-->
</script>
This page will refresh every 5 seconds.
2nd, Answer of 2nd Question is, if use parameters, then try to routing,
Related
I have a small problem with a jquery function and I can't figure out where I'm going wrong with it, I'm using .load to pull another page into a div for the second time using a button with a .click() function. The problem here is when I click the button the data I want flashes up and is then replaced with the data that is loaded when I first navigate to the page, however if I bind the .click to:
<p>peter paragraph</p>
The page will load fine without incident.
The jquery function is this:
$(document).ready(function() {
$("p").click(function(){
alert("buttonthe1st");
$('#jam').load('register.php');
alert("buttonthe2nd");
});
});
I was using the alerts to test to see if it was working originally, the function appears to be working a long with the actual load event when I tested them with the paragraph and when I tried them in googles developer console.
As I typed the above out I just realised when I was testing it, the URL and the page refreshed even if there was no function or onclick even tied to the button in question. Which explains why I'm having this problem now, is there a way to resolve this?
P.S. I appologise for making this so vague.
I am a little confused as to why clicking on a paragraph element would cause a page to reload but if you are in fact talking about a button element you might find the preventDefault function helpful. Try using that within the function you are binding to "onclick" and see if it makes any difference
I am having a problem, my website www.projectbuilder.tk is 100% ajax powered, how I have ran into a problem that seems to stump me, I can set the urlbar/history to each visited page, and have php loading the pages on the user's first visit based on ?page= from there all pages and data is loaded via ajax.
The problem is that no one can actually right click the links (as I cannot give them the href attribute without causing the page to reload, and skipping the onclick event)
So my question is how do I make the ajax links look like normal links for right-click and open in new window, or tab, or copy url? thanks.
Put the normal link in the 'href' tag, but adjust your onclick jquery handler method to this:
function handleLinkClick(event){
if (event) event.preventDefault();
... Continue as normal ...
}
The 'preventDefault' stops the normla event propogation so left clicking the link will use your onclick method without sacrificing the valuable info stored in the HREF. Also. Take caution of using jqueries 'live' binding. It used to capture right-clicks as well, may not be the case any more though.
Sorry just realized i assumed you were using jquery. Just returning false, as the other poster mentioned should work fine. I'm so used to jQuery these days.
Why can't you give them href without skipping the onclick?
Just return false from the onclick handler and it won't use the href.
Am I missing something? Because this is very basic.
because of considering embed google ads into include page. I am giving up jquery.loading
(google not allow jquery ajax and jquery loading for ads, now even iframe page)
so is it possible use other javascript method for control php page include?
more explain, if my page need to including 10 pages, and I do not want they all loading in same time(such slowly for loading at same time). So I put 10 buttons for switching include page.
only click each button, loading the chosen include page to main. and click another one, loading the new one and hidden the first one.
As long as they are links google should crawl them fine, you just need to stop the link from being clicked on in javascript...
Test Page
Then your jquery...
$(document).ready(function(){
$('a.test').click(function(e){
// Load the AJAX here
// Stop the click from actually going to the page
e.preventDefault();
});
});
I want to have a button "Print all reports" which will print 5 different URLs at once. Is there a way to do it without making it redirect you to a new page I will have to create with all the code again for each of the URLs and window.print() it?
I think the way you have exposed is good from every angle. Have a different page which prints all code of 5 URLs and call window.print() function to open the print-dialog.
If not, you will have to use ajax to fetch the output of all 5 different URL's and dump it on the same page where the user clicked the button. But, I would oppose this approach since it loses the ability to go back to the page and user could be deceived if they bookmark it.
Well if that's what you want, you can AJAX content of all the five pages into one page and once it's all ready, you can print the single page. If you use jQuery, it will look like this :
(
function(){
$.ajax({url:"url1", success:function(resp){
$("#mydiv").html(resp);
//make other similar calls for rest of the pages
//and in your last callback, call window.print()
});
})();
Even if you don't want to use jQuery, you can do it with raw ajax.
using just a browser you write a script that generates 1 url out of 5 urls, and separate the html from each of the urls with this.
<DIV style="page-break-after:always"></DIV>
and then the user can just print out your 1 url and have 5 urls of information.
I'm currently working on a website that you'll find here: http://steadfastdesignfirm.com/rgw/. I used an ajax effect that I found online at CSS-Tricks to dynamically load content from another php page and animate it (fade in and fade out) when a navigation tab is clicked.
I have managed to get this working fine, as you will see (please note the only two working pages are "Home" and "Experience RGW"), however, all of the jQuery scripts in my document that apply to elements within the div that reloads are broken when the content is dynamically generated.
As a quick example, take a look at the text resize tool beneath the image rotator on the home page and try changing the font size. Now, click on the "Experience RGW" tab and scroll down to the text resize tool again. Notice that now that we've loaded in experience.php dynamically within the "#ajax" div, the script doesn't work. Also, if you click on the "Home" link now, you will also notice that the image rotator doesn't work.
I've looked high and low online and through multiple forums to try and figure out how to fix this, and I believe I have to incorporate the jQuery .live function, to apply the script to any element, whether it's currently visible or not. Otherwise, document.ready only runs the scripts once after the DOM loads and will not affect the ajax loaded content. Is that correct? If so, how do I apply that to multiple jQuery files executed on my page?
Well, this is totally driving me crazy and I've tried hard to get it, but I just can't quite figure it out. I'm fairly new to jQuery, but am trying to learn fast. I would post some of the code here, but there is a lot involved in this question. :)
If anyone would be willing to shoot out a quick answer, or a few lines of code, I'd greatly appreciate it.
FYI: The script that runs the ajax effect is in ./scripts/page.js. Also, please remember that I currently have only the Home page and Experience RGW page working correctly, so please don't waste time trying to diagnose problems on the other pages. I haven't gotten to them yet. :)
Here is a link to some of the code on jsfiddle: http://jsfiddle.net/taylortsantles/R33YV/.
Thanks,
Taylor
I'm behind a proxy and can't see your page, but it sounds like the events are not being re-attached to the content created through ajax.
I'll try to explain, when your page loads the first time, you are attaching jQuery events to DOM objects on document.ready(), this function will be called only once.
Every time you drop DOM objects and create new ones with the ajax response, these new objects never get jQuery events attached again, since the document.ready() function didn't fire.
You can try putting your event-attaching code in a different function and invoke that function on document.ready() AND after every DOM modification (your ajax call to change the tab content).
Hope it helps.
The problem is a breakdown in the order of executing code.
page loads
load event fires and sets up elements
click event
ajax loads the new page
The new page doesn't have any events set to it. Two solutions
use "live" links in the window.load event callback
use run the page load code again.
Solution 1 is nice but if you have an specific plugin used then it won't be the total solution.
Solution 2 can be implemented by pulling out your code in window.load and wrapping in another function. Just all it onload and then in the callback when the ajax loads.
I know how frustrating is can be. I hope this helps.
You need to rebind any events after dynamically loading in elements to a page, as Javascript sees these as totally new DOM elements.
You can achieve this by modifying the code you use to update the page:
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#ajax")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #ajax", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav li").removeClass("on");
$("nav a[href='"+newHash+"']").parent().addClass("on");
// Rebind any events
documenttextsizer.setup("text-resize");
});
});
};
});
This applies to any events that happen WITHIN the updated elements in the page. So after the comment "//Rebind any events" you can add others as they are required! Hope that helps :)