Develop Reference

Wicket AjaxFormUpdatingBehavior and Javascript

I have these two DropDownChoice (DDC) objects that work perfectly fine: when one element is chosen from the first DDC, the list for the second gets update with related choices. The first is strumListDDC, the latter is controlListDDC.
controlListDDC.setOutputMarkupId(true);
controlListDDC.setChoiceRenderer(new ChoiceRenderer<>("name"));
controlListDDC.add(new AjaxFormComponentUpdatingBehavior("change") {
#Override
protected void onUpdate(AjaxRequestTarget target) {
QCControl qcc = controlListDDC.getModelObject();
lotList = QCLot.getLotsForCtrl(qcc.getId());
if (!lotList.isEmpty()) {
target.add(lotListDDC);
}
}
});
searchForm.addOrReplace(new Label("strumListLabel", "Strumento:"));
searchForm.addOrReplace(strumListDDC = new DropDownChoice<>("strumList", InstalledStrum.loadAllStrum(false)));
strumListDDC.setDefaultModel(new Model<>());
strumListDDC.add(new AjaxFormComponentUpdatingBehavior("change") {
#Override
protected void onUpdate(AjaxRequestTarget target) {
InstalledStrum is = strumListDDC.getModelObject();
controlList = QCControl.loadQCControlPerStrumType(is.getStrumType());
lotList = new ArrayList<>();
if (!controlList.isEmpty()) {
target.add(controlListDDC);
target.add(lotListDDC);
}
}
});
For niceness reasons, I added this little bit of Javascript to the page template from which all my HTML pages are derived:
$(function filtersScroll() {
var $filters = $(".viewANfilters");
detailsPos = $filters.position().top;
$(window).on("scroll", function () {
if ($(window).scrollTop() > detailsPos)
$filters.css("position", "fixed").css("top", 0);
else
$filters.css("position", "fixed").css("top", detailsPos -$(window).scrollTop());
});
});
I add the javascript through using Wicket (but the problem is still there if I insert the code directly in the HTML, I just post it for completeness):
response.render(JavaScriptContentHeaderItem.forScript(Costants.JS_FILTERS_SCROLL, "filters_scroll"));
When I add the javascript, the onUpdate function of the first DDC never gets called (checked with debugger). As soon as I remove the javascript, the autoupdating behavior starts working fine again. Not that this javascript is fundamental to the page, I can still go on without it, but I fear the same thing will happen again when I will need to add some serious javascript.
Since I'm pretty new at javascript, can anybody give me a hint on what's stopping the AjaxFormComponentUpdatingBehavior from working? Can it be some sort of conflict between different script tags? There are others in the final page, added by Wicket itself, but since they have always been more than one I didn't think a new script would cause any trouble...

Check your selector ".viewANfilters" - if no element with that class is present, position() will be undefined, your JavaScript fails and Wicket won't be able to register any event handlers.

What is the preferred pattern for re-binding jQuery-style UI interfaces after AJAX load?

This always gets me. After initializing all lovely UI elements on a web page, I load some content in (either into a modal or tabs for example) and the newly loaded content does not have the UI elements initialized. eg:
$('a.button').button(); // jquery ui button as an example
$('select').chosen(); // chosen ui as another example
$('#content').load('/uri'); // content is not styled :(
My current approach is to create a registry of elements that need binding:
var uiRegistry = {
registry: [],
push: function (func) { this.registry.push(func) },
apply: function (scope) {
$.each(uiRegistry.registry, function (i, func) {
func(scope);
});
}
};
uiRegistry.push(function (scope) {
$('a.button', scope).button();
$('select', scope).chosen();
});
uiRegistry.apply('body'); // content gets styled as per usual
$('#content').load('/uri', function () {
uiRegistry.apply($(this)); // content gets styled :)
});
I can't be the only person with this problem, so are there any better patterns for doing this?

