I've a bootstrap Modal with users list, inside which I'm displaying another modal for adding a new user. The Add new User Modal is fetched using Ajax. When I add a new user using Ajax, I want to update the div with Ajax response message(.alert-success or .alert-danger in bootstrap).
Right Now the user is loaded but I can't show the message as the modal itself is loaded using Ajax.
$('body').on("click", "#createGroupUserModual .submit", function (e) {
var alertContainer = $(document).find('#groupUserFormCreate').find("#alerts");
$.ajax({
url: $('#groupUserFormCreate').attr('action'),
type: 'POST',
dataType: "json",
cache: false,
data: $('#groupUserFormCreate').serialize(),
success: function(response) {
console.log("success " + response.message);
var returnMessage = "<div class='alert alert-success'>"+response.message+"</div>";
//this below line is not updating the contents with the message.
alertContainer.html(returnMessage);
},
error: function(response) {
console.log("failure is here " + response.message);
var returnMessage = "<div class='alert alert-danger'>"+response.message+"</div>";
alertContainer.html(returnMessage);
}
});
});
I see that not same code for redraw de alertContent, it only exists when response is success but not in errro, under $.ajax query
So:
error: function(response) {
console.log("failure is here " + response.message);
var returnMessage = "<div class='alert alert-danger'>"+response.message+"</div>";
alertContainer.html(returnMessage);
}
Try this code, added the redraw html in error.
Expect will be.
Related
I stuck. I try to make Ajax call from button click. Function is loading and responding HTML data. HTML data in format like "< div>...< /div >". When I open "http://domain.com/load_info.php?id=1" in browser, I get all HTML data. But when I try to load it by Ajax function, nothing is loading.
buttons
<input type='button' onclick='getInfo(1);' value='Load Info' >
Ajax Function
function getInfo(id_number){
alert('function started with id =' + in_number); // this alert works fine
$.ajax({
type:"GET",
data: { 'id': id_number },
url : "load_info.php",
dataType: "text",
success: function(response) {
alert('success'); // this alert is not working
$("#info").prepend(response);
}
});
};
You could also use this approach if you are using jQuery:
$("button").click(function(){
$.get("load_info.php",
{
id: id_number
},
function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
I'm creating embedded file uploading form with file validation in Symfony 2. For file uploading I used this example http://symfony.com/doc/current/cookbook/doctrine/file_uploads.html and for embedded forms this http://symfony.com/doc/current/cookbook/form/form_collections.html. It's work perfect, but I must submit a form using ajax, how can I do it?
Below is a example how I submit form using ajax.
$("#submit_form").click(function() {
var $form = $(this).parents('form:first');
var $that = $(this);
$.ajax({
type: 'POST',
dataType: 'json',
cache: false,
data: $form.serialize(),
success: function($data) {
if ($data.status == 'ok') {
$that.parents('#lightbox').html($data.template);
}
},
url: $form.attr('action')
});
return false;
});
So the problem is I can't pass files with ajax.
Use this plugin http://malsup.com/jquery/form/ . Works like a charm!
This can submit the form and also upload files. All you need to do is call ajaxSubmit and then implement the method that handles the response.
$('#myForm2').submit(function() {
$(this).ajaxSubmit({success: showResponse});
});
function showResponse(responseText, statusText, xhr, $form) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
Am using a plugin called "jQuery Autosize!" on my textareas. How can i make it autoresize my server side generated textareas because they generated when the page has already loaded.
This is the code that generates the server side textareas. resultErrorObj.node_html contains the server side generated textarea as shown below.
$(document).ready(function() {
$("#postUpdate").submit(function(event){
// setup some local variables
var $form = $(this),
// let's select and cache all the fields
$inputs = $form.find("input"),
// serialize the data in the form
serializedData = $form.serialize();
// let's disable the inputs for the duration of the ajax request
$inputs.attr("disabled", "disabled");
// fire off the request to /form.php
$.ajax({
url: base_url + "ajax/post_status_update",
type: "post",
data: serializedData,
// callback handler that will be called on success
success: function(response, textStatus, jqXHR){
var resultErrorObj = jQuery.parseJSON(response);
if (resultErrorObj.status == 1)
{ $(resultErrorObj.node_html).hide().insertAfter('#activitiesStream').slideDown('fast');
}
else
{
alert(resultErrorObj.error);
}
},
// callback handler that will be called on error
error: function(jqXHR, textStatus, errorThrown){
// the error
alert("Error here " + errorThrown);
},
// callback handler that will be called on completion
// which means, either on success or error
complete: function(){
// enable the inputs
$inputs.removeAttr("disabled");
}
});
// prevent default posting of form
event.preventDefault();
});
});
Thank you!
The website for Autosize (http://jacklmoore.com/autosize) shows that you can manually trigger the autosizing.
Below is an Ajax POST variable I use to return some information to an ASP MVC3 View. However, I cannot get the .dialg() pop-up function to work. Right now you click on the icon that calls GetProgramDetails(pgmname), and nothing happens. First time using Ajax, so any suggestions would be appreciated. Thx!
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
function GetProgramDetails(pgmname) {
var request = $.ajax({
type: 'POST',
url: '/BatchPrograms/PopDetails',
data: { programName: pgmname },
dataType: 'html'
});
request.done(function (data) {
$('#data').dialog();
});
</script>
EDIT
I've updated the request.done function to include a simple alert to see if the code was being called. After stepping through with Chrome's debugger, I saw that the code inside was completely skipped over.
request.done(function (data) {
alert("HERE!");
$('#programExplanation').html(data);
});
SECOND EDIT
Here is the controller code the ajax is returning a value from:
[HttpPost]
public string PopDetails(string programName)
{
BatchPrograms batchprograms = db.BatchPrograms.Find(programName);
if (batchprograms == null) return string.Empty;
StringBuilder s = new StringBuilder();
s.Append(batchprograms.ProgramName + " - " + batchprograms.ShortDescription);
s.Append("<br />Job Names: " + batchprograms.PrdJobName + ", " + batchprograms.QuaJobName );
s.Append("<br /> " + batchprograms.Description);
return s.ToString();
}
You need to use the success method to handle the callback, like so:
var request = $.ajax({
type: 'POST',
url: '/BatchPrograms/PopDetails',
data: { programName: pgmname },
dataType: 'html'
}).success(function(data){ $('#data').dialog()} );
This will launch the dialog for you, but if you want to get the response data to work with it, you can have GetProgramDetails take a second parameter which is a callback for after the data is loaded like so:
function GetProgramDetails(pgmname, callback) {
var request = $.ajax({
type: 'POST',
url: '/BatchPrograms/PopDetails',
data: { programName: pgmname },
dataType: 'html'
}).success(callback);
}
This way after the response is received you can handle what to do with the data in your implementation of the callback, in this case it seems like you will be setting data in the dialog and launching the dialog.
I am able to get jqGrid display my data. When I do multi-select and submit the form (jqGrid is obviously inside the form) then I am not able to get the selected rows in Spring mvc controller.
Here is my onClick event
$("#GetDataDetailsLink").click( function() {
var selectedRows;
selectedRows = jQuery("#DataList").jqGrid('getGridParam','selarrrow');
var dataToSend = JSON.stringify(selectedRows);
alert("dataToSend is =" + dataToSend);
alert("selectedRows is =" + selectedRows);
//non-ajax submit
var url = "/underwriting-ui-web/taskDetail" + "?selectedTasks="+selectedRows;
$("#DataGridForm").attr("action", url);
$("#DataGridForm").attr("method", "get");
alert("action url is = " + $("#taskGridForm").attr("action"));
$('#DataGridForm').submit();
//ajax way of submiting
/*
$.ajax({
url:'/dataDetail',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
dataType: 'json',
success: function (result) {
alert('success: ' + result.result);
}
});
return true;
*/
});
Some how jqGrid is overwriting my url and writing it's own url something like this
http://localhost:8080/myProject-ui-web/DataDetail?jqg_taskList_8=on&jqg_taskList_9=on
Instead of
http://localhost:8080/myProject-ui-web/DataDetail?selectedTasks=8,9
In ajax submit it is working. But I wanted it in non-ajax submit.
Any idea why this is not working in non-ajax submit?