We Keep Coding

Web2py - How to determine end of load control after ajax

I run a ajax call that updates interpolated value as a fully built selectbox element.
I would like to transform the created/returned selectbox into a chosen selectbox once it has finished fully loading otherwise it reverts back to a regular selectbox.
I have tried:
Listening to 'DOMSubtreeModified'(and other similar events) and then activating chosen lines but, these run too often and I have to know when the selectbox with all options are fully initiated. I can force initiation on each change, it's terrible - resource consuming and just plain wrong.
Initiate some callback on ajax return('ajax:complete' event) but, again - this does not guarantee the html controls are fully initiated as stated in this answer (and tested).
I've tried to set a onload event for the select control.
Main lines of code:
JavaScript call:
ajax('{{=URL('controller_name', 'func_name')}}', ['param1'], 'target_div');
Python controller returns(this returns a select control with option objects initiated in it and overrides the target_div inner html):
return SELECT(distinct_values, _id = 'selectbox_id' , _multiple = 'true' , _class='SelectBoxSingleDisabled');
Looking for a web2py oriented solution. No brute force/hacky stuff if possible. thanks!

There are several options (the first two are suggested here):
In the controller, add the Chosen initialization code to response.js -- this will be executed after the returned HTML is added to the DOM.
Add the Chosen initialization code to a script element after the select element:
CAT(SELECT(distinct_values, _id = 'manual_group_selectbox' , _multiple = 'true' ,
_class='SelectBoxSingleDisabled'),
SCRIPT('[Chosen code]'))
The third argument to the ajax() function can be a Javascript function that takes the data returned by the server. So, you could write a function that adds the returned HTML to the DOM and then initializes Chosen:
ajax(
'{{=URL('controller_name', 'func_name')}}', ['param1'],
function(html) {
[add html to DOM]
[initialize Chosen]
}
);
Set up a jQuery .ajaxSuccess() event handler, which should run after the ajax() function updates the DOM.

jQuery ajax parameter value pulled dynamically

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. */
}

Basic JQuery syntax: What mechnaic is at work in this small (2 line) piece of JavaScript / JQuery

So here' s the piece of code. I'm very new to JavaScript so don't be afraid to explain the obvious
$(".my-css-class").on("click", function() {
($(this).attr("data-property-1"), $(this).attr("data-property-2"), this);
});
There's an element in the .jsp page that looks like this:
<i class="clickMe"></i>
I know the .jsp creates a link-icon, and that the above JavaScript is an event handler. I know that it passes these 3 values as arguments another JavaScript method:
function doStuff(prop1, prop2, obj) {
if (prop1 == 'foo') {
//do stuff with prop2
}
else{
// do stuff with obj
}
}
It all works fine. What I want to know is what exactly is going on to make it work? I can't find anything in the code that connects what the event-handler returns to the 'doStuff' java-script function.
The names are totally different, so it's not reflection, it can't be parameter matching because there's other functions with the same number and type of parameters in the file, it can't be convention based because it still works if I find/replace the name of the function to gibberish.
I guess basically I'm asking what this line is doing:
($(this).attr("data-property-1"), $(this).attr("data-property-2"), this);
tl;dr: I'm at a loss, I know how the properties get as far as the onClick event-handler's anonymous function - but how does JavaScript know to pass them as arguments the to the doStuff() function?

the onClick event is a standard event triggered on click of any clickable html element and is automatically raised by the DOM.
You are hooking in to this by listening on any matched ".my-css-class" elements for an onClick Event.
The jquery syntax ".on" has been simplified over time and allows you to hook into any number of events like "submit" - OnSubmit event , or "load" - onLoad Event
Wherever your on("click", myFunction) event hook is picked up, your myFunction will execute.
Looking at your second point...
because it still works if I find/replace the name of the function to gibberish.
The DoStuff function will be found and replaced across all files in your site? or page? or open tabs? , so therefore it must exist somewhere as "doStuff(" or "giberish(".
so when you do a global find/replace, do each one slowly, until you locate it.
Finally, when you do a view source in the browser, this should either explicitly show you the doStuff function, or at the very least give you a clue as to satelite files loaded at runtime, where you can go and investigate.
Use firebug in firefox to debug loaded resources; the ".net tab" to view external loaded resources and the html/javascript they might contain. (for example: your master page might be loading in an embeded resource that contains the doStuff method, becuase of a user or server control reference in that master page)
Also have a look at this:
http://www.developerfusion.com/article/139949/debugging-javascript-with-firebug/
You can step through the javascipt piece by peice until it hits the doStuff method.
Just remember to set at least 1 breakpoint ;-)

