jQuery 1.4.2 IE8 error on page expected ')' - javascript

I'm having an issue with IE8 (nothing new there). The error I'm getting is not making much sense as it does not occur on FF or Chrome. Here's the code:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
In this function it is complaining about the line where the success callback is defined. This function has not even been called yet though? But when it does get called, it works perfectly fine, although still creates new errors?
The function that is being called though is:
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
The second function is basically getting called 3 times when the page loads. Any advice?
Here is the complete script block as well:
function remComp(id, trade) {
$.ajax({
url: "functions/removePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO create error handler
}
});
}
function addComp(trade, albId, compId) {
$.ajax({
url: "functions/addPriceSurveyComparison.php",
type: "POST",
async: true,
data: "trade="+trade+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
loadComps(trade);
}// TODO add an error handler
}
});
}
function updateComp(id, trade) {
var albId = $("select#albProd"+id).val();
var compId = $("select#compProd"+id).val();
$.ajax({
url: "functions/updatePriceSurveyComparison.php",
type: "POST",
async: true,
data: "id="+id+"&albId="+albId+"&compId="+compId,
cache: false,
dataType: "xml",
success: function(xmlData) {
if ($("success", xmlData).text() == "true") {
// reload table for this trade
loadComps(trade);
}// TODO create error handler
}
});
}
// function that loads all of the comparisons for a specific trade
function loadComps(trade) {
$.ajax({
url: "functions/loadPriceSurveyComparisons.php",
type: "POST",
async: true,
data: "trade="+trade,
cache: false,
dataType: "html",
success: function(comps) {
$("#current"+trade).html(comps);
}
});
}
// define document.ready function
$(document).ready(function() {
// load all of the comparisons for each trade
<?php
foreach ($trades as $trade) {
echo "loadComps(\"$trade\");\n";
?>
$("#addComp<?php echo $trade; ?>").click(function(e) {
e.preventDefault();
addComp("<?php echo $trade; ?>", $("#albProd<?php echo $trade; ?>").val(), $("#compProd<?php echo $trade; ?>").val());
});
<?php
}
?>
});

JSLint's error message "Implied Global" means that there are variables defined that are missing the "var" definition... this is especially problematic for IE8. You need to go through and add "var" to the line numbers listed (yes, there are lots).
Are you using an Asset Packager? The order of how assets are listed in your asset packager could be at fault here.

Related

How to JQuery Select an html item which is not "loaded" yet?

I have an Ajax call, that in the Success function, load a PartialView(html), in a container.
And I need to do "something" with a hiddenField value that it is in the loaded PartialView.
Trying $("#IdOfHiddenTextField").val() or a class selector and Jquery do not select the Html element.
How can I achieve that?
Actual code:
$.ajax({
url: '/apps/server',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (response) {
if (response.ok == "ok") {
esValido = true;
$("#divContenedorPaso2").html(response.vistaRazor);
if (response.modificoEmail) {
$("#popup-mensaje").html("Modification successfull");
$('#myModalAdvertencia').modal('show');
}
} else {
$("#divContenedorPaso2").html(response);
}
}
});
I need to do:
$.ajax({
url: '/apps/server',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success: function (response) {
$("#divContenedorPaso2").html(response);
var submitSuccesfull = $("#IdOfHiddenTextField").val();
// this hidden element is inside de PartialView "response"
if (submitSuccesfull ) {
esValido = true;
$("#popup-mensaje").html("Modification successfull");
$('#myModalAdvertencia').modal('show');
} else {
esValido = true;
}
}
});
I don't know your code but i think you need something like this :
$.ajax({
url: "partialView.html",
success: function(response) {
var result = $(response).find("#IdOfHiddenTextField").val();
}
});

Globalize with Devexpress Angular 2

Has anyone used Globalize with Devexpress dateboxes? Cannot find how to make it work, obviously I would like to localize date format for countries like England/Germany/USA etc...
The sample below applies to AngularJS/Jquery, but you can extrapolate to Angular2
First of all you have to download the CLDR
Once you downloaded it in json format you have to load it into the Globalize and set your locale see sample code below (see at the bottom of the sample code to check the locale in my case it is es for spanish).
GlobalizeFunc: function () {
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/supplemental/likelySubtags.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-generic.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/ca-gregorian.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/dateFields.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/dates/es/timeZoneNames.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
$.ajax({
url: localStorage.getItem("urlBase") + '/Scripts/cldr/numbers/es/numbers.json',
type: 'GET',
async: false,
success: function (data) {
Globalize.load(data);
}
});
Globalize.locale("es");
},
At this point your controls have been globalized, including calendars and date pickers.

Call function after ajax load()

