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");
Related
This is basically a followup question to this, as it is not encouraged to ask further questions in the comments:
Draggable revert if outside this div and inside of other draggables (using both invalid and valid revert options)
This solution works rather well even though my use case is not exactly the same. There is just one small visual thing that bothers me. I have rather large draggable objects, so I am using a helper for it. No matter if the drop is valid or not, the helper still has a revert animation on it:
If it is an invalid drop, the helper moves to the original position before it fades away, which is fine.
But if it is a valid drop it does the same whereas the original gets moved to the valid position. Any ideas how I could prevent this.
Here a short snippet of the helper definition:
helper: function() {
var jqThis = jQuery(this);
var helper = jQuery('<div class="helper"/>');
helper.text(jqThis.text().substr(0, 100));
helper.css('width', jqThis.css('width'));
return helper;
}
I just figured it out: I have to set the option back to "invalid" if it is a valid drop.
if (invalidDrop) {
drag.draggable('option','revert',true);
} else {
drag.draggable('option','revert','invalid');
}
I am wondering if whether a jQuery UI Dialog instance can be saved to a file/database in such a fashion that it can be restored to it's original state later?
I mean something like this:
var save_instance = jQuery.stringify(instance); /* instance variable here refers to a Dialog's instance that I am trying to save */
And then whenever I need to restore it:
jQuery(JSON.parse(save_instance)).dialog();
The latter gives me an error and doesn't work as I was hoping to.
Is this something which is just not possible? Or is it something I am doing wrong?
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.
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've just updated my project from jquerymobile 1.0a1 to version 1.0.
I've encountered a problem with dynamic content. Based on an ajax search I populate an unordered list with list items. Previous the following code refreshed the list so that all the styling appeared correctly:
$('#myContent').find("ul").listview();
$('#myContent').find("ul").listview('refresh');
However as of 1.0 this no longer seems to work.
The list appears but the styling is all wrong and the data-theme on all the elements gets ignored.
Has anyone come across a similar issue with updating and come across the solution.
Updating lists If you add items to a listview, you'll need to call the refresh() method on it to update the styles and create
any nested lists that are added. For example:
$('#mylist').listview('refresh');
Note that the refresh() method only affects new nodes appended to a
list. This is done for performance reasons. Any list items already
enhanced will be ignored by the refresh process. This means that if
you change the contents or attributes on an already enhanced list
item, these won't be reflected. If you want a list item to be updated,
replace it with fresh markup before calling refresh.
http://jquerymobile.com/demos/1.0/docs/lists/docs-lists.html
if #myContent is the listview you can do this:
$('#myContent').listview('refresh');
if #myContent is the page you can do something like this:
$('#myContent').trigger('create');
Create vs. refresh: An important distinction Note that there is an important difference between the create event and refresh method
that some widgets have. The create event is suited for enhancing raw
markup that contains one or more widgets. The refresh method should be
used on existing (already enhanced) widgets that have been manipulated
programmatically and need the UI be updated to match.
For example, if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added, calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
What you want can be achieved by replacing your 2 lines of code with the following:
$('#myContent ul').listview('create');
Hope this helps...
I've had this issue. The reason you are getting things all messed up is you are initalizing and refreshing the element multiple times. I noticed I had 2 different functions running that would call .listview('refresh') on the same element. After I took one out the themes and data went back to looking normal. Also are you getting any JS errors?
EDIT:
To be more specific you are calling .listview() somewhere in your code 2 times which is initializing it twice. I would wait to before you page is loaded to run the refresh so you only call it once.
Another thing you could do is check if the element is initialized already or not so you don't do it twice. Just check the element or in some cases the parent to see if the class ui-listview is present.
var element = $('#myContent').find('ul');
if ($(element).hasClass('ui-listview')) {
//Element is already initialized
$(element).listview('refresh');
} else {
//Element has not been initiliazed
$(element).listview().listview('refresh');
}
Just an FYI you can chain those events to look like $('#myContent').find('ul').listview().listview('refresh');
It cand be achived through.
$('#myContent').listview('refresh');
The below snippet shows you to load data from xml and dynamically create a list view.
function loadData()
{
$.ajax({
url:"BirthdayInvitations.xml",
dataType: "xml",
success: function(xml)
{
$(xml).find("event").each(function()
{
$("#mymenu").append('<li>' + this.textContent + ' </li>');
});
$("#mymenu").listview('refresh');
}
});
}
See if this is related to ur question http://www.amitpatil.me/demos/jquery-mobile-twitter-app/ and this one also http://www.amitpatil.me/demos/ipad-online-dictionary-app/
In first example i am using listview('refresh'); method and in second example i am using
$(document).page("destroy").page();