Issue with partial refresh triggered twice

I have a dojo button bar which is bound to a csjs function. This function does a partialrefreshget() on a datable control. The datatable control contains a view as its datasource.
In the this.keys property I have defined some logic to see if the partialrefresh was triggered by checking for the context.getSubmittedValue(). While experimenting with this technique I noticed that the following code is triggered twice.
<xp:this.keys><![CDATA[#{javascript:
var vec = new java.util.Vector()
vec.add("category");
if(context.getSubmittedValue()!=null){
var x = context.getSubmittedValue().trim();
print("--")
}
return vec;}]]></xp:this.keys>
the print statement is printed twice to the console and the logic is therefore triggered twice. Can someone explain to me why this happens and what I can do about it? Should i check for submittedvalues somewhere else or?

I think if you implement a phase listener to print out each phase step, you'll see that this.keys is evaluated twice during the LifeCycle. Probably once during Render Response, and the other during Restore View or something. I would avoid putting application logic within property calculations as it can be triggered at times you would not think it should be unless you are very in tuned with the application lifecycle.

I actually see the submit two or three times on some controls. I have heard that it is an anomalie in the JSP engine that has not been resolved.
What I do is write the vec to a request scope variable after it is computed. then add logic before it is computed to fetch the request scope variable and if it exisits, return it instead of recomputing the value.

After a bit of testing i gave up calling my own partialrefreshget method.the extlib dojo toolbar contains a onclick event which is triggerd when on a node the submitvalue is set. In this onclik event i added code like
Var v = context.getsubmittedvaleu();
If("action".equals(v)){
// do stuff that changes the dataset..
}
The event handler is set to partial refresh a datatable wich receives the new data. This is a much cleaner implementation than checking the submittedvalue in the datasource ( as stated by (jeremy hodge).
This way the datasource is only refreshed once.
As a sidenote i would like add that it would be nice to add such an event directly to the treenode(s) as I would do in standard java swing /awt dev by adding a controllistener to a button.

Javascript and session variables

I have a database that stores events in it and a page with a calendar object on it. When rendering the days it looks through the months events and if any match the current day being rendered it creates a linkbutton to represent the event in the day on the calendar and adds it to that cell. I add some javascript to the linkbutton to change the window.location to a page to view event details passing EventID in the querystring ( I tried setting the postbackurl of the newly created linkbutton but it wasnt causing a postback... no luck). I need to set a Session variable ie. Session("EditMode") = "Edit" So the new page will know it is to get an existing event info rather than prepare to create a new event? Any SUGGESTIONS?

Your session vars are controlled by the server,
JS runs client side, and as such cannot modify the vars directly.
You need to make server requests using POST or GET and hidden
iframes, or XMLHTTPRequest() calls to send data from the JS to
the server, and then have your server side code handle the vars.
Add another query string variable that the page can use to trigger existing vs new.

Add another query string variable that the page can use to trigger existing vs new.

If you are using something like Struts2, you can have a hidden variable in your jsp
<s:hidden id="EditModeId" value="%{#session.EditMode}"/>
And within javascript simply access this variable
alert(document.getElementById('EditModeId').value);

You definitely need to add a variable to the target page. But I take it that you are doing a popup scenario, so you should be able to create a javascript function OpenWindow() and fire it off when the user clicks the link.
<script>
function OpenWindow(eventId, editMode)
{
var window = window.open("popup.aspx?eventId=" + eventId + "&editMode=" + editMode);
}
</script>
On the server side you need to build the call to the OpenWindow function. For example:
onclick="OpenWindow(eventId=" + row["eventId"].ToString() + "&editMode=" + editMode.ToString() + ");"
So in other words, prep everything on the serverside to set your javascript to post all variables to the new page. Hope this helps.

var page1 = document.getElementById("textbox").value;
sessionStorage.setItem("page1content", page1);
in other page use this value as like session variable
document.getElementById("textbox2").value=sessionStorage.getItem("page1content");