How can I activate a tab based on a hash tag (element ID) in the URL?
I know this question has been asked several times over the years, but the answers are no longer relevant for jQuery 1.10+.
Thanks.
There's two steps to accomplishing this - first, match up the hash tag (e.g. #SomeValue) to the element ID of the Tab you want active; then second, set said Tab as active.
var matchedTab = $('a[href="' + window.location.hash + '"]');
$('#tabs').tabs({active:$('#tabs a').index(matchedTab)});
The first line is creating a jQ object from the tab element whose href attributes matches the hash in the URL. Since the markup of the Tabs plug-in requires (documentation) you have an anchor <a> element with an href attribute, this will find the correct tab (assuming you have one that corresponds to the hash in the URL).
The second line then uses the active initialization option to set the desired active tab when initializing the Tabs. The active option though requires the zero-based index of that tab within the Tabs collection, so we use the .index() jQuery function to get that index & pass it to the active option.
Since the sandbox sites all use secured frames, I had to use a dropdown with dummy URLs to "simulate" different how different hash tags work, but it will function just the same using the code above.
CodePen here: https://codepen.io/anon/pen/YvyxvL
You can use the dropdown on that page to simulate the behavior of URLs with different hash tags setting different tabs to active.
Related
We have a rails app at remote.tools and if you see the product pages (see this page), there are a set of tags associated with each product. I am planning on having filtered search basis these tags on category pages (see this page). Now, I have already tried doing this with the 'Acts-as-taggable' gem and 'Simple-form' (basis this blog).
I am fine with having a page refresh on hitting 'search' or doing it in place (able to do both right now). However, I want to have unique URLs to be created basis the combination of filters applied by the user. For example, if the user selects 'Video communication tools' as the category and 'free trial' and 'easy-to-use' as the tags, the page URL should be '/video-communication-tools-with-free-trial-that-are-easy-to-use'. Currently, the filter options are passed as params i.e. '/search?category=xx&tags=yy'.
Having separate URLs for filter combinations will allow me create unique pages for indexing and add content contextually as well.
How should I go about doing this?
You can use jquery to achieve that,
Something like this.
<script>
$('#search_button').on('click', function(){
window.location = "" + $('#tag1').val()+"-"+$('#tag2').val();
});
</script>
Make sure to add id in your search button. Hope this works for you.
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.
I am using 2 select tags. Their content can be modified inside the web page(via javascript).
By default grails will take only the selected option (or all selected options if multiple is enabled) and pass it to the controller.
How could I pass to the controller all the available rows from a select box ?
Maintain a secondary hidden list which has all elements selected. Then this list will get sent as well?
Or I guess you could maintain a hidden form element containing some sort of delimited list of names (but then you might get problems choosing a delimiter and escaping the values)
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);
});
I might be making this more difficult than I need to but I am in some need of assistance. I have some jquery ui tabs which are added via the add functionality. these tabs are via ajax.
I have a tabTemplate set as follows on the initial addition of the tabs.
tabTemplate: "<li><a href='#{href}'>#{label},/a><li>"
And the add tab functionality is done via
$tabs.tabs('add', 'http://thanksforyourhelp/greatly/appreciated/, some_title_var)
If a form is submitted on that tab, data is written to the database. The response gives an ID of the row added to the database.
Next time that specific tab is visited the link should actually be 'http://thanksforyourhelp/greatly/appreciated/ID' where the ID is now known since the response from the form (ajax here as well) sent it back. This will pre-populate the forms on the page based off the data in the database for "ID."
I've looked at the example here, but my href is an id for the tab in question (and not a url). Where is the actual url stored?
The tab looks like this.
new
I have tried changing the href on that, but upon clicking the tab the content is loaded without ajax instead of within the tab as desired. What might I be doing wrong here? Thanks for your help.
Edit: removed edits with references of no longer existent urls.
I haven't worked with AJAX-powered tabs too much, but I think you want the url method:
$("#tabs").tabs("url", index, url)
Change the url from which an Ajax
(remote) tab will be loaded. The
specified URL will be used for
subsequent loads. Note that you can
not only change the URL for an
existing remote tab with this method,
but also turn an in-page tab into a
remote tab.
Above answer will not work in JQuery 1.9+ as describer here. To work with jquery ui tabs 1.9+ you have to do something like this
var tabs = $("#tabs");
var tab = $(tabs.data('uiTabs').tabs[TAB_INDEX]);
tab.find('.ui-tabs-anchor').attr('href', "NEW_URL");
// If cached initially. Remove cache then
tab.data( "loaded", false);
tabs.tabs( "option", "active", TAB_INDEX);
tabs.tabs("load", TAB_INDEX);
This will change the URL of tab at particular index and load that tab.