I've been stuck in this problem. I am using fuelux treeview to display a list of categories and folders. What I want is to display the expanded treeview on page load. I can't seem to achieve this. I have found out that the tree folder must be clicked before the folder items are populated. So i tried to use
$('.tree-folder').trigger('click');
to trigger a click so that it may expand automatically. But this doesn't seem to work. I've tried
$('.tree-folder').click();
but it wont work too.
So how do you automatically trigger a click or just how do you automatically expand the fuelux treeview? Any ideas? Thanks in advance.
You'll want to makes sure you are triggering the click event on the correct element.
https://github.com/ExactTarget/fuelux/blob/3.2.1/js/tree.js#L35-L42
For Fuel UX 3.2.1 (current as of answer) run the following in the console on http://getfuelux.com/javascript.html#tree-usage for an example.
$('#treeIllustration .tree-branch-name').trigger('click')
This triggers the openFolder method which you could call directly.
https://github.com/ExactTarget/fuelux/blob/3.2.1/js/tree.js#L198
At this point after loaded.fu.tree triggers a method could be created/called to climb the tree recursively and call openFolder
This would be a nice enhancement. Please submit an issue so that it can be prioritized. If you come up with a good solution feel free to submit a pull request.
https://github.com/ExactTarget/fuelux/issues/new
Related
I want to create a dynamic access level, but I have no idea how to do it.
I need to fully dynamically navigate the menus and buttons of the site, but I do not know if I could do this.
I mean more buttons. For example, the delete and edit button, and the update button.
Please guide me to get a good idea.
I already worked on that type of case. And i used https://www.npmjs.com/package/ngx-permissions which is pretty handy when roles/permissions have to be managed. For example you can retrieve the user roles from the database, and fixe roles behaviors on buttons or panels or everything you want to show/hide. It works like a charm. I encourage you to read the documentation. It will help you for sure.
Have a nice day
You can achieve this using ngxpermission. Refer this link for a sample which has a user component in which buttons and menus are loaded dynamically based on the permission that you have set. I have forked angular 5 example and modified it. But you can achieve the same in latest angular version too.
I'm new to Ajax and was told need to use it for what I'm trying to accomplish here.
Here is the website... http://modocom.ca/gillons
If you scroll down up will see a section called Find an Office with drop down menu in it. What I need is for when someone click on for example Emo in the dropdown menu the location info from.... http://modocom.ca/gillons/emo goes under the dropdown and so on for each location in the dropdown and also when your on the Emo page for example you click on the dropdown menu and can choose different location and get new info as well for selected location.
Hope that makes sense and hopefully someone could give me a hand.
Thanks,
Mike
OK, I'm not going to write code as it looks as though you haven't actually tried anything yourself yet.
However, the sequence of events, one version of them anyway, might look like this.
Using jQuery, put a change event on your dropdown.
When the event triggers, and this depends on your backend as you have not spcified APS.Net, MNV, Java etc, you need to post back to a code file of some sort and pass in the value within the dropdown.
From there, in your c#, java, pythod, whatever, code, take that value, generate some HTML and return that HTML to the client.
At the client, you accept the HTML and fill say a DIV with the returned HTML.
If you are using MVC, you can return a PartialView which is a better design.
I want to re-create the view given in the site under the Base Score Metrics, when I click on it would expand and another click would collapse the details included in it.
I don't think this is native html functionality perhaps I have to use some third party plugin for it. Please tell me know how can I achieve the effect coded in the website given in the example.
Collapsed view
Expanded view
Thanks.
JQuery's UI framework, specifically jqueryui.com/accordion, allows you to do just that.
You can put any elements inside those tabs, and it will work as if it were a static page.
I have a simple rails app with a model Task, which has 10 rows. It does not matter what's inside this table. On the index page I can see all 10 elements and I need to arrange them in proper sequence, when I did this, I should see a message "Done".
If I understand correctly this should be implemented in javascript, because page should not be reloaded, right?
I want to be able to rearrange the elements via drag and drop.
How I can realize that function?
I would start with here -> http://jqueryui.com/demos/sortable/
You can sort and its quite simple as there great examples on the site how to do this and hook into events.
I'm not entirely sure how to post this question, but here goes...
I have a web app that has a list of sortable items. I sort them ajax style using Sortable. That works like a charm. I can drag and drop the items till my heart is content.
At the same time, there is a button that allows for the creation of new items on my list. This is also ajaxified and works for the most part. The new item appears on my list anyway, and firebug shows that the code being rendered is exactly the same as the other list items. Oh and it is contained in the correct list.
The problem is that the new item is not draggable/sortable/whatever. I can't do anything with it unless I refresh the page. Any ideas why this is the case or how I can get around it? I'd really like to solve this.
I tried to paste code in here, but couldn't quite make it work, so I went with pastie. Anyway, here is the code for a page with 2 sortable items. This is a fresh load and everything works as expected.
http://pastie.org/432585
In this one, I have clicked the button that creates a new section, but not refreshed. So the first 2 sections are DnD-able, but the new one is not...
http://pastie.org/432591
I'm using ruby and rails to do the ajaxing here and admittedly, I'm not very familiar with how it should work. But I believe this behavior comes from prototype.js and maybe dragdrop.js.
On completion of the ajax call that causes the new element to be injected into the page, the new element, I imagine, needs to be bound to the DOM, and delared as a Sortable.
Would be great if you could show us some code, or at least let us know which library(s) you are using for ajax and Sortable elements.