jQuery ajax parameter value pulled dynamically - javascript

Wondering if there is someway to do this without using a timeout.
Right now I have an ajax request that pulls in a token via an external js. I don't have full control over this script as its provided by a 3rd party.
So it basically does an ajax request and passes me back a token vaule. I then take that value and update a form input with it.
My problem is the form submits before it has time to fully get value, hence the value is never passed.
I have some responses to work with that this 3rd party script provides, right now I am doing something like.
resonseData is passed back to me from this script..
if(responseData.dataValue !='') {
$('[name=payment_token]').val(responseData.dataValue, function(){
$("#userPaymentUpdate").submit();
});
}
^ The problem is the form submits before it has time to update the $('[name=payment_token]').val()
Is there anyway way round this aside for putting a timeout in? I thought by adding a callback like above would solve it, but apparently it doesn't.
I also have event.preventDefault(); on the form click handler, but when thats enable the 3rd party script wont execute at all. So basically need to only submit the form if that payment_token value has been updated.

If I'm reading this correctly, it looks more like an issue of order. responseData.dataValue has the value, otherwise that if condition wouldn't have processed.
Your code should look something like this:
if(responseData.dataValue !='') {
$('input[name=payment_token]').val(responseData.dataValue); /* I'm guessing you're using a hidden field for the payment token. */
$("#userPaymentUpdate").submit(); /* at this point, the value will have already been assigned. */
}

Related

JS variable is displayed as undefined when using HTML

