I have a web application which uses jQuery 1.6.2 and jQuery Mobile 1.0b3. I need to display a list of options, so I used a custom select. I cannot close the select by using the header button, and neither by selecting an option.
The nativeMenu = false is set globally.
I create the select using
<select data-mini="true">
<option value="1">Option1</option>
<option value="2">Option2</option>
</select>
The HTML look like this (there are many more options, so the select goes full-screen):
<div data-role="dialog" data-theme="c" data-overlay-theme="a" tabindex="0"
class="ui-page ui-body-c ui-dialog ui-overlay-a ui-page-active" style="min-height: 480px;">
<div role="dialog" class="ui-dialog-contain ui-corner-all ui-overlay-shadow">
<div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner">
<a href="#" data-icon="delete" data-iconpos="notext"
class="ui-btn-left ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-notext ui-btn-up-a" data-corners="true"
data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="a" title="Close">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Close</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow"> </span>
</span>
</a>
<div class="ui-title"></div>
</div>
<div data-role="content" class="ui-corner-bottom ui-content ui-body-c" role="main">
<ul class="ui-selectmenu-list ui-listview" id="undefined-menu" role="listbox" aria-labelledby="undefined-button"
data-theme="c">
<li data-option-index="0" data-icon="false" class="ui-btn ui-btn-icon-right ui-li ui-btn-active ui-btn-up-c"
role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div"
data-iconpos="right" data-theme="c" aria-selected="true">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
Option1
</div>
</div>
</li>
<li data-option-index="1" data-icon="false" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c" role="option"
data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right"
data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
Option2
</div>
</div>
</li>
</div>
</div>
</div>
The header button works with jQuery 1.8.3 & jQm 1.2.1 (selecting an option still doesn't work), but changing this versions leads to other problems in my legacy app, so I would prefer a solution for 1.6.2 & jQm 1.0.
Any ideas why the select doesn't work ?
EDIT:
After a couple of days of searching, I found out that the dialog doesn't close because I have set hashListeningEnabled = false. Unfortunately, I cannot change this. I stumbled upon this: https://github.com/jquery/jquery-mobile/issues/2285, but I cannot upgrade the jQm/jQuery version. So I'm left with finding some good alternative for the select. Any suggestions ?
wow... no answer to this... almost one year bfore! and i have the same (or actually similar... soon enough) issue. So here i go with my experience:
(in which i need to mention that i am able to select multiple items but when i hit the cross button over the header... no closing action will follow. so DANG!
i have been trying to figure some kind of workaround for this.. so i started mutating some other jQm pop ups and the problem that i'm facing now is that my solution seems to show different buttons with the html object (each time you click this one only button it goes round the SELECT's items displaying them one at a time inside this one button, very weird... at least for my rookie experience with jquery mobile, so maybe its a simple couple of options that i didnt kneew how to set, but im being blind to the solution.
So, what do i need to show a nice popup like the one in the picture (also code pasted below) from a common SELECT (HTML OBJECT) ?
(please take a look of what i intent to achive (the look and feel)
h t t p : / / i . s t a c k . i m g u r . c o m /I5q0I.png
And this is the code that i should have (but with the cross working, which is not.)
<div class="ui-popup-container ui-popup-active" id="select-choice-7458-listbox-popup" tabindex="0" style="max-width: 1825px; top: 2788.5px; left: 805.5px;">
<div id="select-choice-7458-listbox" class="ui-selectmenu ui-popup ui-body-a ui-overlay-shadow ui-corner-all">
<div class="ui-header ui-bar-c">
<h1 class="ui-title">
</h1>
<a href="#" class="ui-btn-left ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext" data-iconpos="notext" data-icon="delete" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" title="Close">
<span class="ui-btn-inner">
<span class="ui-btn-text">
Close
</span>
<span class="ui-icon ui-icon-delete ui-icon-shadow">
</span>
</span>
</a>
</div>
<ul class="ui-selectmenu-list ui-listview" id="select-choice-7458-menu" role="listbox" aria-labelledby="select-choice-7458-button" data-theme="c" data-divider-theme="b">
<li data-option-index="0" data-icon="checkbox-off" data-placeholder="true" class="ui-selectmenu-placeholder ui-btn ui-btn-up-c ui-btn-icon-right ui-li-has-arrow ui-li ui-first-child" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
<li data-option-index="1" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">
Scribbling</a>
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
<li data-option-index="2" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">
Letter-like symbols</a>
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
<li data-option-index="3" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">
Strings of letters</a>
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
<li data-option-index="4" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">
Beginning sounds
</a>
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
<li data-option-index="5" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">
Ending and medial sounds
</a>
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
<li data-option-index="6" data-icon="checkbox-off" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-c" role="option" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-iconpos="right" data-theme="c" aria-selected="false">
<div class="ui-btn-inner ui-li">
<div class="ui-btn-text">
<a href="#" tabindex="-1" class="ui-link-inherit">
Conventional writing
</a>
</div>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow">
</span>
</div>
</li>
</ul>
</div>
</div>
Related
Using Bootstrap 5, with the navbar being a re-usable component used on many screens. The drop down menus work on all screens except for one, but for the life of me I can't see why that screen is different. JS console shows no errors, the navbar markup is identical to the one used in the other screens.
Any ideas on this are welcome.
Here's the navbar code (some data redacted for client's privacy):
<div class="bg-light">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">client's name</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link " href="/bkofc/">Main</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/bkofc/cases/" aria-current="page">Screen 1<span class="sr-only">
(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownConfiguration" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
ניהול
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownConfiguration">
<a class="dropdown-item" href="/bkofc/branches/">config 1</a>
<a class="dropdown-item" href="/bkofc/caseTypes/">config 2</a>
<a class="dropdown-item" href="/bkofc/clients/">config 2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="/bkofc/users/">config 3</a>
<a class="dropdown-item" href="/bkofc/inviteUser/">config 4</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarUserDropdown" role="button"
data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarUserDropdown">
<a class="dropdown-item" href="/bkofc/users/admin/edit">my account</a>
<div class="dropdown-divider"></div>
<form class="dropdown-item" action="/bkofc/logout" method="POST">
<input type="hidden" name="csrfToken" value="..." />
<button type="submit" class="btn btn-outline-danger"> logout</button>
</form>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
After updating bootstrap rubygem from 4.0.0.alpha6 to 4.0.0.beta, default behavior of navbar is not working as before. By default links within it is hidden behind the button, even though for full screen.
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Here is the screenshot:
How should I fix it?
For beta version:
Navbars require a wrapping .navbar with
.navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color
scheme classes.
So instead of:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
It should be:
<nav class="navbar navbar-expand-md navbar-light bg-faded">
Source
You should be sure that you are using bootstrap 4.00 beta css and js files.
Default navbar example of bootstrap beta works in snippet and this fiddle example https://jsfiddle.net/s4qvqdbc/ try to change screen size in jsfiddle then you will see collapsed and uncollapsed form of it
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
I'm implementing a page in which I need three buttons and one textfield in same horizontal plane (same line). When implementing it it comes out vertically.
How can I solve this issue?
Here is my fiddle.
I am using this:
<div data-role="fieldcontain">
<input name="text-12" id="text-12" value="" type="text" >
<a href="#" data-role="button" data-corners="false" >Search</a>
Next
<a href="#" data-role="button" data-corners="false" >Previous</a>
</div>
You need to add this
data-inline="true"
So the result will be this
<div data-role="fieldcontain">
<input name="text-12" id="text-12" value="" type="text" >
<a href="#" data-role="button" data-corners="false" data-inline="true" >Search</a>
Next
<a href="#" data-role="button" data-corners="false" data-inline="true" >Previous</a>
</div>
<div data-role="content" data-theme="d">
<div
This can be found in the jquery mobile docs here
http://jquerymobile.com/demos/1.2.1/docs/buttons/buttons-inline.html
Environment
jQuery Mobile 1.3.0
Ruby on Rails 3.2.12
Chrome and Firefox latest or close to latest builds (can get exact versions if needed)
OS X Lion 10.8.2
Problem
Using jQuery Mobile with Rails on the back end, I am getting an odd hover effect for only list view items. The picture below shows what a listview item looks like while hovered on. If I add an icon/button to the right of the listview item, only the left has the issue as shown in the second picture. All other elements with hover effects work fine.
Evidence
Without icon, on hover (listview item):
With icon, on hover (listview item):
With icon, on hover (listview item right icon):
Question
Why, on hover, do my listview items turn an ugly black instead of being the nice hover gradient that everything else seems to handle without issue (including an icon/button on the listview itself)?
Code
The following is my HAML template code for the listview.
%ul{"data-filter" => "true", "data-inset" => "true", "data-role" => "listview"}
- #item.subitem.each do |item|
%li{"data-theme" => "c"}
%a{"data-prefetch" => "", "data-transition" => "slide", href: edit_item_subitem_path(#item, subitem), :rel => "external"}
= item.text
- if item.set
%span.ui-li-count.ui-btn-up-c
✓
And this is what Rails/HAML generates:
<ul data-filter='true' data-inset='true' data-role='listview' data-split-icon='gear' data-split-theme='b'>
<li data-theme='c'>
<a data-transition='slide' href='/items/5' rel='external'>
Testing
<span class='ui-li-count ui-btn-up-c'>
2
</span>
</a>
<a data-theme='c' href='/items/5/edit'>
<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>
</a>
</li>
And here is the resulting "computed" source that jQuery Mobile generates (I left out the search/filter code):
<ul data-filter="true" data-inset="true" data-role="listview" data-split-icon="gear" data-split-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-count ui-first-child ui-last-child ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-li-has-alt">
<div class="ui-btn-text">
<a data-transition="slide" href="/items/5" rel="external" class="ui-link-inherit">
Testing
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">
2
</span>
</a>
</div>
</div>
<a data-theme="c" href="/items/5/edit" title="" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext">
<span class="ui-btn-inner">
<span class="ui-btn-text"></span>
<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="c" title="" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext">
<span class="ui-btn-inner">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-gear ui-icon-shadow"> </span>
</span>
</span>
</span>
</a>
</li>
</ul>
Thanks
Thanks in advance, let me know if you need any additional information. Also, I didn't tag this Rails as I don't think it relates to Rails, but if I should, or if it does end up being the root cause, I will tag it as such.
Well, as it turns out, I had accidentally left the scaffolds.css.scss from when I was initially prototyping the app using the rails scaffold cli command. That was causing the issue.
I have a popup set up on the index.html as follows:
<!-- Choice Popup -->
<div class="ui-popup-screen ui-overlay-a ui-screen-hidden" id="popupDialog-screen"></div>
<div data-role="popup" class="ui-popup-container ui-overlay-a" data-transition="pop" id="choicePopup">
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="slidedown" data-position-to="window" data-arrow="true" data-arrow-sides="t,b,l,r">
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
<h1 class="ui-title" role="heading" aria-level="1">Your decision has been made:</h1>
<h2 align="center" id="choice-p"></h2>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Thanks</span>
</span>
</a>
<a href="#" onclick="eatsome('Food'); return false;" data-role="button" data-inline="true" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-inline">
<span class="ui-btn-inner">
<span class="ui-btn-text">Again!</span>
</span>
</a>
</div>
</div>
The problem is, I don't know why its booting on loading, some attribute is triggering it, can anyone find the issue? Thank you
There are several issues with your markup and code:
First of all your markup for the popup looks already jQM-enhanced like being copied from the browser's developer view. Therefore make it normal first. It might look like
<div data-role="popup" id="choicePopup" data-overlay-theme="b" data-theme="c" data-dismissible="false" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1></h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Your decision has been made:</h3>
<a id="btnThanks" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Thanks</a>
<a id="btnAgain" href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Again!</a>
</div>
</div>
Second a popup markup should reside inside the same page as the link that opens it.
<div data-role="page" id="main">
...
<div data-role="popup" id="choicePopup">
...
</div>
</div>
Third use proper jQM events to place your code that manipulates the content.
Forth Stop using onclick and other on* event attributes with jQM. Once again use proper jQM or jQuery events.
So instead of
<a href="#" onclick="eatsome('Food'); return false;" ... >Again!</a>
use
<a id="#btnAgain" href="#" ... >Again!</a>
$("#btnAgain").click(function(){
eatsome('Food');
return false;
});
Fifth After injecting html you need to call trigger('create') on a parent element to let jQM enhance and style the markup that you injected.
var content = '<form>;
...
content += '</form>;
$("div.settings-content").html(content).trigger("create");
And here is working jsFiddle based on your markup. As you can see the popup doesn't pop up on its own. There are two buttons that show how to open the popup declaratively and programmatically. And content for settings page is injected and styled properly.