Safari, MVC3 ajax form submit - asp.net-mvc-3

I have a form that submits just fine in FF, IE 8, IE 9, chrome.
In safari (windows), it submits but my model is empty. This behavior is only on my dev and prod site, not local development. Local development works normal. What am i doing wrong here?
Form:
<form action="/NetSite/Applications/ElectronicFileTransfer" id="TransfersSearchForm" method="post">
<table class="siteTable">
<tbody>
<tr>
<th style="width: 20%;">FICE</th>
<td style="width: 80%;"><input id="Criteria_Fice" maxlength="6" name="Criteria.Fice" size="6" type="text" value="" /></td>
</tr>
<tr>
<th>Source Email</th>
<td><input id="Criteria_SourceEmail" maxlength="40" name="Criteria.SourceEmail" size="25" type="text" value="" /></td>
</tr>
<tr>
<th>Target Email</th>
<td><input id="Criteria_TargetEmail" maxlength="100" name="Criteria.TargetEmail" size="25" type="text" value="" /></td>
</tr>
<tr>
<th>Upload From Date</th>
<td>
<input class="datePicker" data-val="true" data-val-date="Invalid date specified. Date should be like MM/DD/YYYY." id="Criteria_FromDate" maxlength="12" name="Criteria.FromDate" size="12" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Criteria.FromDate" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<th>Upload To Date</th>
<td>
<input class="datePicker" data-val="true" data-val-date="Invalid date specified. Date should be like MM/DD/YYYY." id="Criteria_ToDate" maxlength="12" name="Criteria.ToDate" size="12" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Criteria.ToDate" data-valmsg-replace="true"></span>
</td>
</tr>
<tr>
<th class="empty"></th>
<td>
<button type="submit" title="Search" id="SubmitButton" class="gradientbutton gradientsmall gradientorange">Search</button>
<button type="button" title="Clear" id="ClearButton" class="gradientbutton gradientsmall gradientorange">Reset</button>
</td>
</tr>
</tbody>
</table>
</form>
JS submit method called by the event:
searchFormSubmit: function ($form, currentForm) {
if ($form.valid()) {
var $button = $("#" + FileTransferHome._enum.SubmitButton);
var $searchResults = $("#" + FileTransferHome._enum.SearchResultsDivId);
jMessage("Processing request...", $button, true, false);
$.ajax({
cache: false,
url: currentForm.action,
type: currentForm.method,
data: $form.serialize(),
error: function (xhr, ajaxOptions, thrownError) {
jMessageHide();
$searchResults.html(xhr.responseText).addClass(JSGlobalVars.MessageBoxError).fadeIn('slow');
},
success: function (result) {
jMessageHide();
$searchResults.removeClass(JSGlobalVars.MessageBoxError).html(result).fadeIn('slow');
location.hash = "SEARCHRESULTS";
}
});
}
}
Action:
I have an else block in there that i have put in just to test this case and it executes rather than the main block.
[HttpPost]
public ActionResult Index(ElectronicFileTransferHomeViewModel model)
{
... actions...
}

This in as internal app and behind windows login. Safari has a non issue with with windows authentication.
A work around that seems to be working for us (although not ideal) is to put Safari in Private browsing mode.

Related

Spring MVC ajax post text data

I have a form:
<form name="employeeForm" method="post">
<table cellpadding="0" cellspacing="0" border="1" class="GridOne">
<tr>
<td>First Name</td>
<td><input type="text" name="firstName" id="firstName" value="" onchange="FirstNameAjaxCall(event);"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" name="lastName" id="lastName" value=""></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" name="email" id="email" value=""></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Ajax Submit" onclick="madeAjaxCall(event);"></td>
</tr>
</table>
</form>
//====================================================
and my controller:
#RequestMapping(value="/ajaxExample", method=RequestMethod.POST)
public #ResponseBody ModelAndView firstnameAjaxTest(#RequestParam(value="text") String text) {
final ModelAndView modelAndView = new ModelAndView();
System.out.println(text);
modelAndView.setViewName("ajaxExample");
return modelAndView;
}
//===============================================
and script
function FirstNameAjaxCall(e){
e.preventDefault();
var text = document.getElementById('firstName').value;
alert(text);
$.ajax({
type: "POST",
url: "http://localhost:8080/ajaxExample",
cache: false,
dataType: 'text',
data:{
text:text
},
success: function(){
alert('Done');
},
error: function(){
alert('Error while request..');
}
});
return false;
return false;
}
And request return msg: Error while request..
I doesn understand why.
Please help me

Submitting a form using AJAX STILL not working

