I'm new to ASP Web Pages. Trying to build a shopping like website. I have created Databases first, Now what I want is to display "some" items of users' interest only so as to keep page light. Later when user scrolls down, next "x" number of items are fetched from Database and are shown to the user. Its like something you can see on myntra.com, but definitely not like on ebay.com where number of items are fixed on one page. I know it will use javascript but can't figure out the correct timings of firing events and adding more items to page?? I saw on stackoverflow itself about scroll down event, but I think that was related to a particular ID on a page.
Here's how it's done on the client side:
http://www.youtube.com/watch?v=eziREnZPml4
In addition to that, you will need some server-side logic that will track what has been sent already, when a request for more contents comes in. One way you could achieve that is to always read the items in the same order, and have the browser send the "latest" item that it has with each subsequent request.
Related
I have data being inserted into various divs collected from the backend.
This data gets updated, what i need is for the divs to also automatically update the data within the divs without actually refreshing the whole page.
Right now a page refresh would update the divs but I want the divs to auto update without affecting users experience.
Any suggestions.
As an example, I have a vote up/down button in the frontend, the vote gets sent to the backend then sent back through to the front and inserted into a div, however they wouldnt see their vote registered in the frontend unless they refreshed the page, So I would need the users vote result to be updated in the front end everytime then make a vote or change a vote ect automatically.
This is just one example, there is more data inserted in this table which could be updated at any time.
Update,
Not sure people understand fully what I need or trying to do.
Basically have and object coming through from back-end, on page load, data from that object is inserted into a table such as new posts, votes ect.
What I need to be able to do is check if the object has changed since the page load and if so to then update the data on the page without refreshing the page.
Ideally need this to happen instantaneously, so it recognises as soon as there is a difference between the object data and that being displayed in the browser and updates it.
Hope that makes it more clear as to what I want to do.
I have and object with information such as the suggestiontitle, description, votestatus, etc, these get inserted into a row, when a new. A new row gets added when a new object with main object comes through.
So I need to be able to check for changes in the main object so that I can then add the new objects as rows into the table and also Detect and update any changes with current objects already inserted.
If I understood correctly, all you want is a way to interact with the backend without refreshing the page, correct? If that's the case, you should look into AJAX. Here's a simple way to use it for the voting system example(requires jQuery):
$.post(url_to_interact_with,{key: 1232,vote:1}, function(data){
console.log(data);
}
In this case you sent a post request with key=1232 and a vote of 1. The variable in the function (data) is the output of the request.
However, if this isn't such a simple matter for you, I would recommend looking into websockets. To summarize what they are: A back and forth interaction between backend and front end. The back end can send info at any time without refreshing the page. If websockets are too confusing, then use this: https://pusher.com/
But honestly, you shouldn't try to go for the approach of knowing all info of div in real time unless absolutely necessary. Good luck! :)
What I Understood is that you need to update the div whenever Vote is updated? If I understood correctly then I would like to go with delegate and call a function to the server once you get a response from Vote stuff call.
If you want to get an event from the server-side then I would suggest you go for SignalR, for real-time communication, which will give you an event called the server-side.
I have HTML and JavaScript in place that allows a user to move Django database entries (displayed in a table) up and down. However, is there a way that I can store this new order that the user has customized so that it will show up any time the user navigates back to that specific page view? I think get_queryset is what is causing the page (after refreshing) to switch back to the basic filtering. But, I have no good ideas on how to override it or avoid it to accomplish this task. Any help would be much appreciated!
I would suggest using ready solutions: django-admin-sortable or django-admin-sortable2. As for me, I have successfully used second solution and it works. One important note about it is to run ./manage.py reorder my_app.models.MyModel after adding new order field as mentioned here.
The website I need to implement is for a simple user study: On a page there are some images shown, the user rearranges them to a certain order, hits the 'next' button and then the same page is shown again, just with different images, which the user rearranges again. The process is repeated until a certain page count is reached.
Which images to show, comes from a mysql database and the user arrangements for each page need to be stored in the database as well. I have decent code for the database communication and logic of the image arrangements in php. The ordering functionality of the images works nicely with javascript and jquery.
What is completely throwing me off now, is bringing it all together and the 'save and reload the page with different images' mechanism. Of course I found loads of information on the internet but I just can't bring it together (I am a noob with javascript and that stuff is seriously making my head hurt).
My question:
How do I implement a page, with a page counter, which is increased when I press a button; pressing the button also triggers sending the data to php for putting it in the database and also reloads/updates the page with a different image selection based on the page counter to re-start the process.
I would be most greatful for all: from explaining the general principles to specific code examples. I just need to make this thing work :). Thanks!
You need a < form method=POST > tag which wrapps all your images
For each image you need a < input type="hidden" > tag which stores the image id. This tag must be resorted with the images as well.
Resorting must change the position in the DOM
you need a submit button as well
On server side you can access the submitted data with $_POST variable in same sorting as in the DOM
You can count the number pages in $_SESSION variable or send the counter as GET variable with the page url
This is only a short overview, i hope this helps you.
I have a food menu ASP.NET Web app. I use a datagrid to display the menu items. When the user clicks an item in the grid, a user control opens up below the item to allow the user to enter item details and add the item to an order. The item detail user control in turn contains several user controls with RadioButtonLists, DataLists and TextBoxes. The RadioButtonLists and DataLists are populated from a database. The user should be able to open and close several items at a time, like Windows Browser with sub-folders.
I've tried doing this with strait ASP.NET AJAX using ScriptManger, etc.. I set the item detail user control Visible property to True, and populate the list controls during the OnPreRender event. This is slow and sort of complicated because of the ASP.NET page/control life cycle.
I've been looking into using JQuery requests to ASHX files or Page Methods on the server to generate the item detail controls with maybe RenderControl and sending the generated HTML back to JQuery.
Questions:
Am I on the right track?
Would this sort of approach work for rendering and sending back HTML that may be complex and long?
Would JQuery requests be more efficient than my current approach?
Can anybody point me in the right direction for references and/or examples?
Thanks for the bandwidth.
I found a lot of help that led to my solution at:
http://weblogs.asp.net/sanjeevagarwal/archive/2008/07/22/Dynamically-create-ASP.NET-user-control-using-ASP.NET-Ajax-and-Web-Service.aspx
I have a web application that retrieves and displays records from a database. A user's query could possibly match thousands of records; in such cases, it makes sense for the user to refine his search.
In the case that the query matches hundreds of records, it probably makes sense for the user to browse the records. The thing that bothers me is that the web application displays "pages" of records. In the context of a web application, I believe that paging is a horrible, horrible, way to display this kind of data.
Imagine the following scenario:
User runs a query: application indicates there are 20 pages and displays page 1.
User clicks on to page 2, then page 3.
User realizes that the record he was seeking is on page 2. User clicks on to page 2 again.
User thinks that he saw a similar record on page 1. User clicks back and forth between page 1 and page 2 repeatedly to compare the records.
With a web application, each page change necessitates loading an entirely new page. The end user probably thinks of it as just loading more data, but to the browser, this is just as much work as loading an entirely different page. Furthermore, when the user cycles back and forth between page 1 and page 2, the same data is being loaded from the server over and over again.
It's insane that with a modern computer equipped with billions of bytes of memory we have been conditioned to think of it as being normal for the computer to reload (over a slow connection with high latency) textual data that would take up megabytes at the very most.
I have an idea to use JavaScript to automagically load new records each time the user scrolls to the bottom of a page of records (There would be no paging links for the user to click on - the records would simply load as the user scrolls). This sounds nice; but one drawback that comes to mind is that it would be difficult to print the page without first having to click on to a "printer-friendly" view.
What other ideas are there for stuffing a database application into a web document without using a clunky paging system?
Well from the start I was going to suggest adding new records as the page is scrolled. If you are worried however about getting really long pages. The solution would be to hide the top records so there is only ever a max number of records showing. However, you would need to give the user the option of what the max is or an option for no max that way everything shows. Also, depending on their choice you may still need to offer a printer friendly version. Another note is it would probably be best to add a thing on the side telling the position like showing records 35-85 of 200.
I would go with the "automatically load new records as user scrolls to the bottom of the page." It's by far one of the most user-friendly method in my opinion.
For printing, you could rig each paginated set so that they receive a "no_print" class or something as new a set is loaded. Dynamically add/remove that class as the user scrolls back up.
So in my application, I have millions of records which the user can view seemingly all at the same time.
I load more records by requesting the same URL but changing the request headers.
Here is how you can implement something.
Let's assume that you want to list all the animals in the world in alphabetical order. You don't want to paginate by having a "< Previous 1 | 2 | 3 .. 9989 Next >" bar at the bottom.
You would start off and immediately query your "resources" route which will return a set of animals: GET /resources/animals.
Your request would include headers which say what it is exactly you are requesting. For example, add a range: 0-24 header. Related question: adding Custom HTTP Headers using Javascript
On the server side, you can figure out that the user is requesting the items 0 to 24 and you can respond back with Response Headers telling him what you are returning back like this: returned: 0-24/12000000. This tells the client that you have returned 25 items, starting from item 0 up to item 24, and there are still 12 million items left.
Render the items that you have received from the server.
As the user scrolls further down the page, query the next set of items. Using math and figuring out what is currently in view, you can calculate what "page" the user is viewing and can then request results which correspond.
You can see this working in practice here on the Dojo examples.
Read more about the subject.