My answer is basically the same as the one you outline, but I use jquery events to trigger the setup code. I call it the "moddom" event.
When I load the new content, I trigger my event on the parent:
parent.append(newcode).trigger('moddom');
In the widget, I look for that event:
$.on('moddom', function(ev) {
$(ev.target).find('.myselector')
})
This is oversimplified to illustrate the event method.
In reality, I wrap it in a function domInit, which takes a selector and a callback argument. It calls the callback whenever a new element that matches the selector is found - with a jquery element as the first argument.
So in my widget code, I can do this:
domInit('.myselector', function(myelement) {
myelement.css('color', 'blue');
})
domInit sets data on the element in question "domInit" which is a registry of the functions that have already been applied.
My full domInit function:
window.domInit = function(select, once, callback) {
var apply, done;
done = false;
apply = function() {
var applied, el;
el = $(this);
if (once && !done) {
done = true;
}
applied = el.data('domInit') || {};
if (applied[callback]) {
return;
}
applied[callback] = true;
el.data('domInit', applied);
callback(el);
};
$(select).each(apply);
$(document).on('moddom', function(ev) {
if (done) {
return;
}
$(ev.target).find(select).each(apply);
});
};
Now we just have to remember to trigger the 'moddom' event whenever we make dom changes.
You could simplify this if you don't need the "once" functionality, which is a pretty rare edge case. It calls the callback only once. For example if you are going to do something global when any element that matches is found - but it only needs to happen once. Simplified without done parameter:
window.domInit = function(select, callback) {
var apply;
apply = function() {
var applied, el;
el = $(this);
applied = el.data('domInit') || {};
if (applied[callback]) {
return;
}
applied[callback] = true;
el.data('domInit', applied);
callback(el);
};
$(select).each(apply);
$(document).on('moddom', function(ev) {
$(ev.target).find(select).each(apply);
});
};
It seems to me browsers should have a way to receive a callback when the dom changes, but I have never heard of such a thing.

