I wrote this code below used qtip plugin for html link :
$(document).ready(function() {
$('#login').qtip({
content: '<table><tr><td>Username</td><td><INPUT type="text" value="" name="username" title="Enter Username" class="txtbx"/></td>' +
'<td>Password</td><td><INPUT type="password" value="" name="password" title="Enter password" class="txtbx"/></td>' +
'<td><button id="loginbtn" type="submit" >login</button></td></tr></table>',
show: { when: { event: 'click' },
effect: { type: 'fade', length: 200 }
},
hide: { when: { event: 'unfocus' },
effect: { type: 'fade', length: 430 }
},
position: {
adjust: { resize: true
},
corner: {
target: 'bottomLeft',
tooltip: 'topLeft'
}
},
style: {
name: 'dark',
width: { max: 700 }
}
});
});
but the submit button doesn't work !!!!??? any help here !!
Does replacing <button id="loginbtn" type="submit" >login</button> with
<input name="loginbtn" id="loginbtn" type="submit" value="login" />
work?
Also, I don't see a form element anywhere with an action or method attribute wrapping all of your form inputs. Hence, I don't think the browser knows what to do when you submit the form.
Related
I am using the jquery.repeater field and would like to add a label on top of the the field that gets repeated.
See below my minimum viable example:
$(document).ready(function() {
'use strict';
$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
'text-input': 'bar',
'select-input': 'B',
'checkbox-input': ['A', 'B'],
'radio-input': 'B'
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
}
});
window.outerRepeater = $('.outer-repeater').repeater({
isFirstItemUndeletable: true,
defaultValues: {
'text-input': 'outer-default'
},
show: function() {
console.log('outer show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
isFirstItemUndeletable: true,
selector: '.inner-repeater',
defaultValues: {
'inner-text-input': 'inner-default'
},
show: function() {
console.log('inner show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
<form action="echo.php" class="repeater" enctype="multipart/form-data">
<label>Product Name</label>
<label>Price</label>
<label>Date</label>
<label>Description</label>
<div data-repeater-list="group-a">
<div data-repeater-item>
<input name="untyped-input" value="A" />
<input type="text" name="text-input" value="A" />
<input type="date" name="date-input" />
<textarea name="textarea-input">A</textarea>
</div>
<input data-repeater-create type="button" value="Add" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
I would like to have my final result look like the following:
As you can see, the label is directly over the repeated field.
Any suggestions what I am doing wrong?
I appreciate your replies!
You need to style the elements the same.
$(document).ready(function() {
'use strict';
$('.repeater').repeater({
defaultValues: {
'textarea-input': 'foo',
'text-input': 'bar',
'select-input': 'B',
'checkbox-input': ['A', 'B'],
'radio-input': 'B'
},
show: function() {
$(this).slideDown();
},
hide: function(deleteElement) {
if (confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
ready: function(setIndexes) {
}
});
window.outerRepeater = $('.outer-repeater').repeater({
isFirstItemUndeletable: true,
defaultValues: {
'text-input': 'outer-default'
},
show: function() {
console.log('outer show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('outer delete');
$(this).slideUp(deleteElement);
},
repeaters: [{
isFirstItemUndeletable: true,
selector: '.inner-repeater',
defaultValues: {
'inner-text-input': 'inner-default'
},
show: function() {
console.log('inner show');
$(this).slideDown();
},
hide: function(deleteElement) {
console.log('inner delete');
$(this).slideUp(deleteElement);
}
}]
});
});
label,input,textarea{display:inline-block; width:150px;}
label{border:solid 2px rgba(0,0,0,0);}
<form action="echo.php" class="repeater" enctype="multipart/form-data">
<label>Product Name</label>
<label>Price</label>
<label>Date</label>
<label>Description</label>
<div data-repeater-list="group-a">
<div data-repeater-item>
<input name="untyped-input" value="A" />
<input type="text" name="text-input" value="A" />
<input type="date" name="date-input" />
<textarea name="textarea-input">A</textarea>
</div>
<input data-repeater-create type="button" value="Add" />
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.repeater/1.2.1/jquery.repeater.js"></script>
I have a hidden div which has some content :
<div id="email_content_hidden">
<div id="email_form">
<label>De: <span>*</span></label>
<input type='email' id='email_from' placeholder='De' required="true"/>
<label>A: <span>*</span></label>
<input type='email' id='email_to' placeholder='Destinataire' required="true"/>
<label>Sujet: <span>*</span></label>
<input type='text' id='email_subject' placeholder='Sujet' required="true"/>
<label>Message:</label>
<textarea id='email_message' placeholder='Votre Message'></textarea>
<div class='email_submit'>Envoyer email</div><div id='email_returnmessage'></div>
</div>
</div>
Then I have a button which triggers a jsPanel :
$('#new_document').click (function () {
var content = $('#email_content_hidden').html();
$.jsPanel({
content: content,
position: "center",
theme: "success",
title: "Nouveau document/email",
size: { width: function(){ return $(window).width()*0.75 },
height: function(){ return $(window).height()*0.75 } },
toolbarFooter: "<i>Popup footer</i>",
});
});
As you can see I duplicate the code of the hidden div into my jsPanel.
The problem is that the click event which was assigned to does not fire :
$('.email_submit').click(function() {
console.log('submit email');
});
Any idea ?
You have to delegate the event, otherwise newly appended elements to the DOM won't have the event bound:
$(document).on('click', '.email_submit', function() {
console.log('submit email');
});
I am using tooltipser to put style on my website, but I tried this code to check if the textbox is empty but it did not work. can anyone help me?
HTML FORM
<form name="studentform" method="POST" action="index.php" role="form" onsubmit="return check(this)" autocomplete="off">
<center>
<input type="text" name="suid" class="suid" id="suid" placeholder="STUDENT NO." title="Student No. is required">
<input type="password" name="pass" id="pass" class="pass" placeholder="PASSWORD" title="Password is required">
<input type="submit" name="login" class="sub" value="LOG IN">
</center>
</form>
jQUERY (Tooltipster)
<script>
function check()
{
if (!studentform.suid.value)
{
$('.suid').tooltipster({
animation: 'grow',
delay: 200,
theme: 'tooltipster-default',
touchDevices: true,
trigger: 'hover',
position: 'right'
});return (false);
}
if (!studentform.pass.value)
{
$('.pass').tooltipster({
animation: 'grow',
delay: 200,
theme: 'tooltipster-default',
touchDevices: true,
trigger: 'hover',
position: 'right'
});
return (false);
}
else {return true;}
}
</script>
Remove return(false);, it's causing the function to end after successfully initializing tooltipster in the first if: https://jsfiddle.net/LyaevuLn/2/
I'm facing some problems with jQuery Validate. I've already put the rules but when i'm submitting the form, nothing happens.
I'm using ASP.NET MVC 4 and Visual Studio 2010.
EDIT: Click here to see my entire code. I'm trying to post it here but i'm getting the following error: 403 Forbidden: IPS signature match. Below is part of my code with Andrei Dvoynos's suggestion. I'm getting the same error. Clicking on submit and the page being reloaded
#{
ViewBag.Title = "Index";
}
#section Teste1{
<script type="text/javascript">
$(document).ready(function () {
$("#moeda").maskMoney();
$("#percent").maskMoney();
$(":input").inputmask();
$('#tel').focusout(function () {
var phone, element;
element = $(this);
element.unmask();
phone = element.val().replace(/\D/g, '');
if (phone.length > 10) {
element.inputmask({ "mask": "(99) 99999-999[9]" });
} else {
element.inputmask({ "mask": "(99) 9999-9999[9]" });
}
}).trigger('focusout');
//the code suggested by Andrei Dvoynos, i've tried but it's occurring the same.
$("#form1").validate({
rules: {
cpf: { required: true, },
cep: { required: true, },
tel: { required: true, },
email: { required: true, },
cnpj: { required: true, },
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block'
});
});
</script>
}
#using (#Html.BeginForm("", "", FormMethod.Post,
new { id = "form1", name = "form1" }))
{
<fieldset>
<legend>Sign In</legend>
<div class="form-group" id="divCpf">
<label for="cpf">CPF</label>
<input data-inputmask="'mask': '999.999.999-99'" class="form-control" id="cpf" />
</div>
<div class="form-group" id="divCep">
<label for="cep">CEP</label>
<input data-inputmask="'mask' : '99999-999'" type="text" class="form-control" id="cep" placeholder="CEP" />
</div>
<div class="form-group" id="divTel">
<label for="tel">Telefone</label>
<input type="text" class="form-control" id="tel" placeholder="tel" />
</div>
<div class="form-group" id="email">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Email" />
</div>
<div class="form-group" id="divcnpj">
<label for="cnpj">CNPJ</label>
<input data-inputmask="'mask' : '99.999.999/9999-99'" type="text" class="form-control" id="cnpj" placeholder="CNPJ" />
</div>
<div class="form-group">
<label for="moeda">Moeda</label>
<input type="text" id="moeda" data-allow-zero="true" class="form-control" />
</div>
<div class="form-group">
<label for="Percent">Percent</label>
<input type="text" id="percent" data-suffix="%" data-allow-zero="true" class="form-control" maxlength="7" />
</div>
<input type="submit" class="btn btn-default" value="Sign In" id="sign" />
</fieldset>
}
My tests (all unsuccessful):
1 - put the $("form").validate() into $(document).ready()
2 - put the required class on the fields.
jQuery Validate plugin version: 1.13.0
In addition to the fatal problem you fixed thanks to #Andrei, you also have one more fatal flaw. The name attribute is missing from your inputs.
Every element must contain a unique name attribute. This is a requirement of the plugin because it's how it keeps track of every input.
The name is the target for declaring rules inside of the rules option.
$("#form1").validate({
rules: { // <- all rule declarations must be contained within 'rules' option
cpf: { // <- this is the NAME attribute
required: true,
....
DEMO: http://jsfiddle.net/3tLzh/
You're missing the rules property when calling the validate function, try something like this:
$("#form1").validate({
rules: {
cpf: { required: true, },
cep: { required: true, },
tel: { required: true, },
email: { required: true, },
cnpj: { required: true, },
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block'
});
I am building a new application using dataTables. The tables are called when a menu item is clicked. When I open one of the tables (customers) for the first time, then click the +add button the dialog fires as expected (Which is to say it fires only once).
If I open the customers table a second time and click the +add button, the dialog fires twice. The same happens with the users table. (The same thing happens when using the users table.) Any following call raises the total number of the dialogs that will be created.
How can I set the dialog to fire only once for each newly added table?
(I am working on a localhost with MAMP. If a working example is needed I can upload the application to the server.)
I am using:
jquery 1.7.1
DataTables 1.9.0
jquery.dataTables.editable 2.3.3
jeditable 1.6.2
Yesterday I was busy till 4:00 am. I really can not find any solution.
It likes I am the only one facing this problem.
6 hours on Google couldn't also give me any answer.
Please I need some help.
The dialogbox HTML:
<div class="add_delete_toolbar" />
<!-- Custom form for adding new records -->
<form id="formAddNewUser" action="#" title="Add new user">
<input type="text" name="id" id="id" rel="0" readonly/>
<br /> <br />
<label for="title">Title</label><br />
<select name="title" id="title" class="required input_field" rel="1">
<option selected></option>
<option value="Mister">Mister</option>
<option value="Madam">Madam</option>
</select>
<br /> <br />
<label for="vnaam">Name</label><br />
<input type="text" name="vnaam" id="vnaam" class="required input_field" rel="2" />
<br /> <br />
<label for="anaam">Surname</label><br />
<input type="text" name="anaam" id="anaam" class="required input_field" rel="3" />
<br /> <br />
<label for="adres">Username</label><br />
<input type="text" name="username" id="username" class="input_field" rel="4" />
<br /> <br />
<label for="postcode">Password</label><br />
<input type="text" name="password" id="password" class="input_field" rel="5" />
<br /> <br />
<label for="plaats">Email address</label><br />
<input type="text" name="email" id="email" class="input_field" rel="6" />
<br /> <br />
</form>
the table jquery script:
<script>
$(document).ready(function() {
oTable2= $('#gebruikers').dataTable({
"bProcessing": false,
"bServerSide": true,
"sAjaxSource": "../ajx/gebr/ss_users.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
}).makeEditable({
sAddNewRowFormId: "formAddNewUser",
sAddNewRowButtonId: "btnAddNewUser",
sAddNewRowOkButtonId: "btnAddNewUserOk",
sAddNewRowCancelButtonId: "btnAddNewUserCancel",
sUpdateURL: function(value, settings)
{
//return(value); //Simulation of server-side response using a callback function
},
sAddURL: "../ajx/gebr/add_user.php",
sAddHttpMethod: "GET",
sDeleteHttpMethod: "GET",
sDeleteURL: "../ajx/gebr/remove_user.php",
sUpdateURL: "../ajx/gebr/update_user.php",
"aoColumns": [
{
},
{
cssclass: "required" ,
indicator: 'Saving title...',
tooltip: 'Click to select a title',
loadtext: 'loading...',
type: 'select',
onblur: 'cancel',
data: "{'':'Please select...', 'Mister':'Mister','Madam':'Madam'}",
submit:'SAVE'
},
{
cssclass: "required" ,
indicator: 'Saving name...',
tooltip: 'Click to edit name',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
cssclass: "required" ,
indicator: 'Saving name...',
tooltip: 'Click to edit name',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
indicator: 'Saving username...',
tooltip: 'Click to edit username',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
indicator: 'Saving password...',
tooltip: 'Click to edit password',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
},
{
indicator: 'Saving email...',
tooltip: 'Click to edit email',
type: 'text',
onblur: 'cancel',
loadtext: 'loading...',
submit:'SAVE'
}
],
oAddNewRowButtonOptions: { label: "Add...",
icons: {primary:'ui-icon-plus'}
},
oDeleteRowButtonOptions: { label: "Remove",
icons: {primary:'ui-icon-trash'}
},
oAddNewRowFormOptions: { title: 'Add a new user',
show: "blind",
hide: "explode",
modal: true
} ,
sAddDeleteToolbarSelector: ".dataTables_length"
});
});
The menu calling the table:
$('#new_user').click( function(evt){
//prevent loading the data if already loaded
if ($(document).find('#gebruikers').length == 0) {
//remove tabs active class
$(".tabs_links ul li").removeClass("active");
$("#response").load("pages/tmp_users.php");
}
evt.preventDefault();
});
It sounds like the bindings have been created multiple times. Before recreating a new instance of the datatable, destroy the old one. For example:
// where datatable is the global variable you have used to contain the datatable
if (datatable != null) datatable.fnDestroy();
There may be a more performant way of doing this, but try this first.