i'm trying to make an ajax-browsing website, so whenever the user makes a request to another page i want to push that page into an element instead of loading an entire fresh page.
scenarios include:
clicking on a link.
ajax calls.
manual : location.href = 'url';
pretty much whenever a request is being made.
How can i take control of a request and put the result in an element instead of loading a fresh new page ?
thanks in advance.
You can do it pretty easily with Ajaxify. It's really easy to use and has cross-browser compatibility.
Related
I am trying to make a navigation button that just sends me to the index page but shows a different text in the url.
so i found this line of code to help me do it.
window.history.pushState("index.php", "test", "Testie");
But the problem is when i run it in an onclick function it just takes the last value and puts it in the url bar.
That itself is not the problem its that i dont have a Testie.html/php file.
I want it to be send to index.php but make the appearance of Testie in the url.
How do i do it?
The purpose of history.pushState is to say:
Some other JavaScript has manipulated the page so what the user is seeing is the same as what they would see if they went to this URL.
It lets you get fast updates to the page and bookmarkable URLs with real content that is good for fast initial page loads and for search engines to index.
It doesn't send data to the server (you need to do that with other code).
It does mean that if the URL isn't actually handled by the server (as you say it is in your case) then the page will break if the user does bookmark the page (or refreshes it, or sends the link to someone, etc).
If you want to navigate to a URL with Testie in it, then the first thing to do is to make the server support it. Forget about JavaScript.
I'm adding new data to database
but to load the new data I have to reload the page
I was wondering is there anyway to reload a loaded page without refreshing the
whole page ?
P.S : I have used the .html thing and it won't load new data
$(document).ready(function () {
$(".container").load("../../public/include/menu/add.php");
$("#add_from").ajaxForm(function () {
$(".container").reload("../../public/include/menu/add.php");
});
You may be overthinking this. Consider how you load your data from the server:
$(".container").load("../../public/include/menu/add.php");
Now, at a later time in the page, you wish to load your data from the server. You would just repeat the process:
$(".container").load("../../public/include/menu/add.php");
You're trying to repeat an action at a later time, you would do so by calling the same code again. You can encapsulate it in a function if you don't want to duplicate the code, but overall you just repeat the process any time you want to repeat the results.
Though it's not really clear what you mean by "used the .html thing". And this probably isn't the most performant approach, as you could likely return updated data directly to the AJAX form post instead of requiring another request entirely. But if this is easier for you, go for it.
If your default data is being fetched with ajax, you probably just need to call the fetch method. You can use location.reload() instead, if you aren't fetching with ajax.
This might just be because I'm not entirely sure how to word it properly, but here's an overview of the problem.
I have a site where it pulls the main content using ajax, and by using pushState, I change the url. Say from "site.com/" to "site.com/area". But reloading this page (or entering it in the url) causes it to completely fail (because there's no such thing as site.com/area).
Is there a way to load the page from that link?
Note, that this isn't about the history / back and forward buttons. I simply want it to load a page from that kind of link.
The page must exist in one way or another. Depending on what server you're running it on you can redirect all requests to your first page if you want to solve it like that. Then you don't have to create a new page for all "routes", but can build it into your first page/application.
But the page must exist in one way or another.
Most browsers show a spinner in the tab at the top of the page when a page is loading. It's a standard way of showing that the browser is in the process of fetching something.
I'm writing a client-side ajax app, and would like a generic way of showing that an ajax call is in process. Rather than finding some element on the page and sticking a spinner on it, is there a generic way in javascript to access the browser's spinner?
There are only two things I can think of that are similar to what you want.
#1: changing the cursor (idea from #Jasen in the comments of the question): you can simply set the cursor css property of the body to wait whenever you have an Ajax request running.
#2: use a hacky iframe. Basically, create a server side page that loads headers, but doesn't end the request. When you want the loader symbol, simply create an invisible or off-screen iframe with that url, and remove it when the request completes
Unfortunately, there is no "official" api that defines a simple way to do this (e.g. there is no such thing like window.startLoader() or window.stopLoader(), for example)
Maybe that's not a good question but I'm wondering if it would be somehow easily and quickly (with just 1 function perhaps?) possible to change ALL links on website from refreshing webpage to loading the URL that user clicked via AJAX?
My website has standard links everywhere but if you want to have mobile application for iPhone out of it you need to use AJAX everywhere (and perhaps HTML5 History API) because any link will open Safari browser.
Do you think there's any way to quickly convert every single link to delete current source code and load brand-new page without refreshing browser window? Or does it require manual coding and separate functions for every single set of links?
Example:
jQuery(document).on('a', 'click', function(){
// STEP1: AJAX call that will make PHP download page from link
// STEP2: Delete current source code and load new one (in this case including deletion of this function itself)
});
Do you think it would be possible or are there any pitfalls here?
I've done something similar to this. It's possible, but you may have to change a couple of things on server side.
In my case, i had some links with href = #, some of them had click triggers, so i wanted to keep them out.
In this function i check every link without href = #, and if they don't have a click event, i bind ajax.
bindAjaxLinks: function() {
$('a[href!="#"]').each(function() {
var eventObj = $(this).data('events');
if (!eventObj || !eventObj.click) {
// not a javascript link, do your thing
var link = $(this).attr('href');
if (link) {
$(this).click(function(event) {
event.preventDefault();
// do your ajax calling here.
});
}
}
});
Some considerations: In my case, i added an extra parameter, something like isAjax to every request i made with this function, and in backend i sent only a part of whole page(without head and some other markup). And later i replaced what is visible to user with this new html.
This caused a problem: if server responded with a redirect, i got the whole page, which i didn't want, so i made sure this isAjax parameter is kept after redirects, and that solved this problem.