Does anyone know why, in this example, the click event is not being fired only in IE8? Basically, the css style after a click (.zui-act) should change the background-color of the label.
JSFIDDLE
<div style="width:300px;">
<input type="radio" name="a" id="a" value="alpha" />
<label for="a">Alpha</label>
<input type="radio" name="a" id="b" value="bravo" />
<label for="b">Bravo</label>
<input type="radio" name="a" id="c" value="charly" />
<label for="c">Charly</label>
</div>
$.radio = function(e) {
var a = $('input:radio').filter(function(index) { return $(this).attr('name')==e });
a.hide();
a.siblings('label').addClass('zui-btn');
a.click(function(){
var f = $(this).attr('id');
$('label').removeClass('zui-act').filter(function(index) {
return $(this).attr('for')==f
}).addClass('zui-act');
});
}
$(document).ready(function(e) {
$.radio('a');
});
My only guess is that IE8 won't trigger events on hidden elements. Makes sense I suppose. You could adopt the approach taken by jQuery UI buttonset and move the radio buttons off the screen. Like so:
.zui-radio {
position:absolute;
left:-9999px;
}
then add this to your $.radio method in place of a.hide():
a.addClass('zui-radio');
Change the click event to change and it should work. You are most likely running in compatibility mode which has a bug in it.
And why use filter when you can make the selector handle the name?
var myName = "a";
var myRadios = $('input[name="' + myName +'"]');
Related
I have created a custom template for a task using this example:
http://docs.telerik.com/kendo-ui/api/javascript/ui/gantt#configuration-editable.template
<script id="editor" type="text/x-kendo-template">
<h3>Edit meeting</h3>
<p><label>Title: <input name="title" /></label></p>
<p><label>Start: <input data-role="datetimepicker" name="start" /></label></p>
<p><label>End: <input data-role="datetimepicker" name="end" /></label></p>
</script>
Now I need to add a 'Resources - Assign' button, just like the one in this example (Edit Task Form):
http://demos.telerik.com/kendo-ui/gantt/resources
What do I need to do to create this button? I can't find any API documentation for this part of the Gantt control.
There are a few steps needed to accomplish this.
First, add something like this to your Kendo template:
<div>
<label for='resources'>Resources:</label>
<div class='k-gantt-resources' style='display: none;'>
</div>
<div class='k-edit-field' data-container-for='resources'>
<a class='k-button' href='\\#'>Assign</a>
</div>
</div>
Next, you'll want to add the following two event handlers to the options when you initialize the widget:
edit: editHandler,
save: saveHandler
Finally, you'll want to create the two handlers referenced above. You are basically intercepting the default functionality and opening the popup yourself, then saving the results when complete (if they were modified).
var resoucesdEdited = false;
function editHandler(e)
{
var gantt = e.sender;
resoucesdEdited = false;
if (e.task)
{
e.container.on('click', 'div[data-container-for="resources"] > a', function (event)
{
event.preventDefault();
resoucesdEdited = true;
gantt._createResourceEditor(e.container.find('div.k-gantt-resources'), e.task);
});
}
}
function saveHandler(e)
{
if (e.task && resoucesdEdited)
{
this._updateAssignments(e.task.get("id"), e.task.get(this.resources.field));
}
}
I'm glad you asked this question because it's something I needed to know too, and you're right, the Telerik/Kendo documentation doesn't mention anything on how to do this!
I have some problem.
This is HTML document.
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked'/>
<label for='ev_1'>
<button class='ui-btn custom-btn' id='issue'>On</button>
</label>
This is javascript.
$("#issue").click(function(event){
alert("!");
}
I think that alert("!"); is occur when I click button.
But, not effect....
I want to show alert("!");
I need your help.
As Omar mentioned, your button should be outside the label and your input checkbox can be inside the label:
<label for='ev_1'>
<input class="input" type='checkbox' id='ev_1' name='ev_1' checked='checked' />On
</label>
<button class='ui-btn custom-btn' id='issue'>On</button>
Then you can have event handlers defined in the jQM pagecreate handler. To handle the checkbox, use a change event handler, and for the button a click handler:
$(document).on("pagecreate", "#page1", function () {
$("#issue").on("click", function (event) {
alert("Button Click");
});
$("#ev_1").on("change", function (event) {
alert("Checkbox Change");
});
});
Here is a working DEMO
I have the following code and would like to hide the label:
<div>
<input type="checkbox" data-filter-value="17_72" class="attrib filterselector unav_option" name="filter[17]" id="filter_17_72" value="72" disabled="">
<label class="optionvalue" for="filter_17_72"> Some Text</label> </div>
There are several of these in my code and I'd like to have all the labels hidden where their input has the state disabled=""
Any help would be fantastic.
You can use jQuery to achieve this. So it can be something like this
$(function () {
if ($('input[type=checkbox]').prop('disabled')) {
var hide = $('label').hide();
}
});
Jsfiddle
I didn't get managed via JS so I tried via CSS and it works:
#filterForm input.unav_option + label {display:none !important;}
I am using ASP.net for a program with a number of check boxes and a submit button which initiates an action depending on the selected check boxes.
However, one of my check boxes should behave as this submit button, i.e, upon selecting/deselecting this check box, the same action as the button must be triggered. Can someone please help me in doing this (or perhaps direct me to a tutorial)
I have a controller class and model.
Thanks you
EDIT
The program look like:
#using(Html.BeginForm("controllername", FormMethod.Get)) {
#html.CheckBox("check1");
#HTMl.Checkbos("check2");
<input type="submit" value="Submit" />
}
Everything else is pretty much handled in the controller.
You can use javascript to listen to the check event of your check box and then invoke the form submit.
Assuming your markup of view is like this
<form id="yourFormId" action="user/post">
<input type="checkbox" class="optionChk" value="1" /> One
<input type="checkbox" class="optionChk" value="2" /> Two
<input type="checkbox" class="optionChk" value="3" /> Three
</form>
<script type="text/javascript">
$(function(){
$(".optionChk").click(function(){
var item=$(this);
if(item.val()=="2") //check your condition here
{
item.closest("form").submit();
}
});
});
</script>
EDIT : As per the question edit.
Change the CheckBox Helper method usage like the below to add a css class to the checkbox so that we can use that for the jQuery selection.
#Html.CheckBox("check1",new { #class="optionChk"})
imagining you have something like this:
#using(Html.BeginForm()) {
<label class="checkbox">
<input type="checkbox" name="chb_a" id="chb_a"> Option A
</label>
<label class="checkbox">
<input type="checkbox" name="chb_b" id="chb_b"> Option B
</label>
<label class="checkbox">
<input type="checkbox" name="chb_c" id="chb_c"> Option C
</label>
<label class="checkbox">
<input type="checkbox" name="chb_d" id="chb_d"> Option D
</label>
<button type="submit" class="btn">Submit</button>
}
you can write a simple jQuery to complement:
$(".submit").click(function() {
// find the <form> the element belongs and submit it
$(this).closest('form').submit();
});
and with this, all you need is to add a class named submit to any checkbox or more buttons if you want them to submit
for example:
<label class="checkbox">
<input type="checkbox" name="chb_e" id="chb_e" class="submit"> Option E
</label>
You can bind the click events on the checkboxes.
$( '.myCheckboxes' ).click(function () {
var clickedBox = $( this );
// now do something based on the clicked box...
});
If you need to know which checkboxes are checked, that's just another selector.
$( '.myCheckboxes:checked' ).each(function () {
// Now you have access to each checked box.
// Maybe you want to grab their values.
});
Just bind the checkbox to a click event. Assuming you have a way of uniquely identifying the checkbox that submits the form.
$( '#formSubmitCheckbox' ).click(function() {
$( '#myForm' ).submit();
});
I have created an iframe-based plugin for CKEDitor using CKEDITOR.dialog.addIframe and want the user to select a radio value, which will be returned to the editor. I am using the code below to try and return the value.
<form name="form1">
<label><input type="radio" name="field_name" value="[value one]" id="field_name_0" onclick="return get_radio_value()" />value one</label><br />
<label><input type="radio" name="field_name" value="[value two]" id="field_name_1" onclick="return get_radio_value()" />value two</label><br />
<label><input type="radio" name="field_name" value="[value three]" id="field_name_2" onclick="return get_radio_value()" />value three</label><br />
</form>
<script language="javascript">
function get_radio_value()
{
for (var i=0; i < document.form1.field_name.length; i++)
{
if (document.form1.field_name[i].checked)
{
var rad_val = document.form1.field_name[i].value;
//alert(rad_val); //this works using onclick
}
}
}
var CKEDITOR = window.parent.CKEDITOR;
var okListener = function(ev) {
this._.editor.insertHtml('<div class="custom_form">'+rad_val+'</div>');
CKEDITOR.dialog.getCurrent().removeListener("ok", okListener);
};
CKEDITOR.dialog.getCurrent().on("ok", okListener);
</script>
I also tried the simple:
var form_value = document.form1.field_name.value;
this._.editor.insertHtml('<div class="custom_form">'+form_value+'</div>');
but this returned "undefined"
Any help or ideas would be appreciated?
Note: Form field values are dynamically created via PHP and fed from a MySQL database.