I need a simple AJAX code to stay in same jsp page after i click submit button.It should not refresh the page. I have researched a lot. But didnt get a simple one.Please help
you can find a simple form submit example in this link
you can add a button <button id='submit-btn'>Submit</button> and make ajax call on click of that as in below code.
$('#submit-btn').on('click', function (e) {
var postData = $('#ajaxform').serializeArray();
var formURL = $('#ajaxform').attr("action");
$.ajax(
{
url : formURL,
type: "POST",
data : postData,
success:function(data, textStatus, jqXHR)
{
//data: return data from server
},
error: function(jqXHR, textStatus, errorThrown)
{
//if fails
}
});
});
Related
I am using codeigniter framework. I am trying to call controller method using AJAX function call on dropdown change event. My code is:
$(document).ready(function() {
$("body").on('change', '#assettype_id', function(e) {
var categoryval = $('#assettype_id :selected').val();
// assettype_id is dropdown id. On change event of
// dropdown, controller method will be called
myurl = 'http://mylocalsite/index.php/controllername/controllermethod/' + $.now();
alert("category id = " + categoryval); // for testing
$.ajax({
cache: false,
type: 'POST',
data: {
id: categoryval
},
url: myurl,
dataType: 'html',
success: function(data1) {
alert("inside ajax call"); // for testing
$('#result').html("");
// result is a div tag used to display result//
$("#result").html(data1);
},
error: function(jqXHR, textStatus, errorThrown) {
alert('error');
},
complete: function(xhr, status) {
alert("The request is complete!");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This code is working perfectly for initial 2 or 3 change events of dropdown and getting new output but after 2 or 3 selection from dropdown, won't get new result like AJAX method is not working.
I have put 2 alerts for checking. alert with message 'category id =' is calling on every change event of dropdown but alert with message "inside ajax call" is not showing after 2 or 3 selections of dropdown even not going to error section of AJAX call.
I would like to know what is going wrong here? Thank you for you help.
In my MVC application I don't want the layout page to reload everytime a view is selected. It would be great if the views could be loaded using ajax to keep things nice and fast and allow me to persist certain interface states that are wiped out when you move around.
My initial approach was to add some ajax to the _Layout.cshtml and then whent he view was requested pass that request to the controller method which will grab that page. All I ended up doing however was returning the WHOLE view again.
Here is the code I have so far, am I on the right tracks here or is this totally wrong?
Layout Ajax Script
<script>
$(function () {
var content = document.getElementById('content');
//When a user selects a link, pass the data attribute and
//use it to construct the url
$('#sidebar a').on("click", function () {
var page = $(this).data('page');
console.log("Data Attrib : " + page);
$.ajax({
type: 'GET',
url: '#Url.Content("~/Home/")' + page,
success: function (data) {
$('#content').html(data);
console.log("Success");
},
error: function (xhr, ajaxOptions, thrownError) {
console.log("Error: " + thrownError);
}
})
})
});
</script>
As I say, this sort of works, but it's not perfect as it returns the whole page into the content area including layout, ideally I just want the core view data.
you can create a Single Page Application that have 1 layout and in home controller and index action method create menu or user setting or another things
and now you can load other action with Ajax call with data-content html that does not have layout file and append that in container
when user click another menu clean older content and add new or you can create tab strip or window
Layout.cshtml
<script>
$(function () {
//When a user selects a link, pass the data attribute and
//use it to construct the url
$('#sidebar a').on("click", function () {
var page = $(this).data('page');
$.ajax({
type: 'POST',
url: '/Home/Pages',
data: { pageValue: page },
success: function (data) {
$('#content').html(data);
console.log("Success");
},
error: function (xhr, ajaxOptions, thrownError) {
console.log("Error: " + thrownError);
}
})
})
});
Controller
public class HomeController : Controller
{
[HttpPost]
public string Pages(string pageValue)
{
string result = //Whatever
return result;
}
}
Controller
public ActionResult SomeAction(String someparams)
{
//Make the model
SomeModel someModel = new SomeModel();
someModel.someparams = someparams;
return PartialView("SomePartialView", someModel);
}
In View
$.ajax({
url: "/Home/SomeAction",
type: "POST",
dataType : "html",
data: json,
contentType: 'application/json; charset=utf-8',
success: function(data){
$('#SomeDivID').html(data);
}
});
My app is an MVC .NET 4.0 application.
My application is fairly straightforward. I open an text file and uploaded it to be processed and returned as an excel file. This works as expected.
The excel file is returned via an actionresult controller. There are no errors. It works the way I want it to.
The problem is that when I call ajaxStart with blockUI it works. However, upon returning the file, the ajaxStop or ajaxSuccess is never fired to turn off the spinner after the file result is displayed with a message - do you want to open the file or save it or cancel.
I'm using jquery fileupload, blockUI and jquery 1.9.1.
$('#fileupload').fileupload({
dataType: 'json',
type: 'POST',
url: fileuploadpath,
autoUpload: true,
beforeSend: function () {
$.blockUI({
timeout: 0,
message: '<h1><img src="../images/ajax-loader.gif" /> Processing...</h1>'
});
},
complete: function() {
//$.unblockUI();
},
done: function (e, data) {
//$('.file_name').html(data.result.message.Name);
//$('.file_type').html(data.result.message.Type);
//$('.file_size').html(data.result.message.Length);
$('.file_msg').html(data.result.message.Error);
},
success: function (data) {
$.unblockUI();
$('.file_msg').html(data.result.message.Error);
}
});
and here is the basics of the file return in the action controller:
Response.AppendHeader("Content-Disposition", "attachment; filename=" + fileName);
return File(fileoutput, "application/vnd.ms-excel");
Everything works just great. The area I'm scratching over my head is - why isn't the spinner being turned off after the file return? Am I missing something? I've tried binding ajaxStop and ajaxStart to the document but that does not work. ajaxStart gets fired but upon the file return, ajaxStop is being ignored.
Remove the 'done' and 'complete' event and use this format for your ajax call:
$(document).ready(function() {
$('#fileupload').fileupload({
dataType: 'json',
type: 'POST',
url: fileuploadpath,
autoUpload: true,
timeout:60000,
beforeSend: function () {
$('#loader').show()
},
success: function (data) {
$('#loader').hide()
//$('.file_name').html(data.result.message.Name);
//$('.file_type').html(data.result.message.Type);
//$('.file_size').html(data.result.message.Length);
$('.file_msg').html(data.result.message.Error); //??? you are passing the error here
},
error: function(jqXHR, textStatus, errorThrown) {
$('#loader').hide()
if(textStatus==="timeout") {
alert("A timeout occurred");
} else {
alert("This is an other error");
}
}
});
});
NOTE: seen you have trouble with the blockUi, I have here used a other approach.
TIMEOUT:
I have set an extra parameter 'timeout' and set this to 60 sec. You coul set this to '0' which will be unlimited but it will be better practice to give it a limited value.
Place this in your HTML and give it a style of 'display:none' and an id.
<h1><img id="loader" src="../images/ajax-loader.gif" style="display:none"/> Processing...</h1>'
I am new to magento and not so expierenced with ajax. I need to do a ajax request to send the data to the php. I have this code to send the data to the php file:
function Ajax() {
jQuery.ajax({
type: 'POST',
url: "./handler.php",
data: {
source1: catId
},
success: function( data ) {
console.log( data );
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
}
It seems that the data won't reach the php file. If anyone can help me fix my code, that would be great.
This is JS, so you need the full URL for an ajax request.
url: "http://www.test.com/handler.php",
I am strucked at twitter bootstrap along with ajax use. Scripts used
console errors :
middle of debug(click event from browser at drop down) bootstrap dropdown coming and again disappearing after debug finish.
before I use ajax request like loading html content on button click bootstrap working fine but after ajax finish bootstrap dropdown not working .
jquery used for ajax is :
$('a[href="/TransJobAddress/NewTransPortJobAddress').on('click', function createnew(event) {
$.ajax(
{
url: '/TransportJobAddress/Create',
datatype: 'html',
success: function (data, textStatus, jqXHR) {
$('#addAddress').html(data);
},
error: function (jqXHR, textStatus, errorThrown) {
//alert('The server saying:' + errorThrown);
}
});
event.preventDefault();
event.stopPropagation();
});
Where is wrong in this client side or server side?