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...
Related
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;
};
I need create probably an uncommon thing, so I haven't found any guide, and thats why I would like to ask here:
I am creating an interface for a site, which is being created by ajax loading its parts.
My web interface can accept an URL parameter as an input. If there is the parameter, my site changes its behavior (loads the page + content by value of that parameter and show it at specified place).
But, at some point, I have to get rid of the parameter.
Especially, if someone reloads the page, I want to show the cleanly loaded web page, not the content - but the parameter is still there whie pressing F5
So, my code - which is not working, looks simply like that:
//EDIT: Thanks to #charlietfl. I have here an unload event, which figures in ways like "I want to go to another page by url adress bar"
Same problem, jsut need to change it just and only to RELOAD page event.
//we are here: http://example.com/?docId=1
$(window).bind('beforeunload',function(){
//window.location.replace("http://example.com");
window.location.href = "http://example.com";
});
Know two things:
1) $(window).bind works well, with simple alert in it.
2) window.location.replace("http://example.com"); works well too, if fired at some other event, like key press (for my testing)
What I am trying to achieve, is to "skip" the reload by redirecting.
Aaaand one more thing. I know about HTML5 syntax changing the url without reloading the page (change->reload->done), but I can't use it, because of compatibility needed with older browsers.
Well, plase, any tips? Thanks in advance :)
I have a requirement where clicking on an icon should open a new window where the user will be able to view and edit certain fields. After the user closes this window and comes back to parent window, the icon color and text should be changed( for eg:- if the user has removed certain data, the icon will change to red color and text is set to null. If the user presses cancel button, nothing changes)
I am planning to implement this using a body onload function which essentially checks with the database using AJAX requests to see if the user has changed the data, then accordingly change the icon and text.
But, I see 2 problems in this approach
1. There will be a AJAX call even if the user has not changed anything.(ie. pressed Cancel button)
2. AJAX is called every time the body is on focus. Eg:- He may be working on some other page (or a different browser altogether) and comes back to this, resulting in an AJAX call.
Can anybody suggest a better approach.
I am using Javacript, JSP, Java
Two ways to implement this
Method 1
You know the methods which changes the database in the opened form. Suppose you have a delete method, write an additional window.opener.location.reload() after the method. The downside is that opener(parent window) gets reloaded every time you change something in the child window. Which is unnecessary.
Method 2 - Using cookies
I am using MDN's A little framework: a complete cookies reader/writer with full unicode support for creating cookies. The plan of action will be this. Create a cookie and set a value for it like this after you change anything in the child window and update it in the database like this docCookies.setItem("isChildFormUpdated", "yes");. You can use the same cookie for every action you do. Now when you navigate back to the parent form, do this.
$(document).ready() {
$(window).focus(function () {
var formCookie = docCookies.getItem("isChildFormUpdated");
if (formCookie !== null && formCookie == "yes") {
//resetting the cookie. you can also remove the cookie
docCookies.setItem("isChildFormUpdated", "no");
//docCookies.removeItem("isChildFormUpdated");
// your ajax call comes here
//or you could simply reload the form so that we get fresh data
//window.location.reload(); // it will be heavier
}
});
});
I hope you get the basic idea.
I think the easiest way to do this would be to set a cookie (learn how here). You can then have the two windows communicate between each other. This wouldn't be AJAX, but it will most likely work.
Another nice way to create a popup-like box is by using a modal box. These can be complicated but they look very nice. You have to make a jQuery plugin in, but you can take the one here and learn how it works. Good luck with your requirement.
How would you go about inserting an OnSubmit attribute to a form via Javascript only?
I'm pretty new to javascript so if you're able to provide detailed example code, that would be most helpful!
Here's the situation: I'm using a hosted signup page through Chargify (a payments platform) in order to process credit cards for my app, and then send the user back to my own thank you/confirmation page.
Tracking the entire funnel through google analytics is proving quite elusive due to changing domains (my domain -> Chargify.com -> my domain), since the credit card page is hosted by Chargify on their own domain.
I'm getting close: I've been able to get cross-domain tracking working (chargify.com page gets logged in Google Analytics), and can link from my domain to chargify by adding the following onclick attribute to my signup link:
onclick="_gaq.push(['_link', 'http://my-domain.chargify.com/subscriptions/new']); return false;"
However, I cannot do the same thing on the way back (Chargify -> Confirmation page) because I do not have access to the Chargify hosted payment page code, and because the user is taken to my confirmation page via a form submission, not a normal link.
Partial Solutions (need your help to finish this up):
Chargify allows several options for their hosted pages, one of them being to add custom javascript that gets inserted right before the </body> tag in a <script> tag.
I found some resources in the Google Analytics documentation on how to link pages, and adding the following to the Chargify form tag might work: onsubmit="_gaq.push(['_linkByPost', this]);"
(source: https://developers.google.com/analytics/devguides/collection/gajs/methods/gaJSApiDomainDirectory#_gat.GA_Tracker_._linkByPost)
The form tag does not currently have an onsubmit attribute, it's just this: <form action="/my_product/subscriptions" class="new_submission" id="hosted_payment_form" method="post">
Is there a way to use Javascript to simply append this attribute to the form tag? If you'd be able to provide a detailed example of what code I should insert inside of the <script> tag, that would be extremely appreciated.
window.onload = function() {
var form = document.getElementById('hosted_payment_form');
form.onsubmit = function() {
_gaq.push(['_linkByPost', this]);
}
}
I believe the above example is similar to what you need. We use document.getElementById to grab a reference to your form. Then set the onsubmit property to the code you want executed before the form is submitted. Remember to put this inside the window onload event if this JavaScript is executed before the page is rendered to ensure the form is built.
I'm trying to create a website with different pages that all change with jquery (and maybe ajax, depending on how long it takes to initially load everything)
Basically, the idea is that when you click on an item to view it, some sort of animation happens, and then you can view that item/page without the browser refreshing. Each new "page" would be associated with a hash value, so the idea is, whenever the hash value is changed some js function happens to make the change happen. I'm doing this so when you press the back button, the hash will change and as a result change the content of the page.
I'm having a hard time trying to figure out how to monitor the hash value so something happens when the back button is pressed and the hash value changes... (I know how to make it on click it checks the hash value, I'm just stuck on the back button)
The idea is that the functionality will look similar to this website I found http://thinkav.co.nz/
Thanks
(I would ideally not like to use plugins)
You could try the jQuery BBQ: Back Button & Query Library
jQuery BBQ: Back Button & Query Library
and read something about hash bang urls
Hash URIs
you must consider making your ajax site crawlable
Making AJAX Applications Crawlable
what you're looking to do is a part of the new HTML5 specs, and is essentially using the pushState() method. This allows webpages to use the hashmark(#) as a reference just like a URL, therefore allowing you to use the back and forward buttons as normal. I've never used it, but this should point you in the right direction! Happy Coding!
Use Ben Almans hashchange plugin. It has a hashchange event that fires everytime the hashchanges.
$(document).ready(function() {
// Bind the event.
$(window).hashchange( function(){
// Update page in here
})
// Trigger the event when the page first loads to handle the back button
$(window).trigger("hashchange");
});
the url bar at the top of the page will always remember anchors without refreshing so just load content via ajax and let the browser do the remembering for you.
ie:
//the js
function load(){
var hash = window.location.hash;
var url = hash+".html";
$("body").load(url);
}
$(document).ready(function(){
$("a").click(function(){
load();
});
});
//the html
click me
this should load test.html into the body with no refresh.