FancyBox PHP form submit issue - php

Okay, so I've been having a problem for the past four days, and a couple hours ago, I think I may have solved part of it (fancybox example #5, on their site, seems to be something that I want), however, I cannot get any part of it to work.
<? if($_GET['page'] != "startTime"){ ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/./fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="/./fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="/./fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#startTime").fancybox({
'padding' : 0,
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();}
})
});
$("#startTimeForm").bind("submit", function() {
if ($("#year").val().length < 4) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
$.ajax({
type : "POST",
cache : false,
url : "downTime.php?page=ajax",
data : $(this).serializeArray(),
success : function(data) {
$.fancybox(data);
}
});
return false;
});
</script>
<? } ?>
<? if($_GET['page'] == "ajax"){
var_dump($_POST); } ?>
<? if($_GET['page'] == "startTime"){?>
<div style="width:250px" class="new">
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="new">
<tr>
<form id="startTimeForm" method=post>
<p id="login_error">Please, enter data</p>
<tr>
<td>Enter Year</td>
<td><input class="czas" id="sec" name="year" type="text" size="5" maxlength="5" value="00" /></td></tr>
<tr>
<td colspan="2" align="center"><br /><input class="czas" type="submit" name="newTime" value="Set Start Time" /></td></tr>
</form>
I also had used a javascript function, below, and I'd eventually like that to work in the code above, but I cannot get the above to work properly. It just does nothing. Firebug also reports no errors.
<script>
function closeFB() {
<? $unix = mktime(0, 0, 0, 1, 1, $_POST['year']); ?>
$("#startTimeDiv").html("<div id='message'></div>");
$("#message").html("<p>Contact Form Submitted!</p>")
.append("<p>We will be in touch soon.<br><? echo $unix; ?></p>");
$.fancybox.close();
}
</script>
So, any help would be appreciated. Please tell me what I'm doing wrong.

The demonstration here worked to solve the problem. It created another problem, but that is for another question. I believe that was your demo, JFK, so thank you.

$.ajax({
type : "POST",
cache : false,
url : "downTime.php?page=ajax",
data : $(this).serializeArray(),
success : function(data) {
Instead of:
$.fancybox(data);
Try
$("#fancyboxdiv").fancybox(data);
}
});
Where fancyboxdiv is the name of your element that hosts the fancybox.
You will change the other functions to
$("#fancyboxdiv").fancybox().close()
etc..
Most JQuery UI components require a element to work off of as its parent and it will usually modify that element adding/removing elements to it and changing CSS to give appearance that is needed

Related

jquery ajax return full page content

at the first , excuse me for my bad english
i working in ubuntu for a jquery/ajax system
my codes in below:
index.html
...
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
<form name="stuSelForm" id="stuSelForm">
<table id="inputTable">
<tr><td colspan="3" align="center">Stu From</td></tr>
<tr>
<td> </td>
<td>St No : </td>
<td><input type="text" name="StNo" id="StNo" /></td>
</tr>
<tr>
<td></td>
<td>name : <br/> family : </td>
<td><input type="text" name="Fname" id="Fname" /><br/><input type="text" name="Lname" id="Lname" /></td>
</tr>
<tr>
<td colspan="3" align="right"><input type="submit" id="send" name="send" value="show" /></td>
</tr>
</table>
</form>
</body>
<script type="text/javascript" src="js/jscodes.js"></script>
...
js file :
$(document).ready(function()
{
$('#stuSelForm').submit(function(event)
{
var form = $(this);
inputs = form.find("input");
serializedData = form.serialize();
inputs.attr("disabled","disabled");
$.ajax({
url:'process.php',
type:'POST',
data: serializedData,
dataType:'text',
cache: false,
success : function(data,textStatus,jqXHR){ alert(data); },
error : function(jqXHR,textStatus,errorThrown) { alert(textStatus+jqXHR.status+jqXHR.responseText+"..."); },
complete : function(jqXHR,textStatus)
{
inputs.removeattr("disabled");
}
});
event.preventDefault();
});
});
and process.php :
<?php
header("Content-Type: text/html");
$StNo = $_POST['StNo'];
echo $_POST['StNo'];
?>
now all things are ok but the return value isn't StNo
it is whole content of process.php
it's mean
please help me why this happen
are this for php extensions or a mistake from me or ...
tanx for ur help
It sounds like the php is not running. Are you running your HTML file which calls the php file through localhost / a server or directly from the directory? You need the php server to evaluate your php script.
problem in your header:
you write in jquery dataType: text but you write in php header("Content-Type: text/html");
change it for get success:
like this:
$.ajax({
url:'process.php',
type:'POST',
data: serializedData,
cache: false,
success : function(data,textStatus,jqXHR){ alert(data); },
error : function(jqXHR,textStatus,errorThrown) { alert(textStatus+jqXHR.status+jqXHR.responseText+"..."); },
complete : function(jqXHR,textStatus){inputs.removeattr("disabled");}
});
I remove dataType:, because jquery default settings is dataType:'html'
and you don't need write dataType in this case

PHP post using ajax and appending response inside DIV

I'm playing around with Ajax, jQuery and PHP in an attempt to get familiar with the combination of them and how they integrate with each other. Here's my 1st attempt, it's a very simple form submission that does nothing special, just trying to see how ajax handles requests and responses.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7">
<title>My 1st AJAX attempt</title>
<link href="http://www.ht-webcreations.com/test/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#wait').hide();
$("#emailContactus").submit(function(){
$('#wait').show(),
$.ajax({
data: $(this).serialize(),
type: "POST",
url: 'includes/ajax.php?action=emailContactus',
success: function(data) {
console.log("Success posting emailContactus"),
$('#wait').hide(),
$('#notifications').html(data).addClass('ajaxsuccess').show();
},
error: function (xhr, textStatus, errorThrown) {
console.log("Success posting emailContactus: "+ textStatus, errorThrown);
},
complete: function(data){
$('#wait').hide(),
$('#notifications').html(data).addClass('ajaxsuccess').show();
}
});
return false;
});
});
</script>
</head>
<body>
<div id="wait"><img src="http://www.ht-webcreations.com/test/loading_ajax.gif" width="80" height="80"></div>
<div id="notifications"></div>
<form name="emailContactus" id="emailContactus" method="post">
<table width="500" border="0" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>name</td>
<td><label for="name"></label>
<input type="text" name="name" id="name"></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="button" id="button" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
ajax.php:
<?
///////////////// AJAX REQUESTS /////////////////
switch($_REQUEST['action']){
case('emailContactus'): if($_POST['name']=='a') { echo $value = 'User is A'; } else { echo $value = 'User is NOT A'; }
break;
case('addContact'): echo 'Contact added!';
break;
default: break;
}
?>
The problem in this simple example (working demo here) is that though I expect the data response to be appended to the #notifications div, instead it's being outputted to the very top of the document, even before any HTML has been loaded. Please have a look and suggest what needs to be changed. Also, I will be glad to hear all your comments on my code as I would like to be pointed to the right direction from the start. Thanks!

