I am working in .NET, VB Razor MVC4 with JQueryMobile.
My issue is in trying to get the #Html.RadioButtonFor to generate properly formatted HTML to get picked up by the JQuery Mobile.
This code:
#For Each fqi In Model.Options
#<label for="#fqi.Id">#fqi.Text</label>
#<input type="radio" name="#fqi.Name" id="#fqi.Id" value="#fqi.Value" checked="#fqi.Checked"/>
Next
Generates:
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-left ui-btn-up-d" for="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Yes</span>
</span>
</label>
<input id="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="Yes" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-right ui-controlgroup-last ui-btn-up-d" for="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">No</span>
</span>
</label>
<input id="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="No" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
But I cant get this code right:
#For Each fqi In Model.Options
#Html.LabelFor(Function(m) m.CurrentValue, fqi.Text)
#Html.RadioButtonFor(Function(m) m.CurrentValue, New with {.value = fqi.Value, .name=fqi.Name, .checked=fqi.Checked})
Next
It is rendering as:
<div class="ui-radio">
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-input-text ui-corner-left ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">
<span class="ui-btn-inner">
</span>
</span>
</label>
<label class="ui-btn ui-radio-off ui-input-text ui-corner-right ui-controlgroup-last ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
</span>
</span>
</label>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = No, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = Yes, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
Related
I am trying out Bootstrap 5 and am having difficulty lining up my checkboxes and their labels. The code is:
<div class="row col-lg-3 col-md-2 col-sm-2 col-xs-6">
<label class="col-lg-12 col-md-12 col-sm-12 col-xs-12" for="state"><b>Branch</b></label>
<div class="form-check">
<div class="checkbox">
<label>ACT</label>
<input type="checkbox" value="" id="act" name="state[]">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="nsw" name="state[]">NSW</label>
</div>
<div class="checkbox">
<input type="checkbox" value="" id="nt" name="state[]">
<label>NT</label>
</div>
<div class="checkbox">
<label class="pull-right"><input type="checkbox" value="" id="qld" name="state[]">QLD</label>
</div>
<div class="checkbox">
<label class="pull-left"><input type="checkbox" value="" id="sa" name="state[]">SA</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="tas" name="state[]">TAS</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="vic" name="state[]">VIC</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="" id="wa" name="state[]">WA</label>
</div>
</div>
</div>
And the result is:
As you can see I have tried three variations.
From the edited first answer - this results:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<label class="col-lg-12 col-md-12 col-sm-12 col-xs-12" for="state"><b>Branch</b></label>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="act" name="state[]">
<label class="form-check-label">ACT</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="nsw" name="state[]">
<label class="form-check-label">NSW</label>
</div>
</div>
</div>
</div>
Gives:
I have tried adding:
.big-checkbox {
width: 30px;
height: 30px;
}
This just increases the height of the check (it is still long).
The "custom check" html composition is changed in Bootstrap 5. Now each checkbox should look the follows (along with parent containers):
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-2 col-sm-2 col-xs-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="act" name="state[]" />
<label class="form-check-label" for="act">ACT</label>
</div>
</div>
</div>
</div>
Bootstrap 5 Check CodePen
#model IEnumerable<WIMMPortalServer.BAL.DTO.GlobalCodeDTO>
#foreach (var item in Model)
{
if (#item.GlobalCodeCategoryValue == "115")
{
<div class="form-group">
#*<h6 >PICTURE FORMAT:</h6>*#
<h6>#item.GlobalCodeCategoryName</h6>
<div class="checkboxs round">
<div class="element">
<label id="lblcolor">
#*COLOR*#
#item.GlobalCodeName
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>
#*<div class="element dark">
<label id="lblbw">
COLOR + B/W
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
#*<div class="element">
<label id="lblwhite">
BLACK & WHITE
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
</div>
</div>
}
}
I want to use where condition with foreach loop instead of if condition but unable to do that. Kindly help me with the solution as I am stuck at this point.
You can use where in Model as
#foreach (var item in Model.Where(c=>c.GlobalCodeCategoryValue == "115"))
{
<div class="form-group">
#*<h6 >PICTURE FORMAT:</h6>*#
<h6>#item.GlobalCodeCategoryName</h6>
<div class="checkboxs round">
<div class="element">
<label id="lblcolor">
#*COLOR*#
#item.GlobalCodeName
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>
#*<div class="element dark">
<label id="lblbw">
COLOR + B/W
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
#*<div class="element">
<label id="lblwhite">
BLACK & WHITE
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
</div>
</div>
}
i'm using rails amp and setting my amp route for contact form
<form id='contactusform' method="POST" class="p2" action-xhr = "<%= addquery_path %>" custom-validation-reporting="as-you-go" target="_top">
<%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="as-you-go-name" pattern="p{L}+\s\p{L}+" class="inline-label-input input-item" name='name' value="" required />
<span class="inline-label-label">Name</span>
</label>
<div class="validation-blk">
<span visible-when-invalid="valueMissing" validation-for="as-you-go-name">Please enter your first name</span>
<span visible-when-invalid="patternMismatch" validation-for="as-you-go-name">Please enter characters only</span>
</div>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="email" id="as-you-go-email" class="inline-label-input input-item" value="" name='email' required />
<span class="inline-label-label">Email</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="as-you-go-email">Please enter your email address</span>
<span visible-when-invalid="typeMismatch" validation-for="as-you-go-email"></span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="number" id="phone-number" name='phone' class="inline-label-input input-item" value="" required />
<span class="inline-label-label">contatct number</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="phone-number">Please enter your phone number</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Cityname" name='city' pattern="\w+\s\w+" class="inline-label-input input-item" value="" required />
<span class="inline-label-label">City</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Cityname">Please enter your City</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Statename" pattern="\w+\s\w+" class="inline-label-input input-item" name='state 'value="" required />
<span class="inline-label-label">State</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Statename">Please enter your State</span>
</div>
</div>
<div class="form-row">
<div class="inline-form">
<label class="inline-label">
<input type="text" id="Country" pattern="\w+\s\w+" class="inline-label-input input-item" name='country' value="" required />
<span class="inline-label-label">Country</span>
</label>
<span visible-when-invalid="valueMissing" validation-for="Country">Please enter your Country</span>
</div>
</div>
<div class="form-row">
<div class="inline-form selectionbox">
<label class="inline-label">
<select class="select-box custom-select" required name="eventtype"
id="eventtype">
<option value="">QUERY TYPE</option>
<% #app_config.event_type.split('|').each do |event_name,index| %>
<option value="<%= event_name %>"><%= event_name %></option>
<% end %>
</select>
</label>
<span visible-when-invalid="valueMissing" validation-for="eventtype">selectoption message appears like this</span>
</div>
</div>
<div class="form-row">
<div class="ampstart-input inline-block relative">
<textarea name="message" id="message" class="block" rows="5" cols="50" required placeholder="your message"></textarea>
<!-- <label class="textarea-ab" aria-hidden="true">
Your message
</label> -->
<span visible-when-invalid="valueMissing" validation-for="message"></span>
</div>
</div>
<div class="button button-common">
<input type="submit" value="OK" class="ampstart-btn caps">
</div>
<!-- social icons -->
<div submit-success>
<template type="amp-mustache">
Subscription successful!
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Subscription failed!
</template>
</div>
</form>
And my controller saves the form in my database, but the browser throws an error.
def addquery
#contact = Lead.new
#contact.name = params[:name]
#contact.email = params[:email]
#contact.phone = params[:phone]
#contact.city = params[:city]
#contact.state = params[:state]
#contact.country = params[:country]
#contact.enquiry_type = params[:eventtype]
#contact.message = params[:message]
#contact.save
end
when i try to submit my AMP form it showing
amp form error request must have access-control-allow-origin
in my browser console.
as well as the
response must have access-control-allow-origin
Set access-control-allow-origin: <your domain> as a response header in the form handler in rails.
Example, if you are running on localhost set form response header as access-control-allow-origin: http://localhost:3000
I have a model BOOK that will insert the book details through angularjs controller
Here is my view:
<h1 align="center">Books</h1>
<div ng-controller="BooksCtrl" class="container">
<div class="row-fluid">
<div class="col-md-6">
<form ng-submit="addBook()" class="loginform cf">
<input type="text" ng-model="newBook.title" placeholder="Title of the Book" required>
<input type="text" ng-model="newBook.isbn" placeholder="ISBN Number of Book" required>
<input type="file" ng-model="newBook.book_link">
<input type="text" ng-model="newBook.edition" placeholder="Edition of the book" required>
<input type="text" ng-model="newBook.publication_id" placeholder="Select the publication ID" required>
<input type="submit" value="Add Book">
</form>
<div ng-show="editorEnabled" class="loginform cf">
<form ng-submit="update()">
<input type=text ng-model="editableBook.title" ng-show="editorEnabled" required>
<input type=text ng-model="editableBook.body" ng-show="editorEnabled" required>
<input type="submit" value="Update" class='btn'>
close
</form>
</div>
<div ng-show="selectedBook" class="loginform cf">
<h2>{{selectedBook.title}}</h2>
<p>{{selectedBook.body}}</p>
</div>
</div>
<div class="col-md-6">
<ul style="list-style-type: none;">
<li ng-repeat="book in books" class="loginform cf" >
<div>
<div>{{book.title}}</div>
<a href="">
<img src="{{book.book_link.thumb.url}}"/>
</a>
<button href="#" ng-click="showBook(book)" class="btn">Show</button>
<button href="#" ng-click="enableEditor(book)" class="btn">edit</button>
<br>
</div>
</li>
</ul>
</div>
</div>
</div>
My angularjs Controller function is:
book = Book.save($scope.newBook, function(data,headers) {
console.log(book);
$scope.books.push(book);
}, function(data,headers) {
// do the error case
console.log(data);
if (data.status == 422)
{
alert("validation is failed book should be unique");
}
});
The problem is that it is storing all the details except the book pdf upload. It is not passing even the name. How can I solve this? Any Suggestions would be appreciated.
IS there a way to display collapsible menus inline like the way you can make buttons inline
<div data-role="collapsible" data-collapsed="true" data-inline="true">
<h3>Sorting Options</h3>
<div data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-inline="true">
<h3 >Search Options</h3>
<div data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div>
Does anybody know how to make both collapsible buttons show up inline next to each other?
I tried putting data-inline="true" in various places but it does nothing.
MY WORKAROUND SOLUTION
I ended up doing this instead so that buttons show up inline but the menus would show up below both of the buttons. The buttons don't have the +/- change when you click on them but that wasn't as important as having the menus show up in proper place.
$("#showfilteroptions").live('click',function(event) {
$("#searchoptions").hide();
$("#filteroptions").toggle();
});
$("#showsearchoptions").live('click',function(event) {
$("#filteroptions").hide();
$("#searchoptions").toggle();
});
<div data-role="controlgroup" data-type="horizontal" style="text-align: center">
<a href="#" data-role="button" data-icon="plus" data-theme="b" id="showfilteroptions" >Filter</a>
<a href="#" data-role="button" data-icon="plus" data-theme="b" id="showsearchoptions" >Categories</a>
</div>
<div data-role="fieldcontain" id="filteroptions" style="display:none;">
<fieldset data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")' />
<label for="datePosted">Added</label>
<input type="radio" data-theme="c" name="radio-choice-1" id="size" value="1" onchange='_search.sort("size")' />
<label for="size">Size</label>
</fieldset>
</div>
<div data-role="fieldcontain" id="searchoptions" style="display:none;">
<fieldset data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="all" value="1" onchange='_search.searchCategory(-1)'/>
<label for="all">All</label>
<input type="radio" data-theme="c" name="radio-choice-1" id="oldshows" value="1" onchange='_search.searchCategory(5)'/>
<label for="oldshows">Old Shows</label>
<input type="radio" data-theme="c" name="radio-choice-1" id="newShows" value="1" onchange='_search.searchCategory(7)'/>
<label for="newshows">New Shows</label>
</fieldset>
</div>
Thanks
You could use a grid layout with custom styling:
http://jsfiddle.net/phillpafford/h2kcH/11/ (Working Example)
Inline CSS (will need to play around with this to get the desired look you want):
style="padding-left:5%; width:45%;"
HTML:
<div data-role="page" id="home">
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-left:5%; width:45%;">
<div data-role="collapsible" data-collapsed="true" data-inline="true">
<h3>Sorting Options</h3>
<div data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div>
</div>
<div class="ui-block-b" style="padding-left:5%; width:45%;">
<div data-role="collapsible" data-collapsed="true" data-inline="true">
<h3 >Search Options</h3>
<div data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-2" id="datePosted2" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted2">Added</label>
</div>
</div>
</div>
</div>
</div>
</div>
float:left is your answer. Apply it OUTSIDE the collapsibles. Here is a Fiddle:
http://jsfiddle.net/den232/LDpGe/
Good luck!
.floatleft {
float:left;
}
.floatright {
float:right;
}
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */
display:inline !important;
}
.textwidth { /* limit width of input fields */
width:80px;
}
.closespacing { /* controls spacing between elements */
margin:0px 5px 0px 0px;
}
.bigselect { /* centers select with big buttons */
padding: 0px;
margin:2px 5px 0px 0px;
}
.biginputheight { /* matches text input height to big buttons */
padding-top:10px !important;
padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
padding-top:5px !important;
padding-bottom:5px !important;
}
<div data-role="page" class="type-home">
<div data-role="content">
<ul data-role="listview">
<li data-role="fieldcontain">first LI line</li>
<li data-role="fieldcontain">
<div class='floatleft closespacing'>
<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>
<h3>Sorting Options</h3>
<div data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-inline="true" class='floatleft closespacing'>
<h3 >Search Options</h3>
<div data-role="controlgroup" >
<input type="radio" data-theme="c" name="radio-choice-1" id="datePosted" value="1" onchange='_search.sort("datePosted")'/>
<label for="datePosted">Added</label>
</div>
</div></div>
</li>
<li data-role="fieldcontain">last LI line</li>
</ul><!-- /listview -->
</div>
</div>