I am trying to create a AppBuilder app and got stuck with a radio button group for a form. The example in http://demos.telerik.com/kendo-ui/mobile/forms/checkboxes.html shows listview. However since my form itself is a listview, the listview of radio buttons nested withint the form listview is not working. Is there any way that I can show the radio buttons?
Hi the following code might help you out
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css">
</head>
<body>
<div id="forms" data-role="view" data-title="Form Elements" data-init="initForm" data-use-native-scrolling="true">
<form action="./index.html">
<ul data-role="listview" data-style="inset">
<li>
<label>Select element
<select>
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
<option value="Fourth Option">Fourth Option</option>
</select>
</label>
</li>
<li>
<label>DropDownList
<select id="dropdown">
<option value="First Option">First Option</option>
<option value="Second Option">Second Option</option>
<option value="Third Option">Third Option</option>
<option value="Fourth Option">Fourth Option</option>
<option value="First Option">Fifth Option</option>
<option value="Sixth Option">Sixth Option</option>
</select>
</label>
</li>
<li>
<label>Slider
<input id="slider" type="range" max="100" />
</label>
</li>
<li>
<label>Type text
<input type="text" value="Text" />
</label>
</li>
<li>
<label>
Type password
<input type="password" value="password" />
</label>
</li>
<li>
<label>
Type search
<input type="search" value="search" />
</label>
</li>
<li>
<label>
Type url
<input type="url" value="http://www.telerik.com" />
</label>
</li>
<li>
<label>
Type email
<input type="email" value="kendoui#telerik.com" />
</label>
</li>
<li>
<label>
Type number
<input type="number" value="20" />
</label>
</li>
<li>
<label>
Type tel
<input type="tel" value="+44 22 11 10" />
</label>
</li>
<li>
<label>
Type date
<input type="date" value="2012-03-22" />
</label>
</li>
<li>
<label>
Type time
<input type="time" value="22:30" />
</label>
</li>
<li>
<label>
Type month
<input type="month" value="2012-01" />
</label>
</li>
<li>
<label>
Type datetime-local
<input type="datetime-local" value="2012-03-22T20:15" />
</label>
</li>
<li>
<label>
Textarea
<textarea style="resize: none">Multiline
Text</textarea>
</label>
</li>
<li data-layout="checklayout">
<ul data-role="listview" data-style="inset">
<li>
<label>
<input type="checkbox" checked="checked" />
Lettuce
</label>
</li>
<li>
<label>
<input type="checkbox" />
Carrots
</label>
</li>
<li>
<label>
<input type="checkbox" />
Peas
</label>
</li>
<li>
<label>
<input type="checkbox" />
Bread
</label>
</li>
<li>
<label>
<input type="checkbox" />
Unicorns
</label>
</li>
</ul>
</li>
</ul>
</form>
</div>
<script>
function initForm() {
var body = $(".km-pane");
if (kendo.ui.DropDownList) {
$("#dropdown").kendoDropDownList({
// The options are needed only for the desktop demo, remove them for mobile.
popup: {
appendTo: body
},
animation: {
open: {
effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") || body.hasClass("km-wp") ? "slideIn:up" : "slideIn:down"
}
}
});
}
if (kendo.ui.Slider) {
$("#slider").kendoSlider({
tooltip: {
enabled: false
}
});
}
}
</script>
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
Related
I have some problems with the construction of my portfolio CV someone who understands HTML, CSS and JavaScript could help you thank you for your help.
My doubts are as follows:
My title of my image gallery has disappeared, how do I make the title "My Portfolio" be like in the 2nd file below?
How do I center my source code so that my image gallery is like in the image below (attached)?
I send the source code. And i appreciate you for your help with source code.
https://codepen.io/Quencyjones79/pen/XWYNwxj
index.html
`
<section class="container" id="portfolio">
<div class="main-title">
<h2>My <span>Portfolio</span><span class="bg-text">My Work</span></h2>
</div>
<p class="port-text">
Here is some of my work that I've done in various programming languages.
</p>
<div class="container_images">
<div class="full-view"></div>
<div class="preview-list">
<ul>
<li>
<input type="radio" id="tab-1" name="gallery-group">
<label for="tab-1">
<div class="tab">
<img
src="img/bandacoldplay.jpeg" />
</div>
</label>
<div class="content">
<img
src="img/bandacoldplay.jpeg" />
</div>
</li>
<li>
<input type="radio" id="tab-2" name="gallery-group">
<label for="tab-2">
<div class="tab">
<img
src="img/mascaraNY.jpg" />
</div>
</label>
<div class="content">
<img
src="img/mascaraNY.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-3" name="gallery-group">
<label for="tab-3">
<div class="tab">
<img
src="img/Dutchplan.jpg" />
</div>
</label>
<div class="content">
<img
src="img/Dutchplan.jpg" />
</div>
</li>
<li>
<input type="radio" id="tab-4" name="gallery-group" checked>
<label for="tab-4">
<div class="tab">
<img
src="img/planogeralPonteLima.jpg" />
</div>
</label>
<div class="content">
<img src="img/planogeralPonteLima.jpg" />
</div>
</li>
</ul>
</div>
</div>
</section>
`
(continue in codepen)
am creating a rental house management web app whereby a tenant can only review and rate the house in which they are living in only. so in the view, I want to only show the form for the house when the user is logged in, whereby the user can only review that rental house and they can be able to see the form on any other rental house details page except for the rental house they occupies.
i just want only the user to reviewand rate the house they lives in and on the other house descriptions page they won't be able to see a review form.also a user should only have one review for their house house.I have tried this but it shows the for for other rental houses alsoinstead of hiding them.
this is the function that shows the rental house details
public function singlehsedetails ($rental_slug,$id){
$rentalhouse=Rental_house::with
('housetags','rentalalternateimages','houselocation','hsesusers')->find($id);
if (Auth::check())
{
$userrating=Houseratingreview::where(['user_id'=>Auth::user()->id,'hse_id'=>$rentalhouse->id])->first();
}
return view('Front.Rentalslisting.rentalhsedetails',compact('userrating','rentalhouse'));
this is is my blade file.
#if ($userrating ==null)
#else
<div class="card padding-card">
#auth
<div class="card-body" id="ratingdiv">
<h3 class="card-title mb-4">Rate and Review The House</h3>
<span class="font-weight-bold font-italic text-danger">Note:You Can Only Review and Rate Your The House Once</span>
<form id="rateandreviewhseform" method="POST" class="form-horizontal" action="javascript:void(0);">
#csrf
<input type="hidden" name="houseid" value="{{ $rentalhouse->id }}">
<input type="hidden" name="userid" value="{{ Auth::user()->id }}">
<div class="form-group" style="margin-top: 5px;">
<div class="row">
<div class="col-lg-8 col-md-8">
<label style="font-size: 15px;">Give a Star Rating for the House<span class="text-danger">*</span></label>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-8">
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div>
</div>
</div>
<p id="msg" style="font-size: 17px;"></p>
<br>
<div class="control-group form-group" style="margin-top: 2px;">
<div class="controls">
<label style="font-size: 15px;">Write A Review For The House <span class="text-danger">*</span></label>
<textarea style="border:2px solid black;" name="textreview" rows="10" cols="100" class="form-control" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
#else
<p>To Review and Rate the House Create or Log In to your Account...</p>
<span href="#" data-toggle="modal" data-target="#signupmodal" class="btn btn-success btn-block">Create/Login an Account<i class="fa fa-angle-right"></i></span>
#endauth
</div>
#endif
in my users table i have a column "house_id" that store the house id for the user
this is my ratings and reviews table
public function singlehsedetails ($rental_slug,$id){
$rentalhouse=Rental_house::with
('housetags','rentalalternateimages','houselocation','hsesusers')->find($id);
$userrating=null;
$allowreview=false;
$currentuserlivinginhouse=false;
////check if user is living in the house
if(isset(Auth::user()->house_id) && Auth::user()->house_id==$id){
$currentuserlivinginhouse=true;
}
if (Auth::check())
{
$userrating=Houseratingreview::where(['user_id'=>Auth::user()->id,'hse_id'=>$rentalhouse->id])->first();
//if user is living in the house and rating not given then allow review
if($currentuserlivinginhouse && !isset($userrating->id)){
$allowreview=true;
}
}
return view('Front.Rentalslisting.rentalhsedetails',compact('userrating','rentalhouse','allowreview'));
}
Blade
#if ($allowreview)
<div class="card padding-card">
#auth
<div class="card-body" id="ratingdiv">
<h3 class="card-title mb-4">Rate and Review The House</h3>
<span class="font-weight-bold font-italic text-danger">Note:You Can Only Review and Rate Your The House Once</span>
<form id="rateandreviewhseform" method="POST" class="form-horizontal" action="javascript:void(0);">
#csrf
<input type="hidden" name="houseid" value="{{ $rentalhouse->id }}">
<input type="hidden" name="userid" value="{{ Auth::user()->id }}">
<div class="form-group" style="margin-top: 5px;">
<div class="row">
<div class="col-lg-8 col-md-8">
<label style="font-size: 15px;">Give a Star Rating for the House<span class="text-danger">*</span></label>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-8">
<div class="rate">
<input type="radio" id="star5" name="rate" value="5" />
<label for="star5" title="text">5 stars</label>
<input type="radio" id="star4" name="rate" value="4" />
<label for="star4" title="text">4 stars</label>
<input type="radio" id="star3" name="rate" value="3" />
<label for="star3" title="text">3 stars</label>
<input type="radio" id="star2" name="rate" value="2" />
<label for="star2" title="text">2 stars</label>
<input type="radio" id="star1" name="rate" value="1" />
<label for="star1" title="text">1 star</label>
</div>
</div>
</div>
</div>
<p id="msg" style="font-size: 17px;"></p>
<br>
<div class="control-group form-group" style="margin-top: 2px;">
<div class="controls">
<label style="font-size: 15px;">Write A Review For The House <span class="text-danger">*</span></label>
<textarea style="border:2px solid black;" name="textreview" rows="10" cols="100" class="form-control" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
#else
<p>To Review and Rate the House Create or Log In to your Account...</p>
<span href="#" data-toggle="modal" data-target="#signupmodal" class="btn btn-success btn-block">Create/Login an Account<i class="fa fa-angle-right"></i></span>
#endauth
</div>
#endif
I have view, edit and delete permissions to a specific page, so I need to get these values:
page_id, user_id, edit, view, delete
I have a form with page name and 3 checkboxes for each page
<div class="container">
<form action="/test" method="POST">
#csrf
<div class="form-group">
#foreach( $tmp as $key=>$val )
<li>
#if( !isset($val['children']) && empty($var['children']))
<b>{{ $val['data']['name'] }}</b>
#else
<b>{{ app()->getLocale() == 'ar' ? $val['data']->ar_name : $val['data']->display_name }}</b>
#endif
#if( isset($val['children']) and !empty($val['children']))
<ul>
#foreach( $val['children'] as $c=>$child)
<li>
{{ $child->name }} :
<div class="form-group">
<input type="hidden" name="user_id" value="{{ $user_id }}">
<input type="hidden" name="page_id" value="{{ $child->name }}">
<label class="checkbox-inline">
<input type="checkbox" name="arr[]" value="view">View
</label>
<label class="checkbox-inline">
<input type="checkbox" name="arr[]" value="edit">Edit
</label>
<label class="checkbox-inline">
<input type="checkbox" name="arr[]" value="delete">Delete
</label>
</div>
</li>
#endforeach
</ul>
#endif
</li>
#endforeach
<br>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
but when i sent data, i can't get the correct page_id, is there anything else can i do
I solved it by adding $child->id
<div class="form-group">
<input type="hidden" name="user_id" value="{{ $user_id }}">
<input type="hidden" name="page_id[{{$child->id}}]" value="{{ $child->id }}">
<label class="checkbox-inline">
<input type="checkbox" name="view[{{$child->id}}]" value="1">View
</label>
<label class="checkbox-inline">
<input type="checkbox" name="edit[{{$child->id}}]" value="1">Edit
</label>
<label class="checkbox-inline">
<input type="checkbox" name="del[{{$child->id}}]" value="1">Delete
</label>
</div>
I followed the following post but the redirection is still not effective ...
Mailchimp - Redirect to thank you page
I can't find a way to make it work. The embedded form is embedded here on my website:
And the html code is:
<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://travel-homes.us18.list-manage.com/subscribe/post?u=ab5689b8019de3c007fe4634b&id=84b4167b78" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Main Guest</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-EMAIL">E-mail <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-group[2217]">Apartment </label>
<select name="group[2217]" class="REQ_CSS" id="mce-group[2217]">
<option value=""></option>
<option value="1">Le Wilson</option>
<option value="2">Le Rebberg</option>
<option value="4">Le Bright'n Cosy|Comfy Studio - City Center</option>
<option value="8">L'Alsacien</option>
<option value="16">L'EastSide</option>
<option value="32">Le Pfeffel</option>
<option value="128">Le Bredele</option>
<option value="256">Colmar Unique Apartment</option>
</select>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ab5689b8019de3c007fe4634b_84b4167b78" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Send" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
I hope somebody can find a solution to this unsolvable issue.
I have a simple (naked) MailChimp email signup form that I can't get to work in IE9. Every other browser seems fine. I know this question has been asked before but in various different circumstances. We are using JQuery Form Plugin.
<script type="text/javascript">
$(document).ready(function(){
$("#mc-embedded-subscribe-form").validate({
submitHandler: function(form) {
$(form).ajaxSubmit();
/*DO SOME OTHER STUFF*/
}
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="mc_embed_signup">
<form action="//#####.us3.list-manage.com/subscribe/post?u=#############&id=##########" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-MMERGE10">State </label>
<select name="MMERGE10" class="" id="mce-MMERGE10">
<option value=""></option>
<option value="NSW">NSW</option>
<option value="VIC">VIC</option>
<option value="QLD">QLD</option>
<option value="WA">WA</option>
<option value="ACT">ACT</option>
<option value="SA">SA</option>
<option value="NT">NT</option>
<option value="TAS">TAS</option>
</select>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_8bd18de15624fc1fb89b76d51_29d17890f0" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>