I tried to use jsTree because of easy creating static HTML list into tree.
Do not ask me why, but I need to use as source HTML list structure with links.
I have left column on the web with some div panel and tree navigation using jsTREE.
What I need:
1) User expands some nodes and let me say on 3rd level of three there is item with link
2) User click on the link, it will redirects the user on new page with some content
3) On the left there is still jsTREE and I need to expand the tree and highlight the node, user clicked in previous step.
The best for me would be to compare URL and HREF of hyperlink in tree.
If webpage URL and hyperlink href attribute in tree is the same, this node should be highlighted and expanded, so user can see, where he currently is.
Any idea, how to do it?
just use jstree plugins to do so:
"plugins": ["types", "wholerow", "conditionalselect"]
Related
I'd like to add clickable links to a Kentico Report. The report editor allows you to add all kinds of HTML mark-up in the layout, but it doesn't allow you to add HTML INSIDE of a table that you've inserted into the layout. (Or if it does, it is not obvious from the UI, or from the Kentico documentation.) I want a link to appear in each row, and the link should include a value from that row.
Clicking any of the links would open another page that shows more data about a particular record. In my case, my first column is an ID column and I want its value (in each row) to behave like a hyperlink to another page whose URL includes the clicked ID value as a parameter.
We can use jquery within our Kentico report to allow each value in a particular field to cause a link to be opened when clicked. In my case, I have a URL into which I want to embed an ID value from the report. I want to open one of the admin pages whose URL looks like the following (where 9999 is replaced with a record ID from my report):
/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=9999&displaytitle=false
So let's assume the first field in the report is an ID column and we want to make the displayed ID behave like a link to some other page.
First we need jquery. Edit the report's layout in '<>Source' mode and add a script reference for jquery, such as one you can get from code.jquery.com, or just reference it locally if you have it:
<script src="/jquery-3.4.0.min.js"></script>
Next, we must find each ID field and then make it behave like a hyperlink. To do so, we find the <th> with the ID column's title, walk up to the <table>, and then find all <tr>s immediately under the <tbody>. Once we have each <tr>, we iterate through them to:
underline the ID value like a hyperlink
set the cursor to a hand like a hyperlink
add an onclick event to do open a URL (in a new tab) with my ID field's value
So here is the script. Add it just like you added the jquery script tag. (but add it after the jquery script tag)
<script>
$('th:contains("MyIDColumnTitle")').parents('table').first().children('tbody').children('tr').each(function() {
$(this).children('td').first()
.css('text-decoration','underline')
.css('cursor','pointer')
.click(function(){
var thisId = $(this).text();
var u = "/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=00000000-0000-abcd-0123-000000000000&objectid=" + thisId + "&displaytitle=false"
window.open(u,'_blank');
});
});
</script>
Keep in mind that if MyIDColumnTitle is not very unique, this script may find the wrong th and table. Modify the jquery selector to suit your needs. You may want to add a wrapping element around your report that has an element ID so you can be specific with your selector.
It wouldn't be difficult to take the same concept and use it to launch a page in a modal dialog instead.
How would I create a node, that will list content by content type(ex. only basic page). It will allow the user to delete or edit the content as well.
I do see that in Node: admin/content I can filter out just basic pages. However I would like a url to where the filter is already apply.
I basically want the user to click the URL to the filter list of just basic pages.
I am using drupal 7.
Thanks!
I am implementing a “have not yet viewed” list where the user sees a list of items in a ul and those the user has not viewed have a data theme applied to highlight them. When the user clicks on the item it is displayed, and I need to remove the data theme so the item is no longer highlighted.
I have the logic correct to actually remove the attribute as I can see in the Elements section of Chrome’s Developer Tools the attribute is no longer in the li. But the highlight is still visible in the rendered page.
I’ve searched and have seen a number of suggestions involving refreshing the page, list, etc., all to no avail. You can see some of the attempts as follows (in the function "this" is the li):
$(this).removeAttr("data-theme");
//$(this).closest("ul").listview("refresh");
//$(this).closest("ul").listview();
//$('#mylist').listview();
//$("#content-notifications").page();
//$("#content-notifications").page("destroy").page();
//if ( $("#content-notifications").data("page") ) {
// $(this).closest("ul").listview("refresh");
//};
Anyone have the correct solution, because I can’t find it!
Thanks-
Matt
You have to manually remove the class for the old theme in li and add the class for new theme.
$(document).on("click","li",function(){
$(this).attr("data-theme","b").removeClass("ui-btn-up-a").addClass("ui-btn-up-b")
});
Demo here - http://jsfiddle.net/ENYxw/
On this site we've implemented Jquery Address to remember and load ajax content correctly
when using back/forward buttons in the browser.
The problem have arisen with links that has regular anchor points, that is:
<a href="product.php?prodid=5" name="product5" />a product link</a>
the purpose of this is of course to make brwoser scroll down to same position
you were before clicking the link and clicking back (this is a product listing page for the record).
Is there a way to exclude (or not include) certain links that jquery adress catches?
You could just exclude all of the links with a name attribute:
// Use this selector when initializing jQuery Address.
$('a:not([name])').address()
I am doing a PhoneGap app with JQuery Mobile and I have two pages, one that has a dynamic list of pages and one that has a form to either edit or create a page. These are in a single html file.
Tapping on a list item passes ?action=edit and tapping the "Add" button I have, passes ?action=add querystrings.
Here is a jsfiddle to visualize the pages
NOTE: The example doesn't act quite the same as the live code.
I am running my app on an Android phone and if I do these actions, the correct querysting is observed in the alert box: -
Click the add button on list page
Click back on the form page
Click the an edit list item link on list page
However, if I do it the other why around (click edit first, then the add button) clicking the add button never shows the add querystring in the alert box
(the jsfiddle example always locks the first clicked link's querystring, which is even worse than the live code!)
The problem here is that you're using a multiple template to do this. If you were using this as separate pages, this would work as normal. As a multiple app, the best way to handle this would be to make a link trigger the setting of some global variable that keeps track of the current state of the app.
Make the edit links like this
Page 15
Then make the script something like this:
var editingId = 0
function editPage(id){
editingId = id;
$.mobile.changePage("#editingPage");
});
$("div#editingPage").live("pageshow", function(){
loadDataForPage(editingId);
});