I am a newbi to webdesign/php and javascript and I am having a problem. Please look at this code:
<script type="text/javascript">
<!--
function thanksDiv(){
document.getElementById("myThanksDiv").style.display ='block';
}
function hideDiv(id){
document.getElementById(id).style.display='none';
}
//-->
</script>
<form id="contacts-form" method="post" action="email.php" target="myiframe">
<fieldset>
<div class="alignright">Send Your Message!</div>
</fieldset>
</form>
<iframe name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;"></iframe>
<div id="myThanksDiv" style="width:200px;height:150px;position:absolute;left:50%; top:20px; margin-left:-100px;border:1px solid black; background:#fff;display:none;padding:20px;">Thanks! <br />Your message was sent.</div>
and in email.php:
echo '<script type="text/javascript">'
, thanksDiv();'
, '</script>';
?>
The idea is that when I click on 'Send Your Message' I should see a box saying 'message was sent', but I don't.
If I don't go through the email.php page and I just call thanksDiv from the form submit link it works. Any idea why?
the javascript in your iframe is not on the same "scope" as your parent document where the function is defined.
In order to call it try:
echo '<script type="text/javascript">'
, 'parent.thanksDiv();'
, '</script>';
The difference is the "parent" which tells JS to look in the frame's parent for the function ;)
Please make sure all is on the same domain/port, otherwise you could violate the Same Origin Policy and it therefore might not work.
Edit
Here is a configuration that works fine on my machine (PHP5, Firefox):
test.html
<html>
<head>
<script type="text/javascript">
<!--
function thanksDiv(){
document.getElementById("myThanksDiv").style.display ='block';
}
function hideDiv(id){
document.getElementById(id).style.display='none';
}
//-->
</script>
</head>
<body>
<form id="contacts-form" method="post" action="email.php" target="myiframe">
<fieldset>
<div class="alignright">Send Your Message!</div>
</fieldset>
</form>
<iframe name="myiframe" id="myiframe" src="" width=1 height=1 style="visibility:hidden;position:absolute;"></iframe>
<div id="myThanksDiv" style="width:200px;height:150px;position:absolute;left:50px;top:20px; border:1px solid black; background:#fff;display:none;padding:20px;">Thanks! <br />Your message was sent.</div>
</body>
</html>
email.php:
<?php
echo '<script type="text/javascript">parent.thanksDiv();</script>';
?>
echo '<script type="text/javascript">'
, 'thanksDiv();'
, '</script>';
Missing ' in second line.
function thanksDiv(){
document.getElementById("myThanksDiv").style.display ='block';
}
this function should be there in email.php tooo. OR add it a separate page and include page there.
When you click on Send your message call
onclick="thanksDiv();";
All the content from the form page will be gone on the next page. So there is no longer a thanksDiv function. When you submit the form you are going to a different page entirely.
Calling the function directly works because you are still on that page.
Create a success.html page for instance and in email.php instead of echoing js do this:
header('Location: http://www.yoursite.com/success.html');
Which will redirect to success page.
Related
I am opening a fancybox on click of a link.
This fancy box is having username and password which I want to authenticate on submit button click.(To simplify I have changed the fancybox to a submit button only as of now)
I have written a php code which should have displayed hello, either in fancybox or on the html page (not sure exactly where) but it is not being displayed.
How to get hello on click of submit button either in fancybox or on the html page?
I don't want to use ajax call, but if it is not possible without ajax call, how to use ajax in this case?
//p.php
<html>
<head>
<style>
#hidden-content-b
{
/* Custom styling */
max-width: 850px;
border-radius: 40px;
/* Custom transition - slide from top*/
transform: translateY(-50px);
transition: all .33s;
}
.fancybox-slide--current #hidden-content-b
{
transform: translateY(0);
}
</style>
<link rel="stylesheet" type="text/css" href="fancybox-master/dist/jquery.fancybox.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="fancybox-master/dist/jquery.fancybox.min.js"></script>
</head>
<body>
<h2>fancyBox v3.1 - Inline content</h2>
<form action = "p.php" method = "post">
<div class="grid">
<p>
<a data-fancybox data-src="#hidden-content-a"
href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;" id="hidden-content-a">
<center>
<h1><b>HTML</b></h1>
<input type = "submit" value = "Submit" name = "submit">
</center>
</div>
<?php
if(isset($_POST['submit']))
echo "hello";
?>
</div>
</form>
</body>
</html>
When you display some content using fancyBox, then it gets moved from its position and therefore it is not inside your form. You just have to change order
of the elements so that your content contains the form, for example:
<div class="grid">
<p>
<a data-fancybox data-src="#hidden-content-a"
href="javascript:;" class="btn">Open demo</a>
</p>
<div style="display: none;" id="hidden-content-a">
<form action="p.php" method="post">
<center>
<h1><b>HTML</b></h1>
<input type="submit" value="Submit" name="submit">
</center>
</form>
</div>
</div>
redirect form action to the same page and check if(isset($_POST['submit'])) at first
I had the same problem with .Net. You can attach FancyBox to your form with out moving your HTML.
FancyBox Documentation:
// Container is injected into this element
parentEl: "body",
So to answer the question use:
$('[data-fancybox]').fancybox({
parentEl: 'form'
});
// Or better yet, use ID's
$('#ID_to_open_link').fancybox({
parentEl: '#ID_of_form'
});
I want to view a jquery success message after the form submit in php. I tried following code. But its not appearing. But when I code it in html it is working.But it is not after submiting. How can I achieve it?
here is my javascript code in php
<?php
if(isset($_POST['aaa']) and $_POST['aaa']=="Submit"){
echo '<html>
<style type="text/css" media="screen">
<!--
.container {width: 670px; margin: 10px auto;}
.messagebox {background-color: #F5F5F5;padding:5px;margin:10px 0px;border: 1px solid #DBDBDB;}
.errorbox {color:#000;background-color:#ffeded;padding:5px;margin:10px 0px;border:1px solid #f27c7c;}
.confirmbox {background-color:#F2FFDB;color:#151515;border:1px solid #9C6;margin:10px 0px;padding:5px;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script >
<!--
$(document).ready(function() {
$("#messageBox").addClass("messagebox");setTimeout(function(){
$("#messageBox").fadeOut("slow")}, 4000);
});
function messagebox(){
$("#messageBox").removeClass().addClass("confirmbox").html("Item has been saved").fadeIn(2000).fadeOut(4000);
}
function alertbox(){
$("#messageBox").removeClass().addClass("errorbox").html("Oops, there was an error!").fadeIn(2000).fadeOut(4000);
}
-->
messagebox();
</script>
<body>
<div class="messagebox" id="messageBox" style="display:none;"></div>
</body>
</html>';
}
?>
Your code have some problems but to answer your question, You need to call your script with ajax and in the callback function you show the message:
$.ajax({
url: "test.php",
data: data,
success: function(message){
//this will be called once the php has returned an answer
$("#messageBox").removeClass().addClass("confirmbox").html(message).fadeIn(2000).fadeOut(4000);
}
})
PHP
//after processing the data, echo a response:
echo "Message has been saved";
//if an error occured, echo it
echo "an error occured";
UPDATE:
Don't output the entire page in PHP echo. just close the php tag and use regular HTML:
<?php
if(isset($_POST['aaa']) and $_POST['aaa']=="Submit"):?>
<html>
//regular html code goes here
<?php endif;?>
look here for more examples.
You don't have any button or form. What you should have is something like:
<form action="myscript.php" method="post">
<input name="email" type="text"/>
//some more inputs
<input value="Submit" type="submit"/>
</form>
Now you can bind an event to the form submit and call the ajax:
$('form').submit(function(){
$.ajax({
url: "test.php",
data: $(this).serialize(),
success: function(message){
//this will be called once the php has returned an answer
$("#messageBox")
.removeClass()
.addClass("confirmbox")
.html(message)
.fadeIn(2000).fadeOut(4000);
}
})
});
Sounds like you really need to learn some things about web development, i suggest you start here, and there are a lot of great resources on the web.
i need to show a dialog box if login failed. now i'm able to show the error line inside the form, but i need to show the error message using modals.
here's my code:
$sfAuth = new SfAuthenticate();
$sfHelper = new SfHelper();
$user = $_POST['txtUsername'];
$pass = $_POST['txtPassword'];
$checkUser = $sfAuth->checkUserJobSeeker($user);
if($checkUser)
{
$login = $sfAuth->loginJobSeeker($user, $pass);
if($login)
{
echo $sfHelper->redirect('forms/jobSeeker/HomeJobSeeker.php');
}else{
echo $sfHelper->redirect('forms/jobSeeker/formLoginJobSeeker.php?err=Invalid Username or Password');
}
}else{
echo $sfHelper->redirect('forms/jobSeeker/formLoginJobSeeker.php?err=Sorry, We Cannot found your Username');
}
i want to show the dialog box after redirecting to the login form.
can anyone help me please?
Have a look at this fiddle, it should work: http://jsfiddle.net/7PwWp/5/
As to launching the modal window on user error, you can add a condition:
<?php if(isset($_GET['err']): ?>
launchWindow('#message');
<?php endif; ?>
In the message box, you can put:
<p><?php echo (isset($_GET['err'])? $_GET['err']:''; ?></p>
To show a modal dialog box you'll need javascript. Check this previous SO question: How to create popup window(modal dialog box) in HTML). I would, similarly, recommend checking out jQueryUI which is an extension of the javascript library jQuery.
In 3 steps, here's how this works:
Include jQuery and jQueryUI library scripts in the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"/></script>
Create the markup for the modal dialog to be displayed
Doesn't need to be fancy but note the id tag as jQuery uses that to know which element to display in dialog.
<div id="dialog" title="Basic dialog">
<p>This is the message inside the modal dialog.</p>
</div>
Show the dialog using jQueryUI
<script>
$(document).ready(function() {
$( "#dialog" ).dialog();
});
</script>
See a full working example here: http://jsfiddle.net/wjp94/3/
put this code on formLoginJobSeeker.php file
<?php
if($_GET['err'] == "Sorry, We Cannot found your Username")\
{
echo '<script> alert("Sorry Wrong Username Or Password");</script>'
}
?>
If you want to show dialog then you have to use jquery dialog
Add following code to your page;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"/></script>
<div id="dialog" title="Basic dialog" style="display:none">
<p>
<?php if(isset($_GET['err'])) echo $_GET['err'];?>
</p>
</div>
<?php if(isset($_GET['err']){ ?>
<script type="text/javascript">
$(document).ready(function() {
$( "#dialog" ).dialog();
});
</script>
<?php } ?>
if you want to see how your modal looks like check on this link
http://codebins.com/bin/4ldqp8p
Solved?
If not, here is my solution.
Redirect to sth like that (notice #run_modal):
`forms/jobSeeker/formLoginJobSeeker.php?err=YOUR_MESSAGE#run_modal`
and JS:
function detectModalParam()
{
var hash = $(location).attr('hash');
if (hash == '#run_modal')
{
YOUT_MODAL_FUNCTION();
};
}
$(document).ready(function()
{
detectModalParam();
}
so I am currently using a dialog box with an iframe inside (page from same domain) to return a value from the iframe to the page the dialog is on. Everything works great except when I submit a form. When i submit the search form and try to click the a's to get the value of the id to the input nothing happens. Heres an example of what im doing.
heres the page with the dialog
<html>
<head>
<script>
$(document).ready(function(){
$('a#booksearch_lnk').click(function(){
$('.choosebookbox').dialog('open').css('display','block');
$('#choosebookframe').contents().find('a.choosebook').click(function(){
// alert($(this).attr('id'));
$("#isbn").val($(this).attr('id'));
$('.choosebookbox').dialog("close");
});
});
});
</script>
</head>
<body>
<div class="choosebookbox" style="display:none">
<h4>Choose your first book</h4><div align="center" style="width: 500px; height: 500px"><iframe scrolling="no" id="choosebookframe" src="http://www.myurl.com/choosebook.php" width="100%" frameborder="0" height="100%"></iframe></div>
</body>
and here is the iframe page...
<html>
<head>
</head>
<body>
<div style="width:600px;height:600px;">
<form action="<?php echo $PHP_SELF;?>" method="get">
<input type="text" name="search" style="width:150px"/>
<input type="submit" value="search" class="orangebtnsm" />
</form>
<? if(isset($_GET['search'])){
$search = $_GET['search'];
echo "search for $search";
echo "<ul>";
echo "<li><a id='2345676898' class='choosebook'>Book 5</a>";
echo "<li><a id='1985563345' class='choosebook'>Book 6</a>";
echo "</ul>";
}
?>
<ul>
<li><a id="1234567898" class="choosebook">Book 1</a></li>
<li><a id="2345676898" class="choosebook">Book 2</a></li>
<li><a id="9854645645" class="choosebook">Book 3</a></li>
<li><a id="1985563345" class="choosebook">Book 4</a></li>
</ul>
</div>
</body>
</html>
I would say try using a future-proof event handler.
Swap
$('#choosebookframe').contents().find('a.choosebook').click(function(){...
With
$('#choosebookframe').contents().find('a.choosebook').live('click',function(){
I think the binding is being lost when the form is submitted.
I have written this code. Here after logging into facebook, the document needs to redirect to check3.php. Here is the code..
<html>
<body>
<div id="header">
<h1>ReviewBox</h
<ul id="nav">
<li>Real Reviews For Real People</li>
<li style="background: url(images/request.png);display:block; margin : 0 10px 0 0;float:right;text-indent: -9999px; width : 200px; height: 30px;">Request Review From Friends</li><br/>
</ul><br/><br/><br/><br/></div>
<div id="container">
<div id="content">
<p>Someone is always out there, waiting to know what you have to say.
So why not speak out with ReviewBox?</p><br/>
<h6>Get Started!</h6><br/><br/>
<center>
<div id="fb-root"></div>
<script language="javascript" src="json2.js"> </script>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'xxxxxxxxxxxx', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button perms="read_stream,publish_stream,email,offline_access">
Login with Facebook
</fb:login-button>
<br/><br/>
<p>Like ReviewBox :</p><br/><center>
<fb:like href="https://www.facebook.com/apps/application.php?id=xxxxxxxxxx" send="false" width="220" show_faces="true" font=""></fb:like></center>
<script>
FB.api('/me',function(response) {
setCookie("fbname",response.name,365);
setCookie("fbid",response.id,365);
setCookie("checker",1,1);
var username=getCookie("fbid");
if (username!="undefined" && username!="")
{
alert("Welcome Again, " + response.name + "!");
sample();
//window.location.reload();
}
else
{
alert("Welcome Guest! Please Login with Facebook To Get Started With ReviewBox!");
username=response.id;
username2=response.name;
if (username!=null && username!="")
{
setCookie("fbid",username,365);
setCookie("fbname",username2,365);
setCookie("checker",1,1);
}
}
});
function sample()
{
document.form1.submit();
}
</script>
<form name="form1" action="check3.php" method="post">
<input type="hidden" name="fb_user" id="fb_user" value="" />
</form>
</body>
</html>
But when I run this code and after logging into facebook the code inside sample() function is not executed.. as a result my page does not redirects to check3.php.
Any suggestion?
Learn,
First of all, determine whether or not the Facebook reponse object actually contains a value. It is possible that the API is for some reason, not returning an ID result?
Once you verify that the API is indeed returning a value, perhaps use that in your "if" statement, instead of username?
I don't know exactly what is wrong, but I am fairly certain that the "fbid" value is not being set inside the cookie, which to me implies that the API is not returning a correct result, or you are passing in invalid parameters to the API.
Good luck!
H