Javascript displays div is gone after postback - javascript

I have a page that has a button that displays the contents of a div with javascript. I have a ASP.net validator control that does a postback. If I step though my javascript in firebug the page still has the div visible, and if i just let the page run normally the javascript makes the div visible for a second then the postback resets the visibility to off when it reloads. How can I stop this from happening?
Thanks!

When making the DIV visible set the value of a hidden field that will be persisted in the post back. Read that value in the Load and determine if you need to make that same DIV visible server side.
When the post back occurs the entire page is rebuilt and so the things that changed client side, disconnected from the server, can't just simply be persisted.

Related

Check value inside IFrame before post back

I am using an IFrame in my WebForm aspx page. I fill in the data in the IFrame, IFrame has the auto post when all data is filled.
I click the Server Side button that posts the page back to the server, I need to check a certain value in of the IFrame before I post back in the page.
I have added on client click javascript function to server side button to investigate if the value is populated for the element inside IFrame.
I get cross-origin error. Is there a way to check/wait for the iframe to populate the element inside it before I trigger my server side code ?

How Do I Disable A Div From Loading with jQuery?

What I'm trying to do is make my website show 10 posts, then ask the user if he/she wants to load the "next page." What I want this "next page" button to do is load the content when the user clicks it.
The reason I want the div to just not load completely at all is for website speed. If my website hits let's say 100 posts, even if I just use a simple .hide(); function or something, then the website's still going to take it's time trying to load the 90 posts the website is hiding.
And yes I do realize if I'm worried about page performance I could just make new pages every time I reach 10 posts but that seems like it'd take a lot of time and be very confusing because it wouldn't work in order or something would be wrong with it.
You can't. If it is in the HTML document then it will be sent to the browser. It will be too late to stop it from loading at that point.
The only way to stop the div content from loading is to not have the div in the document in the first place, and then fetch more data from the server (which you would typically do with a link to the next page optionally with JavaScript progressively enhancing things to load the extra data with Ajax instead).
What you need to use is an XHR or Ajax request to get the next 10 posts, it is much better to do it this way rather than hiding them and activating them as needed, because even if you hide it the browser still had to download the content.
You should start by displaying just a few posts, and then load more as needed using XHR/Ajax.
jQuery provides some simple .ajax functions that should help you with retrieving the data as needed.
AJAX is your best bet.
For your needs you could do this two ways:
Make AJAX load more posts as soon as the user clicks the button.
As soon as your page loads (JQ ready function) you could fire an AJAX call to get 10 more posts and either print them in a DOM hidden element OR save them in some variable for later use. After you recover the posts succesfully (AJAX .success()) you could call the AJAX function again and run it again and make it repeat this process until it caches say... 100 posts in a variable or prints it in your DOM element.
You can do an ajax call every time the user clicks the button and append the result to the last div on your page using jquery
$( ".container" ).append( $( "div" ) );
If you want to create a page which will not load all the content at once and not have the user click a button, you can use lazyloading.
It was developed for loading of images, but it can be used for loading of div's too. See Layz Loading for Div
This works both when the user scrolls down and if they navigate to another page and then go back, it will only load part of the page that is visible. Meaning, if they are at the bottom, and they scroll up, it will reload the div's above.

Jquery window.location to new page but also open a div originally set to display none

I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery

asynchronous __doPostBack

Requirement
In User control ( In single update panel) - user will change some data and click on button or link button other than save button
We prompt Dialog box to user for (Yes/No/Cancel)
On cancel we did nothing and remain on same page
On No - we redirect/process further without saving data.
On Save we have to save changes and redirect/process further.
Here the problem is with Save
We have different panels on page (same on user control)
On Selection of Yes, Here we call "_doPostBack" for save button click event (Works fine), and in same javascript function below save postback calls other "_doPostBack" to hide current panel (Panel-1) and show another one (Panel-2) and server side process.
But Its always shows (Panel-1)
However in FF, Panel-2 just prompt and hide again.
EDIT: Hide panels are at server side, as there are multiple buttons which shows/hide panels.
Expected result is : After save data, show Panel-2 and hide Panel-1
can anyone has idea how to overcome this prob ?
Without some actual code it is a bit difficult to see what is going on, but from what I understand it is a problem with timing.
When you click 'Yes', you perform the postback function and immediately after you hide the panel.
Your 'doPostback' is actually a-synchronous. Meaning the response comes a bit later (not immediately). Thus when the response comes back it updates your page and that is where you flow is breaking up.
FF is probably fast enough to actual show you what is really happening. Your hide function works ok, but is overwritten by the ajax response.
I suggest you hide the panel asynchronously, with the response that comes from the server.
Here are some links on that:
- RegisterClientScriptBlock within AJAX method call
RegisterStartupScript doesn't work with ScriptManager,Updatepanel. Why is that?
I hope this helps you get on the right track.
Good luck

Javascript: Making divs hold state of display='block' when user clicks BACK button in browser

I have a few divs on a form that are hidden by default (style="display:none;"). When the user clicks a certain radio button, an onclick event executes and exposes the divs. The user is then taken to a review page upon form submit that shows him any errors. If there are any, he clicks the BACK button on his browser to go back to the form and correct them. Caching is enabled so that all of his form contents are there. The problem is, since the form is looking for an onclick event, all of the previously exposed divs are hidden again. Is there any way to make sure they stay exposed when the user clicks back to the form from the review page? I thought a document.ready function would do it, but no joy.
As Yair mentioned, you can use cookies. It cannot be done with pure JS. However, you can also use PHP.
Before the user is transferred to the second page, have JS scan the divs in question, and find which ones are visible. (I'm assuming they all have individual IDs). Store these IDs in a comma-delimited string, or array, and send it as a _POST or _GET to the new page.
Have PHP store it as a hidden value somewhere. You could use a hidden input, or a data-x on something ... as long as it's there.
Have JS on that page that watches for the back click, stops it, and then redirects the user to the previous page, and sends the string or array back to it. Have PHP on that page print it as a JS value, and have JS on pageload show all divs with matching IDs.
Cookies or localStorage if you aim for only modern browsers:
localStorage
Is there any way to make sure they stay exposed when the user clicks
back to the form from the review page? I thought a document.ready
function would do it, but no joy.
You can use cookies in order to manage state in a web-browser. Cookies will help you save the desired user's state.
All javascript code is reinitialized on browser reload. You cannot identify whether the user comes back through the browser.
You can use cookies or local storage to save a value when initial display happens and show/hide the div later on document.ready.

Categories

Resources