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!");
});
Related
I currently have a login page that allows for someone to signup if they don't have an account already. The signup form is an overlay added to the page via a partial view and thus not a nested form. This however means that there are still two forms on one page and if I try to log in, I am prevented from doing so as my signup form fields are not filled in. How am I able to post my log in form while bypassing the signup form?
Login view:
#page "/login"
#model Login
#{
Layout = "_LoginRegisterLayout";
}
#section Links {
<link rel="stylesheet" href="~/styles/login.css" type="text/css" />
<Link rel="stylesheet" href="~/styles/SignupPartial.css" type="text/css" />
}
<div>
<div class="header-logged-out">
<div class="centered-container">
<a class="header-logo" href="/">
<img src="~/images/hoook_round_blue.png" alt="hoook header logo" height="50px" width="50px" />
</a>
</div>
</div>
<div>
<div class="login-content">
<div class="login-form-header">
<h1>Sign in to Hoook</h1>
</div>
<div class="login-form-body">
<form method="post" asp-page="Login">
<label asp-for="Email">Email Address</label>
<input type="email" asp-for="Email" class="form-input" autofocus autocomplete="email" />
<div class="login-position-relative">
<label asp-for="Password">Password</label>
<input type="password" asp-for="Password" class="form-input" autocomplete="current-password" />
<button value="log-in" type="submit" class="submit-btn">Sign in</button>
<a class="login-position-absolute login-link" href="">Forgot Password?</a>
</div>
</form>
</div>
<div class="login-position-relative login-spacer">
<span class="login-or">or</span>
</div>
<div class="login-create-account">
<p>New to Hoook? Create an account.</p>
</div>
</div>
</div>
</div>
<partial name="_SignupPartial" model="#(new Signup())" />
SignupPartial added via partial tag above:
#model Signup
<div class="signup-overlay signup-hide">
<div class="signup-spacer"></div>
<div class="signup-content">
<div class="content-control signup-position-relative">
<div class="signup-header ">Sign Up</div>
<p class="signup-slogan">It's easy and free to start!</p>
<svg class="signup-exit" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" width="24" fill="currentColor"><path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path></svg>
</div>
<div class="message-control">
<p class="error-message"></p>
</div>
<div class="signup-form content-control">
<form method="post" asp-page="Index" id="signupForm">
<input type="hidden" asp-for="Token" />
<input type="text" asp-for="FirstName" class="signup-input signup-form-control" placeholder="First name" required autofocus />
<input type="text" asp-for="LastName" class="signup-input signup-form-control" placeholder="Last name" required />
<input type="email" asp-for="Email" class="signup-input signup-form-control" placeholder="Email address" required />
<input type="password" asp-for="Password" class="signup-input signup-form-control" autocomplete="new-password" placeholder="New password" required minlength="8" />
<input type="password" asp-for="Confirmation" class="signup-input" autocomplete="new-password" placeholder="Confirm password" required minlength="8" />
<div class="content-control btn-control">
<button value="sign-up" class="submit-btn" type="submit">Sign Up</button>
</div>
<input type="hidden" id="returnUrl" name="returnUrl" value='#(ViewContext.ActionDescriptor.AttributeRouteInfo.Template)' />
</form>
</div>
</div>
</div>
The issue stemmed from the fact that my signup form button used the same button class name to submit the form via javascript since I have added reCAPTCHA to the signup. Therefore every time I submit the login form, my javascript was catching it and preventing the submission. This can be seen in the following snippet where the submitBtn element is capturing the login submit button. The solution was to change the class name for the querySelector to only target the signup form button.
_LoginRegisterLayout:
<script>
grecaptcha.ready(function() {
let submitBtn = document.querySelector(".submit-btn");
let form = document.querySelector("#signupForm");
submitBtn.addEventListener("click", function(event) {
event.preventDefault();
grecaptcha.execute("#captcha.reCaptchaSiteKey", {action: "signupForm"}).then(function(token) {
if (inputValidationFunction()) {
document.getElementById("Token").value = token;
form.requestSubmit(submitBtn);
}
});
});
});
</script>
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'm playing around with ejs and want to know how to have some todos appear in the html?
This is what i have to work with:
app.get("/", (req, res) => {
db.collection("todoejs")
.find()
.toArray((err, todoejs) => {
res.render("todo");
});
});
app.post("/create-item", (req, res) => {
console.log(req.body);
db.collection("todoejs").insertOne({todo: req.body.item});
res.redirect("/");
});
I have a todo.ejs in my views folder and would like to know how to get the todos to show.
This is what's in the ejs file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple To-Do App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="display-4 text-center py-1">To-Do App</h1>
<div class="jumbotron p-3 shadow-sm">
<form action="create-item" method="POST">
<div class="d-flex align-items-center">
<input name="item" autofocus autocomplete="off" class="form-control mr-3" type="text" style="flex: 1;">
<button class="btn btn-primary">Add New Item</button>
</div>
</form>
</div>
<ul class="list-group pb-5">
<li class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
<span class="item-text"><%= todoejs %></span>
<div>
<button class="edit-me btn btn-secondary btn-sm mr-1">Edit</button>
<button class="delete-me btn btn-danger btn-sm">Delete</button>
</div>
</li>
</ul>
</div>
</body>
</html>
The second parameter of res.render takes in the variables you want to pass to the template.
In this example, you might want to do res.render("todo", { todoejs: todoejs });
Then todoejs is defined in the template and you can use it however you wish.
I have a page with an <asp:FileUpLoad> tag that I place a glyphicon into. When I click on the submit button without selecting a file, bootstrapvalidator flags the field as invalid and displays the error message. The issue is that the glyphicon icon gets stretched to include the <asp:FileUpLoad> field and the bootstrap error message.
This is what the form looks like prior to clicking on Submit:
and this is what it looks like after I click on Submit:
Here is the code that I am running:
<head runat="server">
<title></title>
<script src="../Scripts/modernizr-2.6.2.js"></script>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link id="Link1" rel="stylesheet" type="text/css" href="../Content/bootstrap.css" />
<link id="Link2" rel="stylesheet" type="text/css" href="../Content/bootstrapValidator.min.css" />
<link id="Link3" rel="stylesheet" type="text/css" href="../Content/bootstrap-datepicker.min.css" />
<link id="StyleLink1" rel="stylesheet" type="text/css" href="../Content/Site_VSTT.css"/>
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="../Scripts/respond.js" type="text/javascript"></script>
<script src="../Scripts/moment.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap.js" type="text/javascript"></script>
<script src="../Scripts/bootstrap-datetimepicker.js" type="text/javascript"></script>
<script src="../Scripts/bootstrapValidator.js" type="text/javascript"></script>
</head>
<body>
<form runat="server" id="contactForm" class="form-horizontal" >
<div class="form-group">
<label class="col-md-3 control-label">File Name</label>
<div class="col-md-6 input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-file"></i>
</span>
<asp:FileUpload ID="uploadfile" name="uploadfile" CssClass="form-control" runat="server" ClientIDMode="Static" placeholder="Enter name of file to upload"/>
</div>
<br /><br />
<div class="col-md-1 col-md-offset-3">
<asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-default btn-sm">
<span aria-hidden="true" class="glyphicon glyphicon-remove"></span> Cancel
</asp:LinkButton>
<button id="btnSubSearch" runat="server" type="submit" class="btn btn-primary btn-sm" >
<span aria-hidden="true" class="glyphicon glyphicon-arrow-right">
</span> Validate
</button>
</div>
</div>
</form>
<script>
$(document).ready(function () {
$('#contactForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
uploadfile: {
validators: {
notEmpty: {
message: 'The file name is required'
}
}
}
}
})
})
</script>
</body>
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?