I have a form, when submitted, invokes an AJAX request. This ajax request performs back-end validation on the inputs. If an error is detected, it displays the error messages. So if the user fills out 30 fields, and one is not valid, I would like to return all those inputs with an error message.
My Laravel Code:
Route::post('/roa', function() {
$m = Request::except('_token');
$name = "form1_sections/" . $m['nextTab'] . "_form";//next view name
$name2 = "form1_sections/" . $m['currentTab'] . "_form";//current view name
$var= parse_str($m['inputs'], $output);//data from ajax is a string
if ($m['currentTab']=='section2'){//i'm only doing validation on one section right now
//to simplify the code.
$rules = [
'TB1_course.*' => 'required'
];
$validator=Validator::make($output, $rules);
if ($validator->passes()){//if no error, return the next view
return ["view" => view("$name")-> render(), "value"=>1, "inputs"=>$output];
}
return ["view" => view("$name2")->withInput($output)->withErrors($validator) -> render(), "value"=>1, "inputs"=>$output];
}
return ["view" => view("$name") -> render()];
});
My Ajax request:
$('#form').on('submit', function (e) {
var formData = $('#form').serialize();
e.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'POST',
url: '/roa',
dataType: 'json',
data: {inputs: formData, nextTab: relatedTabID, currentTab: tabID},
success: function(data){
$('#tabShow').html((data.view));
},
error: function () {
alert('error');
}
});
});
I am successfully able to receive all the error messages, but the withInput($output) for some reason is not working. Thank you for all your help.
'view' => view('template')->withInput()?
From client side, I wanna send some data to server and receive some <div> tags which responding from View (another controller).
My ajax code looks like this:
var sortTopic = function () {
var $list = [],
$address = '',
$formData = new FormData();
/* do something here to set value to $list and $address */
$formData.append('Category', $list);
$formData.append('Address', $address);
$formData.append('Tags', '[KM]');
$formData.append('Skip', 0);
$.ajax({
url: '/Topic/Sort',
type: 'POST',
data: $formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (data) {
if (!data.success) {
$('.jumbotron').html(data.ex);
} else {
$('.jumbotron').html(data);
}
},
error: function (xhr) {
alert(xhr.status); //xhr.status: 200
}
});
};
In TopicController, action Sort was:
[AllowAnonymous]
[HttpPost]
public ActionResult Sort(SortTopicViewModel model)
{
try
{
if (model.IsValidSortTopicModel())
{
return PartialView("../Home/_Timeline", new TopicMaster().Sort(model));
}
return Json(new { success = false, ex = "Invalid model." });
}
catch (Exception e) { return Json(new { success = false, ex = e.Message }); }
}
I'm sure that the model is valid and method new TopicMaster().Sort(model) was working fine (because I had put breakpoint to view the return data). And the partial view _Timeline is a partial view of HomeController.
My problem is: I don't understand why I get error with status code 200 in ajax:
error: function (xhr) {
alert(xhr.status); //xhr.status: 200
}
Can you explain to me?
Thank you!
as you told you receive <div> in response that is not json and you mention dataType:"json" in your ajax just remove it. this will solve your problem. error 200 occur when you did not get valid response which is you mention in ajax.
for mor information you can read it documentation
The problem is very simple: i have to download a file when i submit a form, it's an ajax call when the form is submitted which lets me build a file with the data taken from the form, server side, and then send it as a link to an alert. The fact is that my boss want the file to be downloaded directly and not through a link in an alert. So i had to make sure that the file is available server side through tornado(web):
self.set_header('Content-Type', 'application/octet-stream')
self.set_header('Content-Disposition', 'attachment; filename=clients_counter.zip')
with open("static/clients_counter.zip", 'r') as f:
while True:
data = f.read()
if not data:
break
self.write(data)
self.finish()
The server side code seems to work fine, but the client side (extjs4.1) is really a nightmare. This is how my ajax call looks like now, and it doesn't work:
Ext.Ajax.request({
method : "GET",
url : 'http://whatever.com/count?client='+client+'&start='+start+'&end='+end,
timeout : 30000,
success :
function (response) {
//Ext.Msg.alert(response.responseText);
desktop.getWindow('count-win').doClose();
return response;
}//handler,
failure :
function(response) {
alert("Wrong request");
}});
After reading on various sources from Ext JS forum and here in stackoverflow, below is the approach I've chosen (using Ext JS version 4.2.1):
downloadFile: function(config){
config = config || {};
var url = config.url,
method = config.method || 'POST',// Either GET or POST. Default is POST.
params = config.params || {};
// Create form panel. It contains a basic form that we need for the file download.
var form = Ext.create('Ext.form.Panel', {
standardSubmit: true,
url: url,
method: method
});
// Call the submit to begin the file download.
form.submit({
target: '_blank', // Avoids leaving the page.
params: params
});
// Clean-up the form after 100 milliseconds.
// Once the submit is called, the browser does not care anymore with the form object.
Ext.defer(function(){
form.close();
}, 100);
}
I had a similar problem trying to download an Excel File in an Ajax call I solved it this way:
Make a standard sumbit instead of Ajax.
var form = Ext.create('Ext.form.Panel', { // this wolud be your form
standardSubmit: true, // this is the important part
url: '../ObtenerArchivoAdjuntoServlet'
});
form.submit({
params: {
nombreArchivo: nombreArchivo
}
});
After this you would be able return the desired file.
After extracting/reading many posts, I managed to get this simple method to work..
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
standardSubmit: true,
url: 'URL'
}).submit({params: {'PARAM1': param1, 'PARAM2': param2}});
I think you can take a much easier solution. Forget about the ajax, and just get plain old js to open the file for you:
window.open('http://whatever.com/count?client='+client+'&start='+start+'&end='+end)
This will open a new tab and start the download from there.
The following code used to download the file using extjs 5 or 6. Add the following code to method and invoke this for button action. This downloads the file directly insteadof opening in new tab.
use an iframe like this:
/**
* prints the file
*/
printReport: function () {
var url = 'downloadURL';
Ext.Ajax.request({
url: url,
method: 'GET',
autoAbort: false,
success: function(result) {
if(result.status == 204) {
Ext.Msg.alert('Empty Report', 'There is no data');
} else if(result.status == 200) {
Ext.DomHelper.append(Ext.getBody(), {
tag: 'iframe',
frameBorder: 0,
width: 0,
height: 0,
css: 'display:none;visibility:hidden;height:0px;',
src: url
});
}
},
failure: function() {
//failure here will automatically
//log the user out as it should
}
});
}
Copied the answer from extjs forum
Option:2
If you want to open the file in new tab
/**
* open file in tab
*/
openReport: function () {
var url = 'downloadURL';
Ext.Ajax.request({
url: url,
method: 'GET',
autoAbort: false,
success: function(result) {
if(result.status == 204) {
Ext.Msg.alert('Empty Report', 'There is no data');
} else if(result.status == 200) {
var win = window.open('', '_blank');
win.location = url;
win.focus();
}
},
failure: function() {
//failure here will automatically
//log the user out as it should
}
});
}
You cannot use ajax to download file. I've implemented file downloading in extjs which is like ajax. see the blog ajaxlikefiledownload.
FileDownload.downloadFile = function(arguments) {
var url = arguments['url'];
var params = arguments['params'];
var successCallback = arguments['success'];
var failureCallback = arguments['failure'];
var body = Ext.getBody();
var frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenframe-frame',
name:'iframe'
});
var form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
method: 'POST',
target:'iframe'
});
if (params) {
for (var paramName in params) {
form.createChild({
tag:'input',
cls:'x-hidden',
id:'hiddenform-'+paramName,
type: 'text',
text: params[paramName],
target:'iframe',
value: params[paramName],
name: paramName
});
}
}
form.dom.submit();
FileDownload.isFinished(successCallback,failureCallback);
};
FileDownload.isFinished = function(successCallback,failureCallback) {
//Check if file is started downloading
if (Ext.util.Cookies.get('fileDownload') && Ext.util.Cookies.get('fileDownload')=='true' ) {
//Remove cookie call success callback
Ext.util.Cookies.set('fileDownload', null, new Date("January 1, 1970"),application.contextPath+'/');
Ext.util.Cookies.clear('fileDownload',application.contextPath+'/');
successCallback();
return;
}
//Check for error / IF any error happens then frame will load with content
try {
if(Ext.getDom('hiddenframe-frame').contentDocument.body.innerHTML.length>0){
Ext.util.Cookies.set('fileDownload', null, new Date("January 1, 1970"),application.contextPath+'/');
Ext.util.Cookies.clear('fileDownload',application.contextPath+'/');
failureCallback();
//Cleanup
Ext.getDom('hiddenframe-frame').contentDocument.body.innerHTML = "";
return;
}
}
catch (e) {
console.log(e);
}
console.log('polling..');
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout('FileDownload.isFinished('+successCallback+','+failureCallback+')', 100);
};
Usage :
FileDownload.downloadFile({
url : url,
params : params,
success : function(){
//Success call back here
},
failure : function(){
//Failure callbak here
}
});
In the http response you need to add a cookie nammed fileDownload = true
I just had to ad to the success function of the ajax request:
window.open('urltothefile.ext')
$.ajax({
type: "GET",
url: "../pgs/authenticate.php",
data: "FirstName="+ sFirstName +"&SurName="+ sSurname +"&NextOKin=" + sNOK ,
success: function(html){$("#Ajax_response").prepend(html);}
});
I only want to "prepend" IF the authentication fails else just:
success: function(html){$("#Ajax_response").html(html);}
Is this possible?
In your PHP script, you can do something like:
// on this part you decide based on your checks if it's true (or false)
// and what to return as content e.g. based on your authentication checks
$Success = true;
$Content = 'Some HTML';
$Response = array('Success' => $Success, 'Content' => $Content);
echo json_encode($Response);
in JS:
success: function(result)
{
// if true
if (result.Success)
$("#Ajax_response").html(result.Content);
// false (FAIL)
else
$("#Ajax_response").prepend(result.Content);
}
I hope that gives you an idea.
if (html.match("/Failed/"))
{
$("#Ajax_response").prepend(html);
}
This looks for the word Failed in the Ajax response html and does the action if found. Obviously you know what the failure response will contain and what string you need to be looking for.
I'm modifying an existing system which uses Smarty. This particular problem is causing a major stumbling block as I just can't find a way around it.
I have a data-grid, each record has an action which calls ?module=the_module&action=the_action.
My corresponding function function the_module_the_action($postData, $getData) is used to perform the particular request.
The request for this module comes through from a jQuery $.ajax({}) request, simply because I don't want to loose the search form variables. So on success, I'll redirect the page using document.location='index.php?module=&action='.
This is fine as it allows me to detect that the action has been successful whilst maintaining the search filters on the grid.
But, I have a problem when the user action fails. The method the_module_the_action($postData, $getData) return echo 'success'; exit() on success but on a failure it should print out the Smarty template i.e. details of the record.
I believe the problem occurs because of a call through Ajax. The template is being served but because it is a call made using Ajax it isn't displayed.
How can I get around this problem?
Update:-
This is my function which Ajax calls:
public function module_action($post_data) {
$object=new Class((int)$post_data["id"]);
if($object->method()) {
echo "success";
exit();
}
else {
$this->assignToSmarty('_someSmartyVar', $someData);
$this->assignToSmarty('_data', $class->getData());
echo "failed";
}
}
The Ajax used to call this is:-
$(document).ready(function() {
$(".revokeButton").click(function(){
var selected=$(this).attr('id');
var filterBu = $('#filter_bu').val();
var filterJc = $('#filter_jc').val();
if(confirm("Are you sure you want to r.....")) {
$.ajax({
beforeSend: function() { },
url: 'index.php?module=module&action=action',
type: 'POST',
data: ({ bid:selected }),
cache: false,
success: function(data, textStatus) {
if(data == 'success') {
success_message = 'success';
} else if(data == 'failed') {
success_message = 'failed';
}
document.location='index.php?module=module&message='+success_message+'&filter_bu='+filterBu+'&filter_jc='+filterJc;
}
});
}
});
});
The success and failure are echoing out successfully, but the smarty stuff isn't.
I see two problems. First of all, you seem to have forgotten the smarty->display() function call in the failure leg of the module_action function. Secondly, you wrote:
if(data == 'success') {
success_message = 'success';
} else if(data == 'failed') {
success_message = 'failed';
}
This will always only output success or failure. You probably want to do something more like the following:
if(data == 'success') {
success_message = 'success';
} else {
// if got here, 'data' doesn't contain "success!", so it must contain
// something else, likely error data. You could either just display
// data as it is or first do some sort of check to ensure that it
// does, in fact, contain error data, and then display it.
success_message = 'error!<br \>\n' + data;
}