I initiate a function after an ajax load(), but the function I intimate calls upon an additional function, which isn't working. How do I initiate ajaxstuff() after load()?
function ajaxstuff(data) {
$.ajax({
type: "POST",
url: "do-it.php",
data: {data},
success: function() {
console.log('I got this far'); // this doesn't work / isn't called
}
});
}
function doit() {
$('form').submit(function(e) {
e.preventDefault();
var formData = new FormData(this);
console.log('I got this far'); // this works
ajaxstuff(formData);
}
}
$('.popup-loader').click(function() {
$(this).append('<div class="popup"></div>');
$('.popup').load('popup.php', function() {
doit(); // this works
}
});
Check for errors in your console, also, in your AJAX add an async option. set it to FALSE ("Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called"):
function ajaxstuff(data) {
$.ajax({
async: false,
type: "POST",
url: "do-it.php",
data: data,
success: function(result) {
console.log(result); //check in your console for errors
}
});
}
Syntax error in ajaxstuff function. data: {data}, , probably should be data: data,
Also when you're passing a FormData object to $.ajax, you have to specify processData: false and contentType: false
$.ajax({
type: "POST",
url: "do-it.php",
data: data,
processData: false,
contentType: false,
success: function() {
console.log('I got this far');
}
});

avoid showing values in url with jquery ajax

I am making ajax call to login with spring security but it shows username and password in the url no matter what.
ex: /?j_username=s&j_password=s
I am trying to find my mistake for a long time but I couldnt be able to see it. It is probably a small mistake.
here is my ajax call;
function performLogin() {
var j_username = $("#j_username").val();
var j_password = $("#j_password").val();
$.ajax({
cache: false,
type: 'POST',
url: "/login",
crossDomain: true,
async: false,
data: { 'j_username': j_username, 'j_password': j_password},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("x-ajax-call", "no-cache");
}
});
}
Thanks
EDIT:
It is resolved by adding `return false;`
But I am not sure if my approach is good. Here is the update;
'function performLogin() {
var j_username = $("#j_username").val();
var j_password = $("#j_password").val();
$.ajax({
cache: false,
type: 'POST',
url: "/Mojoping2/login",
crossDomain: true,
async: false,
data: { 'j_username': j_username, 'j_password': j_password},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("x-ajax-call", "no-cache");
},
success: window.location.reload()
});
return false;
}
It has nothing to do with the Ajax call. You are not cancelling the form submission!
function performLogin() {
var j_username = $("#j_username").val();
var j_password = $("#j_password").val();
$.ajax({
cache: false,
type: 'POST',
url: "/login",
crossDomain: true,
async: false,
data: { 'j_username': j_username, 'j_password': j_password},
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader("x-ajax-call", "no-cache");
}
});
return false;
}
and however you are adding the event
onsubmit="return performLogin();
If you are using jQuery to attach the event, you can use
function performLogin(evt) {
evt.preventDefault();
...
I created a jsfiddle to test your code and have been unable to replicate your bug. The POST request appears to submit normally (going via the chrome dev tools), and no extra GET values are appearing for me.
Demo: http://jsfiddle.net/5EXWT/1/
Out of interest, what version of jQuery are you using?
{this is just here so i can submit the jsfiddle}

animation not work in IE when jQuery ajax calling inside js function

I'm trying to show a div with gif animation inside when a button click via javascript call. But the problem is, it's working fine in firefox only. In IE and Chrome, the animation won't show up. I've tried debugging with alert("stop"); before and after the animation and it's indeed working, but after I removed the alert, it won't work anymore. Any suggestion please?
Here's the snippet for the TestPage.aspx:
<div id="animationDiv" style="display: none;">
<img src="loading.gif" />
</div>
...
<div>
<asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
var docWidth, docHeight;
function testButtonClick() {
var o_animationDiv = $("#animationDiv");
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
});
function testAjaxSuccess(data, status, xhr) {
// do something here
};
function testAjaxError(xhr, status, error) {
// do something here
};
o_animationDiv.hide();
return false;
};
$(document).ready(function () {
docWidth = $(document).width();
docHeight = $(document).height();
});
//-->
</script>
Here's the snippet for TestPage.aspx.cs:
// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
System.Threading.Thread.Sleep(5000); // 5 seconds
// or do something else here
// ie. if validation error, throw an exception
return string.Empty;
}
UPDATE 1: added some javascript function
Why don't you call the .hide() on the post success:
$.ajax({
type : "Post",
url : "TestPage.aspx/TestAjax",
cache : false,
data : "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
// hide element when POST return as arrived,
// meaning the "5 seconds" period has ended!
o_animationDiv.hide();
}
});
You can read about callback function at the jQuery documentation!
jQuery ajax is asynchronous, so that won't wait for ajax result to hide again.
o_animationDiv.hide();
o_animationDiv.show();
This lines work in serial and you can't see if it's working properly. So you should wait for ajax result to hide it.Try this,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}).done(function() {
o_animationDiv.hide();
});
UPDATE:
Sorry I missed the point that you create a synchronous ajax request.
But there is a problem already. Most browsers lock itself when running a synchronous XHR. This also effects previous proccess sometimes.
Here is a similar question
Maybe if you use beforeSend, you can avoid this problem.
beforeSend
A pre-request callback function that can be used to modify the jqXHR
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent
Try this one,
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend : function() {
o_animationDiv.show();
}
}).done(function() {
o_animationDiv.hide();
});
UPDATE-2:
If that doesn't work, try this one,
...
o_animationDiv.width(docWidth);
o_animationDiv.height(docHeight);
o_animationDiv.show();
setTimeout(function() {
$.ajax({
type: "Post",
url: "TestPage.aspx/TestAjax",
async: false,
cache: false,
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: testAjaxSuccess,
error: testAjaxError
}).done(function() {
o_animationDiv.hide();
});
}, 600);

Categories