I've spend the past 5hours trying to avoid posting this, but i just cant find where im wrong on this code. I wish to send a comment to email without leaving the HTML page but just adding PHP echo at the bottom of the form. This is my HTML:
<form name="form1" method="post" enctype="multipart/form-data" action="javascript:submitForm();">
<table>
<tr>
<td valign="top">
<label for="first_name">First Name *</label>
</td>
<td valign="top">
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="last_name">Last Name *</label>
</td>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments *</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
<div id="text"> </div>
my AJAX:
function submitForm(str)
{
if (str=="")
{
document.getElementById("text").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("text").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","contact.php?q="+str,true);
xmlhttp.send();
}
I can confirm that my php works fine because when i change my form action to "contact.php" it works perfectly. The problem is when I try to get the php using AJAX, firefox developer tools confirms that the contact.php is called fine with the function: submitForm() but its just not working. Can anybody help?
One problem is this: "contact.php?q="+str
Based on the markup above, str will always be undefined, so you are never sending your form data to contact.php. Additionally, when you set the action="contact.php" for testing, you're using a POST, and your ajax call is a GET. So you could still have problems with the PHP script.

Ajax form redirect to another url

i want to redirect to another url when the form is submitted how can i do it
i am new to ajax so please tell where to add the code which can do it
here is my code
<script type="text/javascript">
function submitForm() {
if ($("#fields_fname").val() == "") {
$("#fields_fname").focus();
alert("The First Name field is required.");
return false;
}
if ($("#fields_lname").val() == "") {
$("#fields_lname").focus();
alert("The Last Name field is required.");
return false;
}
if ($("#fields_email").val() == "") {
$("#fields_email").focus();
alert("The Email field is required.");
return false;
}
if ($("#fields_phone").val() == "") {
$("#fields_phone").focus();
alert("The Phone field is required.");
return false;
}
if ($("#fields_zip").val() == "") {
$("#fields_zip").focus();
alert("The Postal Code field is required.");
return false;
}
if ($("#fields_suffix").val() == "") {
$("#fields_suffix").focus();
alert("The 'I'm Interested In' field is required.");
return false;
}
$.ajax({
url: 'zohoprocess.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 1 submitted successfully');
$.ajax({
url: 'https://app.icontact.com/icp/signup.php',
type:'POST',
data:$('#ContactForm').serialize(),
success: function(){
$(".form_result").html('Form 2 submitted successfully');
},
error:function(){
alert("success");
$(".form_result").html('');
return false;
}
});
},
error:function(){
alert("failure");
$(".form_result").html('');
return false;
}
});
return false;
}
</script>
<form id="ContactForm">
<input type="hidden" name="redirect" value="http://tennispronow.com/thanks.html">
<input type="hidden" name="errorredirect" value="http://www.icontact.com/www/signup/error.html">
<div id="SignUp">
<table width="260" class="signupframe" border="0" cellspacing="0" cellpadding="5">
<tr>
<td valign="top" align="right">
<span class="required">*</span>Email
</td>
<td align="left">
<input type="text" name="fields_email" id="fields_email">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>First Name
</td>
<td align="left">
<input type="text" name="fields_fname" id="fields_fname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Last Name
</td>
<td align="left">
<input type="text" name="fields_lname" id="fields_lname">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>What Level Player are you?
</td>
<td align="left">
<select name="fields_prefix" id="fields_prefix">
<option></option>
<option value="Beginner">Beginner</option>
<option value="Upper Beginner">Upper Beginner</option>
<option value="Intermediate">Intermediate</option>
<option value="Advanced">Advanced</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>I am Interested in:
</td>
<td align="left">
<select name="fields_suffix" id="fields_suffix">
<option></option>
<option value="Private Lessons">Private Lessons</option>
<option value="Lessons & Equipment">Lessons & Equipment</option>
<option value="Classes">Classes</option>
<option value="Equipment">Equipment</option>
</select>
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Other Info:
</td>
<td align="left">
<input type="text" name="fields_fax" id="fields_fax">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Phone
</td>
<td align="left">
<input type="text" name="fields_phone" id="fields_phone">
</td>
</tr>
<tr>
<td valign="top" align="right">
<span class="required">*</span>Postal Code
</td>
<td align="left">
<input type="text" name="fields_zip" id="fields_zip">
</td>
</tr>
<input type="hidden" name="listid" value="42670">
<input type="hidden" name="specialid:42670" value="D1CQ">
<input type="hidden" name="clientid" value="860526">
<input type="hidden" name="formid" value="4668">
<input type="hidden" name="reallistid" value="1">
<input type="hidden" name="doubleopt" value="0">
<tr>
<td></td>
<td><span class="required">*</span> = Required Field</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="Submit" value="Submit" onClick="return submitForm()">
</td>
</tr>
</table>
<div class="form_result"> </div>
</div>
</form>
please check it dont know what to write more
Just add action attribute to the form tag.

