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/
Related
I have nested jQuery accordions in my markup where I try to auto-open on page load according to the path that was last opened in previous sessions.
I saved the path into a cookie, loading the cookie and run the following code
path.forEach(function(label){
var element = root.find("[data-caption='"+label+"']");
element.parent().accordion( "option", "active", parseInt(element.attr('data-index')) );
root = element.children().eq(1);
});
The issue is that for some reason the 'active' takes effect only for the first accordion and non of the nested ones.
I checked several times and:
element.parent() is indeed an accordion (otherwise it would have thrown an error).
data-caption is a unique key for elements in each iteration.
element.children().eq(1) is the active panel (according to the structure of jQuery UI Accordion).
the active element I am asking to open indeed exists for each iteration.
I don't know what is the issue here, any ideas?
I found the problem by myself and post here for future reference.
The issue is this part of the code
parseInt(element.attr('data-index'))
And the reason lies with how accordion counts elements within its panel.
In my panel I had several html elements which were not accordion and several which were. Now the code above brought me the index of the accordion element in compare to the entire panel.
The issue is that for some reason .active only counts sub elements which are accordion themselves. So for example if the panel index of an element is 3 but it has 1 non-accordion element before it in the panel, then it's "active" index is actually 2.
I don't know why they chose for this behaviour, but there you have it.
My solution was to place a different attribute on the element with it's "active" index and use it instead of data-index.
Now everything works like a charm.
When user select an item from Select2 V4 component, the component shows it and user could not change this value. If user wants to modify active item and enter modified text, the Select2 assumes that it is a new value and adds it to the list. It is bad. How to change current active value and put it into selected item?
I believe what you want to do is listen for the select2:selecting event:
$('#mySelect').on('select2:selecting', function(e) {
// Do stuff here
});
In your event handler you'll be able to remove the added item (or prevent it from being added...I haven't tried this myself) and change the user's selection. See https://select2.github.io/examples.html#events
A word of caution: what you want to do is not standard behavior for a select box. A standard HTML select jumps to the next option beginning with the letter the user typed. If you were to change that behavior you may find yourself with many unhappy users (see the principle of least surprise/astonishment).
I have a selectbox which takes its option values from a <ul> list. The list is changeable via jQuery UI sortable functionality, and the selectbox dynamically updates as you sort items differently.
I have made that functionality, the code is dirty but it does the job:
http://jsfiddle.net/trunkadelic/TtnTf/2/
What I need is a "reset" function, which brings the list (and thus, the selectbox) back to their original values. I am not sure how to approach this, even a nudge in the right direction would be much appreciated.
On page load I would store off the initial state of the list in a JavaScript variable. Then, when the reset link is clicked I would restore the state of the <ul> to what it was on page load. From there you can use the same method you already have to update the selectmenu to match.
I forked your jsFiddle to show this - http://jsfiddle.net/g8GLw/
Example: A list of linked <H4> (<a><H4>maximum 200 characters</H4></a>) and their corresponding divs (<div>maximum 10000 characters</div>) are simultaneously fetched from a spreadsheet; when any one of those visible linked <H4> is clicked ( toggle() ), their corresponding prior hidden divs ( hide() ) gets displayed. The list of linked <H4> and related divs grows as the spreadsheet grows, like a Comments form.
Questions:
Does the <H4> list load faster (or appear faster on the page)
when the divs are hidden beforehand (hide())?
If question 1 is negatif, what would be the simplest jQuery function structure, in this example, to retrieve and display the divs after the linked <H4>s are loaded and only upon User <H4> click? I already have the data-fetching function figured out (google.jsapi) so I would need the correct jQuery function structure allowing User on-demand loading of supplementary data. Any pointers?
Note: Currently developing on jQuery 1.6+ . Code above is simplified for description only. The reason why the <H4>s are wrapped within <a> tags is a cross-browser issue and to allow accessibilty with accesskeys and Tab for keyboard Users (I tried the each() method for clickable H4s and Firefox did not let me down however IE 6-7 hated me for that and froze).
1) Does the list load faster (or appear faster on the page) when the divs are hidden beforehand (hide())?
Answer:
As long as you are loading hidden divs the same time you are loading your page, your page won't load faster/signifcantly faster
2) If question 1 is negatif, what would be the simplest jQuery function structure, in this example, to retrieve and display the divs after the linked s are loaded and only upon User click?
Answer:
Use ajax to populate divs on demand, create a page with empty hidden div, and load those div using ajax request when you are showing them. All this can be done using javascript/JQuery
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);
});