I thought I knew jq selectors but this is killing me. Given this html snippet (which was dynamically added to a jquery mobile form):
<li class="ld ui-li-divider ui-bar-inherit" data-role="list-divider"
role="heading">Monday
<label class="dateInput" style="display: none;">Choose a
Date to attend:<input type="text" id="dateInput1" name="dateInput1"
class="dateInput"
data-role="date" data-inline="false" style="display: none;">
</label>
</li>
<li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
<input type="checkbox" class="catChk" id="chkH10" name="chkH" data-week-
day="Monday" value="">Check1</li>
<li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
<input type="checkbox" class="catChk" id="chkH11" name="chkH" data-week-
day="Monday" value="">Check2</li>
The elements with class="dateInput" are hidden. When either Check1 or Check2 is checked I want to show the dateInput.
I've tried lots of things including:
$("#dayClassList").on("click", "input.catChk", function () {
$(this).closest(".ld").find(".dateInput").show();
}
Just using $(".dateInput").show(); works, but I have other dateInputs on the page that should stay hidden. I just want the dateInput in the closest ".ld" to be shown. The ids are dynamically created so I can't use them. I have to work with the class selectors.
I also added fiddle link: https://jsfiddle.net/dipakchavda2912/ce9mu1q2/
Let me know is it resolve your issue or not?
<li class="ld ui-li-divider ui-bar-inherit" data-role="list-divider"
role="heading">Monday
<label class="dateInput" style="display: none;">Choose a Date to attend:
<input type="text" id="dateInput1" name="dateInput1"
class="dateInput"
data-role="date" data-inline="false">
</label>
</li>
<li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
<input type="checkbox" class="catChk" id="chkH10" name="chkH" data-week-
day="Monday" value="">Check1</li>
<li class="hn ui-li-static ui-body-inherit ui-li-has-thumb">
<input type="checkbox" class="catChk" id="chkH11" name="chkH" data-week-
day="Monday" value="">Check2</li>
$(document).ready(function(){
$(".catChk").on("change", function (e) {
if(true === $(this).is(":checked")){
$.each($(".dateInput, input[id^='dateInput']"), function () {
$(this).show();
});
}else{
$.each($(".dateInput, input[id^='dateInput']"), function () {
$(this).hide();
});
}
});
});
$("#dayClassList").on("click", "input.catChk", function () {
$(".dateInput:first").show();
}
Dipak your answer put me on the right track. I have accepted your answer. I ended up kludging it by changing the id of the li.ln to include the dayName. This made it easy to target. When the checkbox is checked I grab the data-week-day value and find the matching li.ln with the same value.
Related
I've been looking through a lot of tutorials on jQuery draggable and trying to apply it to ASP.NET MVC, but I am really confused.
Does anyone know of some simpler samples.
#model locat.Models.LoginModel
#{
ViewBag.Title = "Log in";
}
#using (Html.BeginForm(null, null, FormMethod.Post, new { id = "msform" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary()
<!-- fieldsets -->
<div id="drag">
<fieldset>
<h2 class="fs-title">Login</h2>
<h3 class="fs-subtitle"></h3>
<input name="UserName" type="text" placeholder="Username">
<input name="Password" type="Password" placeholder="Password">
<input type="button" name="next" class="next action-button" value="New User" />
<input type="submit" name="next" class="nexts action-login" value="Log in" />
</fieldset>
</div>
}
<script>
$(function () {
$("#drag").draggable();
});
</script>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/jqueryui")
}
You have one of these problems :-
Your jQuery or jQuery UI Javascript path files are wrong.
Your jQuery UI does not include draggable.
Your div is unstyled or empty, therefore there is nothing to drag.
Something is colliding with your jQuery or jQuery UI so it doesn't
work.
In your question ur div with id="drag" in not styled so give style to it so that draggable will work on it.
ut your dragable elements inside Ul as below and don't forget to include Jquery UI files reference:
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>
AND Jquery:
$(function() {
$( "#sortable" ).draggable({
});
});
Working Demo Is Here http://jsfiddle.net/booyaa/YvJhE/
I can't seem to show a datepicker from jQuery UI on a hidden field as I get this error:
Uncaught TypeError: Cannot read property 'left' of undefined
When I use a regular text field, I don't seem to have a problem. I get this error with both jQuery UI 1.9.0 and 1.9.2, the version of jQuery is 1.8.3
html
<table>
<tr>
<td>
<small class="date_target">until <span>Dec. 31, 2013</span></small>
<input type="hidden" class="end_date" />
</td>
</tr>
</table>
JS
$(".end_date").datepicker({
dateFormat: 'yyyy-mm-yy',
yearRange: '-00:+01'
});
$('.date_target').click(function () {
$(this).next().datepicker('show');
});
I provided a (not) working example on this jsfiddle too
It's because the input field is not visible to the browser (because it's hidden).
Try this:
<input type="text" style="height: 0px; width:0px; border: 0px;" class="end_date" />
and you are fine. Of course, you can add the extra style attributes to the CSS class "end_date". A "display:none" will not help, because then the field is fully invisible again.
Example also in a JS Fiddle.
Let's check datepicker _findPos function
$.datepicker._findPos = function (obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.visible(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
/*because position of invisible element is null, js will break on next line*/
return [position.left, position.top];
};
If target obj of datepicker is invisible, it will use the closest sibling position which is not invisible
There are several solutions：
Solution 1
Because of LTR, you can exchange position of two element
<tr>
<td>
<input type="hidden" class="end_date" />
<small class="date_target">until <span>Dec. 31, 2013</span></small>
</td>
</tr>
Solution 2
Add an visible element next to the hidden element, so datepicker will find the visible element position
<tr>
<td>
<small class="date_target">until <span>Dec. 31, 2013</span></small>
<input type="hidden" class="end_date" /><span> </span>
</td>
</tr>
Solution 3
Redefine _findPos function, so you can set position of calendar wherever you want
$.datepicker._findPos = function (obj) {
var position,
inst = this._getInst(obj),
isRTL = this._get(inst, "isRTL");
while (obj && (obj.type === "hidden" || obj.nodeType !== 1 || $.expr.filters.visible(obj))) {
obj = obj[isRTL ? "previousSibling" : "nextSibling"];
}
position = $(obj).offset();
// if element type isn't hidden, use show and hide to find offset
if (!position) { position = $(obj).show().offset(); $(obj).hide();}
// or set position manually
if (!position) position = {left: 999, top:999};
return [position.left, position.top];
};
I had the same problem while using Bootstrap as well, cause I needed my datepicker to show with a button click.
This works:
<div class="form-group">
<label class="sr-only" for="txtDate">Date</label>
<input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
<button type="button" class="btn btn-default btn-sm" id="btnDate">
<span class="glyphicon glyphicon-calendar"></span> Calendar
</button>
</div>
This doesn't work:
<div class="form-group">
<label class="sr-only" for="txtDate">Date</label>
<input type="text" class="form-control input-sm" style="display: none;" id="txtDate">
</div>
<button type="button" class="btn btn-default btn-sm" id="btnDate">
<span class="glyphicon glyphicon-calendar"></span> Calendar
</button>
JS:
$('#txtDate').datepicker({
dateFormat: 'yy-mm-dd',
showAnim: 'fade'
});
$("#btnDate").on('click', function(){
$('#txtDate').datepicker('show');
});
So all I needed was to put the button on the same div element. In case anyone else has this problem.
I tried this code to achieve what I want to do. It worked when I tried it in my ordinary HTML file, but when I tried it in my JQuery Mobile page, the code did not work well for me. Are there different ways or code to select JQuery Mobile checkboxes?
Here's the code that I tried:
JAVASCRIPT:
<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
HTML
<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears
</label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff
</label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore
</label>
<br>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">
I was not aware that JQuery Mobile's checkboxes need to be refreshed after unchecking/checking them via JQuery or Javascript. Here's the code:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
http://api.jquerymobile.com/checkboxradio/#method-refresh
Try this:
function SetAllCheckBoxes(FormName, CheckValue){
$.each($("#"+FormName+" input[type=checkbox]"), function(){
$(this).attr("checked",CheckValue).checkboxradio("refresh");
});
}
I removed the FieldName because your function was named SetAllCheckBoxes, just your input fields are the same. You just need tell what's your form and the state of your checkboxes.
To toggle / refresh checkboxes in jquery mobile you need to use .prop, rather than .attr.
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
I have a block of code which is supposed to loop over an observable array, and generate a series of grouped checkboxes (as in this example ).
Here's what I'm getting instead. http://dl.dropbox.com/u/495070/shared/2012-03-28_09.03.33.000.png
here's a jsFiddle that demonstrates the issue.
And here's the (not as useful as the fiddle) code snippet that generates it.
<fieldset id="myList" data-role="controlgroup" data-bind='foreach : acRoleOps()'>
<legend>
</legend>
<br><br><br><h4><span data-bind="text: $root.opNameGet(OperationID)"></span></h4>
<input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bcreate-' + ID, name: 'checkbox-bcreate-' + ID, id: 'checkbox-bcreate-' + ID }, checked: BCreate, click: $parent.opPrivsToggle" />
<label data-theme="c" data-bind="attr: { for: 'checkbox-bcreate-' + ID }">Create</label>
<input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bread-' + ID, name: 'checkbox-bread-' + ID, id: 'checkbox-bread-' + ID }, checked: BRead, click: $parent.opPrivsToggle" />
<label data-theme="c" data-bind="attr: { for: 'checkbox-bread-' + ID }">Read</label>
<input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bedit-' + ID, name: 'checkbox-bedit-' + ID, id: 'checkbox-bedit-' + ID }, checked: BEdit, click: $parent.opPrivsToggle" />
<label data-theme="c" data-bind="attr: { for: 'checkbox-bedit-' + ID }">Edit</label>
<input data-theme="c" type="checkbox" data-role="controlgroup" data-bind="attr: { 'data-id': 'checkbox-bdelete-' + ID, name: 'checkbox-bdelete-' + ID, id: 'checkbox-bdelete-' + ID }, checked: BDelete, click: $parent.opPrivsToggle" />
<label data-theme="c" data-bind="attr: { for: 'checkbox-bdelete-' + ID }">Delete</label>
</fieldset>
Has anyone seen this before? If so, can you point out where I went wrong?
Thanks!
You need to use the knockout <!-- ko foreach: myItems -->
http://knockoutjs.com/documentation/foreach-binding.html
http://jsfiddle.net/vNcNC/38/
document.ready() doesn't work on jQuery mobile because pages are dynamically loaded. Instead, use the pageInit event. See here: http://jsfiddle.net/vNcNC/17/ Now you've still got some issues with Knockout, but I'm not too familiar with it so I can't help with those.
I think this is a conflict between the time KO is generating your markup and the time jquery mobile is applying its custom skinning. I found one issue with your code. I think the foreach is on the wrong element. I wrapped your fieldset in a new div and applied the foreach to that.
<div data-bind='foreach : acRoleOps()'>
<fieldset id="opsList" data-role="controlgroup">
I'm not too familiar with jquery mobile but here's how I proved that this is the case. I removed the references and just checked that KO generated the correct markup. With the above change it appears to do so.
http://jsfiddle.net/madcapnmckay/THG9F/
Here is the jquery mobile only version with the generated markup pasted in.
http://jsfiddle.net/madcapnmckay/tuWgM/1/
As you can see KO is generating the correct markup, there is just a timing conflict.
Hope this helps.
I have got my HTML5 project a bit further along - I have one last stumbling block which is: I have set a variable and have three buttons which give it a different value - each value should relate to a different mp3 file, I want my big 'play' button to play whichever mp3 ( variable) has been selected. I then want the button to toggle off or stop playing when clicked again.
I'm out of my depth a bit ( on tip toes) so any help/advice would be appreciated. I have gone through the Jquery and html5 audio notes but can't find anything too helpful ( that I can understand anyway!)
Thanks for any help,
Jim
Live Demo:
http://jsfiddle.net/CZLcR/29/
JS
var selectedMP3;
$('input[name=mp3_option]').change(function() {
selectedMP3 = $('input[name=mp3_option]:checked').val();
});
$('#controlButton').click(function() {
var $this = $(this);
if($this.text() == 'Play') {
$this.children().children().text('Pause');
} else {
$this.children().children().text('Play');
alert('Stopped playing song: '+selectedMP3);
$('input[name=mp3_option]').attr('checked',false).checkboxradio('refresh');
}
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose a song:</legend>
<input type="radio" name="mp3_option" id="radio-choice-1" value="song-1.mp3" />
<label for="radio-choice-1">MP3 1</label>
<input type="radio" name="mp3_option" id="radio-choice-2" value="song-2.mp3" />
<label for="radio-choice-2">MP3 2</label>
<input type="radio" name="mp3_option" id="radio-choice-3" value="song-3.mp3" />
<label for="radio-choice-3">MP3 3</label>
<input type="radio" name="mp3_option" id="radio-choice-4" value="song-4.mp3" />
<label for="radio-choice-4">MP3 4</label>
</fieldset>
</div>
Play
</div>
</div>