ajax post not working without alert message - javascript

i have a problem with ajax post function. Ajax function doesn't working without alert message. If add alert message, div content will be refresh and working my code.
I have a mv3 application. And post form data to this javascript function. Like that:
function Add_Definition() {
var data = $.extend({ call: "Add_Definition", url: "/Definition/Definition", type: "post", dataType: "html", data: $("#definition_form").serialize() }, data);
Load(ajaxrequest(data));
}
function Load(val) {
if (val == true) {
var data = $.extend({ call: "Load", render: $("#render"), url: '#Url.Action("Definition", "Definition")', type: "get", dataType: "html", data: { "groupid": '#Request.QueryString["groupid"].ToString()'} }, data);
ajaxrequest(data);
}
}
My ajax javascript function is below.
function ajaxrequest(param) {
var result = true;
//alert("hi there");
$.ajax({
type: param.type,
url: param.url,
data: param.data,
dataType: param.dataType,
success: function (result) {
$(param.render).empty();
$(param.render).html(result);
result = true;
},
error: function (request, status, error) {
result= false;
}
});
return result; }
If remove // char from javascript code, it will not work, (need refresh page), if have a alert message, content will be refresh with load function.
How is error?

you can also direct call like
var divElem = $('#yourdivid').load('#Url.Action("Definition", "Definition")');

Related

How can I return a response from a call in order to open xml file using jquery

I want to open xml file with jquery , but when I want to display the value of open outside the function , I have an undefined error .
Here the code :
$(document).ready(function () {
var open ;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv =function(xml) {
$(xml).find("mestickets").each(function () {
open=($(this).find("nbopenTickets").text());
console.log(open);//It works
});
}
})
console.log(open);//undefined
That is what Ajax does, the processed data will be handled in the success handler.
What you can do if you really want to is create another function where you can process your data.
$(document).ready(function () {
var open = null;
$.ajax({
type: "GET",
url: "../build/js/openTickets.xml",
dataType: "xml",
success: nv = function (xml) {
$(xml).find("mestickets").each(function () {
open = $(this).find("nbopenTickets").text();
openData(open);
});
}
});
function openData(open) {
console.log(open);
}
});

Handing value into Success function from AJAX Call

G'day all,
I'm trying to pass a value through to a Success var from the original AJAX call.
Here's some code :
function isJobComplete(jobGUID) {
var data = { "pJobGUID": jobGUID };
var url = '/DataService.asmx/isJobComplete';
var success = function (response, jobGUID) {
if (response.d) {
//The job is complete. Update to complete
setJobComplete(jobGUID);
}
};
var error = function (response) {
jAlert('isJobComplete failed.\n' + response.d);
};
sendAjax(data, url, success, error);
}
function sendAjax(data, url, success, error) {
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: success,
error: error || function (response) {
jAlert(response.d);
}
});
}
When the isJobComplete function runs, it has the correct value for jobGUID on the first pass through, but on the return to Success after the AJAX call, jobGUID changes to the word "success", with the double quotes.
How can I pass through that jobGUID to the Success function so I can use it to do more work depending on the AJAX response?
Thanks in advance....

Rebind function when change DOM after ajax

I'm trying to get the height of an element before and after an ajax call to change the content of this element (for learning reasons).
Example:
$(document).ready()
calcHeigth('#listar-cursos');
});
funcion calcHeigth(idElement){
console.log($(idElement).outerHeight(true));
}
<div id="listar-cursos">all the content is here</div>
When the document is ready, calcHeigth function returns 200px.
There is a form on that page that is sent by ajax and when the request ends I just empty the contents of the element, and then call calcHeigth again (in ajaxComplete event).
$("#formSeacrh").submit(function () {
if ($(this).valid()) {
var url = $(this).attr("action");
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (data) {
$("#listar-cursos").html("");
},
complete: function () {
Completo();
},
beforeSend: function () {
Carregando();
},
error: function () {
Falha();
},
ajaxComplete: function () {
calcHeigth('#listar-cursos');
}
})
return false;
}
return false;
});
The result from calcHeigth is always 200px, like when the document is ready, even with the empty element. calcHeigth not realized that the element was changed. The result that I expected was 40px. How to fix and get the current height?
$("#formSeacrh").submit(function () {
if ($(this).valid()) {
var url = $(this).attr("action");
var data = $(this).serialize();
$.ajax({
type: "POST",
url: url,
data: data,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function (data) {
$("#listar-cursos").html("");
Completo();
calcHeigth('#listar-cursos');
},
beforeSend: function () {
Carregando();
},
error: function () {
Falha();
}
})
return false;
}
return false;
});
you only need 1 ready function, not 3. i hope this works now how you wish.
if you do your calc after your clear the html from the node, the height should be 0.
by the way. $('listar-cursos').empty() is better than .html("")