best approach will be to wrap all the ui code in a function -even better a separate file -
and on ajax load just specify that function as a call back ..
here is a small example
let's say you have code that bind the text fields with class someclass-for-date to a date picker then your code would look like this ..
$('.someclass-for-date').datepicker();
here is what i think is best
function datepickerUi(){
$('.someclass-for-date').datepicker();
}
and here is what the load should look like
$('#content').load('/uri', function(){
datepickerUi();
})
or you can load it at the end of your html in script tag .. (but i dont like that , cuz it's harder to debug)
here is some tips
keep your code and css styles as clean as possible .. meaning that for text fields that should be date pickers give them one class all over your website ..
at this rate all of your code will be clean and easy to maintain ..
read more on OOCss this will clear what i mean.
mostly with jquery it's all about organization ... give it some thought and you will get what you want done with one line of code ..
edit
here is a js fiddle with something similar to your but i guess it's a bit cleaner click here

Adding own javascript function in ASP.NET AJAX function?

On the page I am building, I have four buttons which show/hide (visible="true" || visible="false") certain div's. What I want is before the AJAX function is called, my own custom function be called, which animates opacity of current visible div to zero, then displays a loading image and finally after the AJAX function completes another custom function is called which animates the "to be" shown div from zero opacity to 1 and from left to right. What I am trying to accomplish is windows phone 7 kind of effect in the webpage. So, any ideas how I can do that?

If your are using Asp.net ajax then yo can achieve this by following these steps
Register your javascript methods with these statement.
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
Definition of registered methods
function beginRequestHandle(sender, Args)
{
alert("Begin Request Handle called.");
}
function endRequestHandle(sender, Args)
{
alert("End Request Handle called.");
}

You can do this by writing a custom ajax handler in your code. For example, in your cs file:
[WebMethod]
public static bool CustomAjaxMethod(string arg)
{
// do work
return true;
}
Then, in your aspx file:
<input type="button" value="Do Ajax Call" onclick="doWork();" />
And in javascript:
function doWork() {
// do your 1st animation here
PageMethods.CustomAjaxMethod('foo', callback);
}
function callback(result, userContext, methodName) {
if (methodName == 'CustomAjaxMethod') {
// may want to check result here
// do your 2nd animation here
}
}

How can I call a JavaScript function after every a4j AJAX response?

I am working on a web app using JSF w/Seam. I want to be able to call a JavaScript function after every ajax response. I'm looking for a way to do this without putting an oncomplete attribute on every commandLink/commandButton on every page.
I think there's a way to set up a servlet filter (interceptor? I get the terms confused) to inject the JS call into each response. I'm going to look into that. In the meantime, if anyone has any other suggestions, I'm all ears.
EDIT: I think the jQuery ajaxSuccess method might be the way to go here, but I'm not sure how to actually use it. I can't get anything to register. I basically want to add code to get any and all ajax requests from any source to call my JavaScript method on success. Can anyone show me the proper way to do this? I've tried a number of ways to do this, including adding jQuery("*").ajaxSuccess(function(){myFunction();}); to the bottom of my template xhtml file.

Rewritten answer: see original answer in revision history
You could override the default send method of XMLHttpRequest with one that hijacks the readystatechange handler:
(function ()
{
var xhrSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function ()
{
var handler = this.onreadystatechange;
this.onreadystatechange = function ()
{
if (handler) {
if (handler.handleEvent) handler.handleEvent.apply(xhr, arguments);
else handler.apply(xhr, arguments);
}
if (this.readyState == 4)
{
// your oncomplete function here
this.onreadystatechange = handler;
}
};
xhrSend.apply(this, arguments);
};
})();
Edit: The above function doesn't work with jQuery requests, and so potentially it could fail with other libraries as well. The revision below addresses the issue with a setTimeout hack to delay the code that overrides the handler. Of course, with jQuery, you can just use the .ajaxSuccess() global handler, but for other libraries with similar behavior, this would be useful.
(function() {
function globalHandler() {
if (this.readyState == 4) {
// your oncomplete code here
}
}
var xhrSend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function() {
var xhr = this;
if (xhr.addEventListener) {
xhr.removeEventListener("readystatechange", globalHandler);
xhr.addEventListener("readystatechange", globalHandler, false);
}
else {
function readyStateChange() {
if (handler) {
if (handler.handleEvent)
handler.handleEvent.apply(xhr, arguments);
else
handler.apply(xhr, arguments);
}
globalHandler.apply(xhr, arguments);
setReadyStateChange();
}
function setReadyStateChange() {
setTimeout(function() {
if (xhr.onreadystatechange != readyStateChange) {
handler = xhr.onreadystatechange;
xhr.onreadystatechange = readyStateChange;
}
}, 1);
}
var handler;
setReadyStateChange();
}
xhrSend.apply(xhr, arguments);
};
})();
http://jsfiddle.net/gilly3/FuacA/5/
I tested this in IE7-9, and the latest versions of Chrome and FF

Since you are using RichFaces you can simply use this:
<a:status id="globalStatus" onstart="onRequestStart()" onstop="onRequestEnd()" />

Using a4j:status should work, but it has to be inside an h:form tag:
<h:form id="randomForm" styleClass="edit">
<a:status id="stateStatus"
onstart="Richfaces.showModalPanel('waitBx'),document.getElementById('randomForm:search').disabled=true;"
onstop="Richfaces.hideModalPanel('waitBx'),document.getElementById('randomForm:search').disabled=false;"
styleClass="message" >
</a:status>
...... way more code
</form>
After every ajax call this pops up a wait picture and disables the search button.
Interestingly enough, at least in our code, this doesn't work for anything in a nested a4j:region.

I think this is what you are looking for: Using Global Ajax Handlers In jQuery

How to tell whether the $(window).load()/window.onload event has already fired?

I have a script that is being inserted dynamically via another script. The code in that script is wrapped inside the $(window).load() event because it requires the images on the page to have all loaded. In some browsers it works fine, but in others it seems not to fire because the page has already finished loading by the time the code is run.
Is there any way to check and see whether the page has already finished loading - either via jQuery or JavaScript? (including images)
In this situation, I don't have access to the onload event of the original document (aside from altering it via the loaded script - but that would seem to present the same problem).
Any ideas/solutions/advice would be greatly appreciated!

You could try setting up a handler that's invoked via a timeout that will check the images to see if their properties are available. Clear the timer in the load event handler so if the load event occurs first, the timer won't fire. If the properties aren't available, then the load event hasn't fired yet and you know that your handler will eventually be invoked. If they are, then you know that the load event occurred before your handler was set and you can simply proceed.
Pseudocode
var timer = null;
$(function() {
$(window).load( function() {
if (timer) {
clearTimeout(timer);
timer = null;
}
process();
});
timer = setTimeout( function() {
if (checkAvailable())
process();
}
}, 10*1000 ); // waits 10 seconds before checking
});
function checkAvailable()
{
var available = true;
$('img').each( function() {
try {
if (this.height == 0) {
available = false;
return false;
}
}
catch (e) {
available = false;
return false;
}
});
return available;
}
function process() {
... do the real work here
}

I wrote a plugin that may be of some use: http://plugins.jquery.com/project/window-loaded

I think your problem would resolve itself if you'd use $(document).ready instead of $(window).load - see the jquery documentation.

You guys should read this:
http://web.enavu.com/daily-tip/daily-tip-difference-between-document-ready-and-window-load-in-jquery/

Don't know if this is what you are after, but have you tried(?):
$(document).ready(function(){
...
});
http://docs.jquery.com/Events/ready#fn