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.
Related
I'm fairly new to javaScript & would like to know if is possible to use window.location.reload() on a page to reload all contents on a page but one? I've researched google but to no avail.
To answer your question, no it is not possible to reload the page partially with window.reload()
What you could do though is fetched the HTML page and use it to replace partial content on your page. It would be better if your backend could serve already the parts of your page you need individually, so you only have to update the content of the page instead of parsing some HTML first, but it can work both ways.
For example from one sample project I made. This will fetch periodically some HTML from the backend and update the page partially.
You can see the full thing here https://repl.it/#bluebrown/SSR-Dataframes#templates/dashboard.html
const fetcher = Object.entries(frames).map(([id, {refresh_rate}]) => {
function refresh() {
fetch(`/df/${id}`)
.then((bytes) => bytes.text())
.then((html) => document.getElementById(id).innerHTML = html)
.catch(console.warn)
return setTimeout(refresh, refresh_rate*1000)
}
return refresh();
})
This works so well because the backend and the frontend know each other well.
In other cases you may want or need to fetch a full page and parse it with something like jsdom. Then you can grab from that DOM what you need and update the right element on your page.
The location.reload method reloads the current document, just like the user pressed F5 or the browser reload button.
The default setting reloads the page from browser cache, if it is available. You can force the method to bypass local cache and retrieve the document from the network by passing true to the method.
location.reload(); //refreshes from cache //or location.reload(true); //to force a network request
You can not do that, location.reload will reload the current document. Only way I can think, and this may not work with your page design, you can put the different contents in separate iframes, and reload only those iframes that needs reload/refresh.
I have a table with live data in it (meaning it is stored on the server and people who has access can view the data in their machine as well). I have a Create data page and View data page that contains the table. Once I have finished creating a new data and click a link going to the View page. The data should be there already.
I have tried the location.load() internal script in the View.html page that is triggered by the attribute onLoad="" but it's not working. However, when I create a button that has a function to refresh, it does work but I want it to be an auto refresh.
To make it easy and simple, use location.reload(). You can also use location.reload(true) if you want to grab something from the server.
You can simply use an jQuery Ajax call to make call to your backend API and fetch data, which you can add to your html table. This process you can handle in page/document ready or load events. I don't think you need to reload the page just to achieve this.
If you are working with AngularJs SPA (mentioning this as you added the tag), these two HTMLs/Pages can be rendered into the same layout based on the route and follow the above mentioned approach (using $http.get of Angular) to get view data and bind it to the respective view. As it is SPA, no concept of page reload.
I am making an online game using PHP and JavaScript, I have more knowledge in PHP than I do in JavaScript, though I am new in both languages, so keep that in mind.
So what I was trying to make in PHP / JavaScript and of course HTML was to refresh only the div or the area of code that I need, and I can't make the page reload every time that it gets new information or data because when the PHP is ran and done then I can't have anything else running, unless I was to use a loop though that sounds a bit sketchy and not sure if that's the method. I have tried: (PHP)
header("reload: 1");
Though that only refreshed the page, that is what I want to happen when I get data not always to be happening, so for example the program would get the information that someone is ready then it would send the client to another page as asll as the other client.
Though I would just like an explination if it is possible to only refresh a specific area when told to by example getting MySQL data.
function refresh_box()
{
$("#myDiv").load('path your PHP file');
setTimeout(refresh_box, 60000);
}
$(document).ready(function(){
refresh_box();
});
this setTimeout call your function for every 1 minute and load content dynamically in mydiv.
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.
I have been reading Yahoo's Best Practices For Speeding Up Your Website, but still have a question that I could really use your help with:
The very first page of my web app needs to display a bunch of data that is dependent on the city the user is in. On the first visit, the user is prompted to pick her city and I store a cookie in the browser recording which city to start with. On her following visits to the site, the Javascript code checks the cookie and retrieves the data for that city as JSON.
Given that this data is necessary to display the fundamental part of the page, where should I load it from? Currently I am doing it from the top of Jquery's $(document).ready(), but it occurred to me that by definition that only gets executed once the entire page has loaded.
Which is the correct way to do this? (Eg, will it improve matters if I instead put some Javascript in the that checks for the cookie and loads the JSON feed for the right city? Some other solution...?)
Thank you for any insight
lara
Currently I am doing it from the top
of Jquery's $(document).ready(), but
it occurred to me that by definition
that only gets executed once the
entire page has loaded.
$(document).ready() will be called when the DOM is ready for manipulation, not when the entire page has loaded. The DOM will be ready as soon as the markup has been read and parsed into the DOM. This occurs before the entire page has loaded.
Putting your code to check the cookie value and retrieve city-specified data in $(document).ready() is perfectly fine.
If you really need this data to show the page correctly, how about simply inlining the data in the page itself? Save yourself an AJAX round-trip, be nice to your users in sub-Saharan Africa on the 300 baud modem.
I think the $(document).ready() is as soon as you can do it, although I'm not sure why you wouldn't just inspect the cookie values on the first request. Just check to see if they are set, and if they are, get the content for the user there are save yourself having to make any AJAX call. Maybe I'm missing something in your situation, but cookies are always sent with every request to a specific domain so AJAX/JavaScript shouldn't be necessary.