styling loaded content jquerymobile - javascript

i am working on asp.net page with jquery mobile 1.3 I am generating asp.net checkbox and label controls using vb. then i am using java script to converting the asp label to label. all the code looks fine but my control not being style (jquerymobile). so after my page load and java script that what i get.
<input id="ContentPlaceHolder1_chkbox2" type="checkbox"name="ctl00$ContentPlaceHolder1$chkbox2">
<label for="ContentPlaceHolder1_chkbox2">YES</label>
but not styled as jquery mobile check boxes how can i style the dynamic controls.
I tried:
$('#page1').trigger('create');`
$('#page1').page();
nothing work. please help Thanks


Updated answer
To change text of type=checkbox or type=radio:
$('label[for=name]').find('span.ui-btn-text').text('New Text');
Demo includes:
Change text
Add/create new checkbox, using .checkboxradio().trigger('create');
Dynamically 'Check/Uncheck' checkbox, using .prop('check', true); and .checkboxradio('refresh);
Refresh checkbox or radio buttons this way
$('[type=checkbox]').checkboxradio('refresh')

Related

Disable click on a asp control texbox from an external JS file

I have an asp textbox control,which is set as a timepicker using Jquery.I need to disable click on a timepicker.What i have tried is
$('#texbox1").attr("disabled", "disabled");
But this is disabling the field but some time is not updated properly.
Also tried using Css
pointer-events: none;
But not working on IE.
Also tried using
$('#textbox1').prop("readonly", true);
but timepicker is not being disabled.

Try this
$('#textbox1').timepicker().on('click',function(e){$('.bootstrap-timepicker-widget').css('display','none')})
or you can try with your text box only
$('#textbox1').on('click',function(){$('.bootstrap-timepicker-widget').css('display','none')})

How to change check icon by cross icon using iCheck js plugin on checkboxes?

I'm using iCheck js plugin to show my checkboxes. I want to change the icon showed when I check it. Instead of a red check icon, I want to show red cross icon.
My code is this:
JS
$('.inputiCheck').iCheck({
checkboxClass: 'icheckbox_minimal-red',
});
HTML
<input type="checkbox" class="inputiCheck">
Thank you so much!

Javascript focus does not work on dynamically loaded input box

I have a HTML markup in a template which has input element. I load it via Ajax call and put in existing html using jQuery's $(selector).html(response).
Basically it is a pop up box which loads from template. After loading pop up box I want to set focus on input box. I've written this code :
$("#prescribe-input").focus() after content is appended in existing HTML but it does not work. I tried doing it in traditional javascript way too document.getElementById("prescribe-input").focus()
Both do not work. For testing purpose I tried creating sample input box in Index.html of an app and set focus. it works perfectly. The problem is when I load html from template using $().html() it does not work.
Any way to focus it properly?
I know the code is very less here but the question is self explanatory I believe.

if you are using jquery then you can use .on() on dynamically generated elements
$("#prescribe-input").on( "focus", function() {
//do what ever you want
});

You should do this in the callback function:
$(selector).html(response, function(){
$("#prescribe-input").focus();
})

Remove Chrome Autofill text onclick with Javascript or JQuery

I'm having trouble removing the text that is generated by Chrome autofill with JQuery. Thus far I have been doing this.
$(document).ready(function () {
$(".link").click(function () {
$("#textbox").val("");
return false;
});
This removes the text just fine except if it was auto fill text. I would like to be able to remove this text without disabling autocomplete altogether i.e. I don't want to use autocomplete="off."
Right now I'm using JQuery but I'm not opposed to just using plain Javascript instead.
P.S. These text boxes are ASP.NET MVC3 Html.TextBoxFor's. I don't know if that makes a difference.

Perhaps you can use the autocomplete="off" attribute on elements or on the form itself. Related question here Is there a W3C valid way to disable autocomplete in a HTML form?

Selecting readOnly textboxes with JQuery

In my ASP.NET MVC project i need to select all text boxes that have attributed "readOnly" in current page and show modal Jquery dialog in keypress on the disabled text box.Any help appreciated.

Have you tried anything yet?..
Just to select the elements and apply a method to the keypress you could do the following:
$(":text[readonly]").keypress(function() { /*do your magic*/ });

Categories