Please help me out with suggestion list

<html>
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getsuggestion()
{
var seltxt=$('#selstate').val();
//alert(seltxt);
$.ajax({
type: "POST",
url: "getstate.php",
data:{state: seltxt },
dataType: 'json',
success: function(data){
//alert(data['test']);
if(data['test']==0)
{
$("#suggestion").text("");
alert("No suggestion");
}
$.each(data,function(key,value)
{
//alert(key);
if(key!="test")
{
str=str+value+",";
$("#suggestion").text(str);
}
});
},
error: function(error,txtStatus) { alert(txtStatus);}
});
}
</script>
</head>
<body>
<form name=f1 method=post>
<table>
<tr>
<td>Select State:</td>
<td><input type=text id=selstate onkeyup="getsuggestion();">
</td>
</tr>
<tr> <td></td>
<td><div id="suggestion"></div>
</td>
</tr>
</table>
</form>
</body>
</head>
</html>
Hi,I want to make a suggestion list.For that I've used text box for getting input from the user.But now I want the values, stored in database,to be retrieved in the form of list.Here I am getting values in text the format.How do I conver text box into list?Or what should I do to append list to the text box?
You can use autocomplete feature of jQuery UI.You can download from http://jqueryui.com/download
You should use something like jQuery UI-Autocomplete: http://jqueryui.com/demos/autocomplete/
It provides all the stuff needed to do as you ask and also the demos required for you to learn how to do it yourself.

AJAX - Sending data to my php file does not seem to work [duplicate]