error in ajax request to action controller asp mvc

i have button that when you click on it
it run ajax that send id to controller
now controller do something and its ok no error in server side,,
but in the action in controller i have code with restsharp that
send request to rest web service its work fine too(),
but this part() is in foreach and run for 5 or ... time
and when i do this things sometime ajax takes to long and the error part of ajax code is run
what should i do ?
ajax code:
$(document).on("click", "#btn-submit", function () {
$.ajax({
type: 'POST',
url: '/Panel/CheckRefOrderCode',
data: JSON.stringify({
factorrefid: $("#ref-check").val()
}),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
if (result.DntSuccess) {
} else {
}
},
error: function () {
}
});
});
action code
foreach(string s in str)
{
var client = new RestClient("http://**.com/api/v1/orders/status?support_code=71GD4A");
var request = new RestRequest(Method.POST);
request.AddHeader("token", "15befa43");
IRestResponse response = client.Execute(request);
RefOrderJsonViewModel.RefOrderJson reforderbackJson =
JsonConvert.DeserializeObject<RefOrderJsonViewModel.RefOrderJson>(response.Content);
if (reforderbackJson.status.ToLower() == "ok")
{
performed += reforderbackJson.data.performed;
order_status += reforderbackJson.data.order_status + "^";
}
}
and i add this to web.config
<httpRuntime executionTimeout="100000000" maxRequestLength="262144" />
Add a timeout to the ajax call:
$(document).on("click", "#btn-submit", function () {
$.ajax({
type: 'POST',
url: '/Panel/CheckRefOrderCode',
data: JSON.stringify({
factorrefid: $("#ref-check").val()
}),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
**timeout: 10000 // sets timeout to 10 seconds**
success: function (result) {
if (result.DntSuccess) {
} else {
}
},
error: function () {
}
});
});
Check out this post on how to handle timeout error.
the problem still is on;
but i use this
Parallel.ForEach(myEnumerable, obj =>
{
// ...
});
instead regular
foreach
and do the body of foreach in parallel,
and the time is decreasing,
the problem solved

Calling a controller method via javascript

I have an ASP.NET application where I am invoking a controller methode from JavaScript. My JavaScript code looks like this:
function OnNodeClick(s, e) {
$.ajax({
type: "POST",
url: '#Url.Action("DeviceManifests", "Home")',
data: { selectedRepo: e.node.name },
success: function (data) {
if (data != null) {
$('#GridView').html(data);
}
},
error: function (e) {
alert(e.responseText);
}
});
}
This calls the Home controller's DeviceManifests() method.
This is what the method looks like:
public ActionResult DeviceManifests(Guid selectedRepo)
{
var repoItem = mock.GetRepoItem(selectedRepo);
return View("Delete", repoItem.childs);
}
The method gets invoked but the problem is the Delete-View doesn't get rendered. There's no error, just nothing happens.
How can I update my code to get my desired behaviour?
Do like below code so if you have error you will have it in alert box or success result will rendered in DOM
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: '#Url.Action("DeviceManifests", "Home")',
data: { selectedRepo: e.node.name },
dataType: "html",
success: function (data) {
if (data != null) {
$('#someElement').html(data);
}
}
},
error: function (e) {
alert(e.responseText);
}
});
You can do the redirect in the javascript side.
function OnNodeClick(s, e) {
$.ajax({
type: "GET ",
url: '#Url.Action("DeviceManifests", "Home")',
data: { selectedRepo: e.node.name },
success: function (msg)
{
window.location = msg.newLoc;
}
});
}
Make sure you include the redirect url in action and return JsonResult and not ActionResult. I'd also include pass the guid so that the destination Action and let it look up the data.

Categories