In popup, bootstrap calender is working in firefox but not in chrome
My html is as follows:
<label for="text-input">Birth Date</label>
<div id="txtBirthDate" class=" input-group date dp-ex-4" data-date="12-02-2012" data-date-format="dd.mm.yyyy" data-date-autoclose="true" data-date-start-view="2">
<input class="form-control" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
Can any one help?
#User3724793 Do You use javascript for BootStarp Calender if not please use this one..
$.extend($.fn.datepicker.defaults, {
parse: function (string) {
var matches;
if ((matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/))) {
return new Date(matches[3], matches[1] - 1, matches[2]);
} else {
return null;
}
},
format: function (date) {
var
month = (date.getMonth() + 1).toString(),
dom = date.getDate().toString();
if (month.length === 1) {
month = "0" + month;
}
if (dom.length === 1) {
dom = "0" + dom;
}
return month + "/" + dom + "/" + date.getFullYear();
}
});
</script>
try adding this style to your html page
<style>
.datepicker{z-index:1151;}
Related
I've a problem with Jquery Mobile. Buttons that I add from JS are not displayed properly, and lacks CSS. On the other hand, hitting a button calls that function, but if another button is clicked, because of on off tap, problem occurs. "addExerciseButton" lacks CSS, and the problem occurs within addExerciseButton
<div data-role="page" id="addprogram">
<div data-role="header" data-position="fixed">
<h1>Add Program</h1>
Back
Save
</div><!-- /header -->
<div data-role="content" class='addprogramcontent'>
<div data-role="fieldcontain" class='addprogramlist'>
</div>
</div>
</div><!-- /page -->
JS:
$(document).off("tap").on('tap', '.addExerciseButton', function(event){
//alert(1);
var container = $(this).attr('id');
alert(container);
});
JS page:
eArray.sort();
var container = $("#addprogram").find(".addprogramlist");
container.empty();
// alert(eArray);
for(var i = 1; i <=7; i++)
{
var day = getDay(i);
container.append("<label for='day-" + i + "' class='select'>" + day + "</label>");
var select = $("<select name='day-" + i + "' id='day-" + i + "'></select>");
for (var j = 0; j < eArray.length; j++)
{
select.append("<option value='" + eArray[j] + "'>" + eArray[j] + "</option>");
}
container.append(select);
var addExerciseButton = "<input type='button' value='Add Exercise' class='addExerciseButton' data-role='button' data-theme='b' id='day-" + i + "'/>"
container.append(addExerciseButton);
}
$("select").selectmenu();
$("#day-1").change(function() {
// alert(value);
$("#day-1 option:selected").each(function () {
// alert(1);
var value = $(this).val();
$(this).parent().selectmenu('disable');
alert(value);
});
});
});
you have to refresh buttons after you append em to the dom:
working example: http://jsfiddle.net/PG2bV/55/
CODE
$(":button").button();
Using
container.trigger('create');
solved my problem with no CSS on buttons.
I have 2 pages that I'm working with: first being the page where the values are being fetched from php server and populating the selects/inputs and the second page being a dialog box that fetches the value from the hidden inputs in the first page. The first transition opens the dialog box and fetches the values properly. After which I save the values in php session and reload the first page. After this process when I open the dialog box again the jquery is not able to fetch val() and shows undefined. I'm not sure if this is due to some reloading of the page issue or something else. If I refresh the page then it will work fine again.
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
.....
<div data-role="navbar" data-iconpos="top">
.....
</div>
<div data-theme="c" id="cashtab" data-role="content">
<div style="display:none" id="proddata" data=""></div>
<div style="display:none" id="prodstock" data=""></div>
<form id="mainsubmit" action="form.php" method="post" data-ajax="false">
<input id="formproduct" type="hidden" name="product" value=""/>
<div id="productsearch" style="width:48%; float:left; margin-right:2%;">
<label for="search">Search Product:</label><br/><br/>
<ul id="productautocomplete" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Select a product... (type at least 3 letters)" data-filter-theme="d"></ul>
</div>
<div id="packingselect" style=" width:23%; float:left; margin-right:2%;">
<label for="packing">Select Packing:</label>
<select name="packing" id="packing" data-iconpos="left">
</select>
</div>
<div id="qtyenter" style=" width:23%; float:left; margin-right:2%;">
<label for="quantity">Select Qty:</label>
<input type="number" data-clear-btn="true" name="quantity" id="qty" value=""/>
</div><br/><br/><br/><br/><br/><br/><br/><br/>
<div style="display:inline-block; width:33%; margin-left:33%; margin-right:33%;">
<a href="#page3" data-rel="dialog" data-role="button" >ADD</a>
</div>
</form>
</div>
</div>
<div data-role="page" id="page3" data-url="dialog.html" data-close-btn="right">
<div data-role="header">
<h1>Batch Selection</h1>
</div>
<div data-role="content">
<div style="overflow:auto;">
<table id="batchsel" style="border:1px;">
<thead>
<tr>
<th></th>
<th>Batch No</th>
<th>Exp Date</th>
<th>Brate</th>
<th>Srate</th>
<th>Packing</th>
<th>Stock</th>
<th>Supplier</th>
<th>ST%</th>
<th>Bill Date</th>
<th>Bill No</th>
<th>btax</th>
</tr>
</thead>
<!--data populated from server once the values from first page is read properly.
<!-- currently not loading the second time as unable to fetch val() -- >
<tbody>
</tbody>
</table>
</div>
<div id="remainingdata">
<p1 id="changeable_requirements"></p1>
<!-- function the send the checked checkboxes relavent info to store in session -->
<button id="saveprod" onclick="addProduct(); return false;">Add Product</button>
</div>
</div>
</div>
<script>
$( document ).on( "pageinit", "#page1", function() {
//for product select autopopulate -- working //
$("#productautocomplete").live( "listviewbeforefilter", function ( e, data ) {
var $ul = $( this ),$input = $( data.input ),value = $input.val(),html = "";
$ul.html( "" );
if ( value && value.length > 2 ) {
$ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
$ul.listview( "refresh" );
$.getJSON('ajax/getProductList.php', {term:$input.val()}, function(data) {
var items = [];
var str = "";
for (var key in data) {
if (data.hasOwnProperty(key)) {
var value = data[key].value;
var label = data[key].label;
var stock = data[key].stock;
var proddata = data[key].data;
str += '<li code="'+value+'" name="'+label+'" stock="'+stock+'" data="'+proddata+'">';
str += '<a data-ajax="false" rel="external">'+label+' [ '+stock+' ]</a>';
str += '</li>';
}
}
$ul.html( str );
$ul.listview( "refresh" );
$ul.trigger( "updatelayout" );
});
}
});
//end search
//on click set hidden input fields to be used in dialog box. -- working
$('#productautocomplete li').live('click', function(e) {
//--------------------fetch data ------------------------
var id = $(this).attr('code');
var name = $(this).attr('name');
var data = $(this).attr('data');
var stock = $(this).attr('stock');
//add packaging type and unit info to div data
$('#proddata').attr('data',data);
//add currstock info to div
$('#prodstock').attr('data',stock);
//----------------------hide list
$('#productautocomplete li').hide();
//----------------------place name in visible input box
$('#productsearch input').attr('value',name);
//----------------------place id in hidden input box for the actual form.
$('#formproduct').val(id);
//----------------------fill options for package + show select package div
var filteroptions = data.split(",");
$('#packing option').remove();
for (var x=0; x<3 ; x++) {
var eachoption = filteroptions[x].split(":");
//if unit wise option is less than that of stock show as option.
if (eachoption[0]!="0" && eachoption[0] <= stock.valueOf()) {
$('#packing').append($('<option>', {
value: eachoption[0]+':'+eachoption[1],
text : eachoption[1]+' [ '+eachoption[0]+' ] '
}));
}
}
});
});
//this is where the problem lies ..
//have tried with pageinit.. but that only calls it once.
$( document ).on( "pageshow", "#page3", function() {
$('#batchsel tbody').empty();
// !!!!!!!!!!!!!!!!!!!!!!! // !!!!!!!!!!!!!!!!!!!!!!! //
//doesnt fetch any of 4 following values after pageChange back to page1.
//not sure if this is due to how i'm reloading the page1.
//see function addProduct below.
var prodcode = $('#formproduct').val(); //
var prodstock = $('#prodstock').attr('data');
var prodqty = $('#qty').val();
var packing = $('#packing').find(":selected").val();
//returns undefined
alert(prodcode); alert(packing); alert(prodqty);
//always ends here when dialog opens second time.
if (!prodcode || !packing || !prodqty) {
alert("Please give all required information");
//does not close also when opens the second time.
$('#page3').dialog('close');
}
var packinginfo = packing.split(":");
var totalrequired = prodqty * packinginfo[0];
//alert(packinginfo[1]);alert(totalrequired);
if (totalrequired > prodstock ) {
alert("Not enough Stock");
$('#page3').dialog('close');
} else {
//------------------------------ Getting Batch Info ---------------------------------------------------
var rows = '';
$.getJSON('ajax/getBatchDetails.php', {code:prodcode,pack:packinginfo[1],qty:totalrequired}, function(data) {
for (var key in data) {
if (data.hasOwnProperty(key)) {
//alert (data[key].Batch);
rows += '<tr><td><input type="checkbox" class="batchcheckbox" id="batchcheckbox_'+data[key].BatchId+'" value="'+data[key].BatchId+':'+data[key].Stock+'" onchange="resetRemainingQty(this.value);""/></td><td>' + data[key].Batch + '</td><td>' + data[key].ExDt +'</td><td>' + data[key].BRate + '</td><td>' + data[key].SRate + '</td><td>' + data[key].Pack + '</td><td>' + data[key].Stock + '</td><td>' + data[key].Supname + '</td><td>' + data[key].Stax + '</td><td>' + data[key].BillDt + '</td><td>' + data[key].BillNo + '</td><td>' + data[key].btax + '</td><tr>';
}
}
$('#batchsel tbody').append(rows);
//add remaining amount in the data field of p1.
$('#remainingdata p1').attr('data',totalrequired);
$('#remainingdata p2').attr('data',totalrequired);
$('#remainingdata p1').html("<h4>Remaining Amount : "+totalrequired+"</h4>");
});
//---------------------------------------------end batch info display: -----------------------------------
}
});
function addProduct() {
//--------code info---------
var prodcode = $("#formproduct").val(); // to send
//--------packing info---------------
var packing = $('#packing').find(":selected").val();
var packinginfo = packing.split(":");
//-----------qty req ---------------------
var prodqty = $('#qty').val();
var totalrequired = prodqty * packinginfo[0]; // to send
//-------------batch info -----------
var allbatchids = "";
$('.batchcheckbox').each(function() {
if($(this).is(':checked')){
var data = $(this).val();
var datasplit = data.split(":");
var batchid = datasplit[0];
allbatchids += batchid+":";
}
});
allbatchids = allbatchids.substring(0, allbatchids.length - 1); // to send
alert(prodcode+",,"+packinginfo[1]+",,"+totalrequired+",,"+allbatchids);
//-------------- send to server to save to session ---------
$.getJSON('ajax/saveProductSession.php', {code:prodcode,pack:packinginfo[1],qty:totalrequired,batch:allbatchids}, function(data) {
if (data.error == "1") {
alert(data.message);
} else {
/// !!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!!!
///
/// the loads the page1. but jquery doesnt take val() after this.
///tried multiple variations of this but to no effect.
///removed all options.. redirect to main.php.. reloadpage:false.. etc.
///Any other way to reload the page so that the dialog once open again can
///get the values from the page1 again.
$.mobile.changePage("#page1", { reloadPage: true , dataUrl : "page1", reverse : true, changeHash: true } );
}
});
//
// $.ajax({
// type: "POST",
// url: "ajax/saveProductSession.php",
// data: { code:prodcode,pack:packinginfo[1],qty:totalrequired,batch:allbatchids }
// }).done(function() {});
}
</script>
Ok ! I got it to work ! thanks anyway #Gajotres. Steps :
1a. Send out the variables from main.php through changePage :
var prodcode = $('#formproduct').val();
var prodstock = $('#prodstock').attr('data');
var prodqty = $('#qty').val();
var packing = $('#packing').find(":selected").val();
$.mobile.changePage('batch.php', {
role: 'dialog',
data: {'prodcode': prodcode,'prodstock': prodstock, 'prodqty' : prodqty , 'packing' : packing},
type: 'get'
});
2a. Moved the entire div id 'page3' to a new php page named 'batch.php' where I get the variables from php and set it to the html divs.
<?php
extract($_GET);
if (!$prodcode && !$prodstock && !$packing && !$prodqty) {
header('Location: '.DEF_SITEURL."main.php");
exit;
}
?>
<div data-role="page" id="batchpage" data-url="batch.php" data-close-btn="right">
<div data-role="header">
<h1>Batch Selection</h1>
</div>
<div data-role="content">
<div style="display:none;" id="batchprodcode" data="<?php echo $prodcode; ?>"></div>
<div style="display:none;" id="batchprodstock" data="<?php echo $prodstock; ?>"></div>
<div style="display:none;" id="batchpacking" data="<?php echo $packing; ?>"></div>
<div style="display:none;" id="batchqty" data="<?php echo $prodqty; ?>"></div>
<div style="overflow:auto;">
<table id="batchsel" style="border:1px;">
<thead>
<tr>
<th></th>
<th>Batch No</th>
<th>Exp Date</th>
<th>Brate</th>
<th>Srate</th>
<th>Packing</th>
<th>Stock</th>
<th>Supplier</th>
<th>ST%</th>
<th>Bill Date</th>
<th>Bill No</th>
<th>btax</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="remainingdata">
<p1 id="changeable_requirements"></p1>
<button id="saveprod" onclick="addProduct(); return false;">Add Product</button>
</div>
</div>
</div>
3a. Then I just change the pageshow that i was using for page3 to the new div that is created on batch.php. The script still runs on main.php.
$( document ).on( "pageshow", "#batchpage", function() {
$('#batchsel tbody').empty();
var prodcode = $('#batchprodcode').attr('data');
var prodstock = $('#batchprodstock').attr('data');
var prodqty = $('#batchqty').attr('data');
var packing = $('#batchpacking').attr('data');
...
});
I am starting to learn HTML5 and CSS (with Jquery Mobile), and because I do not have much background in this area, I am stuck at something very easy.
I want to put a checkbox in a listview (at each li).
How can I do it in order to look like that :
http://a4.mzstatic.com/us/r1000/095/Purple/ff/1d/33/mzl.ecpvufek.320x480-75.jpg
(I mean that the checkbox is at the left of the others text and all).
For the moment, my code is : http://jsfiddle.net/AzN7S/
And as you can see the checkbox is above the text, and even with a div with a float:left in the second li, it doesn't work :(
Can you help me please ?
Thank you very much beforehand for your answer, and sorry for my english ^^
Have a great day.
Olivier.
EDIT :
I finally succeeded in adding a checkbox at the left of the the right part.
I updated my example : http://jsfiddle.net/AzN7S/2/
I do not know if it is the right method, but it works :)
i rethought my old answer and re did the issue especially to fit the mvc 4 framework but the client side is all the same.
so lets start:
if you just want the html you can get it here
this link is to a 3 parts checkbox list, the checkbox, the link to the item and the info popup:
Here is the link to jsfiddle for working listview with checkbox AND icon
iv added at the end some 2 parts listbox and a single part, for any questions let me know.
now for the controller all you need to do is
[Authorize]
public ActionResult Items(string act,
string tab, string search_by, string search, string sort, string sortdir, int? page, int? resultsPerPage,
List<int> selected, int? projectId, string username)
{
if (act == "AddItemsToUser")
{
string response;
if (selected != null)
{
response = "Project Items Added:";
foreach (var item in selected)
{
try
{
if (username != null)
if (UserItemRecordModel.InsertUserItem(username, item, null, null, 0, null, null))
response += item + " - inserted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "AddItemsToProject")
{
string response;
if (selected != null)
{
response = "Project Items Added:";
foreach (var item in selected)
{
try
{
if (projectId != null)
if (ProjectItemRecordModel.InsertProjectItem(projectId.ToString(), item, null, null, 0, null, null))
response += item + " - inserted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "RemoveItemsFromUser")
{
string response;
if (selected != null)
{
response = "Project Items Removed:";
foreach (var item in selected)
{
try
{
if (UserItemRecordModel.DeleteUserItem(username, item))
response += item + " - deleted, ";
}
catch (Exception ex)
{
response += item + " - " + ex.Message + ", ";
}
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
else if (act == "RemoveItemsFromProject")
{
string response;
if (selected != null)
{
response = "Project Items Removed:";
foreach (var item in selected)
{
if (ProjectItemRecordModel.DeleteProjectItem(projectId.ToString(), item))
response += item + " - deleted, ";
}
response.TrimEnd(' ', ',');
}
else
{
response = "No Items Were Selected!";
}
return Json(response, JsonRequestBehavior.AllowGet);
}
List<ItemRecordModel> items = ItemRecordModel.GetSensors(search_by, search, sort, sortdir);
return View("Items", new AdminRecordsViewModel() { Records = items });
}
this was my old answer:
i solved your problem you need to change some stuff but you can accomplish a searchable listview with checkbox like so:
jsfiddle example:
basic:
basic jsfiddle version
nicer version:
nicer version
jquery mobile listview with checkbox and icon or image
here is a listView of checkBox and a search bar. you should add this js code
$("li").on("tap",function(){
$(this).find('label').click();
}); in the button somewhere in your page.
the js code crete a click on the check box when the user clicks on the li
<div class="ui-content" data-role="main">
<div data-role="main" class="ui-content">
<h2 class="settings-h2">Select category</h2>
<h5 lass="settings-h2">You will get articles on those subject,you can change your selection at any time.</h5>
<form class="ui-filterable">
<input id="myFilter-settings" data-type="search">
</form>
<ul data-role="listview" id="ScheduleList-settings" data-filter="true" data-input="#myFilter-settings" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-icon="false">
<form>
<fieldset class="myhover" data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="checkbox-Sports" >
<label for="checkbox-Sports">Sports</label>
</fieldset>
</form>
</li>
<li data-icon="false" >
<form>
<fieldset data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="ccheckbox-Food" >
<label for="ccheckbox-Food">Food</label>
</fieldset>
</form>
</li>
<li data-icon="false" >
<form>
<fieldset data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="checkbox-Politics" >
<label for="checkbox-Politics">Politics </label>
</fieldset>
</form>
</li>
<li data-icon="false" >
<form>
<fieldset data-role="controlgroup" data-iconpos="right" >
<input type="checkbox" name="checkbox-h-6a" id="checkbox-Fashion" >
<label for="checkbox-Fashion">Fashion</label>
</fieldset>
</form>
</li>
</ul>
</div>
</div>
Hi I found the following code from this page JQuery UI DatePicker using 2 date fields trying to get date difference
However I don't understand the datepicker ui enough to be able to stop the first datepicker from letting you only select from todays date. Im sure its simple but can someone please help!
<script type="text/javascript">
var DatePicked = function() {
var departure = $("#CheckIn");
var arrival = $("#CheckOut");
var nights = $("#Nights");
var triggeringElement = $(this);
var minArrivalDate = new Date();
var departureDate = departure.datepicker("getDate");
if (departureDate != null) {
minArrivalDate.setDate(departureDate.getDate() + 1);
} else {
minArrivalDate.setDate(minArrivalDate.getDate() + 1);
}
arrival.datepicker('option', 'minDate', minArrivalDate);
var arrivalDate = arrival.datepicker("getDate");
if (departureDate != null && arrivalDate != null && triggeringElement.attr("id") != "Nights") {
var oneDay = 1000*60*60*24;
var difference = Math.ceil((arrivalDate.getTime() - departureDate.getTime()) / oneDay);
nights.val(difference);
} else if (departureDate != null && triggeringElement.attr("id") == "Nights") {
var nightsEntered = parseInt(nights.val());
if (nightsEntered >= 1) {
var newArrivalDate = new Date();
newArrivalDate.setDate(departureDate.getDate() + nightsEntered);
arrival.datepicker("setDate", newArrivalDate);
} else {
alert("Nights must be greater than 1.");
}
}
}
$(function() {
$("#CheckIn, #CheckOut").datepicker({
onSelect: DatePicked
});
$("#Nights").change(DatePicked);
DatePicked();
});
</script>
Form:
<form class="enquiry" action="assets/scripts/booking.php" method="get" name="Booking">
<div class="Widget_Form_Spacer">
<label for="CheckIn">Check-In</label>
<input id="CheckIn" name="CheckIn" type="text" class="tF bL" value="<?php echo date("m/d/Y"); ?>" />
</div>
<div class="Widget_Form_Spacer Right">
<label for="CheckOut">Check-Out</label>
<input id="CheckOut" name="CheckOut" type="text" class="tF bL" value="" />
</div>
<div class="Widget_Form_Spacer Short">
<label for="Nights">Nights</label>
<input id="Nights" name="Nights" type="text" class="tF nL" value="1" onclick="clickclear(this, '1')" onblur="clickrecall(this,'1')" />
</div>
<div class="Widget_Form_Spacer Short">
<label for="Adults">Adults</label>
<input name="Adults" type="text" class="tF nL" value="1" onclick="clickclear(this, '1')" onblur="clickrecall(this,'1')" />
</div>
<div class="Widget_Form_Spacer Long">
<input name="Check" type="submit" value="Check Availability" />
</div>
</form>
You can use the minDate jquery UI datepicker option:
$("#date").datepicker({ minDate: new Date() });
Live DEMO
<ul id="mylist">
<li id="1">1<button id="Button3">Delete</button> </li>
<li id="2">2<button id="Button2">Delete</button></li>
<li id="3">3<button id="another_entry">Save</button></li>
</ul>
I have the code as follows:
<script type="text/javascript">
$(document).ready(function() {
$("#mylist :button").live('click', function() {
var text = $(this).text();
if (text == "Delete") {
$(this).parent().remove();
}
else {
$(this).text("Delete");
}
});
$("#mylist li:last-child button").live('click', function() {
$(this).parent().append('<li>' + '<input type = "textbox">' + '<input type = "button" value= "Save">' + '</li>');
});
});
</script>
On clicking the button on the last list, it doesn`t add the new list, nor is the text on the save button changed as delete
You have to append the newly created li to ul and not to the parent of button which is li.
Change you code to
$(this).closest("#mylist").append('<li><input type = "textbox" /><button>Save</button></li>');