This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 7 years ago.
I'm still new to JQuery, AJAX and PHP.
I was wondering what I could be doing wrong here. I am taking in information about a customer and trying to return a confirmation message on the same page.
So the problems I am having:
1) Clicking on the submit button refreshes my page? Why?
2) I have a underneath my submit button. How would I be able to change the text of that with the results of addCustomer.php?
3) Is it okay to have my javascript and php code in the same file under customer.php?
Edit: Also I am using Firefox's Tamper Data Addon - when I click submit, no data is sent for some reason.
Customer.php
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function() {
$.ajax({
type : 'POST',
url : 'addCustomer.php',
dataType : 'json',
data:{
add_LN : $('#add_LN').val(),
add_FN : $('#add_FN').val(),
add_PN : $('#add_PN').val(),
add_DOB : $('#add_DOB').val()
},
success : function(data){
//I want to change the "confirmMsg" to the string given back from addCustomer.php
}
}
}
}
</script>
<p> </p>
<p>Add New Customer:</p>
<div align="center">
<form>
<table width="396" border="1">
<tr>
<td width="133"><p>Last Name:</p>
<p>First Name:</p>
<p>Phone Number:</p>
<p>Date of Birth:</p></td>
<td width="144"><p>
<input type="text" name="add_LN" id="add_LN" />
</p>
<p>
<input type="text" name="add_FN" id="add_FN" />
</p>
<p>
<input type="text" name="add_PN" id="add_PN" />
</p>
<p>
<input type="text" name="add_DOB" id="add_DOB" />
</p> </td>
<td width="97"><input type="submit" name="submit" id="submit" value="Add Customer" /></td>
<div id="confirmMsg"/>
</tr>
</table>
</form>
</div>
<p> </p>
</div>
</div>
addCustomer.php
<?php
$username="******";
$password="******";
$database="******";
if (isset ($_POST['add_LN']))
$lastName=$_POST['add_LN'];
else
die("Last Name not passed in POST");
if (isset ($_POST['add_FN']))
$firstName=$_POST['add_FN'];
else
die ("First Name not passed in POST");
if (isset ( $_POST['add_PN']))
$phone=$_POST['add_PN'];
else
die("Phone Number not passed in POST");
if (isset ($_POST['add_DOB']))
$dob=$_POST['add_DOB'];
else
die("Date of Birth not passed in Post");
//$membership==$_POST['membership'];
mysql_connect("dbs4.cpsc.u.ca",$username,$password);
#mysql_select_db($database) or die( "Unable to select database");
$query = "INSERT INTO customer (last_name, first_name, phone_no, date_of_birth, membership) VALUES ('$lastName', '$firstName', '$phone', '$dob', 'T')";
if (mysql_query($query)){
echo "Thanks";
} else
{
echo "Failed to insert customer into database";
}
mysql_close();
?>
Thanks so much for the help!
Ok, to answer your questions in order:
You should be able to check from Firebug (you are using Firebug, right?) in the Console tab to see that addCustomer.php is the endpoint being called by your Ajax request. Failing that, you can add the following code into your scripts:
$('#confirmMsg').ajaxComplete(function(e, xhr, settings) {
$(this).text('The response from your page is ' + xhr.responseHTML);
});
I'm assuming that your question here is "I have a div underneath my submit button...". Try the following command (which is a shortened version of the full Ajax method):
$.post('addCustomer.php', {
add_LN : $('#add_LN').val(),
add_FN : $('#add_FN').val(),
add_PN : $('#add_PN').val(),
add_DOB : $('#add_DOB').val()
}, function(data){
$('#confirmMsg').text(data);
});
Finally, yes - it is ok to have your script and PHP code on the same page. The PHP code is executed on the server before being rendered to your browser and the JavaScript works on the client side, executing once the page is delivered.
1) you can use the "preventDefault" on the click function.
2) you can add a success message by just displaying the "confirmMsg" div (hide it first with css)
3) if thats works for you it's oke. but i self try to keep all the code just on one place eg. "main.js"
See the code: ^my changes^ "just remove the ^ to make it work :)"
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(^e^) {
^e.preventDefault();^
$.ajax({
type : 'POST',
url : 'addCustomer.php',
^data: $('form').serializeArray(),^
success : function(data){
^$('#confirmMsg').show();^
}
}
}
}
</script>
I think this should do the trick :)
I've added the serializeArray function to make it more dynamic because if you have more input fields you don't have to change the js code again. http://api.jquery.com/serializeArray/
You can see what the form sends to first open firebug and reload the page then field the fields then submit it. You will see in the "console" tab some change ;)
I hope this will help you out.
I suggest you change dataType: 'json' to dataType: 'text', that might be what's tripping jQuery up.
And change your success handler to
success: function(data){
$("#confirmMsg").html(data);
}
Problem was the was not in the head of that file. It fixed all my problems but not sure why. Thanks to everyone who contributed
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#submit').click(function(e) {
$.ajax({
type : 'POST',
url : 'addCustomer.php',
dataType : 'json',
data:{
lastName : $('#add_LN').val(),
firstName : $('#add_FN').val(),
phone : $('#add_PN').val(),
dob : $('#add_DOB').val()
},
success : function(data){
if (data.error === true){
alert("there was an error in the post layer");
} else {
$('#confirmMsg').html(data);
}
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
return false;
});
});
</script>

How can I do File Upload using hidden iframe + jquery?

We all know it's not possible to do file upload using jquery alone. But it is possible to do a work around using jquery and hidden IFrame.
I have found four solutions using this method, but don't see how I can implenent them.
This solution found here on Stackoverflow, is one way of doing it. But I'm not sure if it's the best way. (not tested)
Using jQuery Form plugin is another option. I tried following this example, but it did not help. The solution loads my uploader.php in a new page and it's not able to get file info. I can't see it using IFrame.
Ajax File Upload is another solution - this one is crating a dynamic IFrame. Looking at the example code, I can't fiure out how to implement this.
The last solution is AJAX file upload from Webtoolkit. Here I can't figure out where I should declare what PHP file it should load for file handling.
Does anyone have a working example using one of these methods?
I have used Uploadify in a another solution - but I don't want to use flash now.
For #3 This is basically right off their website.
I'm a .Net guy, so I can't really help you on the .php handler you'll need to receive the file, but I hope you find this useful.
<html>
<head>
<link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
//YOUR URL TO RECEIVE THE FILE
url: 'http://localhost/testing/postfile.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(data.error);
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Ajax File Upload</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
</tr>
<tr>
<td>Please select a file and click Upload button</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>

Categories