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

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')})

Related

Prevent user from submit button click

I have got one Kendo UI dropdown box and combobox both are cascading and loading items from DB... and then few more textbox controls and then submit button also....
I made required validation for two textboxes and dropdownList and we can edit items that we are selected in combobox(we can remove also). Some times user clicks the submit button with out properly loading the items in Combobox then I am getting error like Required validation error ....
Is there any way to prevent the user from button click until the all the controls are fully loaded ...
I tried two ways ..
Approach 1 : i have put button property as hidden and then in combobox Databound event made visible the button ... But this approach didn't work..
Approach 2 :
I have tried the suggestions given in this link
$("#submit").prop("disabled", false)
this approach didn't worked for me..
Is there any other approach to prevent user from clicking the submit button until all controls are loaded...
Many thanks in advance...
You can do this:
<input type='submit' id='submit' value='submit' disabled />
<!--disable the button on default-->
and add this js:
$(window).load(function(){
$("#submit").prop("disabled", false); // enable it when page loaded.
});
this solution requires jquery.
On some projects i've used the css visibility property to hide show elements at appropriate times:
http://www.w3schools.com/css/css_display_visibility.asp
This might be what you want.
A display:none style until validation doesn't work for you?
$("#submit").css("display", none)
or
$("#submit").hide()

How to make IE recognise this .change in jquery

I'm writing a jquery/javascript application. Part of what I need is a file input, which I need to look the same across Firefox, Chrome, and (ugh) IE. What I've done is made the file input hidden and placed a text box on top of it. Then, I use jquery .click to make clicking the text box have the same effect as clicking the file input, and I use .change to make the contents of the file input show up in the text box. Works fine in Firefox and Chrome, but the horrible horrible people at Microsoft want to ruin my day.
If anybody has the solution, I would be oh so grateful. Thanks in advance!
<input type="text" id="fakefile">
<input type="file" id="realfile">
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').change(function(){
$('#fakefile').val($('#realfile').val());
});
});
It's not possible, you can do some hackyness and add a label to the file input and trigger the click on the label not the input but as soon as you try to submit the form it will simply fail in IE.
The way I solved the problem was to turn the file input opacity to 0 and absolutely position it over the styled element I want the user to think they are clicking. This way they are in fact clicking the file input even though it appears they are clicking my styled element.
Check this:
$(document).ready(function(){
$('#fakefile').click(function(){
$('#realfile').click();
});
$('#realfile').bind("change click", function(){
$('#fakefile').val($('#realfile').val());
});
});
jsfiddle: http://jsfiddle.net/deAf6/

styling loaded content jquerymobile

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')

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