Typeahead on dynamically created inputs - javascript

<input type="text" name="brand[]" class="form-control auto-brand" />
<script type="text/javascript">
$(function () {
$('input.auto-brand').each(function () {
$(this).typeahead({
name: 'brand[]',
remote: '...'
});
});
});
</script>
I would like that as I add the new inputs the typeahead is also initialized

Related

How to set default value for input with type of date in jquery repeater?

I use jquery repeater in my project. When I try set default value for input type date return error:
jquery.repeater.js:688 Uncaught TypeError: Cannot read property 'set'
of undefined
Form code:
<form action="" class="repeater" enctype="multipart/form-data">
<div data-repeater-list="users">
<div data-repeater-item>
<input type="text" name="name"/>
<input type="email" name="email"/>
<select name="sex">
<option value="0" selected>Male</option>
<option value="1">Female</option>
</select>
<input type="date" name="birthday"/>
<input data-repeater-delete type="button" value="Delete"/>
</div>
</div>
<input id="add" data-repeater-create type="button" value="Add User"/>
</form>
Javascript code:
$(document).ready(function () {
'use strict';
$('.repeater').repeater({
defaultValues: {
'name': 'User',
'email': 'user#gmail.com',
'sex': '0',
'birthday': "1990-09-10"
},
show: function () {
$(this).slideDown();
},
hide: function (deleteElement) {
if(confirm('Are you sure you want to delete this element?')) {
$(this).slideUp(deleteElement);
}
},
ready: function (setIndexes) {
}
});
$('#add').on('click', function(e){
var users = $('.repeater').repeaterVal();
console.log(users);
});
});
When I don't set default value then I can't get all fields values.
For me I did it the old fashioned way using JQuery
$(".mydiv-item-repeater").length && $(".mydiv-item-repeater").repeater({
show: function () {
$(this).find(".select").val(value);
$(this).slideDown()
}, hide: function (e) {
$(this).slideUp(e)
}
});

Show error message for controls using Jquery

Script : Jquery
I am new to jquery, and I found this piece of code which I tried but didn't succeed. It uses jquery validator plugin. Here is the code :
<html>
<body>
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
</script>
</body>
</html>
How do I achieve this ? here is the link http://jsfiddle.net/cMhQ7/
looks like the validator plugin version you are using is causing the issue. Try the following one http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js
or any from the page jqueryvalidation.org hotlink
I hope this fixes the issue.
try this
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
</script>
</body>
</html>

I can't reach dynamic inputs with javascript

I want to change Cloudera Hue project code but I have some problems.
Knockout data-bind is created some html codes with foreach , when I want to reach input in this html, my code does not work correct. My app.mako file code :
.....
<div data-bind="foreach: submissionVariables" style="margin-bottom: 20px">
<div class="row-fluid">
<span data-bind="text: name" class="span3"></span>
<input type="text" data-bind="value: value,attr: { id: 'dtpicker' + name }" class="span9" />
<button class="btn fileChooserBtn" data-bind="click: $root.showTimePicker">time</button>
</div>
</div>
<input type="text" value="2014/03/15 05:06" id="datetimepickerz"/>
....
<script src="/static/js/jquery.datetimepicker.js"></script>
<script type="text/javascript">
$('#dtpickerfolder').datetimepicker()
.datetimepicker({value:'2015/04/15 05:03',step:10});
$('#dtpickereverything').datetimepicker()
.datetimepicker({value:'2015/04/15 05:03',step:10});
$('#datetimepickerz').datetimepicker()
.datetimepicker({value:'2015/04/15 05:03',step:10});
</script>
Output:
<input id="dtpickerfolder" class="span9" type="text" data-bind="value: value,attr: { id: 'dtpicker' + name }"></input>
<input id="dtpickereverything" class="span9" type="text" data-bind="value: value,attr: { id: 'dtpicker' + name }"></input>
<input id="datetimepickerz" type="text" value="2014/03/15 05:06"></input>
datetimepickerz input works correct but my dynamic inputs that ids starts with dtpicker are not working.
Can anyone help me ?
I solve this with :
self.runOrShowSubmissionModal = function runOrShowSubmissionModal() {
var script = self.currentScript();
if (! $.isEmptyObject(script.getParameters())) {
self.submissionVariables.removeAll();
$.each(script.getParameters(), function (key, value) {
self.submissionVariables.push({'name': key, 'value': value});
// CALL TO JQUERY
$("#dtpicker"+key).datetimepicker({value:"2015/04/15 05:03",step:10});
});
$("#runScriptBtn").button("reset");
$("#runScriptBtn").attr("data-loading-text", $("#runScriptBtn").text() + " ...");
$("#submitModal").modal({
keyboard: true,
show: true
});
} else {
self.runScript();
}
};
I sent my jquery in knockout function.

