I would like to know whether there is any possible way to refresh an aciTree instance from a json object received from the server.
Let's assume I have an html input field.
The user types something and clicks the submit button.
This input is used to get a new version of the json tree model from the server through an ajax call.
That works fine. However, when I type again a new value in the input field and submit the aciTree does not reflect the new values. It still displays the old json object data.
Here is my code.
User Name: <input type="input" id="name" name="name">
<input type="submit" value="search" id="call" >
<script type="text/javascript">
$(document).ready(function(){
// Makes the ajax call and fetches the json for the resource tree.
$('#call').click(function(){
$("#tree").aciTree({
ajax: {
url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+',
}
});
});
// Refreshing the tree view - Destroy and recreate
$('#call').click(function(){
var api = $('#tree').aciTree('api');
api.unload(null, {
success: function() {
this.ajaxLoad(null);
// Triggering the click handler of the Get Tree View button.
// This will make the ajax call again and bind the tree...
$('#call').trigger('click');
}
});
});
// ACI Tree - event handler.
$('#tree').on('acitree', function(event, aciApi, item, eventName, opt) {
switch (eventName) {
case 'focused':
case 'selected' :
// Fired when an item in the tree is selected.
if(item) {
$currStatus.text('Selected - ' + item.context.innerText);
}
}
});
});
</script>
<div id="tree" class="aciTree aciTreeNoBranches aciTreeFullRow" style="width:100%;height:auto;margin:0;padding:0;border-left:0;border-right:0"></div>
Please let me know whether there is any way to achieve this.
$(_selector_).aciTree(_options_) call will init the tree view just once (using the provided options). Nothing will happen if you call it twice. To be able to init the tree view with other options, you'll need to destroy it first.
In your case, you need just to update the tree view ajax.url option. First unload the tree, then reload it from the new url.
To update one of the aciTree options at runtime, use the option method. Note that you can use the dot notation to reach deep level properties:
api.option('ajax.url', '_your_new_url_');
Then you can call unload/ajaxLoad (as in your example).
<script type="text/javascript">
$(document).ready(function(){
// Makes the ajax call and fetches the json for the resource tree.
$('#call').click(function(){
$("#tree").aciTree({
ajax : {
url: 'treeview/jsp/testplansjson.jsp?sname='+document.getElementById("name").value+',
}
});
});
// Refreshing the tree view - Destroy and recreate
$('#call').click(function(){
var api = $('#tree').aciTree('api');
api.unload(null, {
success: function() {
this.ajaxLoad(null);
// Triggering the click handler of the Get Tree View button.
// This will make the ajax call again and bind the tree...
$('#call').trigger('click');
}
});
});
// ACI Tree - event handler.
$('#tree').on('acitree', function(event, aciApi, item, eventName, opt) {
switch (eventName) {
case 'focused':
case 'selected' :
// Fired when an item in the tree is selected.
if(item) {
$currStatus.text('Selected - ' + item.context.innerText);
}
}
});
});
</script>
<div id="tree" class="aciTree aciTreeNoBranches aciTreeFullRow" style="width:100%;height:auto;margin:0;padding:0;border-left:0;border-right:0"></div>
Related
I want an Action event (on="") to trigger when there is a transition to a new Route.
I've seen the list of Action event handlers and closest I could find is attaching the action to the largest HTML element on the page and triggering it with 'Mousemove". This is a terribly flawed away of going about what I want to do.
So just to draw it out.
<div {{action 'displayEitherHtml1or2'}} class="largestDOMelement">
{{#if showHtml1}}
// html 1 inside
{{/if}}
{{#if showHtml2}}
// html 2 inside
{{/if}}
</div>
'/objects' is a list of objects and clicking one leads to 'object/somenumber'. The action should automatically trigger when I enter the 'object/somenumber' page.
UPDATE: I've taken the contents from the previous update and dumped them into my DocRoute, but nothing it being triggered when I transition to 'doc' through {{#link-to 'doc' this.docID}} {{docTitle}}{{/link-to}}
VpcYeoman.DocRoute = Ember.Route.extend(VpcYeoman.Authenticated,{
toggleLetterSwitch: false,
togglePermitSwitch: false,
activate: function () {
var docTemplateID = this.get('docTemplateID');
if ( docTemplateID == 2) {
this.set('toggleLetterSwitch', true);
this.set('togglePermitSwitch', false);
console.log('docTemplateID equals 2');
} else {
this.set('toggleLetterSwitch', false);
this.set('togglePermitSwitch', true);
}
}
});
UPDATE DOS: setDocID is set in the DocsController to 1. Here's the whole thing.
VpcYeoman.DocsController = Ember.ArrayController.extend({
tempDocId: 1,
actions: {
addDoc: function (params) {
var docTitle = this.get('docTitle');
var docTemplateID = 1;
var docTemplateID = this.get('tempDocId');
console.log(this.get('tempDocId'));
var store = this.store;
var current_object = this;
var doc = current_object.store.createRecord('doc', {
docTitle:docTitle,
docTemplateID:docTemplateID
});
doc.save();
return true;
},
setDocId: function (param) {
this.set('tempDocId', param);
console.log(this.get('tempDocId'))
},
}
});
As #fanta commented, it seems like you're looking for the activate hook within your Route. This gets called when you enter the route where you define it. If you want to call it on every transition, you might consider defining a base route for your application and extending that instead of Em.Route:
App.BaseRoute = Em.Route.extend(
activate: function () {
// Do your thing
}
);
App.YourRoutes = App.BaseRoute.extend()
It's possible that there's a more appropriate place/time to do this, but without knowing quite what your action does, this is probably the best guess.
ETA: Looking at your edit, you won't want all your routes to extend App.BaseRoute the way I did it above; you should probably just include that activate hook explicitly in the routes which need it.
I'm doing ajax file upload for post via modal window with preview in post. Every post has it's own model and a view. Modal window is also a separate view, binded to existing DOM element.
When Attach button in post view is clicked, I call .open() from modal view, passing post model to modal view as settings:
POST VIEW:
======================
ModalAttach.open({
postModel : this.model
});
When file in modal view is uploaded, I add server response to passed Post model to render it later in post itself as a preview:
MODAL VIEW:
======================
// file upload success
success: function(data) {
// if it's first call, set []
var imagesUploaded = self.postModel.get('images_uploaded') || [];
// add server response to array
imagesUploaded.push(data);
// rewrite current model array to new array
self.postModel.set({ 'images_uploaded' : imagesUploaded });
}
To render preview in post (before real submitting), I've got a function
POST VIEW:
======================
renderUploadedImages: function () {
var self = this;
this.$uploadedImagesWrapper = this.$('.b-uploaded__images');
if (this.model.get('images_uploaded')) {
this.$uploadedImagesWrapper.empty();
this.model.get('images_uploaded').forEach(function (uploadedImage) {
self.$uploadedImagesWrapper.append(
uploadedImageTemplate({
'source': uploadedImage.source
})
)
});
}
}
And to trigger image render, I bind a listner to track when model.images_uploaded is changed by modal view:
POST VIEW:
======================
initialize: function () {
this.addEvents();
this.renderUploadedImages();
},
addEvents: function () {
var self = this;
this.model.on('change:images_uploaded', function () {
self.renderUploadedImages();
})
},
The problem is renderUploadedImages() in Post view is trigged only once, at first upload. Other changes are not caught (when postModel.get('images_uploaded').length becomes 2,3,etc..). What I am doing wrong?
Thanks.
When you do like this :
var imagesUploaded = self.postModel.get('images_uploaded') || [];
// add server response to array
imagesUploaded.push(data);
// rewrite current model array to new array
self.postModel.set({ 'images_uploaded' : imagesUploaded });
The first time, if you check self.postModel.get('images_uploaded') you will find it undefined, that's why when you set it the event change:images_uploaded is triggered.
But the second time you call the success method you don't change the the model attribute, it's always pointing to the same object (array), you just change the array value.
Here's an example
I have a view in my asp.net mvc4 web app from which user can configure some things related to it. When user click on a button in this view, let's say, configure view, I want to call a jquery function in another view, let's say, main view. This jquery function is in charge of modifying an element in the main view.
In the configure view where button is, I have below code, some input textboxes and the button (this calls to action AddItem in Configure controller):
#using (Html.BeginForm("AddItem", "Configure", FormMethod.Post))
{
#Html.DropDownListFor(m => m.CustomViewModel.SelectedItemId, Model.CustomViewModel.ListItems)
#Html.TextBox(...)
<input id="submitAdd" type="submit" value="#Resource.ButtonTitleAdd" />
}
So how to do call a jquery function in main view from the above code when user clicks on the button on configure view?
Also I need to pass to this jquery function the value select in the dropdown list of configure view. For example, if dropdown list contains:
"something1"
"something2"
"something3"
I need to pass the value of the item selected in the dropdownlist. For example, if user selects "something1" and its value is 1, 1 should be passed to this jquery function. This dropdown list is populated with a model.
I would have solved it with a custom event, which you can trigger and listen to from where ever you like.
Trigger it like this:
$.event.trigger('customStuff', [arg1, arg2, argN]);
And "listen" for it like this:
$(document).on('customStuff', function (e, arg1, arg2) { });
As you are using jQuery. I think something like pubsub is your best bet & it encourages event based loose coupling. For example:
(function($) {
var o = $({});
$.subscribe = function() {
o.on.apply(o, arguments);
};
$.unsubscribe = function() {
o.off.apply(o, arguments);
};
$.publish = function() {
o.trigger.apply(o, arguments);
};
}(jQuery));
Now you can use this code as following:
// You can pass your custom data here
$.subscribe("firefunction", function(e, a, b, c) {
console.log(a + b + c);
});
$.publish("firefunction", [ "a", "b", "c" ]);
// logs: abc
// Unsubscribe all handlers for this topic
$.unsubscribe("firefunction");
I have a single html page with multiple div elements on it. Each time a user clicks on on a div, it is replaced with an CKEditor on the fly:
$('.editable').click(function() {
editor = CKEDITOR.replace(this);
});
Now, if the CKEditor instance loses its focus (blur event), I need to post the content to a separate script via ajax (if something changed) and destroy this instance:
$('.editable').click(function() {
editor = CKEDITOR.replace(this);
editor.on('blur', function(e)
{
if (e.editor.checkDirty())
// get data with e.editor.getData() and do some ajax magic
e.editor.destroy();
});
});
But this example won't work because, I don't know why, destory() will be called before checkDirty(). How can I get this working?
How about if you put the destroy() inside the if() statement? You could have an else clause that invokes destroy if nothing has changed. If something has changed, you can invoke destroy() within the if clause once the data has been transfered.
$('.editable').click(function() {
editor = CKEDITOR.replace(this);
editor.on('blur', function(e)
{
if (e.editor.checkDirty()) {
// get data with e.editor.getData() and do some ajax magic
if ( dataTransferComplete ) {
e.editor.destroy();
}
} else {
e.editor.destroy();
}
});
});
Or you could check a variable before invoking destroy(). Set that variable to true after the data transfer has been completed and in the else clause, that way destroy() won't be invoked until you've checked for changes and transfered any updated data.
$('.editable').click(function() {
editor = CKEDITOR.replace(this);
editor.on('blur', function(e)
{
var okToDestroy = false;
if (e.editor.checkDirty()) {
// get data with e.editor.getData() and do some ajax magic
okToDestroy = true;
} else {
okToDestroy = true;
}
if (okToDestroy )
e.editor.destroy();
});
});
This is an outline, I haven't tested the code, but if shows the concept.
Be Well,
Joe
There are menu button ("clients"), tree panel with clients list (sorted by name) and viewer with selected client details. There is also selectionchange action..
My task - on button click switch to client view and select and load details for first client every time button has been clicked. My problem - store is not loaded, how waiting until ext js will autoload data to the store?
my controller code:
me.control({
'#nav-client': {
click: me.onNavClientClick
},
...
'clientlist': {
// load: me.selectClient,
selectionchange: me.showClient
}
});
onNavClientClick: function(view, records) {
var me = this,
content = Ext.getCmp("app-content");
content.removeAll();
content.insert(0, [{xtype: 'clientcomplex'}]);
var first = me.getClientsStore().first();
if (first) {
Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
}
},
...
Two main questions:
is it good solution in my case? (to select first client in tree panel)
var first = me.getClientsStore().first();
// i use another store to get first record because of i dont know how to get first record (on root level) in TreeStore
...
Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
i know this code works ok in case of "load: me.selectClient," (but only once),
if i place this code on button click - i see error
Uncaught TypeError: Cannot read property 'id' of undefined
because of me.getClientsListStore() is not loaded.. so how to check loading status of this store and wait some until this store will be completely autoloaded?..
Thank you!
You can listen the store 'load' event. Like this:
...
onNavClientClick: function(view, records) {
var me = this;
// if the store isn't loaded, call load method and defer the 'client view' creation
if (me.getClientsStore.getCount() <= 0) {
me.getClientsStore.on('load', me.onClientsStoreLoad, me, { single : true});
me.getClientsStore.load();
}
else {
me.onClientsStoreLoad();
}
},
onClientsStoreLoad : function () {
var me = this,
content = Ext.getCmp("app-content");
content.removeAll();
content.insert(0, [{xtype: 'clientcomplex'}]);
var first = me.getClientsStore().first();
if (first) {
Ext.getCmp("clientList").getSelectionModel().select(me.getClientsListStore().getNodeById(first.get('clientId')));
}
},
...