I've been working on a web page where they want the person to sign up for something. As a result, they have an alert window on the page, the person hits the "sign up" button, and the alert window loads with a form.
No big deal about that. However, on the browser page underneath, and on the form on the second stage of signup, there are links to standard disclaimer pages. They want these to be pop up windows when the user clicks on them.
When I was testing it out, in generic form (no user signed in - the page and disclaimers are declared "public" so you don't need to be logged in to see them), it worked fine.
However, if the user is logged in, when you hit the disclaimer links, it instead loads that same "signup" page - the parent page!
I'll post my coding, but what I'm looking for is twofold - is there an easy way to keep other content from loading in that popup?
If not, I'm guessing that it has something to do with that omnipresent signup popup/alert, and as this other content gets pulled in, there's coding that tells it to load any subsequent popups with that same page. Is there some kind of language I should be looking for? It's all very modular, with a lot of includes, to tracking things down can be tricky. Less so if someone has some suggestions, I'd guess.
<script language="javascript" type="text/javascript">
// Popup window code
var popupWindow = null;
function popitup(url2,winName,w,h,t,l,scroll){
settings =
'height='+h+',width='+w+',top='+t+',left='+l+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url2,winName,settings)
}
</script>`
<p>© <%=Year(now)%> <%=usr_Company%> All Rights Reserved.
<a style="color: #898787;" href="info_privacy1.asp" onclick="popitup(this.href,'disclose','700','780','100','200','yes');return false">Privacy Policy</a> | <a style="color: #898787;" href="info_terms1.asp" onclick="popitup(this.href,'disclose','700','780','100','200','yes');return false">Terms of Service</a> <br /><br />
<%=brand_name%> legal disclaimer blah blah blah blah blah.<br /><br />
</p>
</div>
</div>
</body>
</html>
`
You have to let the JS know that the user is signed in. Few ways to do this - AJAX, but more so simply on page load -IDK what you are using - php or whatever, but what it should do is this:
if user is signed in, print out a globav variable to javascript "userSignedIn = 1"
then when the user clicks a link, js checks if userSignedIn is set to 1, and if it is, it will not display the signup window, but continue to the next one, if userSignedin is not set (or is not 1), the signup form will be displayed...
Related
When this project was first started we thought it would be super easy but after two days of failure, we are stumped.
Environment: MacBookPro - WordPress with Thrive Themes Architect
Goal: Create a simple form that allows visitors to input the name of a subdirectory into a form that instantly redirects them to that subdirectory upon clicking on the submit button.
Purpose: When a partner gives out their website URL which includes a subdirectory name sometimes the person fails to put in the subdirectory name and they go to the main site instead. This form would make it easy for them to get to the right place so that the right partner gets proper credit.
Theories: Could the redirect be being blocked by Browser security protocols or something? Is the coding off in some way? Is the method flawed?
Three of Many Failed Coding Attempts:
<script type="text/javascript">
function Redirect(){
var subDirectory= document.getElementById("sub_directory").value;
window.location.href= "https://www.thewatercoach.com/" + subDirectory;
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.
<script type="text/javascript">
function Redirect(){
var subDirectory= document.getElementById("sub_directory").value;
window.location.replace(subDirectory);
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
Results: The page simply refreshes or reloads the pre-existing URL, but doesn't work at all.
<script type="text/javascript">
function Redirect(){
var subLink = document.getElementById("sub_Link");
var subDirectory= document.getElementById("sub_directory").value;
subLink.href = "https://www.theWaterCoach.com/" + subDirectory;
subLink.click();
}
</script>
<form>
<label>www.theWaterCoach.com/</label>
<input type="text" id="sub_directory">
<button onclick="Redirect()">Submit</button>
</form>
<a id="sub_Link" href="https://www.theWaterCoach.com/">.</a>
Results: This Coding Example did work reliably with FireFox but not on Chrome or Safari. It does not work via Chrome on a PC either. For testing purposes, you can enter Becca into the text box.
Any ideas or solutions will be greatly appreciated!
The submit button is located inside a form tag. Therefore, when you click submit, the browser simply sends a GET request to your homepage. The Javascript code to redirect got executed, but then it is terminated right before the GET request is sent.
Solution: You have to prevent the form from being submitted. Find out how: read this stackoverflow question.
Can a Genius help me out here?
I'm working on Spring MVC Web Project with jsp.
There is a parent page that shows list of subject,
and a popup page shows up when user clicks a subject to check its password.
popup page transfers the inserted password by a form to parent page and close itself, so parent page moves to other page that shows its content.
It works fine in Chrome, but not in Internet Explore.
In IE, popup disappears and another page comes up with its content.
Does any genius know how I prevent the third page, and just have first parent page moves to content page?
Here is my code.
Hope someone help me here....
//the form in popup page
<form action="readDetail.do" name="insertedPasswordForm" id="insertPasswordForm" role="form" method="post" target="parentPage">
<input type="password" id="typedPassword" name="typedPassword"/>
<input type="hidden" name="privateId" value="${privateId}"/>
</form>
<button onclick="insertPassword()" style="margin-left:200px;">확인</button>
//submit the form by this button with javascript
//javascript
function insertPassword(){
opener.name = "parentPage";
document.insertedPasswordForm.target = "parentPage";
document.insertedPasswordForm.submit();
window.close();
}
I just changed the way to transfer the values.
I used Modal, so there was no need to use pop up.
Say we have - /test?id=123 , and when we're on the respective page, there is a check occurring here, and if this check fails - there is an alert message that pops up and redirects you to '/'.
Right now, this works fine, except that it loads the DOM content to the HTML page when the URL is hit. Is there anyway I could hide the DOM content completely, if the check fails and redirects me to the index page? This basically means that if the alert message pops up, the user should not be able to see what the HTML page contains and should be redirected immediately.
I would use ng-if to wrap your sensitive DOM content, like so:
<html>
<head>
...
</head>
<body>
<header>
...
</header>
<dialog ng-if="!checkPassed">This is your alert.</dialog>
<main ng-if="checkPassed" ng-cloak>
This is your protected content.
</main>
<footer>
...
</footer>
</body>
</html>
ng-cloak will stop your content being visible at page load.
ng-if will remove your content from the page if the condition (in this case $scope.checkPassed) resolves to false.
In your Angular controller you would need to set the value of $scope.checkPassed to be true or false depending on whether your check succeeded or failed.
This is better than ng-show because it means someone can't code inspect your site and see the content anyway.
I apologize ahead of time if this is clearly documented somewhere on the FB developer site - but I can't find it (so please link me if appropriate).
I've implemented the FB login button on a website using GAE + Python. Here is the HTML:
<fb:login-button></fb:login-button>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'ad16a806fc10bef5d30881322e73be68', status: true, cookie: true, xfbml: true});
FB.Event.subscribe('auth.sessionChange', function(response) {
if (response.session) {
// A user has logged in, and a new cookie has been saved
} else {
// The user has logged out, and the cookie has been cleared
}
});
</script>
Currently the behavior is - if I click on the "login" button, I am asked to allow the application access to FB. Which I then choose, "OK". But then the login button is still showing "login" and not "logout". How do I implement that? On the server or client side?
Its not documented on the FB SDK login-button page for some reason, but you can add the autologoutlink="true" attribute to the tag and it will show a logout button if you are logged in rather than just making the button invisible.
<fb:login-button autologoutlink="true"></fb:login-button>
Warning: it will ignore that tag if you are using custom text on the login button like
<!-- This will always display the button, whether you are logged in or out -->
<fb:login-button autologoutlink="true">Login To My Service!</fb:login-button>
Thanks to user "haha" the solution is:
1) Grab the Facebook Python SDK: https://github.com/facebook/python-sdk/tree/master/examples/appengine
2) Implement the HTML example: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.html
3) Update your main request handler and models: https://github.com/facebook/python-sdk/blob/master/examples/appengine/example.py
This has now been documented at https://developers.facebook.com/docs/reference/plugins/login/ . You may also want to check out onlogin for your callback.
Derek did not mentioned the HTML5 alternative which is he recommended way:
<div id="fbloginbut" scope="user_birthday" onlogin="checkLoginState();" class="fb-login-button" data-max-rows="1" data-size="large" data-show-faces="false" data-auto-logout-link="true"></div>
The following page will generate the code for the login/logout button that you like the most:
https://developers.facebook.com/docs/plugins/login-button
can I have a question about how to redirect the page after user invite their friends?
i have a code like this: (in javascript)
function inviteFriends(){
if(isBusy) return false;
isBusy = true;
$(".musicPlayer").addClass("invisible");
var fbsc = '<fb:request-form
action="apps.facebook.com/yourapp?pageid=thanks"
target="_self"
method="post"
nvite="true"
type="Contest"
content="Come and Join this contest!"> <fb:multi-friend-selector
target="_self"
showborder="false"
max="30"
import_external_friends="false"
email_invite="false"
cols="5"
actiontext="Invite your friends!" /></fb:request-form>';
var uiSize = FB.UIServer.Methods["fbml.dialog"].size;
FB.UIServer.Methods["fbml.dialog"].size = {width:625};
FB.ui({
method:'fbml.dialog',
display: 'dialog',
fbml: (fbsc),
width: '625px'
},function(response) {
$(".musicPlayer").removeClass("invisible");
window.location = "?pageid=thanks";
isBusy = false;
});
}
that script will call fbml window with facebook's invite friends dialog inside facebook dialog window.
what i want is:
when you close the window (press x at top right corner) it'll redirect to: ?pageid=thanks (this is works with the script above)
when user press the skip button on invite friends dialog it'll redirect to: ?pageid=thanks (this is not working - It'll redirect to ?pageid=thanks but inside the fbml window)
when user have done inviting their friends, it'll also redirect to: ?pageid=thanks (this is also not working - it'll redirect to ?pageid=thanks but in new window -.-!)
am I miss something on my script above, or I'm using the wrong way?
I'd like to achieve this for at least in IE and Firefox
is anyone have done with this before? I really need your suggestion,
EDIT:
if i put:
<fb:request-form target="_top" blah...> <fb:multi-friend-selector target="_self" blah...>
The skip button is working :) but still, after you're done inviting your friends it'll redirect to a new window
If I Put:
<fb:request-form target="_top" blah...> <fb:multi-friend-selector target="_parent" blah...>
This is work if you invite your friends, but not if you press the skip button -.-!
I reckon this is because of facebook open-up another dialog window when you click invite your friends (to preview before you click send)
so the structure level was different between skip button and send button (i hope you got what I'm write)
Thank you in advance
AnD
This is The answer :)
var fbsc = '<fb:request-form action="url here" target="_top" method="post" invite="true" type="Contest" content="blah...">
<fb:multi-friend-selector target="_top" showborder="false" max="30" import_external_friends="false" email_invite="false" cols="5" actiontext="Join NOW to WIN!" /></fb:request-form>';
Note: target="_top"
Try changing target="_self" to target="_parent" i'm not sure that is exactly what you need but the target is the relevant parameter here.