autocomplete ajax on two fields

I am having trouble executing the following code successfully. I want to get autocomplete data from the server on 1st field (drug1) which is successful. I want that the 2nd field (drugdose1) should return result based on the value of the 1st field (drug1). But I am unable to pass the value of the drug1 to the php file. The firefox debug displays as localhost/lib/searchdose.php?d=&q=xx.
Here is the code:
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type='text/javascript' src='lib/autocompletefull.js'></script>
<link rel="stylesheet" type="text/css" href="lib/autocomplete.css" />
<script type="text/javascript">
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2,
useCache:false
});
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
minChars:2,
extraParams: { d: $("#drug1").val() }
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>
I am using autocomplete.js from https://github.com/dyve/jquery-autocomplete ... I am not using jquery.ui autcomplete ..
Try this,
src = 'lib/searchdose.php';
$("#drugdose1").autocomplete({
source: function(request, response) {
$.ajax({
url: src,
dataType: "json",
data: {
d: $("#drug1").val()
},
success: function(data) {
response(data);
}
});
},
min_length: 3,
delay: 300
});
I have sort this problem on my own. Here is the solution:
<script type="text/javascript">
var dname;
function newv ()
{
dname = $("#drug1").val();
$("#drugdose1").autocomplete('lib/searchdose.php', {
delay:100,
maxItemsToShow: 15,
extraParams: { d:dname },
minChars:1,
useCache:false
});
alert("Hello");
}
$(function() {
$("#drug1").autocomplete('lib/search.php', {
delay:100,
maxItemsToShow: 15,
minChars:2
});
});
</script>
</head><body>
<p>
<form name="hello">
<input type="hidden" id="testing" value="hi there">
Drug Name: <input type="text" tabindex="1" size="40" name="drug1" id="drug1" onchange="javascript:newv();">
</p>
<p>Drug Dose: <input tabindex="2" type="text" name="drugdose1" id="drugdose1" size="35">
</p>
</form>

knockout.js validation textbox highlight

I'm working with validation and I am using knockout.js (and durandal.js) for a view modal.
I want to make a textbox's border red when it's blank if I click on submit button.
When a user starts to type in the textbox, the border color red should be removed.
Code is here: http://jsfiddle.net/LvHUD/1/
What I did is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/knockout.debug.js"></script>
<script src="Scripts/knockout.js"></script>
<script src="Scripts/knockout.validation.debug.js"></script>
<script src="Scripts/knockout.validation.js"></script>
</head>
<body>
<input type="text" data-bind='value: username' />
<br />
<button data-bind="click: submit">Submit</button>
<div data-bind="visible: showErrors, text: errors" />
<script>
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
self.showErrors = ko.observable(false);
self.submit = function () {
self.showErrors(true);
if (self.isValid()) {
// save data here
}
}
self.errors = ko.validation.group(self);
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false
});
ko.applyBindings(new ViewModel());
</script>
</body>
</html>
Knockout Validation adds to your observable two observables: isValid & isModified.
You can use the isValid observable to get what you are looking for.
I have modified slightly the jsfiddle provided by Bradley Trager:
http://jsfiddle.net/tBcRD/3/
Basically the data-bind attribute was changed as follows:
<input type="text" data-bind="value: username, valueUpdate: 'afterkeydown', css:{'error':(!username.isValid() && showErrors())}" />
You can use knockouts css binding to add an error class to your input box:
<input type="text" data-bind="value: username, css:{'error':showErrors}" />
Here is the jsFiddle: http://jsfiddle.net/bradleytrager/tBcRD/
Addition:
If you would like it to remove the highlight when the user types, one way of doing it is by updating your observable on the key down event, and subscribing to your observable in order to remove the error messages when the observable changes:
HTML:
<input type="text" data-bind="value: username, css:{'error':showErrors}, valueUpdate: 'afterkeydown'" />
JS:
self.username.subscribe(function () {
self.removeErrors();
});
self.removeErrors = function () {
self.showErrors(false);
};
I updated the jsFiddle with this functionality.
You can use the validationElement binding for this (wiki):
http://jsfiddle.net/tBcRD/10/
HTML:
<input type="text" data-bind="value: username, validationElement: username, valueUpdate: 'afterkeydown'" />
<br/>
<button data-bind="click: submit">Submit</button>
JS:
function ViewModel() {
var self = this;
self.username = ko.observable().extend({
required: true
});
this.validationModel = ko.validatedObservable({
username: self.username
});
self.submit = function () {
self.username.valueHasMutated();
if (this.validationModel.isValid()) {
alert("data saved");
}
}
}
ko.validation.init({
registerExtenders: true,
messagesOnModified: true,
insertMessages: false,
decorateElement: true
});
ko.applyBindings(new ViewModel());
CSS:
.validationElement {
border: 1px solid red;
}

Categories