I have an input field with Ajax functionality on a blur event and a commandButton on my page. If I modify a value on my input field and click the commandButton without tabbing out, which method will be called first? The listener attached to the input field or the button?
From my experience so far the one that is called first varies, which is causing some issues in my application. I would like the listener for the input field to always be called first.
Does anyone know how to handle this situation?
UPDATE:
Thanks for the responses and after troubleshooting a little more I noticed that as has been mentioned the ajax listener is called first but on rare occasions the button action is called before the listener method has finished processing some desired logic. In my case, I need the listener method to finish processing before the button action is called otherwise some unexpected behavior may occur. Is it possible to do this?
Remember that everything in JSF is converted back to HTML and JavaScript. Therefore a simple test as such :
<input type="text" id="field1" onblur="blurFunction();">
<br/>
<button onclick="clickFunction()">Click</button>
Will show you what you need to know. With the tests I have done, blur comes up first.
If you are having issues with this, why not have a simple check when clicking your button to make sure that whatever needed to run on blur was run?
Edit
As per the edited question, you could always set a flag on your blur event.
function blurFunction() {
document.myVar = 1;
//... rest of the function
}
function clickEvent() {
if(document.myVar = 1) {
//wait
} else {
//do your click event
}
}
It is not suggested to put your variable in the global scope. This is just but an example as to how this can be done.
Related
I'm having a great time playing around with knockout js and have just started to get to grips with adding custom bindingHandlers.
I'm struggling a bit with the update function of a 3rd party jqWidget gauge - I can only get it to animate the first time I update the variable. On each update after that it just sets the value directly.
I don't fully understand ko.utils.registerEventHandler() and what it does although I've seen it in a bunch of other examples. Is this what is causing the animation to break? How do I know which events to register from the 3rd party widget?
For some reason this works fine if I add a jquery ui slider that is also bound to the observable.
You can test this here: set the value a few times to see that it animates the first time and not after that.
http://jsfiddle.net/LkqTU/4531/
When you update the input field, your observable will end up being a string. It looks like the gauge does not like to be updated with a string value, at least after the first time.
So, if you ensure that you are updating it with a number (parseInt, parseFloat, or just + depending on the situation), then it appears to update fine.
Something like:
update: function(element, valueAccessor) {
var gaugeval = parseInt(ko.utils.unwrapObservable(valueAccessor()), 10);
$(element).jqxGauge('value', gaugeval || 0);
}
http://jsfiddle.net/rniemeyer/LkqTU/4532/
You would generally only register event handlers in a scenario like this to react to changes made by a user where you would want to update your view model data. For example, if there was a way for a user to click on the gauge to change the value, then you would want to handle that event and update your view model value accordingly.
I'm answering the
I don't fully understand ko.utils.registerEventHandler() and what it does
part of your question.
registerEventHandler will register your event handler function in a cross-browser compatible way. If you are using jQuery, Knockout will use jQuery's bind function to register the event handler. Otherwise, will use the browser Web API with a consistent behavior across browsers.
You can check it out on the source code.
I have some dialogs in AJAX-loaded content. When the content is refreshed, the dialogs should be deleted; however, since jQuery moves them out of their original position in the DOM, they remain and start piling up.
A hack to fix this is to give those dialogs a specific class and explicitly destroy them in the AJAX code; however, this is "morally" incorrect. What's the correct way to go about this?
Here is a fiddle to demonstrate the problem:
http://jsfiddle.net/6LPcS/
Why not just check if they exist before adding them?
For example, do something like this:
var isDialogInitialized = false
function verifyDialog()
{
if (!isDialogInitialized)
{
//Init the dialog
//...
//Some other code
//Set the flag to true
isDialogInitialized = true;
}
}
Just make sure you call this function every time you create the dialog today. This way you'll be sure that the dialog is initialized only once.
I don't really think it is possible to do it in any 'smart' way... Why cannot you just destroy it manually each time the content is refreshed?
Also note that all dialogs have automatically assigned class "ui-dialog-content" and you may use it to close all opened dialogs:
$('.ui-dialog-content').dialog("destroy");
You should call
$('.yourdialog').dialog("destroy");
to remove the dialog
EDIT - if you need you can save the dialog in a variable and then call destroy on it
var dialog = $('.yourclass').dialog();
dialog.dialog("destroy");
I'm having a bit of trouble with the client-side validation in the ASP.NET MVC 2 framework and hope someone can help me out.
In several situations I find it useful to be able to reset the contents of a form or just a single input element and I need any validation errors to disappear. This in itself is not very hard, and the suggestion provided here works well enough:
How do I clear MVC client side validation errors when a cancel button is clicked when a user has invalidated a form?
The problem is that, when triggered, client validation goes into an aggressive mode that performs validation on each key press and when an input loses focus. Is there a good way to reset this state as well?
It turned out that some of my problems could be solved by setting the reset button to type reset which the validation framework respects. This doesn't work when a failed submit occurs (due to invalid fields) and in this case I ended up using the following function (selector is a jQuery selector string):
resetFieldValidation: function (selector) {
var fields = $(selector);
fields.removeClass('input-validation-error').addClass('input-validation-valid');
fields.siblings('.field-validation-error').text('').removeClass('field-validation-error').addClass('field-validation-valid');
fields.each(function () {
$(this)[0]['__MVC_HasTextChanged'] = false;
$(this)[0]['__MVC_HasValidationFired'] = false;
});
}
The last part of the function sets values indicating to the validation framework that the fields have not changed and have not previously triggered a validation error.
I'm using the jQuery Autocomplete control to autocomplete from the server via an AJAX call.
I implemented the search event to show a "Loading..." animation while results are being fetched from the server.
I want to disable that animation and show a message if fetching the autocomplete results from the server failed (timeout or whatever)
Whats the best way to do that?
Have a looksie at the jQuery.ajaxError method, which allows you to setup a default error callback for all ajax calls; http://api.jquery.com/ajaxError/
I just find myself in this situation. I wanted to clear the spinner from the textbox, and also highlight it in red, to provide visual feedback of the error. But I have 3 different textboxes in DOM that use the same function. So, you can do something like this:
function autocompleteSource(request,response){
//"this" is the widget object, you can get the element that called the autocomplete function from here
var callerTextbox = $(this.element);
$.get(url,data).done(/*do your stuff with the data*/).fail(function(){
highlight(callerTextbox) //That's my own function, uses jquery animation effects
response([]); //Use an empty response for clear the textbox
});
}
I am relatively new to jQuery and web development.
I am using jQuery UI Tabs to create tabs.
But I want the contents to be loaded only when I select a particular tab.
OK, I assume when the user clicks a tab, you intend to fetch content dynamically, via AJAX. This really involves two things, setting an onclick even for your tab and fetching the data via ajax.
Setting an onclick event
Give your tab an class, for example my_tab. Let's say that when the user clicks the tab you want the handle_tab_click() function to fire. Here's an example of binding the onclick event to your my_tab tab:
$(".my_tab").bind("click", handle_tab_click);
Your handle_tab_click() function will be given an event argument which will be able to provide you with information on the element that fired the event (in this case, the element with class name my_tab).
function (event) {
if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}
See the JQuery event documentation for more details here.
Fetching the data via ajax
Fetching data will require you to invoke a remote script while supplying information about which tab was clicked (in order to fetch the appropriate information). In the following snippet, we're invoking the remote script myscript.php, supplying the HTTP GET argument tab_clicked=my_tab and calling the function tab_fetch_cb when the script returns. The final parameter is the type of data being returned (it's up to you to choose).
$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")
It's up to you to design myscript.php to handle the tab_clicked parameter, fetch the appropriate data and return it (i.e. write it back out to the client).
Here's an example for tab_fetch_cb:
function tab_fetch_cb(data, status) {
// populate your newly opened tab with information
// returned from myscript.php here
}
You can read more about the JQuery get function here, and JQuery ajax functions here
I'm sorry I can't be more specific in my examples, but a lot of the processing is really dependant on your task. As it looks as it has already been pointed out, you may look to some JQuery plugins for a canned solution to your problem. That being said, it never hurts to learn how to do this stuff manually w/ JQuery.
Good luck.
UI/Tabs support loading tab content on demand via Ajax, check this example.
Loading content via Ajax adds the complexity of dealing with bookmarking / browser back buttons. Depending on your situation, you should consider loading new content with a full page request. Handling the bookmarking/browser back involves using adding anchor info in the URL.
Also, check out LavaLamp for tab selection. It's pretty nifty looking.
By default a tab widget will swap between tabbed sections onClick, but the events can be changed to onHover through an option. Tab content can be loaded via Ajax by setting an href on a tab.
source: http://docs.jquery.com/UI/Tabs
If you're using Rails, you can try this gem bettertabs
It supports ajax tabs.