I am trying to get the newest Twitter Bootsrtap checkbox buttons working with Coldfusion 9. The code I am using is:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<form class="form-horizontal">
<div id="flatsearchform-roomscount" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary"><input type="checkbox" value="1">1</label>
<label class="btn btn-primary"><input type="checkbox" value="2">2</label>
<label class="btn btn-primary"><input type="checkbox" value="3">3</label>
<label class="btn btn-primary"><input type="checkbox" value="4">4</label>
<label class="btn btn-primary"><input type="checkbox" value="5">5</label>
<label class="btn btn-primary"><input type="checkbox" value="6">6</label>
<label class="btn btn-primary"><input type="checkbox" value="7">7</label>
<label class="btn btn-primary"><input type="checkbox" value="8">8</label>
<label class="btn btn-primary"><input type="checkbox" value="9">9</label>
<label class="btn btn-primary"><input type="checkbox" value="10">10</label>
</div>
</form>
When I run this code on my local computer, it renders correctly and the checkboxes are buttons . But when I run the same code on the Coldfusion server, it displays incorrectly, with the checkboxes still being checkboxes . Has anyone gotten this working?
Related
I'm trying to center an entire embedded Mailchimp form in my nonprofit's Shopify but after trying a few things I'm not sure how to do this properly.
Code below:
<!-- 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:center; font:14px Helvetica,Arial,sans-serif; width:600px;}
/* 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://caffelena.us6.list-manage.com/subscribe/post?u=46238df01d2ba6f28a9a0f68d&id=e2eee316a5" 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 </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</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; center: -5000px;" aria-hidden="true"><input type="text" name="b_46238df01d2ba6f28a9a0f68d_e2eee316a5" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
This is my view file and my controller file
View file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register page</title>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:45px">
<div class="col-md-4 col-md-offset-4">
<h4>Register | Custom Auth</h4><hr>
<form action="{{ route('auth.save') }}" method="post">
#if(Session::get('success'))
<div class="alert alert-success">
{{ Session::get('success') }}
</div>
#endif
#if(Session::get('fail'))
<div class="alert alert-danger">
{{ Session::get('fail') }}
</div>
#endif
#csrf
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username here" value="{{ old('username') }}">
<span class="text-danger">#error('username'){{ $message }} #enderror</span>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" name="password" placeholder="Enter password here">
<span class="text-danger">#error('password'){{ $message }} #enderror</span>
</div>
<div class="form-group">
<label>Phonenumber</label>
<input type="tel" class="form-control" name="phonenumber" placeholder="Enter phonenumber here" value="{{ old('phonenumber') }}">
<span class="text-danger">#error('phonenumber'){{ $message }} #enderror</span>
</div>
<button type="submit" class="btn btn-block btn-primary">Sign up</button>
<br>
I already have an account, sign in
</form>
</div>
</div>
</div>
</body>
</html>
Api file
Route::post('/auth/save', [MainController::class, 'save'])->name('auth.save');
Route::post('/auth/check', [MainController::class, 'check'])->name('auth.check');
Route::get('/auth/logout', [MainController::class, 'logout'])->name('auth.logout');
Route::group(['middleware'=>['AuthCheck']], function(){
Route::get('/auth/login', [MainController::class, 'login'])->name('auth.login');
Route::get('/auth/register', [MainController::class, 'register'])->name('auth.register');
Route::get('/client/dashboard', [MainController::class, 'dashboard']);
});
This is my Rest API and blade file.I have the error Undefined variable: errors, but i cant find where is the problem. Can anyone help me ? I search maybe there is a problem in kernel config, but i everything is fine.*
I am having node js backened server and frontend is simple html file running as a spa server.
<h1>Hello World</h1>
<form action="http://localhost:3000/entry" method="POST">
<div>
<label for="message">Enter a message</label>
<input id="message" name="message" type="text" />
</div>
<input type="submit" value="Submit" />
<input type="hidden" name="_csrf" value="{{csrfToken()}}" />
</form>
But it is not working.
I am trying to put on same line firstname,lastname inputs and button.
The total width of the above 3, should be equal to the 'xxxxxxx' input.
you can find the code here
http://jsfiddle.net/zxb53wjq/1/
<div class="container">
<form role="form" action="" method="post">
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" class="form-control" placeholder="xxxxxxxx"/>
</div>
<div class="form-group">
<label class="control-label">Application:</label>
<div class="input-group">
<input style="width:50% " class="form-control " placeholder="first name" name="firstname" type="text" />
<input style="width:50% " class="form-control " placeholder="last name" name="lastname" type="text" />
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
</div>
</div>
</div>
</form>
</div>
using bootstrap css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Bootstrap 4 is not the same as bootstrap 3. Most of the classes have been renamed and unlike bootstrap 3, bootstrap 4 uses flex box.
Bootstrap 4
Remove the two inputs' inline styles
Use input-group-append instead of input-group-btn.
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<input class="form-control " placeholder="last name" name="lastname" type="text" />
<div class="input-group-append">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</div>
</div>
http://jsfiddle.net/fhg3qx96/
Bootstrap 3
Use input-group-btn inside input-group
<div class="input-group mb-3">
<input class="form-control" style="width:50%" placeholder="first name" name="firstname" type="text" />
<input class="form-control" style="width:50%" placeholder="last name" name="lastname" type="text" />
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="addApplicationBtn" name="addApplicationBtn">Add</button>
</span>
</div>
https://codepen.io/anon/pen/dQrJeW
i have a nested buttons and im trying to add click events on it but it seems not to be working.
this is my object
<div id="ui-50">
<div class="ui-rpc" data-role="controlgroup" data-type="horizontal" >
<input type="button" id="rpc-bor" value="<<" />
<input type="button" id="rpc-back" value="<" />
<span style="margin:3px"></span>
<input type="text" id="rpc-jump" value="" />
<input type="button" id="rpc-next" value=">" />
<input type="button" id="rpc-eor" value=">>" />
<span style="margin:20px"></span>
<label id="rpc-current" >0</label>
<label id="rpc-separator" >/</label>
<label id="rpc-total" >0</label>
<span style="margin:20px"></span>
<label id="rpc-rpp" >0</label>
</div>
</div>
im trying to add click event on id="rpc-eor" button using
$("#ui-50 .ui-rpc #rpc-eor").click(function(){
alert("yay!");
});
but the event wont fire. what is the matter? please help! thanks in advance
I am seeing the console.log output as expected in this demo I ran in Chrome, using jQuery.mobile 1.0b1
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div:jqmData(role='page')").live('pageshow',function(){
$("#ui-50 .ui-rpc #rpc-eor").click(function(){
console.log("yay!");
});
});
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<div id="ui-50">
<div class="ui-rpc" data-role="controlgroup" data-type="horizontal" >
<input type="button" id="rpc-bor" value="<<" />
<input type="button" id="rpc-back" value="<" />
<span style="margin:3px"></span>
<input type="text" id="rpc-jump" value="" />
<input type="button" id="rpc-next" value=">" />
<input type="button" id="rpc-eor" value=">>" />
<span style="margin:20px"></span>
<label id="rpc-current" >0</label>
<label id="rpc-separator" >/</label>
<label id="rpc-total" >0</label>
<span style="margin:20px"></span>
<label id="rpc-rpp" >0</label>
</div>
</div>
</div>
</div>
</body>
</html>
Note: there is no document.ready() for jQuery.mobile so if you have wrapped the jQuery in just document.ready() then it might be causing your problem. It is better to bind on $("div:jqmData(role='page')").live('pageshow',...); to guarantee that the page is ready. That said, in this simple case it still works without the .live bind.
Try only the id
$("#rpc-eor").click(function(){
alert("yay!");
});