I'm starting with jQuery mobile and have some problems with my buttons.
The web application is a shopping list. It displays a list of items to shop and in the footer buttons on actions I can perform on the items.
The actions are:
increment number of items to buy
decrements number of items to buy
move item up in list
move item down in list
add new item
delete item
modify item text description
The actions are implemented in javascript and works fine. The problems I have is with controlling the buttons and the associated actions.
By experience, I have see that for the increment and decrement it is more convenient to have a button with an active state, for the other operations it is preferable to have a selected item and apply the action on the selected item when the button is pressed. When adding an item, the item would be inserted before the selected item, and if pressed when no item is selected, the new item is appended to the list.
I would also like to have 2 modes. In one mode, only the increment and decrement buttons are shown and the user can update the number of items in its list. In the other mode the user is modifying its list. It is in the second mode that the selected item is required.
I managed to associate a default action my item lists by using the .on() method as a delegate.
$('#itemList').on( "click", ".item", function(evt)
{ ctrl.doAction($(evt.currentTarget)); });
Here is the html code I use to test the first mode.
<!-- footer -->
<div data-role="footer" data-position="fixed" class="ui-bar" id="btnBar" >
Plus
Minus
</div>
<!-- /footer -->
What should I put as href value ? I don't want the page to be reloaded. In some examples I see "#".
This is how I associate the action to the button:
$('#btnPlus').on( "tap", function(evt)
{ ctrl.doAction = ctrl.increment; });
Another problem I have is that there is no feedback on the button click action. When I click a button I would expect to have it highlighted for a short time. This doesn't happen.
The browsers have also different behaviors. In firefox, the clicked button gets a blue halo apparently showing that it has the focus. But the button isn't displayed as active.
If I put "#!" as href (don't know what it means) on Android, the clicked button is shown active.
Should I use click or tap as event type ? How could I write click or tap ?
How could I implement a two state button displayed as active and inactive ?
How is an action button used : always displayed inactive and feedback when pressed ?
I solved the problem my self.
to switch between sets of buttons in the footer, I create multiple footers in my HTML document with style="display:none" in the hidden footers. The one without this will be shown. I assigned a specific id to each footer so that I can write $("#footer1").hide(); $("#footer2").show();
I have buttons to switch between footers. The footer switching event handler must be called with the "mouseup" event. This is required for it to work on the iPad and Android phones.
To change appearance, don't use .button() as suggested here. Use:
$("#myButton")
.removeClass( "ui-btn-up-a ui-btn-down-a ui-btn-hover-a" )
.addClass("ui-btn-up-b")
.attr( "data-theme", "b" );
Note: There was a bug in my code which caused desperate hair pulling
Related
In my Vaadin 14 app, I want to add an Accordion component that has several components in its summary (which is always displayed), among which a Button. Clicking in the summary normally toggles the display of the AccordionPanel content. How can I prevent the AccordionPanel to collapse/expand when the button in the summary is clicked?
Objects are created simply as follows:
Accordion accordion = new Accordion();
MyPanel panel = new MyPanel();
accordion.add(panel);
with MyPanel constructor simply calling setSummary() with a layout containing the button.
I found the answer in this thread on the forum.
It turns out you can prevent the propagation of the button click with this hack:
button.getElement().addEventListener("click", click -> {
//do nothing
}).addEventData("event.stopPropagation()");
This seems like a core functionality that the framework should provide out of the box, but this ticket is still open.
Adding this to your view:
UI.getCurrent().getPage()
.executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");
will disable all clicks on all the accordions toggle and accordion summary. However you will need to include a button or trigger for opening and closing the accordion. I don't know if this is what you want?
So I have a listview with multiple items, so when each item is clicked it will go to a detail page, but how do I fill out the detail view with dynamic contents? Specifically, how do I capture the key, which is the clicked item's inner html, and when I query some dynamic contents, how do I put them in the detail view? The methods I tried include 1) use click event for each item, but the event does not trigger, is that normal? 2) I tried the live event on the detail view page with pagebeforeshow, but it does not trigger either. Please help.
Many approaches exist to do this. Here is one idea that may help you:
In your listview, specify a data ID for each of the hyperlinks in the list item. The definitions could look like:
<li><a data-id="some-identifier">My Title</a></li>
For all the items the <li> items in the list, you then have a single click handler, which would use the data-id to initialize the detail page. The click handler would look something like this (my apologies if this is out of data, I have not recently used jQuery Mobile, so there may be an updated, better approach):
$('#my-listview-id').delegate('a', 'vclick', function () {
alert ('user selected something: ' + $(this).attr('data-id'));
});
The alert will show you the ID the user selected. So in the click handler you can update the detail page.
On an iPhone when you have a NavBar at the top, there is a back button.
Rather than say "Back" it has the title of the previous page in it.
So you might be on say the "Checkout" page. The title of the NavBar would be "Checkout" and the button might say "Books".
Clicking on the button that says "Books" takes you back to the previous page.
How can this be accomplished in jQuery mobile without the need to code in the name of the back button as you may have gotten to that page from a different route?
edit
I know I can do this on the page;
<div data-role="page" id="pageViewChallenges" data-add-back-btn="true" data-back-btn-text="previous">
But that makes the buttons text "previous" instead of the name of the page.
U can use
Books
(If u r using external page)
and
Books
(When using Internal page)
This is simple settings to customise back button and if u want previous page title as back button then simply get the title of back button through jquery method and set in the back button title.IF u can get the previous page title then set it on pageshow event by getting the id of back button using jquery like this:
$('#MaterialAndQuantityDetails')
.live(
'pagebeforeshow',
function() {
// page header Management
$('#bkbtnid').html("");
$('#bkbtnid').html(BackButtontext);
});
And if u r thinking how to get the title of previous page then on previous "pagehide" write the code
var BackButtontext = document.getElementById('previous_page_header_id').value;
Here BackButtontext is global variable that is to be used to set the back button text.
This is my scenario
I have an view(page) with list of items, a user could select single or multiple items from this page and click on a "Add to Group" button. Then a modal dialog(JQuery dialog) will be shown, from that he could select group, then press the add button. Which causes the items selected in the parent page is added to that particular group.
So, which is the best way to pass the selected items to the modal pop-up?
Though the query string ? - what happens if the no:of items selected is large, will the url support that much characters
Keep the list in the parent page in a javascript variable and return the selected group from the modal pop-up?
Or is there is any other better option?
Thanks,
Rajeesh
2a. There is no "parent" page; modal dialog is part of the same page as selected items. Therefore on "OK" function from the dialog you can go through the checked items and do whatever you want, including POSTing to the server. It's not clear from your post whether "adding items to the group" happens on the server or client
I am working on MVC with C#.
I have 2 radio buttons. On selecting first radio button, a textbox will be shown which allows to enter date values.
<%= Html.TextBox("ReceivedDate")%>
on selecting the second radio button, the textbox gets hidden.
For the first time, when i select first radio button and entered date and clicked Next to navigate to next page and came back to this page again and clicked second radio button and clicked Next to continue and again i came back to this page and without changing any option click continue, its not allowing to navigate and shows an error.
A value is required.
Which means the ModelState validating the hidden controls also.
Please suggest how to control it
Instead of hiding it remove the element from the DOM and reinsert it if the first item is selected again. Another way would be to change the name of the input control to something else (a key not present in your model data) when the first item is not selected.
Validating hidden input types is a good thing, i often use them to synchronize data from complex controls (like a treeview with checkboxes). An input type with a hidden css style doesn't make it not submit with the form it belongs too.