We're having a bizarre issue with our checkout process. Lets say that: -
User adds a few products to their basket
Clicks to view basket and then removes these products Then uses the browsers <- back button to
navigate to a previous product page
Then they add another product to
the basket, this causes the layout of the entire site to crumble,
it's as if none of the code to load the menus or product listings is
being fired off e.g.
I think it may be related to us using AJAX on the basket so i tried the suggestion posted here adding a hidden form element to the page which actually resolved the issue in chrome but in firefox the page gets stuck in an infinite loop,
Has anyone encountered similar issues with user navigating back to a previous state? I'm completely lost as to what to try next
Thanks for any help
Well i managed to fix this. The issue was that when the user navigated back via history to a previous product page, it was being treated as a postback and so none of the code to populate the controls on the page was being fired as it was inside a !Page.IsPostBack block...
Since I couldn't find anything better to use to determine when the page was broken I simply read in the navigation tabs and check if any of them are empty which is an indication of the page not loading right and then we refresh e.g.
<script type="text/javascript">
$(function() {
$("#tabs-nav ul li").each(function() {
if (!$(this).children().text() || /^\s*$/.test($(this).children().text())) {
location.reload();
}
});
});
</script>
It's not pretty but it does the job
Thanks
Related
At my company we are discussing wether or not to got and make our next web app in MVC.
I have been charged to figure out some basic stuff which could stop us dead in our tracks, and so have spend some time figureing out the MVC platform as best i could.
There is however one thing im wondering, is it possible, and if so how - to have a menu made on the _LayOut page/controller, which when a user presses a menu navigation i am able to catch on the specfic page before it goes to the layout controller?
UPDATED I forgot to mention that i want to be able to save a form depending on what site i am on. So i may have 10 pages with different forms and depending on which one of these i am on, i have to save the form on that page using the same link in my menu.
My explaning might be abit off so ill quickly describe the scenario and maybe there is another way of doing this.
The user is filling out alot of data on the page, they then press the navigation menu to go to a new page, i want to save the entered data before navigating to the next page for them.
Sorry for my bad english it is not my primary language.
Thanks in advance for any help.
A way to do what you're looking for is to attach a client-side event handler which submits the data before navigating to a new page. It would look something like this:
$(".navigation a").click(function (event) {
// Get form data, process it and POST/PUT/DELETE
});
If you're supporting modern browsers then you can subscribe to the input event of your form and attach yourself on the before unload if anything in your form has changed since the window was loaded as suggested in one of the comments. If you need to support older browsers as well subscribe to the change event of the input fields in the form in order to attach the handler for beforeunload.
form.oninput = function () {
window.onbeforeunload = submitFormData;
};
function submitFormData() {
// Gather and submit your data
}
I have a web page with a drop-down menu. One item of the menu is "Products", which drops-down with 2 sub-items (Suppliers and Parameters), each of these drop-down to show further menu items (i.e. a list of suppliers and a list of parameters respectively). When I select an item from that 3rd level I get redirected to catalogue.aspx, with the supplier or parameter passed as a query string. The menu is written in JQuery, and the links as standard html hyperlinks which just point to catalogue.aspx.
In catalogue.aspx, a list of products are retrieved for the selected supplier or parameter. At the top of the Page_Load method I've put a break point (on the first line of Page_Load). When I first load the catalogue, my breakpoint is hit, and the list of products are retrieved and displayed. However, if I just hit refresh, or try to then view a different supplier, the breakpoint doesn't get hit, and the same products are displayed again. If I look at the URL, the newly selected supplier is shown in the querystring. Select another supplier, still no breakpoint hit, and still the original products are shown. After a while, and several changes of supplier and parameter, the breakpoint finally gets hit and the correct products are returned, but only once and then stops again.
As far as code is concerned, as detailed above all it is is a standard html hyperlink that links to catalogue.aspx (no postbacks), and a breakpoint at the top of the page_load method.
Can anyone advise what might cause this random idiotness of my page?
EDIT: As requested, some code:
The link:
<a href='http://localhost:45745/Website/catalogue/catalogue.aspx?searchby=supplier&searchterm=PMA Service&pid=25&title=Catalogue - PMA Service'>PMA Service</a>
The code-behind:
protected void Page_Load(object sender, EventArgs e)
{
var i = 0;
...
}
The breakpoint is on the line with var i = 0, and I've also put breakpoints in page_load in the master page and the master base page. However neither is being hit so its almost as if the page just isn't debugging, however this issue also occurs on the test site I've put on my server.
I seem to have fixed it now, and it does appear that it was down to caching.
I put the following in the page_load of catalogue.aspx
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Now, every time I choose another supplier or parameter it hits the breakpoints and loads the correct products.
Its a bit odd though because the same code is actually used for several websites, with the domain determining which layout/colour scheme/content is displayed. I haven't had the issue with the 3 other websites that already use this code, it's just when upgrading this particular website to the new code that its broken.
Thanks for all the responses.
I encountered some weird behaviour today and I was hoping someone could shed some light on it for me because I'm perplexed.
I have a couple of methods I use to interact with the ui for the sole purpose of displaying error/success/warning messages to the user.
Here is one of them
public static void Confirm(string text)
{
var page = (Page)HttpContext.Current.Handler;
var uiConfirm = new HtmlGenericControl("div")
{
ID = "uiNotify",
InnerHtml = text
};
uiConfirm.Attributes.Add("class", "ui-confirm");
page.Master.FindControl("form1").Controls.AddAt(2, uiConfirm);
}
This works perfectly fine except for one nuance I encountered this morning and I was hoping someone could shed some light on it for me.
I am working on your run of the mill profile editing page. In this page, I am binding a couple of dropdownlists (country, province/state) on page load. I have a submit at the bottom and a click event that fires to update the information, then call the method above to notify the user that their information was successfully updated. This works the first time you click the submit button; the page posts back, the information gets updated in the database, the dynamically added div gets popped in, confirm message is displayed and all is good. However, if you then click the submit button again, it fails stating SelectedItem on the dropdowns I'm binding in the page load is null (Object reference not set to an instance of an object). The dropdown is actually wiped for some reason on the second postback, but not the first.
In sheer desperation after trying everything else, I decided to take out the call to the confirm method... and strangely enough the error disappears and I can update the information on the page as many times as I like.
If I add a generic control statically to the page I'm working on, and change my method slightly so that instead of adding a generic control to the form dynamically it just finds the generic control on the page, that does no produce the same error.
The problem also goes away if I remove the two dropdowns from the page or just stop interacting with them.
Why on earth would adding a dynamic control to the form wipe my dropdowns on postback?
I think you should consider using the PlaceHolder class in your MasterPage, the AddAt(2, uiConfirm) is going to bite you and probably is:
Markup:
.......
<asp:PlaceHolder id="PlaceHolder1"
runat="server"/>
......
Code-behind:
public static void Confirm(string text)
{
var page = (Page)HttpContext.Current.Handler;
var uiConfirm = new HtmlGenericControl("div")
{
ID = "uiNotify",
InnerHtml = text
};
uiConfirm.Attributes.Add("class", "ui-confirm");
//may need to change depending on where you put your placeholder
Control placeHolder = page.Master.FindControl("PlaceHolder1");
placeHolder.Controls.Clear();
placeHolder.Controls.Add(uiConfirm);
}
I have some problems with ASP.NET page cycle. I want to fire event when page is going to be closed or redirected to other page. I try to use Page_Unload() but it is going to be fire when page display and in any button click event it is firing Page_Unload(). I want only to fire event when page is going to be redirected or close. Then I have tried to use the Javascript function window.onunload(). Again, same problem: it is firing when the first page displays. Is there any way to solve this?
Look into Jquery's .beforeunload property. Here is an example:
$(window).bind('beforeunload', function(){ return 'Click OK to exit'; });
Please note, beforeunload canot prevent a page from unloading or redirect it to another page for obvious reasons; it would be too easy to abuse. Also if you just want to run a function before unloading, try the following:
$(window).unload(function(){ alert('Bye.'); });
Finally, don't forget to referrence jQuery in your head tag by using:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
The above gets you the latest version from the internet and saves you the trouble to download it, and of course you can do so optionally, but I am just trying to get your thing to work asap.
Oh, I also found an example for you. Click here to see a page that calls a function before it closes. Hope this helps bud.
I have a site which uses Shadowbox-JS to bring up a settings page when a user clicks on a little icon. The settings are there for the user to be able to customise their view of what they're looking at in the main application.
The settings page is a full (but compact) .aspx page which has all the relevant code for the settings to be applied, updated to a database, read from a database etc, so that's all nicely dynamic. What I want is for a postback to occur once the user closes the shadowbox so that the view on the main page automatically updates to reflect their changes.
The following link appears once the user presses 'save' in the settings area:
<a onclick="window.parent.location.href = window.parent.location.href;">Settings saved. Please close this window</a>
This basically just refreshes the whole page and of course, in the process the shadowbox is no more. This approach works fine but the problem is the user also has the option to close the shadowbox by clicking outside of it. I need to capture when this happens and cause a postback (or page refresh) when this happens so that no matter what the settings are always applied when the shadowbox is closed.
I've found the answer, I needed to add an option to the Shadowbox.init() function as follows:
Shadowbox.init({
onClose: function () {
window.location.href = window.location.href;
}
});