Having a bizarre issue that I'm hoping people can shed some like on.
When I've been making forms with check boxes and radio buttons in my jQuery Mobile MVC 4 project, if I use Razor syntax to spit out the controls according to the view model e.g. #Html.RadioButtonFor etc instead of just writing the standard input type="radio", jQuery Mobile doesn't apply the styles to the elements. Screen shots and code differences included. Is this something to do with the way the controls are being rendered? Happens in both Views and Partial Views.
I have changed just the first set of radio buttons here to demonstrate the point. If I change the whole form to Razor HTML helpers, I would get the same across all of the controls.
Non-Razor:
Razor:
Non-Razor code:
<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
<legend></legend>
<input type="radio" data-theme="b" name="Period" id="Daily" value="Daily" checked="checked" />
<label for="Daily">Daily</label>
<input type="radio" data-theme="b" name="Period" id="Weekly" value="Weekly" />
<label for="Weekly">Weekly</label>
<input type="radio" data-theme="b" name="Period" id="Monthly" value="Monthly" />
<label for="Monthly">Monthly</label>
</fieldset>
Razor code:
<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
<legend></legend>
#Html.LabelFor(x=>x.Period, "Daily")
#Html.RadioButtonFor(x => x.Period, "Daily", new { data_theme = "b", #Checked = "checked", id = "Daily" })
#Html.LabelFor(x=>x.Period, "Weekly")
#Html.RadioButtonFor(x => x.Period, "Weekly", new { data_theme = "b", #Checked = "checked", id = "Weekly" })
#Html.LabelFor(x=>x.Period, "Monthly")
#Html.RadioButtonFor(x => x.Period, "Monthly", new { data_theme = "b", #Checked = "checked", id = "Monthly" })
</fieldset>
Is the razor html being generated after the jquery mobile scripts have run over the page?
Anybody with any helpful ideas/or indeed anyone who can spot any stupid mistakes would be a hero!
Many thanks,
Christian
I'm not too familiar with jquerymobile, but the on glitch i can see here, is that for the html code you have labels that look like this:
<label for="Daily">Daily</label>
while the razor code will output the labels like this:
<label for="Period">Daily</label>
The "for" attribute is wrong for your sceanrio in the razor code, maybe jquery mobile is sensitive to that?
Related
I am trying to implement a checkbox that has a clickable label with the Html.CheckboxFor syntax. However, I am running into an issue where my checkbox is not allowing me to click it to toggle its state and is not being set properly when the page is loaded even thought the checked attribute is correct.
From what I have been reading, it seems that this is do to the extra hidden input field that gets generated to pass back false values to the controller on a form submittal. However, I still need to figure out a way around this and I feel like I am not the first one to be looking for a solution.
Here is my HTML:
<div class="form-check">
#Html.CheckBoxFor(x => x.ProfilePublicViewable, new { #class = "form-check-input", #id = "val1", #value = "val1", #checked = "checked" })
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
And here is what gets rendered to the DOM:
<div class="form-check">
<input checked="checked" class="form-check-input" id="val1" name="val1" type="checkbox" value="val1">
<input name="ProfilePublicViewable" type="hidden" value="false">
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
I have been looking around for examples on how to achieve this design, but seem to be coming up empty handed. Does anyone have any ideas as to where i am going wrong?
I am trying lots of time to change class and inline styles too.
but not getting any change.
This is my html code (what i want to modify my checkbox):
<div class="checkbox-custom checkbox-primary mb5">
<input type="checkbox" id="checkboxExample1">
<label for="checkboxExample1"></label>
</div>
This is my Razor Syntax:
#Html.CheckBoxFor(m =>m.isNewlyEnrolled, new {#style="width:25px; height:25px;", #class = "checkbox-custom checkbox-primary mb5", id="checkboxExample1"})
Does anyone know what is the proper CSS selector for selected (:checked) AngularUI's radio button? I tried "checked", "selected", "active", but none of this does the work. I need to find a similar selector as :checked for HTML radio button.
Every useful answer / JSFiddle is highly appreciated and evaluated.
Thank you.
If it's styling you're after then use ng-class bound to the ng-model:
<input type="checkbox" ng-model='stuff' ng-class='{class1: stuff, class2: !stuff}'>
and add css rules for classes class1 and class2
Since you are using angularjs,instead of using jquery selectors like :checked or :active,you can just use the angularjs functionalities to detect the active checkbox.
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-click="yourFunction()" ng-model="formData.favoriteColors.red"> Red
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
</label>
<label class="checkbox-inline">
<input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
</label>
</div>
cosider this as your checkboxes,now in your js (ie)your controller
var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
// we will store our form data in this object
$scope.formData = {};
$scope.yourFunction = function() {
/**function to call when a checkbox with model formdata.favourite colors.red is selected **/
};
});
Notice I have include functions for only one checkbox.You can do it for each of these check boxes
You might find this fiddle useful
http://jsfiddle.net/ShinyMetilda/C9V39/
Also this example in the documentation will be usefull
https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
Like i've said in the question... Is there a way to click the checkbox and that link will change to http://youtu.be/kffacxfA7G4?
Example of code:
<div class="embed-code">
<textarea rows="" cols="">http://www.youtube.com/watch?v=kffacxfA7G4</textarea>
<label>
<input type="checkbox" />
Short URL</label>
</div>
I am thinking this can be done with javascript/jquery...
Is anybody using this? Thanks in advance...
EDIT :
I've managed to do it like this: http://jsfiddle.net/tpLfS/
$('#myCheckBox').click(function(){ var myLink = $('#myTextarea');
if ($('#myCheckBox:checked').val() !== undefined){ //checked
myLink.val(myLink.val().replace('http://www.youtube.com/watch?v=kffacxfA7G4','http://youtu.be/kffacxfA7G4'));}
else { //not checked
myLink.val(myLink.val().replace('http://youtu.be/kffacxfA7G4','http://www.youtube.com/watch?v=kffacxfA7G4'));}
})
Can it be done easily?
In query its pretty simple: first you need to give your checkbox and textarea an id:
<textarea rows="" cols="" id="myTextarea">...</textarea>
<input id="myCheckBox" type="checkbox" />
then you add the javascript part (in my example with jQuery):
Im not sure how you want to change it. I think you just want to remove the "watch?v="
$('#myCheckBox').click(function(){
var myLink = $('#myTextarea');
myLink.val(myLink.val().replace('watch?v=',''));
})
Example: http://jsfiddle.net/E3f9M/
I am writing a website and I am currently working on the sign up page. I have a drop down box and I want to have that drop down box open different sign up information for each one. For example: If they picked prime user it would change the sign up information they needed from just username and password to username, password, credit card number, and telephone number . OR if they picked partial user from the drop down list it would ask for username password and telephone. Any clue how to do this in HTML or any other computer language?
Assuming html like this:
Type:<br>
one <input type="radio" name="type" id="type-1" value="1" /><br>
two <input type="radio" name="type" id="type-2" value="2" />
<hr>
<form action="." METHOD="POST">
<input class="second" type="text" name="name" id="name" value="name" />
<input class="second" type="text" name="email" id="email" value="email" />
<input class="second" type="text" name="credit-card" id="credit-card" value="credit card" />
</form>
And css like this: (to hide all the form fields except for type choice)
.second{
display:none
}
You can use jQuery javascript library to show/hide the required form fields dynamically like this:
// when type radio button is pressed
$('#type-1,#type-2').change(function(){
// hide all form fields
$('.second').hide()
// if type is 1
if($('#type-1:checked').length){
// show name and email fields
$('#name,#email').show()
// else if type is 2
}else if($('#type-2:checked').length){
// show name, email and credit-card fields
$('#name,#email,#credit-card').show()
}
})
This is demonstrated here: http://jsfiddle.net/rBvLA/
The result must be processed by server side script using any language you choose.
You might want to look into any of the many fine server side tools available, such as asp.net, php, etc... you could also use javascript.
For instance, using JavaScript, you could have an event fire when they change the drop down and in the code for that event handler, you could modify the DOM in such a way as to display the appropriate form elements for each selection.
another jQuery solution:
Live Demo
$('#reg_type input[type=radio]').change(function() {
var type = $(this).attr('class');
$('#reg_fields div').each(function() {
if ($(this).hasClass(type)) {
$(this).show().removeAttr('disabled');
} else {
$(this).hide().attr('disabled','disabled');
}
});
});