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);
});
});
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.
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
}
});
});
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.
Hi I am just learning to work with jquery and ajax.And an tryin gto berform a basic jquery call and retrieve an ok.But it seems I get back nothing.
This is my html:
Add to Cart
This is my jquery code:
$('.addToCart').on('click', function(){
var itemId = $(this).attr("id");
$.ajax({
url: 'cart.php',
type: 'POST',
data: itemId,
dataType:'html',
success: function(result){
alert(result + " ceva ");
},
error : function(data){
alert(data);
}
});
});
And this is my php code:
echo $_POST['cart'];
When I try to run this in the success alert I get back this:
How can make this ajax call to work properly?
You have to send your post data in key/value pairs, try
$.ajax({
url: 'cart.php',
type: 'POST',
data: {cart:itemId},//key -> cart, value -> itemId
dataType:'html',
success: function(result){
alert(result + " ceva ");
},
error : function(data){
alert(data);
}
});
Looks to me like you have an error in your PHP code. The returned HTML has some text that says "Notice: Undefined index" etc.
The AJAX Call succeeds - so you're seeing the alert message.
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.