I am working on a project on Google Apps Script. I have a JS function that returns a date (as a text). I also have an HTML document to display a form with several inputs. I would like to prefill one input with the date returned by the JS funtion. It almost works, except it displays "undefined" instead of the date, even though I know the js funtion is working fine.
Here are some code to better understand :
The input where I call the script (don't mind the onmousemove, i just didn"t find anotherway to call the script).
<input type="text" id="deliveryDate" name="deliveryDate" onmousemove="displayActiveDate()">
So it calls the folowing script.
<script>
function displayActiveDate(){
var activeDate = google.script.run.getActiveDate();
document.getElementById("deliveryDate").value = activeDate;
}
</script>
Which in turn calls getActiveDate() which is the separate JS function that returns the date.
If you have any idea on how to solve this, I will be very thankful.
google.script.run.serverSideFunction() returns undefined. In order to get the actual response value from your serverSideFunction() you need to use the withSuccessHandler() method with a callback like so:
google.script.run.withSuccessHandler(onSuccess).serverSideFunction();
function onSuccess(data) {
// do something with the data returned by the serverSideFunction()
}
Also note that you also have withFailureHandler(err) to handle any errors you server-side functions may return.
Here is the full reference
Instead of writing document.getElementById("deliveryDate").value = activeDate; type document.getElementById("deliveryDate").innerHTML= activeDate; in your script

Safe way to store data for button clicks

I am trying to find out what the safest way to store data for use when the user clicks on a button.
I know that you can store data in attributes(either the value attribute or a data- attribute) of the button tag like so:
<button type="button" value="1" data-value="1">Click me!</button>
But the problem with this is that the user(probably really only advanced users) can manipulate the value with firebug or some other app and THEN click the button and send over different data. I fully understand that I need to check the input before I try to do anything with the sent data.
I also found out that I could use jQuery's .data() to attach data to dom elements, which seems a bit more useful. I'm not exactly sure how the data is stored, but I assume its harder to manipulate.
What got me really interested in this question was when I was looking through Soundcloud's code in firebug, I saw that none of the "like" buttons had data attached to the buttons. I tried deleting/manipulating elements/data and the buttons still worked. So it got me thinking that they are probably using a similar process to what jquerys data() is doing.
I just want to know if there is a safer way to store data or a way so that the user can't manipulate the data before clicking the button.
Consider this function:
function setupPrivateData(element) {
var private = 1;
element.setPrivate = function ( d ) { private = d; }
element.getPrivate = function ( ) { return private; }
}
When called with some DOM element it will add two methods to it: .setPrivate(val) and .getPrivate().
These are the only methods that will allow you to access and modify that private variable associated with the element.
The user can always manipulate data. Nothing stops an advanced user to access object properties or call a jquery.data() on their own.
Something you could do in vanilla js would be:
var div = document.getElementById("test");
div.something = "hidden value";
div.addEventListener("click", function() {
alert(this.something);
});
<div id="test">click me</div>
The best way would to be a serverside verification if the sent data is valid or not.
Besides that, you could try to wrap your code in an anonymous function to deny the user access to the object:
(function() {
var data = {};
data.something = "test";
})()
But even that fails as soon as the user manipulates your files and adds for instance a debugger statement.
You can obfuscate your javascript but the only validation has to be done on your server. For example, I tried to get the weather from theweathernetwork. They have hidden their API call using multiple files and callbacks. In my opinion, it's just more challenging (funnier) if you want to reverse-engineer their site.
Javascript can't be secure. Never trust user input
If you are logging button clicks, the safest way to keep track is to save and validate on the server side.
For example, when you click a like button on Soundcloud, it makes an HTTP request to Soundcloud's server, records that you clicked the button, and marks it as a favorite. This way, if the same user clicks the button anytime in the future, it can check before incrementing the number of favorites.
The number displayed in the button is also pulled in from the database when the view is rendered.
This is a huge topic, and you have a lot to learn, far too much for a comment here. Anything "stored" in an attribute in the HTML source is absolutely not secure, it can be changed very very easily.
The most common way of dealing with this would be to use a cookie, but even with some effort these can be manipulated.
If security is important, find some way of identifying your users (possibly by IP, but even that isn't fool proof!) and keep the data on your server, linked to a user ID which can be retrieved after the button is clicked.

Setting window.location in JavaScript hangs

I have an ASP.NET MVC app. My app uses jQuery on the client side. The user can enter values into several fields and click "Refresh". The Refresh is behaving oddly.
When Refresh is clicked, I execute the following JavaScript:
function refresh() {
var chosen = "(someField eq 'value')";
try {
if (chosen) {
var url = 'http://localhost:8089/item&c=' + chosen;
alert(url);
window.location = url;
} else {
window.location = 'http://localhost:8089/item';
}
return false;
} catch (ex1) {
alert(ex1);
}
}
The value for chosen is actually generated via a function. I've noticed when I use a certain type of control, the page hangs. Here is what is odd, I can see the request made in Fiddler. Yet, my breakpoint in my controller action is never hit. If I copy and paste the url from the alert call into the address bar, my breakpoint gets successfully hit. So, I'm totally confused.
Due to the fact this involves a specific control, I at first assumed this was a JavaScript error. However, I do not see any JavaScript error in the console. I also checked to see if any exceptions were being swallowed and I did not see any.
The fact I see the request in Fiddler, would imply that I'm getting to the web server. Yet, if I have a breakpoint on the very first line of the controller action, I would expected that to trip. It does not trip in the scenario where I use the control. It does trip if I do NOT use the control. The result in Fiddler sits at '-'. It never returns. Plus, I do not get an exception thrown in my ASP.NET view.
I'm totally stuck on this and looking for ideas of potential causes. Thank you.
This behavior is usually the result of a problem during model binding for the controller.
A quick step to try is making sure the query string values you are sending are properly encoded.
var chosen = "(someField eq 'value')";
chosen = encodeURIComponent(chosen);
Would eliminate any bad character problems that the model binder might be having.

PrimeFaces get the current page number on page change event

I have a primefaces datatable.
I need to know the current page number on page change event using client side API.
I am using,
<p:ajax event="page" oncomplete="myFunction(usersWidget);"/>
Inside myFunction() i have
debugger;
console.log(usersWidget.paginator.getCurrentPage());
The problem is, callbacks inside oncomplete of page event are called before the new page is set (PrimeFaces.widget.Paginator.setPage) on the paginator. I traced this with the debugger.
That being said, i would get the previous page number i was on and not the current page number, inside oncomplete callback.
If i could get a callback after the page is set after i click the page link, i would know the current page.
EDIT: Docs say that its a callback called after ajax completion and after DOM is UPDATED.
then what could be potentially wrong?
Pointers please?
Its strange , cause oncomplete being called after the page was updated...
How about calling oncomplete="myFunction();" without passing the parameter ?
You might be passing the old object (with outdated information) that way... the usersWidget is global variable anyway... ans should be present in your js file
Since it seems that client side api is not synced with the right values
As a workaround you could try to pass the page value from server like this
DataTable dataTable = (DataTable)
FacesContext
.getCurrentInstance()
.getViewRoot()
.findComponent("someOformID:someTableId");
or try, instead of the line above,
PageEvent.getPage(); //PageEvent is an argument to you listener
myPageHolder = dataTable.getPage();
Than place this value to bean property and put it inside some hidden value in xhtml , than update that hidden value with p:ajax update and access it from within js

how is document.form.submit() received in code behind?

I have document.form1.submit() in javascript. I want to know how it's received in code behind. In which class, in which method? Something like that. Coz I want to get the value inside a textbox to store it in session. And do i need an actual "submit" button for this to work? This really confuses me.
If i put it like this:
function CallSubmit() {
var thetext = document.getElementById('textbox1').value;
document.form1.submit(thetext);
}
will I be able to pass the value of textbox1 to a specific method in code behind if it has, like, a receiving variable? I mean, how do i get the value of textbox1?
By the way, I'm trying to do this before the page unloads. Because I need to store the text from textbox1 so that I can re-assign that value back after the page refreshes.
You can get the post back values on code behind using the 'Form' as
Request.Form["textbox1"]
and if you read this Request.Form you get all data from post
Comments.
In asp.net we general avoid to use direct the Request.Form and we use asp.net controls that all ready handle the post values.
For example if you use an asp:TextBox with ID=textBox1 then you read the post from textBox1.Text
and if you like to read it using the Request.Form you need to call the Request.Form[textBox1.UniqueID]
The textBox1.UniqueID is the name value on the html control, and the name used for the post back.

Categories