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?
Related
I'm building an autocomplete text field component. We will show popup of items filtered based on what users type. It is going to be async, I will get the details from the server and do some filtering based on the text typed in the field.
So here, I have run this filtering logic whenever I send new data to the component.
I come from angular, there we used to have ngOnChange(). Is there something similar available in svelte3.
Right now, I'm filtering by calling the method from outside by binding bind:this. I don't feel like this is a correct approach.
https://github.com/manojp1988/svelte3-autocomplete/blob/master/dev/App.svelte
Without stores, using a prop
Just using a prop:
export let search = '';
....
$: if (search !== '') { // make it react to changes (in the parent)
doSomeThing(search);
};
Stores
Svelte also has stores. A store is an observable object which can be observed everywhere even beyond you project with RxJS.
Example:
const unsubscribe = search.subscribe(s) => {
doSomeThing(s);
});
onDestroy(unsubscribe);
In another component you can use search.set('Hi');
But looking forward for other solutions to handle these kind of changes in parent <-> child components or calling child Component methods.
From child to parent we can fire events.
But from parent to child ...? we can use a store or Component bind:this or ..? but ....
I am creating a sidebar extension which contains a new tab button which adds a new tab containing some elements to the box contained in my sidebar using javascript with the help of document.createElement() function. Now i want to restore the new tabs added by the user while working with the extension the next time my sidebar is loaded after closing along with all the previous values filled in the textboxes. something like the session restore feature of firefox
As i understand, you are talking about tabbox elements.
You actually have two different XUL documents - one redefined in overlay.xul and sidebar's xul document.
I have solved exactly the same issue with sidebar data storing by the following:
All javascript code is stored as main window's object using something like:
var your_javascript_module = (function () {
//your code here
})();
Put module initialization into scripts.js, reference it from overlay.xul
When you open sidebar (and load, let's say sidebar.xul), you can access this object with the following code:
var your_javascript_module =window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIWebNavigation)
.QueryInterface(Components.interfaces.nsIDocShellTreeItem)
.rootTreeItem
.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
.getInterface(Components.interfaces.nsIDOMWindow).your_javascript_module;
Using this, you will have access to all of code from within sidebar.xul scope.
To store taboxe's state - just create some 'storage' object within your_javascript_module and refresh sidebar.xul contents every time sidebar is getting opened.
I'm suggesting putting all javascript into overlay, as it will be always present (until FF is open of course), contrary to the sidebar's scripts that are unloaded on close.
Hope this can still be useful-)
I'm building a messaging application. I update the badge count in the database via a sqlite trigger whenever any operation like insert/delete/read message happens.
Currently, though the value update in the DB happens asynchronously, I have no way to get notified about when the value changes in my application and hence am polling periodically.
Is there some way to setup an observer on a database value/publish some notification when a given value changes?
I know that I can do this easily by first updating the badge count in an in-memory property and then persisting the changes to the DB; but I am not very inclined to do this, since there are too many entry points for this value to change, and I don't want to add a SET property everywhere.
One possible option would be to define a trigger that is only called when this specific value in the database is updated. The trigger should then make a call to a user defined function you create in your app. You use the sqlite3_create_function function to add your own function to SQLite. Your trigger would like something like:
CREATE TRIGGER some_trigger_name
AFTER UPDATE OF some_column ON some_table
FOR EACH ROW BEGIN
SELECT my_custom_fuction();
END;
If needed, you can pass 1 or more arguments to your function.
Though that this might not be an option for you, Core Data does this well.
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");