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;
};
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 working on application which uses iframe overlays in addition to its main window. One of these overlays is used to modify user settings, some of which affect the display of the main window. So after saving these settings I would like to update the main window so that the user can see their new settings in action without having to log back into the application, but I have yet to find a way that is both consistent and renders the updated main window correctly...
The specifics are that a click on the Save button calls a JavaScript function. This function submits an HTML form to invoke the appropriate Spring-MVC action (saveXXXSettings.do). In the corresponding server-side method (saveXXXSettings()), a post-save call to another method to redraw the main page will render an updated version of that page but within the iframe overlay instead of the top frame of the browser. So I just tried to set window.top.location.href to the form submisssion, i.e.,
window.top.location.href = settingsForm.submit();
and got an HTTP error page with no helpful information. In looking at this site and the W3 School page, I see that the default method-type for HTML forms is GET, so I'm wondering if the only way to get around my error to use the corresponding Spring action and a parameter string, i.e.,
window.top.location.href = saveSettings.do?formParam1=xxxx&formParam2=yyyy
I'm trying to avoid having to assemble a parameter string just to achieve the window-refresh I want, so any advice or suggestions are appreciated...
I would recommend using iframe event listeners instead. From the main frame add a listener to messages. Might look something like this...
window.addEventListener('message', function(e) {
var submitParamters = e.data;
});
Then when the user clicks submit in the overlay iframe, post a message to the main window. Might look something like this...
mainWindow.postMessage(submitData, targetOrigin);
You can read more about this here... http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage.
This is capable of performing cross-domain messaging, but will work with same domain as well.
Thanks for the answer, CurtisJD, but I decided to go with a different approach: I'm copying the values entered in the iframe overlay into a form on the main page, then I submit that form to save the values then refresh the home page, which it does automatically at the top (i.e., browser) level. Thanks again for your quick response...
I'm using the Polymer core-animated-pages to switch between my websites main pages.
I select which page needs to be shown by the id of that <section>. You can see a sample in action here. Now, the issue I'm having is that at loading of the page, the page that should be selected gets loaded from the url, eg www.example.com/home shows the home page, www.example.com/activities shows the activities page (code left out of example since not really relevant).
But what should I do when the id provided in the link doesn't exist? Is there an option to show a default core-animated-pages-page with a 404 message? Or do I have to check every link if it's in an array of all my pages, if so load the error page manually and else show the correct page?
Again, here's the example: jsbin.
Edit: To show the way my page handles linking, here's an update example: jsbin. Linking is essentially www.example.com/#home, etcetera
Something I'm missing from reviewing your example is how you're handling routing. In a typical site, if a user navigates to example.com/foo or example.com/#foo my expectation would be (using your current setup) that that would take you to the corresponding core-animated-pages page with the ID foo or a section which corresponds to that route.
Using routing (maybe the Polymer flatiron-director element), a basic solution might query the DOM in your element to see if a section of ID notsupportedURL can be found. If not, default to taking the user to your core-animated-pages 404 page, which doesn't have to be any more complex than what you have in place now.
There are a couple of things you could do here.
In the simplest case, you could just validate the value in the pageChanged handler. If the page doesn't exist, update it:
pageChanged: function(){
var foundPage = this.$.pages.querySelector('#' + this.page);
if (! foundPage) {
this.page = 'error'
}
...
See: http://jsbin.com/xequvone/14/edit
If you don't bind the core-menu directly to the core-animated-pages, you can add whatever logic you want. The following version does exactly the same thing as the previous one, but uses a separate variable for the selected page:
http://jsbin.com/xequvone/12/edit
I think you'd want a router if your URL scheme was more complex. For example, if the hash includes multiple levels and parameters, such as #people, #/people/search or #/people/edit/12343.
I'm making a webshop for a school project, and i've got an issue with the shopping cart. because the shoppingcart & webshop are in different iframes on the main page(got quite a few images on main page, don't want to reload that, thats why it's in iframes).
Basically, my issue is that when something is selected in the webshop, the shopping cart doesn't update untill the entire webpage is reloaded. I'm storing shopping cart info in an array in a SESSION variable. basically, what i want is to reload the iframe of the cart when the session variable changes.
If the answer involves anything besides PHP/javascript, please give a clear explaination/example code, i've never used anything outside of PHP/js/html/css before. Thanks in advance :) been stuck on this for a few days now :S
Create a javascript function to fire the following code when a user adds something to their cart:
document.getElementById('some_frame_id').contentWindow.location.reload();
I don't have the code in front of me, but I've done something similar where in the parent you create an event listener on "message" then in the iframe you can call parent.postMessage, works as long as they are on the same domain
Although APAD1's answer directly addresses what you asked, it sounds like your program has some deeper design problems. Using iframes for content from the same site (ie within one domain rather than content from a separate site) is bad practice.
Consider instead displaying content in <div>s with unique ids, and using javascript to update the contents of those divs. If you're using PHP on the back end, you can create a "page" that only generates the cart contents part of your page. Not only can you include it in each page without changes, but you can load it directly with javascript and insert the result into the current page to update it in place.
Whenever your user adds an item to their cart, you can call the javascript method that refreshes the <div> with the cart's contents.
I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.