I am completely new to web development. The question I have is rather simple (I guess), but after multiple hours of using google and experimenting I am still without any solution. The problem I have is probably not how to do it, but which keywords to use while searching.
I want to create a simple website. (For testing I use Caddy Server). For my website I use a simple index.html file. On my website I want to have 9 buttons, which will be disabled once clicked. After refreshing the page, every client should also see the changes, so the button-state has to be stored somewhere on the server.
Then there will be another button, which sets the web page to its initial state (all buttons enabled). The purpose of this web page is that 2 persons can click buttons successivley until only one button is left enabled (the web page reloads itself every second on every client). This will be used to select a certain map from a map-pool of 9 maps.
My main problem is, to store the button states, so after refreshing the page the buttons should be still disabled if they were clicked. All clients should see the buttons as diabled once they refresh their pages. Do I have to implement a database for this or store the button states in xml or json? Do I need javascript, jquery, php or ajax for this? I do not want to make it very complicated, so if I need for example a database for this, I will probably just give up.
What I'm asking for: Any point in the right direction on how to implement a simple button that keeps its state after reloading the page would be much appreciated. I found a solution for this using JQuery, but it does not work for me (button does not preserve state after refreshing See here).
Thank you so much for any help!
Your server will need a data store (database) to save the values desired for each button.
Client Side
Set disabled attribute on all relevant buttons in your HTML. On (client-side) page load, fetch the value(s) from your server (database) and depending on what the returned value(s) are, .clearAttribute("disabled") on all buttons accordingly.
Server Side
Have your server set the disabled attribute on the HTML <button> elements based on values in your database prior to serving the HTML to your client(s).
Related
I am using two tabs in my page like the attached image.
.
Here, after selecting the value in all dropdownlist controls then, i click the generate button. so, the tab is moved from parameter to report. Then again i click the parameter tab. At this time all my dropdown controls shows null value.
but I want all the dropdown values which i selected before.
how can i get the dropdown control values?
It's important to remember that web pages like this are stateless. One request won't remember anything about another request.
So in your situation, you're putting in data, then it sounds like you're clicking a link (or button) that redirects you to another page, then you try and go back to the first one, and it has to fire off yet another request, with no knowledge of the first one's state.
Given that, it seems like you have two primary options (and dozens of others that I won't bother mentioning):
Move the tabs to be on the same page. (My recommendation)
There are lots of controls out there, or you could easily write one yourself, that don't separate tab pages via multiple requests. If you did that, switching tabs wouldn't lose the data.
Add a "save" button, and disable the other tab.
This way, the user actively has to save the data before being able to leave the page via another tab. The biggest issue here comes in the form of usability.
Which one of those you choose is dependent on a number of factors, not the least of which being code maintainability and the size of requests.
I'm trying to describe it in as few steps as possible:
I have Page1.aspx with lot of controls, and Preview and Save button among those. I also have Page2.aspx that is the redirection target of a Preview Button click.
Since I need all the controls selections from Page1 to draw a preview on Page2 the redirection is done with setting Preview's PostBackUrl.
I also must have preview shown on a new tab or window so I used onClientClick="aspnetForm.target='_blank'" for Preview button definition.
Save button-click callback, after storing data to a database does redirection to some Page0.aspx (initial list of reports - the subject of the code)
Preview button works fine - a preview renders in a new tab, but when I go to the old tab and click on Save, I see from debugger, that firstly Page2.aspx(?) and secondly Page1.aspx are loaded. Then all the data is stored in the db, but though Page0 redirection is executed Page1.aspx stays loaded in the browser.
I have no idea what processes are behind this. Could one who knows give me an insight? Or if you consider my approach impossible to implement give some idea how to do the same?
If it's of importance, everything on the Page1 is located in an update panel.
Thank you very much for replying
In ASP.NET there are basically zero (0) circumstances in which you will ever send form data from one page to another. Although what exactly you are trying to accomplish is vague, you can consider some of the following:
Isolate unique operations/systems to a single page. If you have something like a User Profile, don't have three different aspx pages; just use a single page for the user or admin to manage that data / functions. Postback events are your friend.
Understand the difference between ViewState and traditional form data. I'm guessing that if you're trying to post form data from one page to another, you probably don't understand the point of ViewState. Using a single page to maintain temporary data that the user is currently working with is a great use for ViewState. If you want the data to appear on another page then you need to consider the data from the previous page as final and thus should be saved to a database or some other medium.
These are just some general guidelines because there is no exact answer to your problem without saying something generic like "You're doing it wrong." I would recommend starting by never again trying to post form data from one aspx page to another.
I thought this would be a trivial feature, but I have lost a fair bit of hair trying to figure it out. I have a jquery mobile web page with a select menu. Users click an item in the drop down list, then later click on a link and navigate to another page. Users then click the back button. The desired result is that the selected item remains selected. Right now, the selection is lost, and it defaults to the first element in the list again.
Things I've tried:
1) Use an asp.net dropdownlist with autopostback. This preserves the selected option, but then I get a page flicker because the entire page is posted back.
2) Wrap above asp.net dropdownlist in an updatepanel. This preserves, doesn't flicker, but it wipes out the jquery mobile styling. Also tried some suggested workarounds with firing a jquery create event, but couldn't get anything working.
3) Write cookies on the select change event in javascript, and read them in the asp page_load event. However, page_load is not called when the back button is clicked, so this had no effect.
4) Tried creating a jquery ajax request to a web page method, but the method must be static and therefore I can't get it to modify the page.
Any other ideas? Is it just me or should this indeed be a problem that's been solved a million times?
As an FYI, I am a newbie at web programming, so please spell it out if you have an answer :) (come from a c++/database background).
Thanks!
Turns out even the date scroller could not survive a back button in some cases. For example if the user navigates to another site, and then uses the back button to come back to my jquery mobile site, all my javascript dom manipulations are lost. The solution is non-trivial. I store everything I need to maintain state of a page using html 5 local storage. On the jqm show page event, I detect if all my global variables have been wiped clean, and if so, reload state from local storage. Works perfectly, but it is quite an implementation task. And of course, if local storage is not supported by underlying browser, it all falls to pieces.
want to have search functionality as on this website
http://www.carwale.com/new/search.aspx#budget=6&budget=8&fuel=2
here whenever the user filters search(checks any checkbox), it updates results accordingly,
that can be understood as an ajax filter.
But at the same time, the query string also reflects for the change,
which helps the user to bookmark the filter search for later reference.
changing it through asp.net/javascript may cause the page to reload..
any hint or suggestions on implementing the same would be really helpful..
This can be done with the help of 3 things together
1) as #Aristos said, checkboxes with Auto Postback enabled
2) Ajax control toolkit Modalpopup, which gets fired automatically on every async postback (http://weblogs.asp.net/ruslan/pages/ajax-update-progress-updateprogress-in-ajax-modal-popup-modalpopupextender.aspx or http://mattberseth.com/blog/2007/07/modalpopup_as_an_ajax_progress.html)
3) History Points (http://msdn.microsoft.com/en-us/library/cc488548.aspx)
This can be done completely without the use of jQuery, if you dont want to use it.
-- For the first part, he have a set of check boxes list with autopostback.
In every post back the list is updated base on the selected check box.
All is simple until now, the cool is that is have a nice interactive interface (made with javascript and jQuery).
-- About the second part, how its change the url so can be bookmark with out reload the page. The trick here is that is place the parameters after the anchor # eg:
/new/search.aspx#budget=2
Using the anchor # the page is not reload and stay as it is. So when some one click on the check boxes, via javascript is also update the url, but only what is after the # so the page stay as is with out fully reload.
Now the parameters after the # can not read on code behind but only via javascript.
So when you have bookmark this page and you go direct to eg /new/search.aspx#budget=2 the javascript reads what is after the # and translate it to commands, check the appropriate checkboxes, and ask for refresh the content. All that can be done only via javascript.
I see that is use the jQuery history plugin as helper with this schema.
http://archive.plugins.jquery.com/project/history
The same trick with parameters after # is done from amazon, when you navigate on catalog, from page to page.
-- One more clever trick that is done is that is open a full page wait, so the user can not interact with the page until the page is ready again. If it not do that, and the user make very fast two clicks on the check boxes, then this can cause a full page post back on updatepanel and this can lose the previous settings.
In our CMS, we have a place in which we enable users to play around with their site hierarchy - move pages around, add and remove pages, etc.
We use drag & drop to implement moving pages around.
Each move has to saved in th DB, and exported to many HTML files. If we do that in every move, it will slow down the users. Therefore we thought that it's preferable to let the users play around as much as they want, saving each change to the DB, but only when they leave the page - to export their changes to the HTML files.
We thought of making the user click a "publish" button when they're ready to commit their changes, but we're afraid users won't remember to do that, because from their stand point once they've moved a page to a new place - the action is done. Another problem with the button is that it's inconsistent with the behavior of the other parts of the site (for example, when a user moves a text inside a page, the changes are saved automatically, as there is only 1 HTML file to update)
So how can we automatically save user changes on leaving the page?
You should warn the user when he leaves the page with javascript.
From http://www.siafoo.net/article/67:
Modern browsers have an event called window.beforeunload that is fired right when any event occurs that would cause the page to unload. This includes clicking on a link, submitting a form, or closing the tab or window.
Visit this page for a sample the works in most browsers:
http://www.webreference.com/dhtml/diner/beforeunload/bunload4.html
I think it's bad practice to save the page without asking the user first, thats not how normal web pages work.
Sample:
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
function unloadMess(){
mess = "Wait! You haven't finished."
return mess;
}
function setBunload(on){
window.onbeforeunload = (on) ? unloadMess : null;
}
setBunload(true);
//-->
</SCRIPT>
The easiest way I can think of is to store the page info each time the user moves items around using Ajax (e.g. with an UpdatePanel, onUpdated event, let it fire some script that updates the users page config.
Alternatively - .Net's WebParts implementation does this automatically without intervention by the programmer (unless you want to change the storage engine, it uses a local mdb in by default.
Use a "Publish" checkbox/button and when the user interacts with the page in a way that causes them to navigate away ask them if they want to publish if that box is NOT checked/button not clicked. Be aware that there are actions (closing the browser, accessing their favorites menu, etc.) that you will probably not want or not be able to prompt the user.
I would force them to click a button such as publish. That is a 'training' issue.
Automatically saving changes when they leave could have other ramifications. For example if a user opens up a record and plays around with it and has no intention of changing it, they close it, like a word document, excel, etc. . . I would have your site mimic that model.
You also have to remember that the web is a disconnected environment and is not required all web applications run like a windows application.
If the user doesn't click the publish/save button then there changes are not saved and that is up to them to remember to do.