|
Permission denied for javascript methods, SSL security error between parent and child windows |
||||||||
I recently integrated a postcode lookup service into a checkout process, it constituted a pop up window, with a Webservice http call to return a JSON object of postcode data.
The data itself was returning successfully, and is output into a select field, so that the user can choose one of the address records from the many returned.
The problem I had arose when I ran a script to write the selected address data back from the pop up window to the parent window. Something like this:
2 $(document).ready(function() {
3
4 $('.submitButton').click(function() {
5
6 var selectedPcode = $('.address').val();
7
8 if (selectedPcode == undefined) {
9 alert('Please select an address')
10 }
11
12 else {
13 //split the string
14 var mySplitResult = selectedPcode.split(",");
15
16 var street = mySplitResult[0];
17 var area = mySplitResult[1];
18 var town = mySplitResult[2];
19
20 street = jQuery.trim(street);
21 area = jQuery.trim(area);
22 town = jQuery.trim(town);
23
24// set the parent form field values
25window.opener.document.form.evAddress1.value = street;
26window.opener.document.form.evAddress2.value = area;
27window.opener.document.form.evTown.value = town;
28window.close();
29
30 }
31
32 });
33 });
34</s/cript>
The code above will just split out the address parts and write them out to the corresponding fields in a form in the parent window. At this point I was seeing an error message:
The problem stems from the fact that the parent window is served under SSL and the pop up was not.
So make sure that your parent and child windows are both served under the same protocol, otherwise I guess it is being stopped as an inject hack, as it appears to be on a different domain.
|
Simple JQuery method of intercepting a hyperlink |
||||||||
Ever wanted to run a custom routine (like validation) on a template when a user clicks a link to proceed to the next step? I recently worked on a checkout template that was not a form, but still needed some validation installed when a user clicked the 'proceed' option. The code below shows a very simple way of using a JQuery selector to intercept the href click event and replace it with a custom function. My example shows a 'warning' div, and then returns false, IE does not action the click URL request.
2$(document).ready(function(){
3$("#element").click(function() {
4// Do some custom validation - show a div
5$(".warning").show();
6
7// disable the click
8return false; });
9});
10</script>
11
12<a href="" id="element">proceed</a>
|
Jquery Rounded Corners Plugin Example - cross browser CSS replacement |
||||||||
This article deals with a JQuery plugin that can emulate a totally cross browser CSS3 rounded corners solution.
There is an example of the finished code here: JQuery Rounded Corners example
|
Using the JQuery Cookie plugin to emulate server side forms |
||||||||
A project request recently came up where we needed to track some users responses to a series of questions, then build an account 'home' page based on those responses. Pretty straight forward you'll agree. The problem here arose from the clients using a bespoke online solution that blocked any kind of server side interaction.
I've played with JavaScript cookies in the past to remember display states in JQuery functions, so I thought they would be a great solution to this. This article deals with how to use JavaScript cookies to emulate a normal form submission.
There is a demo of using the JQuery Cookie plugin to emulate forms here.
