We Keep Coding

jquery ajax - form serialization issue on query parameter

I am using jquery ajax to post a html form . This works fine with Chrome and not with Firefox . When I analyze the issue ,the query parameter "Accept=Apply" is not shown in Firefox dev tool (Params tab)but I could see the proper string is in debug statement which i have added. Can anyone help on this?
Jquery :
function postSettings() {
var frm_data = $("#MyForm").serialize() + "&Accept=Apply";
console.log("frm_data >>"+frm_data);
var myobject = {"Accept":"Apply"};
var testdata =$("#MyForm").serialize() + '&' + $.param(myobject);
console.log("testdata >>"+testdata);
$.ajax(
{
type: "POST",
url: "https://10.20.12.30/Update.cgi",
data: frm_data,
success: function (successData) {
console.log("successData >>"+successData);
} else {
console.log("errorData1 >>"+successData);
}
},
error: function (errorData) {
console.log("errorData2 >>"+errorData);
}
});
}
Thanks

Best way to do this would be adding it as a hidden field
<input type="hidden" id="Accept" name="Accept" value="apply"/>
This way we can aviod passing it as query string and unexpected issues.

How to use remoteFunction inside a .js file in grails

I have requirement, that whenever i click on a day(in a fullcalendar) i need to throw a pop up with details. I need to trigger an action/controller to get the details. I have my event.click in my .js file. I have been trying to use remoteFunction inside my full calendar jquery. But grails is not recognizing remoteFunction call and my screen is going awry (because of unavailability of .js template). Please help me out if possible,
$(calId[calNo]).fullCalendar({
header : {
left : ' ',
center : 'title',
right : ' '
},
defaultView: 'month',
selectable: true,
weekMode : 'variable',
eventColor : 'white',
editable : false,
year : eventYr,
month : calNo,
events : allocData,
dayRender: function (event, element, view) {
for (i = 0, l = holidayData.length; i < l; i++) {
var dateString = holidayData[i].substring(0,10);
view.element.find('.fc-day[data-date="' + dateString + '"]').css('background-color', '#FF9999');
view.element.find('.fc-other-month').css('background-color', '#FFFFFF');
}
},
eventRender: function(event, element, view)
{
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
},
eventClick: function(event) {
var selectedDate = String(event.start);
var newData = ${remoteFunction(controller: 'PreSchedule', action: 'calProcess')};
alert(newData);
$('#dateAllocation #selectedDate').text(String(selectedDate).substring(0,10) + ' ,' + String(selectedDate).substring(28,33));
$('#dateAllocation').modal('show');
},
select: function(date) {
var selectedDate = date;
$('#dateAllocation #selectedDate').text(String(selectedDate).substring(0,10) + ' ,' + String(selectedDate).substring(28,33));
$('#dateAllocation').modal('show');
}
});
May be i am mixing server side code and client side code, messing up with basics. Thanks in advance.
Instead of using remotefunction, i tried using jquery.ajax/ createLink. But the url is not getting resolved.
$("#link").click(function(event){
alert('link');
event.preventDefault();
date = '1985-01-01';
$.ajax({
url:'${createLink(controller:"Student",action:"checkLink")}',
// url:'/checkLink',
dataType: 'json',
type: 'POST',
//data: date,
success: function() {
console.log("The returned data is: ");
// show your modal, or do whatever you want.
}
});
I can see the error in browser developer tools
Failed to load resource: the server responded with a status of 404 (Not Found)
//smsFrontEnd/student/$%7BcreateLink(controller:%22Student%22,action:%22checkLink%22)%7D
if possible, please help me out

If your controller is returning JSON data you can fetch and use it as follows:
Instead of:
var newData = ${remoteFunction(controller: 'PreSchedule', action: 'calProcess')};
alert(newData);
Use the jQuery $.ajax method:
$.ajax({
dataType: 'json',
url: '${createLink(controller: 'preSechedule', action: 'callProcess')}',
data: {}, // no parameters
success: function(data) {
window.alert("The returned data is: "+data);
// show your modal, or do whatever you want.
}
});

I don't think you would be able to use grails ajax tag libs in .js files.
However, adding to this these taglibs are deprecated and you should not be using them anyway. As this is not considered to be a good practice
http://grails.org/doc/latest/ref/Tags/remoteFunction.html
The formFunction tag and other Ajax related tags have been deprecated and will be removed from a future version of Grails. Applications may provide their own Ajax tags and/or Javascript plugins may provide Ajax tags of their own.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
I think you are better of using jquery.Ajax instead of remoteFunction there.

Netsuite form JavaScript Error in Safari

I added a recaptcha script on my Netsuite external form and it works on every browser except for Safari (using 5.1.7).
It gives this error:
"onSubmit (saveRecord) customform JS_EXCEPTION ReferenceError Can't find variable: onSubmit"
The code I'm using is below and the Safari error console doesn't give me anything. Any ideas?
function onSubmit() {
var captchaChallenge = $('#recaptcha_challenge_field').val();
var captchaResponse = $('#recaptcha_response_field').val();
var isToBeSubmitted = true;
$.ajax({
url: CAPTCHA_VERIFICATION_SUITELET_URL + '&challenge=' + captchaChallenge + '&response=' + captchaResponse,
type: 'POST',
accepts: 'application/json',
dataType: 'json',
cache: false,
async: false
}).done(function (data) {
if (!data.status.isSuccess) {
alert('Captcha Verification Failed.');
Recaptcha.reload();
isToBeSubmitted = false;
}
});
return isToBeSubmitted;
}
Images of script setup

Can you try to change the function to another name not so generic like
function onCustomerSubmit

Finally figured out the issue. When I attach a script to the online customer form, I needed to make sure the checkbox "Available Without Login" is checked. Never saw it before, but I checked it and it solved the issue with Safari. Attached a picture for reference.

Button Doesn't Work After Second Click

I have a button that calls a function in javascript. The javascript in turn runs two consecutive ajax calls. After the first one finishes, it does some extra work, then runs the second ajax call.
The button works upon first clicking it. However, when I want to click it again the following error pops up...
Uncaught TypeError: object is not a function
It is in reference to my function that is being called 'onclick' from the button.
I am pretty new to ajax but I'm sure that this shouldn't be happening. Other buttons are working just fine, and they all call functions from the same script. It just seems to be this one function. I would have expected there to be a semicolon missing or something, but then the first time wouldn't have worked... Also, I do know that the function finished executing, since I debugged the function and it reaches the bottom...
Here are my ajax calls in case you're interested...
var $response = $.ajax({
url: $abs_filename,
type: 'HEAD',
async: false,
success: function () {
console.log('done');
}
}).status;
($response != "200") ? $exist = false : $exist = true;
....lots of extra code here
....
var response = $.ajax({
type: 'POST',
url: '/SERT/includes/file_operations.php',//url of receiver file on server
data: {saves: $save_data}, //your data
dataType: 'text', //text...
success: function(res) {
alert(res);
},
async: false
}).status;
EDIT:
My function is called by
<input type="button" .... onclick="save_session()">

You've not actually shown the code that is causing the error.
However...
Don't do this; it doesn't do what you think it does.
($response != "200") ? $exist = false : $exist = true;
Do this:
$exist = $response == "200";
And just DON'T use synchronous XHR.

I was able to figure it out...
So I had a jQuery append operation going on inside of the save_session() function. This operation was as such...
$bottom_section.append('<input type="hidden" name="save_session" value="' + $total + ' ' + $paragraph + '">');
When I took this out then the whole thing worked as expected. My guess is that by naming the input "save_session" messed with the function definition of save_session() in memory. Now there wasn't a definition conflict, then it was okay.

Ajax post working but not callback message in Android browser

im implementing sign up with ajax on my site its working perfectly on desktop but causing problem in Android Browser The problem is after i click on signup button in android browser it post data to database but do not replace the html message.And alert native code error.
function postdata(){
var chkfrm = checkdata();
if(chkfrm == 0){
var url = '<?php echo base_url();?>index.php/Signup/signin';
$.ajax({
type: "POST",
url: url,
data: $("#formI").serialize(), // serializes the form's elements.
beforeSend:function(){
$("#signupdiv").html('<h1>Loadinng...........</h1>');
},
success:function(data)
{
$("#signupdiv").html(data);
},
error:function () {
alert(console.log);
}
});
e.preventDefault();
}
else {
$("#msgjava").html('<p>We need a little bit information from you.Please fill it.</p>');
return false;
}

You can't do e.preventDefault(); where you are because e is not passed into this function (thus it is undefined). This will cause an error and stop JS execution.
In what you posted, you are also missing a closing brace at the end of the postdata() function.
Your alert says "native code" because that's what this line of code:
alert(console.log)
will do. console.log is a native function so alerting a native function won't do anything useful. You need to make that alert a lot more useful. To see in more detail what error is coming back from the ajax function, change your error handler to something like this:
error: function(jqXHR, textStatus, errorThrown) {
alert("status = " + textStatus + ", errorThrown = " + errorThrown);
}
And, then see what it says.