I am trying to use select2 inside bootstrap modal but it is not getting the focus automatically as well as down and up arrows are not working for the populated list.
The same select2 works when I put it outside the modal popup.
When I searched, I found many are facing this same problem and found this post
Select2 doesn't work when embedded in a bootstrap modal
I implemented both the solutions from it
Removed tabindex from modal popup.
Commented code of enforceFocus function in modal.js file.
But it is still not working! Any idea what I could still be missing?
Edit1
It works on firefox when tabindex is removed from the modal div but not with IE9
Edit2
I found that removing tabindex is actually not getting recognized by IE9 because I can still hide the popup by escape key in IE but not in Firefox.
Use bellow code. This will solve your bug.
$('select').select2({
dropdownParent: $('#my_amazing_modal')
});
place this somewhere in your JS:
//fix modal force focus
$.fn.modal.Constructor.prototype.enforceFocus = function () {
var that = this;
$(document).on('focusin.modal', function (e) {
if ($(e.target).hasClass('select2-input')) {
return true;
}
if (that.$element[0] !== e.target && !that.$element.has(e.target).length) {
that.$element.focus();
}
});
};
I changed:
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
to the following:
<div class="modal fade bd-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
That is, removing the attribute tabindex="-1" from the element.
Try this
<div class="col-sm-8" id="select">
<select type="text" class="form-control" id="helloselect" data-width="100%" name="helloselect">
<option>Hello</option>
<option>Hola</option>
<option>Hallo</option>
</select>
</div>
and the script
$("#helloselect").select2({dropdownParent: $("#select")});
I was searching for it and came across this one:
Worked for me on document ready for all select2
$('select:not(.normal)').each(function () {
$(this).select2({
dropdownParent: $(this).parent()
});
});
Taken from:
https://github.com/select2/select2-bootstrap-theme/issues/41
I tried to set z-index for select2 dropdown option, and it worked for me. Here is what I did:
.select2-container.select2-container--default.select2-container--open {
z-index: 5000;
}
this will do the trick, and it worked for me
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
the attribute tabindex='-1' in bootstrap modal prevents any element outside modal being reachable or focused by tab key. It is useful for limit tabs only on modal, for accessibility. But elements created by selec2 are children of document.
You need to set dropdownParent to your modal
$(document).ready(function() {
$("select").select2({dropdownParent: $("#myModal")});
$('[data-toggle=offcanvas]').click(function() {
$('.row-offcanvas').toggleClass('active');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>JS Bin</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
</head>
<body>
Convert to popup
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><i class="fa fa-close"></i></span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Bootsrap4 Modal Label</h4>
</div>
<div class="modal-body">
<div id="PopupWrapper">
<select class="form-control">
<option>red</option>
<option>blue</option>
<option>green</option>
<option>orange</option>
<option>yellow</option>
</select>
</div>
</div>
</div>
</div>
</div>
</body>
jsbin example
meaning of tabindex=-1
$('#dropdownid').select2({
dropdownParent: $('#modalid')
});
Above code works for me, try this.
Dear all no need to take tabindex="-1" out there simple CSS solution.
Here we go:
.page-body .select2-drop {z-index: 10052;}
.select2-drop-mask {z-index: 10052;}
And you are done. :)
$('.select2-with-search').select2({
placeholder: 'Choose one',
searchInputPlaceholder: 'Search options',
dropdownParent: $('.modal')
});
us this <div class="modal"
<div class="modal fade" id="createModal" role="dialog" aria-hidden="true" data-backdrop="">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
and use this <select class="form-control select2-with-search"
<select class="form-control wd-250 select2-with-search">
<option label="Choose one"></option>
<option value="Firefox">Firefox</option>
<option value="Chrome">Chrome</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="Internet Explorer">Internet Explorer</option>
</select>
All answers here didn't work for me, but this one is good:
$('#modal-window').on('shown.bs.modal', function (e) {
$("#select-box").select2({
placeholder: "Select...",
theme: "bootstrap",
language: "en"
});
})
Wrap it inside
$(document).on('ready turbolinks:load', function() {...}
if you use turbolink.
Just use data attribute settings:
data-dropdown-parent="#bs-modal-id"
<select class="form-control" data-dropdown-parent="#bs-modal-id"></select>
In my case i resolve this calling select2 on action modal show like this:
window.addEventListener('showModal', event => {
$('#actionModal').modal('show');
$('#permissaoList').select2({
width: '100%'
});
});
I was facing with the same problem I just add the below code and it worked
$(document).ready(function() {
$('.select2').each(function() {
$(this).select2({
dropdownParent: $(this).parent()
});
})
});
Related
We have a modal popup that has a button with an onclick event. When the modal is hidden, in previous version of bootstrap, the onclick event fired first and then the hidden.bs.modal event would fire.
In 5.2 the hidden.bs.modal event fires first, and then the onclick event is processed.
Example:
<div>
<button id="yes" type="button" onclick="SetVariableValue();" data-bs-dismiss="modal">YES</button>
</div>
javascript code:
popup.on('hidden.bs.modal', function (e) {
//do work that depends on _memberLevelVariable.cancelled value
DoWork();
}
...
function SetVariableValue()
{
_memberLevelVariable.cancelled = true;
}
If I put a breakpoint on both DoWork and SetVariableValue, in bootstrap 3.x I see SetVariableValue hit first then DoWork. In bootstrap 5.2, DoWork is hit first and then SetVariableValue.
This breaks code we have that depends on _memberLevelVariable value, because in 5.2 it will be processed after the DoWork method, instead of before.
Is there a setting that can control this order of operations? I did not see any information in the bootstrap specifications that controlled this or mentioned this change.
const popupEl = document.getElementById('myModal');
const popup = new bootstrap.Modal(popupEl);
popup.show();
popupEl.addEventListener('hidden.bs.modal', event => {
DoWork();
console.log('hiding modal now');
});
function DoWork() {
console.log('doing work now');
}
function SetVariableValue() {
console.log('setting variable value now');
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button id="yes" class="btn" type="button" onclick="SetVariableValue();" data-bs-dismiss="modal">YES</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
You could use the classic no-delay setTimeout trick. This moves the internal function call to the end of the processing queue, which would seem to resolve your issue.
const popupEl = document.getElementById('myModal');
const popup = new bootstrap.Modal(popupEl);
popup.show();
popupEl.addEventListener('hide.bs.modal', event => {
setTimeout(DoWork);
console.log('hiding modal now');
});
function DoWork() {
console.log('doing work now');
}
function SetVariableValue() {
console.log('setting variable value now');
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button id="yes" class="btn" type="button" data-bs-dismiss="modal" onClick="SetVariableValue()">YES</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
I'm trying to update from bootstrap 3.3.7 to 4.0.0 but the modal with partial view doesn't want to work, I keep getting an empty modal content instead of the partial view, here there is my code that worked with bootstrap 3.3.7
bootstratp 3.3.7 code https://github.com/emiliano84/testModal/tree/master/WebApplication1
bootstrap 4.0.0 code
https://github.com/emiliano84/testModal/tree/bootsrap4/WebApplication1
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
#Html.Partial("_Modal")
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
#RenderSection("Scripts", required: false)
</body>
</html>
__Modal.cshtml
<div aria-hidden="true" aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
Home/Index.cshtml
<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" asp-action="Modal">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
HomeController.cs
public IActionResult Modal()
{
return PartialView("_DeleteCategory");
}
Home/_DeleteCategory.cshtml
<form asp-action="" role="form">
<div class="modal-body form-horizontal">
Do you want to delete?
</div>
</form>
bootsrap 3.7 html output after click on the button
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - WebApplication1</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/css/site.css">
</head>
<body class="modal-open">
<div class="container body-content">
<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" href="/Home/Modal">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
</div>
<div aria-hidden="true" aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade in" style="display: block;">
<div class="modal-dialog">
<div class="modal-content"><form role="form" action="/" method="post">
<div class="modal-body form-horizontal">
Do you want to delete?
</div>
<input name="__RequestVerificationToken" value="CfDJ8KH27-v3I3xDokVa0ArDzjvcs251yDWEn8uK5vM6nFLVSh-l1byQUcPqFqYlR-naInUYVtOGq28Ib186Up7s2ftB5t7krZ1Ix43Agaohw3H0Fq9SbU2wdkdNS93kS-EUTnlmy6Rs3Pu1N4-efa1KO4g" type="hidden"></form>
</div>
</div>
</div>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>
<div class="modal-backdrop fade in"></div></body></html>
Bootstrap 4 html after click the button
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - WebApplication1</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/css/site.css">
</head>
<body class="modal-open">
<div class="container body-content">
<a id="deleteModal" data-toggle="modal" data-target="#modal-action-id" class="btn btn-danger" href="/Home/Modal">
<i class="glyphicon glyphicon-trash"></i> Delete
</a>
</div>
<div aria-labelledby="modal-action-label" role="dialog" tabindex="-1" id="modal-action-id" class="modal fade show" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
</div>
</div>
</div>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/popper.js/dist/popper.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=ji3-IxbEzYWjzzLCGkF1KDjrT2jLbbrSYXw-AhMPNIA"></script>
<div class="modal-backdrop fade show"></div></body></html>
bootstrap 3.3.7 visual result
bootstrap 4.0.0 visual result
Answer and Question
After adding this js script as the user mvermef suggested, it works... the question is? why with bs 3.3.7 worked also without???
$(function () {
// boostrap 4 load modal example from docs
$('#modal-container').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
// note that this will replace the content of modal-content everytime the modal is opened
modal.find('.modal-content').load(url);
});
$('#modal-container').on('hidden.bs.modal', function () {
// remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
// and empty the modal-content element
$('#modal-container .modal-content').empty();
});
});
$(function () {
// boostrap 4 load modal example from docs
$('#modal-container').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
// note that this will replace the content of modal-content everytime the modal is opened
modal.find('.modal-content').load(url);
});
$('#modal-container').on('hidden.bs.modal', function () {
// remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
// and empty the modal-content element
$('#modal-container .modal-content').empty();
});
});
<div id="modal-container" class="modal fade hidden-print" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
<a class="btn btn-primary" asp-action="Create" data-target="#modal-container" data-toggle="modal">New Flight</a>
This is just about everything you need for the modal in asp.net (standard, or core). works with both BS 3.3.7 and 4.0
the JavaScript is the important part to get the call to your Action Method to tell the modal to push into it the contents of your Partial.
Bootstrap 4 is almost a complete rewrite of Bootstrap 3. So, almost none of the Bootstrap 3 code will work in Bootstrap 4. That's just the nature of a complete rewrite. You have to migrate every piece bit by bit IF you want to migrate to Bootstrap 4.
Here's a modal that works in Bootstrap 4 and even has an icon from FontAwesome (glyphicon replacement). Note: the container body-content wrapper isn't really used here:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container body-content">
<!-- Button trigger modal -->
<button id="deleteModal" type="button" class="btn btn-danger" data-toggle="modal" data-target="#modal-action-id">
<i class="fa fa-trash-o pr-2" aria-hidden="true"></i>Delete
</button>
<!-- Modal -->
<div class="modal fade" id="modal-action-id" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Do you really want to delete?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<button type="button" class="btn btn-danger">Yes</button>
</div>
</div>
</div>
</div>
</div>
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
More info:
https://getbootstrap.com/docs/4.0/components/modal/
I have this following code for making a confirm dialog using jQuery UI:
function Help(section) {
$("#userpopup").remove();
$("body").append("<div id='userpopup' title='Help' style='display:none'></div>");
$('#userpopup').dialog({
autoOpen: true,
width: 560,
height: 500,
buttons: {
"OK": function () {
$(this).dialog("close");
$("#userpopup").remove();
}
},
open: function (event, ui) {
$("#userpopup").html("<iframe width='100%' height='400' src='?help§ion=" + section + "' frameborder='0' marginwidth='0' marginheight='0' allowtransparency='true'></iframe>");
},
beforeClose: function (event, ui) {
$("#userpopup").html("");
}
});
return false;
}
<input onClick="javascript:Help('templates')" type="button" class="btn" value="help">
How to change it to use Bootstrap Modals?
You could use the standard Bootstrap modal markup..
<input id="btnHelp" type="button" class="btn" value="help">
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Dialog</h3>
</div>
<div class="modal-body">
<iframe src="" width="100%" height="400" frameborder="0"></iframe>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">OK</button>
</div>
</div>
and then use modal 'show' event to dynamically set a different iframe src..
$('#helpBtn').click(function(){
$('#myModal').on('show', function () {
var frameSrc = "?help§ion=templates"; // value can be passed from button
$('iframe').attr("src",frameSrc);
});
$('#myModal').modal({show:true})
});
Demo of iFrame inside modal
Just to add on to #Kris Zhang's answer: The Bootstrap Jquery Plugin is really the answer to this. The function calls are the same as those of jquery dialog boxes but it automatically adds the divs around the dialog box in order to display the modal bootstrap style. Just add or steal the bootstrap library from the link above and you don't need to use iframes.
You can have a look at Bootstrap jQuery Plugin
It's based on bootstrap 3.x
I am building a phonegap app for Android using jquery mobile and having some
trouble with fixed footers.
Please see the HTML code below.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
</script>
<script type="text/javascript" src="js/jquery-1.7.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery.mobile-1.1.1.min.js"> </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<form id="searchform" action="" method="post" onsubmit="return false;"
data-ajax="false">
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
</form>
<script type="text/javascript">
$('.city').each(function() {
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
});
</script>
</div><!-- /content -->
<div data-role="footer" data-position="fixed"
data-tap-toggle="false">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#help" data-icon="info"
data-transition="none">Help</a></li>
<li><a href="#help" data-icon="star"
data-transition="none" >Favorites</a></li>
<li><a href="#help" data-icon="arrow-r"
data-transition="none" >Results</a></li>
</ul>
</div>
</div>
</div><!-- /page -->
<div data-role="page" id="help">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Help</h1>
</div><!-- /header -->
</div>
</div>
</body>
</html>
There is a long form containing several fields including checkboxes, radio buttons, select lists etc. (using repeated select lists here to simulate). There is a fixed footer at the bottom. Things work fine on desktop browsers. But when I test on my phone having Android 2.3 I observe strange behaviour. Assuming the footer is hiding the select list underneath , if I click on any of the tabs on the navbar, the select list pops up whereas I would expect a transition to a new page. This is as if the select list is getting the click event instead of the footer. This is very annoying to the user. I have searched google but haven't seen this problem reported elsewhere.
Updated the solution yet again.
/* HACK: when clicked on navbar the select list underneath pops up
for some reason. So we just hide all content as soon as
we click on navbar and then show it whenever we load new page*/
$(document).bind('pagechange', function(e, data) {
$('[data-role="content"]').show();
});
$(document).bind('tap', function(e) {
if($("body").data("hold-flag") == true) {
$("body").data('hold-flag', false);
return;
}
if($(e.target).closest("[class='ui-btn-inner']").length > 0 ||
$(e.target).closest("[class~='ui-btn-right']").length > 0 ||
$(e.target).closest("[class~='ui-btn-left']").length > 0) {
$('[data-role="content"]').hide();
}
});
$(document).bind('taphold', function(e) {
/* set a flag to mark this as a taphold event */
/* BIG assumption: a 'tap' event is always fired after a
taphold event */
$("body").data('hold-flag', true);
e.preventDefault();
return false;
});
I found a workaround. I added following code. Essentially I am testing whether there has been click in the footer area. If yes then I simply hide the contents of the page. This seems to stop the annoying pop-up select list. Of course the hidden page contents must be restored after page transition is complete. I am not sure how portable and/or robust this code is. Would appreciate comments from experienced developers.
$(document).bind('pagechange', function(e, data) {
$('[data-role="content"]').show();
});
$(document).bind('tap', function(e) {
/* find the footer for this page*/
var footer = $(e.target).
closest('[data-role="page"]').
find('[data-role="footer"]');
var offset = footer.offset();
var scroll = e.pageY - e.clientY;
var pos = offset.top - scroll;
if(e.clientY > pos) {
//click in footer area
$('[data-role="content"]').hide();
}
});
Simplified 'tap' event handler. This also handles clicks in header area now.
$(document).bind('tap', function(e) {
if($(e.target).closest("[data-role='footer']").length > 0 ||
$(e.target).closest("[data-role='header']").length > 0) {
$('[data-role="content"]').hide();
}
});
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/