I've been trying to build a fairly simple phone-friendly web page that uses Paypal to complete payments. I got the solution running with a basic HTML form and a sample PHP Express Checkout, which was working fine until I started trying to use jquery mobile to make the page phone-friendly. I since tried another PHP library with the same result. The library I'm now using is from Angell EYE and I've created the following basic page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dummy App</title>
</head>
<body>
<form method="get" action="paypal/SetExpressCheckout.php">
<label for="name">Name</label><input type="text" name="name" /><br />
<label for="qty">Quantity</label><input type="text" name="qty" /><br />
<input type="hidden" name="price" value="4.00" />
<input type="hidden" name="tax" value="1.40" />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
The Angell EYE library is located in a subdirectory called 'paypal' and after putting some dummy data into the form and clicking submit, I'm eventually directed to Paypal's Sandbox checkout and after completing the purchase I get back to the dummy site.
I then add in jquery as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dummy App</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile- 1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js"></script>
</head>
<body>
<form method="get" action="paypal/SetExpressCheckout.php">
<label for="name">Name</label><input type="text" name="name" /><br />
<label for="qty">Quantity</label><input type="text" name="qty" /><br />
<input type="hidden" name="price" value="4.00" />
<input type="hidden" name="tax" value="1.40" />
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
At this point if I load the page and submit in Chrome, there's a wait of approx 6 seconds until the browser reports "Error Loading Page" and if I look in the Chrome console I see the following error:
XMLHttpRequest cannot load https://www.sandbox.paypal.com/cgi-bin/webscr?cmd=_express-checkout&useraction=commit&token=EC-81C31424M3017780Y. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://dummy.company.com' is therefore not allowed access.
If I remove the "" line from the page I no longer get the error, but I also (obviously) lose the phone optimisation...
There are lots of articles here explaining how to set HTTP headers on your server to avoid the problem; however in this case the resource is Paypal and I've found no mentioned of how/whether Paypal supports it...
Ultimately I want to build a PHP layer on my site that does some stuff and then submits initates the checkout process and I want to format the front page and had hoped to do it more easily with jqm.
I may be missing something really obvious.
Cheers,
Chris
Related
I built one application in core php which is hosted on IIS server and windows 8 PC. WAF security is added on this application.
When I submit the page/form with details like this "Lorem Ipsum is not simply random text" , WAF is blocking this request before executing server side code. I use PDO using Parameterized queries and also CRF token. Still request get blocked. Looks like it is blocking those request where there is word like "is not", "and","or" etc sql keyword. I have created below test page.
<?
$FAILED=false;
$MSG='';
if(isset($_POST['add_review']))
{
$FAILED=false;
$MSG='Data submitted';
echo $MSG; exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
</head>
<body>
<form id="frm-add-review" action="<?=$_SERVER['PHP_SELF']?>" method="post" enctype="multipart/form-data">
<input type="hidden" name="review_id" value="<?=#intval($_GET['id'])?>">
<input type="hidden" name="csrf_token" value="<?=generateCSRFtoken('add_review')?>">
<textarea name="txt_review" id="txt_review"></textarea>
<div class="form-actions">
button type="submit" id="add_review" name="add_review" class="btn btn-info">Submit</button>
</div>
</form>
</body>
I have found an issue with my site and I have isolated it to Jquery Mobile components. I am simply clicking a href link that calls another PHP page. On the second page I have set up a form and a Jquery form validation that checks to see if the SKU button has been selected and if so it should return an alert and cancel the form submission. The problem is that when I link to the second page from the first page the form validation code is not working.
If I refresh the page it works just fine. I isolated out the link to Jquery Mobile and the page works just fine. There is something that is being passed by Jquery Mobile that is keeping the page from loading in its entirety. Or, more likely there is some carry-over from the first page that disables the validation code on the second page.
I can add that if I get rid of the links to Jquery Mobile entirely on the second page (no styling at all) and I link to the second page from the first page, The Jquery Mobile formatting still carries to the second page. I have investigated this extensively and I can't find any previous mention of this problem. I have set up test pages to sort this out.
Page 1:
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>Customer Maintenance</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script>
</head>
<body>
Test 1 page
<p>Home Page</p><hr>
<footer>Created by: attentionjay</footer>
</body>
</html>
<a href="test2.php" >Test Inventory</a>
Page 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" >
<title>Customer Maintenance</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(function () {
$('#custalert').bind('submit', function (e) {
if($("input:first").val() == "") {
alert("You must enter a Customer Alert");
return false;
}
});
});
$(function () {
$('#queryinv').bind('submit', function (e) {
if($('#sku_checkbox').is(':checked') == true) {
alert("You must enter a SKU");
return false;
}
});
});
</script>
</head>
<body>
<div data-theme='a' >
<div style="padding:10px 20px;">
<form action="inventory_inquiry.php" method="get" id="queryinv" >
<h3>Enter SKU</h3>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Choose Input Type:</legend>
<input type="radio" data-theme="a" name="input" id="sku_checkbox" />
<label for="sku_checkbox">SKU</label>
<input type="radio" data-theme="a" name="input" id="entire_checkbox" />
<label for="entire_checkbox">Entire Inventory</label>
</fieldset>
<label for="sku" class="ui-hidden-accessible">SKU:</label>
<input type="text" name="sku" id="sku" value="" placeholder="Item SKU" data-theme="a">
<input name="customer_id" type="hidden" value='<?php echo $customer_id; ?>'/>
<button type="submit" data-theme="b">Submit</button>
</form>
</div>
</div>
<br>
<p>Home Page</p><hr>
<footer>Created by: attentionjay</footer>
</body>
</html>
Any help I could get would be great. This is a mystery to me.
EDIT: 7-1-2013
I thought that it would be worth updating what I found while solving this problem. Disabling the AJAX data works, but only for links. I had difficulty getting it to work on a form submission. I ended up disabling AJAX globally with the following script:
<script>$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});</script>
This script must be placed before the Jquery Mobile script on the page. This will disable the AJAX functionality for the entire page. AJAX is great and it should be used when possible. I had already set up the layout of my site before I discovered my problem. A site could more easily be retrofitted to make use of the Jquery Mobile functionality.
Try adding data-ajax="false" to your <a> tag whenever you are linking to a seperate php or html page.
jQuery mobile is designed for developers to put multiple pages int he same html or php file. So it uses ajax to link between those 'pages' which are really just divs. The issue with this is that, by default, jQuery mobile uses ajax for every link unless you state otherwise. This can create some cooky problems and it took me a while to understand when I first started with jQuery mobile. I think there's a pretty good doc about this topic in the JQM documentation.
adding
rel = "external"
works for me
i want to print a message from php code, when the user clicks on button. I added code in php, and placed and if condition that executes when the user clicks on the button.
Here's the code of default.php:
<?php
if (isset($_POST['button1'])) {
echo '<b>Ok.</b>';
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP3</title>
</head>
<body>
<p> </p>
<p> </p>
<p> </p>
<form id="form1" name="form1" method="post" action="default.php">
<p>
<label for="textfield1">User Name</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="textfield2">Password</label>
<input type="password" name="password" id="password" />
</p>
<p>
<input type="submit" name="button1" id="button1" value="Submit" />
<br />
<br />
<label id="label1">
</label></p>
<p> </p>
</form>
<p> </p>
</body>
</html>
"Ok" should be printed.
But i see no "Ok" message get printed.
What can i do?
Thanks
Could you try to add <?php phpinfo(); ?> in your body tag ? It should confirm if php is installed on your server.
Edit, just saw your last message, if your server is not running PHP, then you have to install it to achieve the result you are looking for.
if you're just testing your PHP file locally then try installing XAMMP to test your php file again, if it works then PHP wasn't installed before. XAMMP includes PHP, MySQL and Apache.
you should submit the form to itself or leave it blank. Check the form action and make sure you are posting to right php file.
You're echoing "Ok" before the DOCTYPE declaration -- it may be that it's there and you're not seeing it in the browser. Have you tried viewing the source and making sure your "Ok" isn't really there?
You might want to move your php code into the body part of your document.
If you say you can't see the PHP code when you click view source in your web browser you don't have PHP installed on your server. You need PHP to run this script. You would need to get in touch with your web host or enable it on your web server if its your own.
I have no idea what is going on here, but my form won't post. I've stripped it back to absolute basics, but still no joy. Get works fine and I'm working on MAMP on localhost.
Here it is: simplest form in the world that won't work.
<?php
print_r($_POST);
?>
<!DOCTYPE html>
<html lang="en" class="">
<head>
<title>Site Title</title>
</head>
<body class="wrapper">
<p>This is the form</p>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post">
<input type="text" name="firstName" />
<input type="submit" name="fSubmit" value="submit" />
</form>
</body>
</html>
I've probably missed something so stupid, hence getting some more eyes on it!
Cheers
Alright folks. Thanks for all your ideas - I had already tried EVERY POSSIBLE combination of actions, names, etc... I had the corret hml headers posted to the page. I just restarted my mac and re-ran the servers and everything seems to be ok. I have no idea what went wrong, but it seems to be fixed now.
Apologies for the fairly useless question.
maybe try
<?php
print_r($_POST);
?>
<!DOCTYPE html>
<html lang="en" class="">
<head>
<title>Site Title</title>
</head>
<body class="wrapper">
<p>This is the form</p>
<form action="" method="post">
<input type="text" name="firstName" />
<input type="submit" name="fSubmit" value="submit" />
</form>
</body>
</html>
or even just make sure php is installed/enabled
I am sending cms updates from a textarea edited by CKeditor to a PHP handler using jQuery. The POST contains the HTML for the page. Not a problem, or so I thought.
Now when I send two consecutive tags like <p><strong> or even just >< the server throws a forbidden error.
I haven't had a problem with another site I built using the same principles, running on the same server, and I tried the consecutive tags scenario without a hitch.
I built a simple test(code below, a form with a textarea to POST to a PHP handler that echoes the results of the POST. Even if I don't even read the POST content the server still throws the error.
So it would appear that I have to process the HTML before POSTing.
I cannot for the life of me see what is different in the site that works as there is no data handling before POSTing.
Does anyone know of this problem, and any solutions?
Oh! and it works fine on my WAMP server(5.3.5)(public server is 5.2.17), so is there a PHP setting I could look at over-riding?
And now we have entered the twilight zone. I changed the textarea field name from name="test1" to S and there are no hitches??? So I now have an odd solution but this may not be the end of it, so If anyone is aware of what the issue could be, I'd be very thankful if not amazed.
Code:
post-form.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Post Form</title>
</head>
<body>
<form action="post-print.php" method="post">
<textarea name="test1" cols="50" rows="5"></textarea>
<!--name this and the php code text1 and it works-->
<textarea name="test2" cols="50" rows="5"></textarea>
<textarea name="test3" cols="50" rows="5"></textarea>
<input name="submit" type="submit" value="Send" />
</form>
</body>
</html>
post-print.php
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<p>Print result:</p>
<p><?php echo $_POST['test1']; ?></p>
<p><?php echo $_POST['test2']; ?></p>
<p><?php echo $_POST['test3']; ?></p>
</body>
</html>
First, you need to be sure about what are the values that your script containing the form is passing.
Change your script "post-print.php" (or "update_divs.php", not clear from your sample) to be something like this:
<?php
print_r($_POST);
?>