I am currently developing an application using asp.net MVC.
On page load user profiles are loaded with small thumbnails, some bio info on the right. When the user paginates I only want to update a certain part of the page where the results section is.
The confusing thing for me is instead of removing and adding elements recklessly, What is the best way to initially load results dynamically, and then use JavaScript to update those elements with ajax?
My main concern was what effects is constantly updating and removing elements from the dom having on memory and performance.
For example when the user goes to page two there are 5 main elements I would change using ajax, the thumbnail and the bio info. There are about 12 tile like containers. That brought me to question how to properly update the dom elements without having to recreate the whole container holding the 5 elements.
Thanks for your time everyone.
Use something like this with jquery.get();
$.get( "yourdatafromserver.asp", function( data ) {
$( ".resultContainer" ).html( data ); //update certain div with obtained result dynamically without page refreshing
alert( "Load was performed." );
});
You need to have an Event like onclick' oronhover` etc. to call this function or else on page loading
Related
I have a very long table. The first column of each one of the rows is an <a> tag. A click on an <a> tag does:
Update route and page reloads
Get data(list of objects) from server.
Display the data below the <a> tag
Hide data related to an another <a>tag.
The length of the data differs from each other. At a time, I only show data related to one of the <a> tags. For instance, a click on the first <a> displays data related to it just after of it. A click on the second <a> shows data related to it and hides data related to the first <a>.
How to scroll back to the <a> tag you clicked on when route changes and page reloads?
If you answer, please no jQuery.
Thanks in advance.
So what's inside your tables? Is it images?
And the "data from the server", is it data, like data from an api request? Or is it a new webpage?
If we're talking a dynamic web page here. I remember dealing with the same problem with an infinite scroll view where a user clicks an element, and then goes back and expects to return on the same position.
The problem with dynamic content is that it takes a while for the browser to render it. Depending on what it is it might take a few milliseconds to many seconds (poor 3G and a view with 1000 images for instance). And while this rendering is going on, you never really know where the scroll should end up. It is possible to solve by adding timeouts and adjusting the scroll until we're almost sure that the page is in the correct place. But it's usually a mess.
You say that the page reloads? Normally a page needs to "reload" if a user is changing route and similar. If the data you are loading is a new page, the I get why you have to reload. But if it's an api request for some other data; is it an option to not reload the page? If that's possible, then you could remove and add elements instead of reloading the entire page.
I'm not a programmer and I manage for work a web platform based on php+mysql with a prototype engine, where data form are opened/passed to server using the old modalbox script.
Until let's say one year ago or so after editing ora adding data in the modal window and closing it the parent page reloaded to the same scroll point I was.. and this was very useful because the platform generate very long data list.
Actually this don't work anymore and I'can't find the way to make it work.
Here's the code I use on the form closing button:
Continue
I also add two infos:
I've parent page list with anchor generated dinamically by a db query, that could be used in the child modal..
could be great to avoid reload of page and update data dinamically, but may be this is another step beyond
use this JS function to reload or refresh current Url on body scroll
<body onscroll="location.reload();">
After some experiment I've found a custom function in the ajaxtabs.js and used it for applying a simple rewturn false;
so in the end here's the code
MYINSTANCE.onajaxpageload = function(pageurl) {
return false;
};
I have a html page I'm making, which displays a bunch of category links - each of which link to an inventory page with a number of products. The client would like the page with the links to have the number of equipment available next to the title e.g.
Excavators (5)
The issue is, I dont have access to the back end of the inventory, its hosted with another company. At the top of each inventory it has a number of matches field, which is the information I need
Can anyone think of a way i can show that matches number on a different page dynamically (without php). The only thing I can think of at the moment is doing a really hatchet job with an iframe - but that wont be pretty or professional. Any genius thoughts would be appreciated!!
p.s the page im linking to is internal in my site - the inventorys in an iframe
If the data you need is an identifiable container, and you can work out the url to retrieve it from, you could use the jQuery .load() method, e.g.
$( "#result" ).load( "ajax/test.html #container" )
Where #container has the data you want, and #result is where you want to load it to.
http://api.jquery.com/load/
You could store the web page as an html string in localStorage. It's not too complex.
localStorage.setItem('myPage','<div>Your html page in a string friendly format</div>');
to retrieve:
var retrievedObject = localStorage.getItem('myPage');
console.log('retrievedObject: ', retrievedObject);
I am doing the application in phone gap,But I have a problem that for switching the view,I dont know how to create a another view. But when I google it I get some relevant informaion like, I have create a local html file and then using the htmlcode i can switch the view.
If any one is having any relevant information regarding this please give me some idea.
My method for doing this is using ajax to load in my other pages. Essentially I have multiple html files and my main UI. When a button is clicked I fire an ajax request to load that new page and then animate it in using CSS animations ( which get hardware accelerated ).
remember to load the new page's data into a container div, so the rest of your UI can stay put.
You can create a separate HTML file for a separate view and use JQuery for functionality. Suppose that when you click on button, just redirect to another HTML file or whatever your need is.
in gmail if you check mark email 4 then move to different set of 50 or 25 records and mark selection 26 then both 4 and 26 are retained if you move back and forth.
How does google do this?
would it be possible to do something like this in a page that brings only 50 records and when NEXT is clicked...it again goes to DB to bring next set of 50 records.
You don't technically change pages, it's all the same page, the content is just changed dynamically with JavaScript.
Take a close look at the url. Only the hash part of it changes. Which means you don't really load new pages when you click things on Gmail. They just change the elements shown to you with javascript.
Similar thing could be done with page loads if you use localStorage or sessionStorage
You could do the page you're describing with Ajax techniques.
The inner pages are most likely loaded using AJAX. Kind of like iFrames, you monitor the links that are clicked and only load the inner part of what you're after so that you aren't loading things twice...
It's possible that these are saved in JavaScript or Cookies... I would probably store them as a JavaScript array of selected checkboxes personally... depending on how much load you're already giving to the user.