tableToGrid & knockoutjs

I'm having a pb with jqgrid used with knockoutjs.
I have an HTML table witch contains checkboxes binded using konckoutjs that works fine,
but when i fired the tableToGrid function of JQGRID, my checkboxes lose their binding.
Thanks
JS
var listuserProfile = [];
var viewModel = {
userProfile: ko.observableArray(listuserProfile)
};
$(document).ready(function () {
//Fire knockoutjs
ko.applyBindings(viewModel);
//Init the user profiles list
viewModel.userProfile(#Html.Raw(Json.Encode(Model.UserProfiles)));
tableToGrid("#userProfiles");
});
HTML
<table id="userProfiles">
<thead>
<tr>
<th>User</th>
<th>Admin</th>
<th>Manager</th>
<th>ADV</th>
<th>HR</th>
<th>DG</th>
</tr>
</thead>
<tbody data-bind="foreach: userProfile">
<tr>
<td><span data-bind="text: User"></span></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: Admin" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: Manager" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: ADV" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: HR" /></td>
<td><input disabled="disabled" type="checkbox" data-bind="checked: DG" /></td>
</tr>
</tbody>
</table>
without the call of the tabletogrid it works fine!!!

Wordpress Datatrans Ajax implementation

I'm trying to implement a creditcard payment service (of datatrans.ch) into a wordpress based site. Datatrans offers an Ajax API, which you can take a look at here:
Datatrans Ajax API
Example Code
I copy/pasted the example code and saved it inside a html file on my machine. Running it works properly. In the next step I tried implementing it in wordpress by creating the following function:
function datatrans_payment_ajax($lang, $currency, $amount) {
$merchant_id = 101...; // ... on my machine it is numeric of course ;)
wp_deregister_script('datatrans-ajax');
wp_register_script('datatrans-ajax', 'https://pilot.datatrans.biz/upp/ajax/api.js?merchantId='.$merchant_id, false);
wp_enqueue_script('datatrans-ajax');
?>
<noscript>
<p class="err">
JavaScript is disabled in your browser.<br/>
This showcase requires JavaScript.
</p>
</noscript>
<div>
<h3>Step 1: Ajax UPP.paymentRequest(...)</h3>
<form id="uppform">
<fieldset>
<input type="hidden" name="language" value="<?php echo $lang; ?>"/>
<table cellspacing="0" cellpadding="3" width="550">
<tr>
<td align="left">Merchant Id :</td>
<td style="width: 10px"> </td>
<td align="left"><input type="text" size="20" name="merchantId" value="<?php echo $merchant_id; ?>"/>
</td>
</tr>
<tr>
<td align="left">Amount :</td>
<td> </td>
<td align="left"><input type="text" size="20" name="amount" value="<?php echo $amount; ?>"/> (= 10.00)
</td>
</tr>
<tr>
<td align="left">Currency :</td>
<td> </td>
<td align="left"><input type="text" size="20" name="currency" value="<?php echo $currency; ?>"/>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="left">Card Number :</td>
<td> </td>
<td align="left"><input type="text" size="24" name="cardNumber" value="4242424242424242"/>
</td>
</tr>
<tr>
<td align="left">Expiry :</td>
<td> </td>
<td align="left">
<input type="text" size="4" name="expm" value="12"/>
<input type="text" size="4" name="expy" value="15"/> (MM/YY)
</td>
</tr>
<tr>
<td align="left">CVV code :</td>
<td> </td>
<td align="left"><input type="text" size="4" name="cvv" value="123"/>
</td>
</tr>
<tr style="display: none;">
<td align="left">Process mode :</td>
<td> </td>
<td align="left">
<input type="radio" name="mode" id="auto" value="auto" checked="checked"/> <label for="auto">Automatic 3D ACS call using API</label>
<br/>
<input type="radio" name="mode" id="manual" value="manual"/> <label for="manual">Manual redirection to 3D ACS</label>
</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td align="left"><input type="button" class="button"
onclick="callPayment()" value="send"/><span class="buttend"></span>
</td>
</tr>
</table>
</fieldset>
</form>
<div id="frameHolder"></div>
<div id="response" style="width: 400px;"></div>
<div id="step2" style="display: none;">
<h3>Step 2: XML authorizeSplit (server-2-server request)</h3>
<form action="https://pilot.datatrans.biz/upp/jsp/XML_authorizeSplitEx.jsp" method="post" target="_parent">
<fieldset>
<textarea style="width: 400px; height: 150px;" name="xmlRequest"></textarea>
<div>
<input type="submit" class="button" value="send"/><span class="buttend"></span>
</div>
</fieldset>
</form>
</div>
<script type="text/javascript">
var mode;
var params;
function callPayment()
{
mode = $("input[name=mode]:checked").val();
// read form values
params = {
merchantId: $("input[name=merchantId]").val(),
cardNumber: $("input[name=cardNumber]").val(),
expy: $("input[name=expy]").val(),
expm: $("input[name=expm]").val(),
cvv: $("input[name=cvv]").val(),
currency: $("input[name=currency]").val(),
amount: $("input[name=amount]").val()
}
// call paymentRequest, response will be received in responseCallback
if ( mode == "auto" )
{
params.returnUrl = "https://pilot.datatrans.biz/upp/ajax/sample-merchant-return-page.html";
UPP.paymentRequest( params, responseCallback, frameCallback );
}
else
if ( mode == "manual" )
{
UPP.paymentRequest( params, responseCallback );
}
};
function frameCallback()
{
// create iframe and add it to document
var iframe = $("<iframe/>").attr( "id", "paymentIFrame" ).width( 390 ).height( 400 );
$("#frameHolder").append( iframe );
$("form#uppform").hide(); //hide the form
return iframe[0];
};
function responseCallback( response )
{
var responseElm = $("#response");
responseElm
.empty()
.append( "<h4>Ajax response:</h4>")
.append( $("<div/>").text("status: " + response.status) )
.append( $("<div/>").text("uppTransactionId: " + response.uppTransactionId) );
if ( JSON.stringify )
responseElm
.append( $("<div/>").html( "Complete JSON response: " + JSON.stringify( response ).replace( /,/g, ", ") ) )
if ( mode == "auto" )
{
if ( response.status == "success" )
{
// This step will be done server-2-server
$("#step2 textarea").val(
"<<?php?>?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n" +
"<authorizationSplit version=\"1\">\n" +
"<body merchantId=\"" + $("input[name=merchantId]").val() + "\">\n" +
"<transaction refno=\"to_be_filled\">\n" +
" <request>\n" +
" <uppTransactionId>" + response.uppTransactionId + "</uppTransactionId>\n" +
" <amount>" + $("input[name=amount]").val() + "</amount>\n" +
" <currency>" + $("input[name=currency]").val() + "</currency>\n" +
" </request>\n" +
" </transaction>\n" +
"</body>\n" +
"</authorizationSplit>"
);
$("#step2").show();
$("#uppform").hide();
}
if ( response.is3DEnrolled ) // close/remove the iframe
{
$("#paymentIFrame").remove();
}
}
else
if ( mode == "manual" ) // manual mode used, browser has to be redirected to ACSURL
{
if ( response.is3DEnrolled && response.status == "success" )
{
responseElm.append( $("<div/>").html( "Redirecting page to ACS in 3 seconds..." ) );
setTimeout( function() {
params.uppTransactionId = response.uppTransactionId;
params.errorUrl = "https://pilot.datatrans.biz/upp/merchant/errorPage.jsp";
params.returnUrl = "https://pilot.datatrans.biz/upp/merchant/successPage.jsp";
window.parent.location = response.ACSURL + "?" + $.param( params );
}, 3000 );
}
}
};
</script>
</div>
When I run it, I receive an error status code 1003, saying that the uppTransactionId is undefined which should result from the responseCallback. So I guess it has something to do with the usual processing of Ajax calls in wordpress which must go through the admin-ajax.php file in the wp-admin folder!? I am not sure how to cut this datatrans implementation into pieces to make it fit the wordpress Ajax processing. Furthermore I would like to know if you think that my guess is even right regarding what causes the error?
Thanks in advance.
Cheers,
Tim
Ask them to open test account for you, and then you could test with your MerchantID on pilot servers with all features. If you copy/paste code from their examples i think this will not work. Those are just examples of implementation.
You can try to use Merchant-ID:1000011011 but this is shared from all users, so you cannot set landing redirect pages (on success, on error)
Also check what encoding you use:
UTF-8 encoding: /jsp/upStart.jsp
ISO encoding: /jsp/upStartIso.jsp
And most common mistake is price format, if you price is 15.25 you need to send 1525.
Also if you wish to use 3D secure, you need to activate this in datatrans backend.

Resources