I'm having some strange behaviour when using the datepicker. When I load the page, and directly click on the datepicker input, nothing happens. When I click again, nothing happens. But when I click on another input field and then try again the datepicker field, it'll show up.
The issue showed up, after I put the datepicker trigger into a live function, because I have input which will be dynamically generated.
This is my code:
$(".date").on('click', function() {
$(this).datepicker({
dateFormat: "dd.mm.yy",
altField: $(this).closest("td").find(".dateFormated"),
altFormat: "yy-mm-dd"
})
})
Edit: I have seen that live() is deprecated as of 1.7. I therefore switched live() for on(). Didn't solve the issue though.
Whole Html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="gencyolcu" />
<title>Untitled 1</title>
<link rel="stylesheet" href="http://localhost:8082/ivy/page/designer/ZWM$1/css/cupertino/jquery-ui-1.9.2.custom.css" />
<script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost:8082/ivy/page/designer/ZWM$1/js/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
counter = 0;
$("#addRow").click(function() {
counter++;
rowHtml = '\
<tr class="datarow" id="row' + counter + '">\
<td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>\
<td><input type="text" class="from" /></td>\
<td><input type="text" class="to" /></td>\
<td>\
<select class="type">\
<option value="1">Typ 1</option>\
<option value="2">Typ 2</option>\
</select>\
</td>\
<td class="removeRow" id=' + counter + '>X</td>\
</tr>';
$('#submitButton').before(rowHtml);
})
$(".removeRow").live("click", function() {
id = $(this).attr("id");
$("#row" + id).remove();
})
$("[name=formZeitdaten]").submit(function(i) {
values = "";
$(".datarow").each(function(j) {
tr = $(this);
date = tr.find('td').find('.date').val();
from = tr.find('td').find('.from').val();
to = tr.find('td').find('.to').val();
type = tr.find('td').find('.type').val();
values = values + date + ',' + from + ',' + to + ',' + type + ';';
})
console.log(values);
$("[name=dataset]").val(values);
})
$("#slider").slider({
range: true,
min: 0,
max: 1440,
step: 15,
values: [30, 210],
slide: function(event, ui) {
$(".date").val(ui.values[0] + ":" + ui.values[1]);
}
});
$(".date").on('click', function() {
$(this).datepicker({
dateFormat: "dd.mm.yy",
altField: $(this).closest("td").find(".dateFormated"),
altFormat: "yy-mm-dd"
})
})
});
</script>
</head>
<body>
<span id="test"></span>
<form name="formZeitdaten" method="post">
<table id="zeitdaten">
<tr>
<td>Datum</td>
<td>Von</td>
<td>Bis</td>
<td>Typ</td>
<td id="addRow"><input type="button" value="Hinzufügen" /></td>
</tr>
<tr class="datarow">
<td><input type="text" class="date" /><input type="text" class="dateFormated" /></td>
<td><input type="text" class="from" /></td>
<td><input type="text" class="to" /></td>
<td>
<select class="type">
<option value="1">Typ 1</option>
<option value="2">Typ 2</option>
</select>
</td>
<td></td>
</tr>
<tr id="submitButton">
<td><input type="submit" /></td>
</tr>
</table>
</form>
<div id="slider"></div>
</body>
</html>
In your addRow function, add:
$("#row"+counter+" .date").datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
showButtonPanel: true,
showAnim: 'show'
});
after you add the element to the DOM. You can then get rid of the $(".date").on('click',...) statement later.
This should work for you
$('.date').datepicker({
dateFormat: 'dd-mm-yy',
minDate: 0,
showButtonPanel: true,
showAnim: 'show'
});
Related
I am trying to show audio and google map in a simple HTML5 page. When I run it in other outside browsers like Chrome, Mozilla everything works perfectly.
But same is not working in my eclipse internal web browser and I want the output in that only.
Here is my project link on GitHub:
https://github.com/Venkatesh-Devale/cmpe273/tree/master/StaticRefresher
Please help me know why this is so?
#CHARSET "UTF-8";
#divVideo, #divAudio {
width:40%;
}
#divMyHeader {
background-color:orange;
}
#map {
height: 400px;
overflow: auto !important;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="UTF-8">
<title>About Me</title>
<link rel="stylesheet" href="hello.css">
</head>
<body>
<div id="divMainPage">
<div id="divMyHeader">
<h1>Venkatesh Devale</h1>
<h6>SJSU ID: 012420148</h6>
</div>
<div id="content">
<p>
I am creating this page to introduce me as we all are pretty new,
through this refresher assignment.
Below is my short video which will tell you about myself.
</p>
<div id="divVideo">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
<p>
Below is my favorite songs audio. Please guess it.
</p>
<div id="divAudio">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</div>
</div>
<div id="divFeedbackShowingInputTypes" style="border-style:groove;">
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="txtFirstName" autofocus></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="txtLastName"></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email" title="<any characters>#<your mail account>.com" pattern="[a-zA-Z]+[#][a-zA-Z]+[.com]" required></td>
</tr>
<tr>
<td>Telephone:</td>
<td><input type="tel" name="phone" title="XXX-XXX-XXXX" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></td>
</tr>
<tr><td></td>
<td><input type="submit" name="btnSubmit" value="Submit"></td>
</tr>
</table>
</form>
</div>
<div id="myGeoLocatioWithMap">
<div id="map">
</div>
</div>
</div>
<script>
var myMap, myLocationPanel;
function getFirstMap() {
myMap = new google.maps.Map(document.getElementById('map'), {
center: {lat: -58.397, lng: 197.644},
zoom: 7
});
myLocationPanel = new google.maps.InfoWindow;
if (navigator.geolocation) {
console.log("Geolocation is available");
navigator.geolocation.getCurrentPosition(showMyPosition, findLocationNotFoundError);
} else {
handleLocationError(false, myLocationPanel, myMap.getCenter());
}
}
function showMyPosition(position) {
console.log("Geolocation is available");
var myPosition = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
myLocationPanel.setPosition(myPosition);
myLocationPanel.setContent("Your location is here");
myLocationPanel.open(myMap);
myMap.setCenter(myPosition);
var marker = new google.maps.Marker({
position: myPosition,
map: myMap
});
}
function findLocationNotFoundError() {
showLocationError(true, myLocationPanel, myMap.getCenter());
}
function showLocationError(checkDoesBrowserHasLocation, myLocationPanel, mapCenter) {
myLocationPanel.setPosition(mapCenter);
if(checkDoesBrowserHasLocation) {
myLocationPanel.setContent('Somehow geolocation service is not working, we are fixing it');
} else {
myLocationPanel.setContent('Seems that the browser does not support the geolocation');
}
myLocationPanel.open(myMap);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBd-SiW0EEjuidG6nhM6iSeDt9epJPvYno&callback=getFirstMap">
</script>
</body>
</html>
I wanted that when I change my selection in my checkbox the only selected checkbox will be selected and the previous selected checkbox will be uncheck.
My code is working but i really wanted to select only one checkbox.
In my view.
<center><table></center>
<tr>
<th><center>
List of Names</center></th>
<th colspan="3">
Actions
</th></tr>
<tr ng-repeat="role in roles">
<td>
<label>
<ion-checkbox ng-model="isChecked" ng-
change="format(isChecked,role,$index)"
ng-init="isChecked=false"><div class="wew">
{{role}}
</div></ion-checkbox>
</label>
</td>
<td>
<button ng-hide="!isChecked" ng-click="present()">P </button> </td>
<td>
<button ng-hide="!isChecked" ng-click="late()">L</button></td>
<td><button ng-hide="!isChecked" ng-click="absentss()">A</button></td>
<td><button ng-hide="!isChecked" ng-click="delete()">D</button></td>
</tr> </table>
And I think in my controller is the part where i need to change my codes to achieved the correct result.
$scope.isChecked = false;
$scope.selected = [];
$scope.format = function (isChecked, role, index) {
if (isChecked==true) {
$scope.selected.push(role);
}
else {
var _index = $scope.selected.indexOf(role);
$scope.selected.splice(_index, 1);
}
var students = $scope.selected;
console.log(students);
for( var s=0; s<students.length; s++) {
$scope.stud = [
students[s]
]
};
Thank you in advanced! I hope that someone can help in this matter.
Checkboxes are for multiple selections within a group.
Use radio buttons instead.
Example With AngularJs
This is way you can also implement.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('app', []).controller('appc', ['$scope',
function($scope) {
$scope.selected = 'other'; //default selection
}
]);
</script>
</head>
<body ng-app="app" ng-controller="appc">
<label>SELECTED: {{selected}}</label>
<div>
<input type="checkbox" ng-checked="selected=='male'" ng-true-value="'male'" ng-model="selected">Male
<br>
<input type="checkbox" ng-checked="selected=='female'" ng-true-value="'female'" ng-model="selected">Female
<br>
<input type="checkbox" ng-checked="selected=='other'" ng-true-value="'other'" ng-model="selected">Other
</div>
</body>
</html>
I am using kendo's mvvm and sortable widget to allow a user to sort multiple tables with data binded to it. I have implemented the following code. It works, but the data seems to be logging correctly to the console. However, the data in the UI jumps around.
$(".sortable-handlers").kendoSortable({
handler: ".move",
hint:function(element) {
return element.clone().addClass("sortable-hint");
},
change: function(e) {
var services = viewModel.get("services");
console.log(e.oldIndex);
var oldIndex = e.oldIndex;
var newIndex = e.newIndex;
services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);
//Set it back to the original list
viewModel.set("services", services);
console.log(JSON.stringify(viewModel.get("services")));
}
});
It's been a long time but adding .trigger("change") works for me (I'm using jquery ui sortable instead of kendo ui sortable).
// Define model with dependent method
var MyModel = kendo.data.Model.define({
fields: {
left: "number",
right: "number"
},
total: function() {
return this.get("left") + this.get("right");
}
});
// Create view model
var viewModel = kendo.observable({
items: []
});
// bindings
kendo.bind($("#myView"), viewModel);
// using $.ui.sortable when list changes
var timeout = null;
viewModel.items.bind("change", function(e) {
clearTimeout(timeout);
timeout = setTimeout(function() {
$("#sortable").sortable({
update: function(e, ui) {
// get UID of sorting target
var targetUid = ui.item.attr("uid");
// list before
var beforeIndexes = _.map(viewModel.items, _.iteratee("uid"));
// target's original index
var fromIdx = _.indexOf(beforeIndexes, targetUid);
// list after
var afterIndexes = $("#sortable").sortable("toArray", {
attribute: "uid"
});
// target's new index
var toIdx = _.indexOf(afterIndexes, targetUid);
var changeItem = viewModel.items[fromIdx];
viewModel.items.splice(fromIdx, 1);
if (toIdx >= viewModel.items.length) {
viewModel.items.push(changeItem);
} else {
viewModel.items.splice(toIdx, 0, changeItem);
}
// refresh
viewModel.items.trigger("change");
}
});
}, 500);
});
// add some items to list
viewModel.items.push(new MyModel({
left: 1,
right: 2
}));
viewModel.items.push(new MyModel({
left: 6,
right: 3
}));
viewModel.items.push(new MyModel({
left: 5,
right: 7
}));
<link href="https://code.jquery.com/ui/1.12.0-beta.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="myView">
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
<div class="k-grid k-widget">
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table>
<thead>
<tr>
<th class="k-header">NOT-SORTABLE</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-content">
<table>
<tbody id="sortable" data-bind="source: items" data-template="template-item">
</tbody>
</table>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="template-item">
<tr data-bind="attr: {uid: uid}">
<td>
<span data-bind="text: left" />+
<span data-bind="text: right" />=
<span data-bind="text: total" />
</td>
</tr>
</script>
I am trying to post a form using dojo.xhrPost. Below code works fine in chrome but does not work at all in Firefox. When I say it doesn't work I see that page reloads again and nothing happens. I tried to use dojo.stopEvent(event); but doesn't seem to work in Firefox.
Can you please suggest me what could be my mistake. I feel the issue is more with the form than with xhrPost.
HTML Looks like below:
<div data-dojo-type="dijit/form/Form" data-dojo-id="myform" id="loginform"
encType="multipart/form-data" action="" method="post">
<script type="dojo/method" data-dojo-event="onSubmit">
if(this.validate()){
senddata(); //calling the javascript function
}else{
alert('Form contains invalid data. Please correct first');
return false;
}
return true;
</script>
<table cellspacing="10">
<tr>
<td><label for="name">Username:</label></td>
<td><input type="text" id="username" name="username"
required="true" placeholder="Your UserName" data-dojo-
type="dijit.form.ValidationTextBox"/></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password"
required="true" placeholder="Your Password"
data-dojotype="dijit.form.ValidationTextBox"/></td>
</tr>
</table>
<div id="response" style="float: right"></div>
<button data-dojo-type="dijit.form.Button" type="submit" name="submitButton"
value="Submit" style="float: right;">Submit</button>
</div>
My Javascript code is below:
function senddata(){
dojo.stopEvent(event);
obj = {};
obj.user_name =dijit.byId("username").get("value");
obj.password =dijit.byId("password").get("value");
var xhrArgs = {
url: "./script/php/validatelogin.php",
postData: obj,
handleAs: "json",
load: function(data){
//alert('success');
if(data.success==true){
window.location = data.message;
dojo.byId("response").innerHTML = "Form posted.";
}else{
dojo.byId("response").innerHTML = "login Failed";
}
},
error: function(error){
console.log("error occured!!!");
dojo.byId("response").innerHTML = "Failed to Post the Form..";
}
};
//alert('starting');
var deferred = dojo.xhrPost(xhrArgs);
//alert('done');
return false;
}
First, change the data-dojo-type into path format. E.g.: dijit/form/ValidationTextBox
Second, fix your typing mistake in password field of data-dojo-type. You entered data-dojotype, missing the - b=in between 'dojo' & 'type'
More information about dojo.byId() & dijit.byId().
Here is the result:
<div data-dojo-type="dijit/form/Form" data-dojo-id="myform" id="loginform" encType="multipart/form-data" action="" method="post">
<script type="dojo/method" data-dojo-event="onSubmit">
if(this.validate()){
senddata(); //calling the javascript function
}else{
alert('Form contains invalid data. Please correct first');
return false;
}
return true;
</script>
<table cellspacing="10">
<tr>
<td><label for="name">Username:</label></td>
<td><input type="text" id="username" name="username" required="true" placeholder="Your UserName" data-dojo-type="dijit/form/ValidationTextBox" /></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required="true" placeholder="Your Password" data-dojo-type="dijit/form/ValidationTextBox" /></td>
</tr>
</table>
<div id="response" style="float: right"></div>
<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit" style="float: right;">Submit</button>
</div>
<script>
function senddata(){
dojo.stopEvent(event);
obj = {};
obj.user_name =dijit.byId("username").get("value");
obj.password =dijit.byId("password").get("value");
var xhrArgs = {
url: "./script/php/validatelogin.php",
postData: obj,
handleAs: "json",
load: function(data){
//alert('success');
if(data.success==true){
window.location = data.message;
dojo.byId("response").innerHTML = "Form posted.";
}else{
dojo.byId("response").innerHTML = "login Failed";
}
},
error: function(error){
console.log("error occured!!!");
dojo.byId("response").innerHTML = "Failed to Post the Form..";
}
};
//alert('starting');
var deferred = dojo.xhrPost(xhrArgs);
//alert('done');
return false;
}
</script>
I have a form within a modal that i am trying to validate before the form gets submitted to ajax db etc.
I am trying to validate the form $("#new_request_form").validate({ on the save button. if it validate then submit the form.
Can anybody tell me what i am missing?
Thanks in advance!
$(document).ready(dialogForms);
function dialogForms() {
$('a.menubutton').click(function() {
var a = $(this);
$.get(a.attr('href'),function(resp){
var dialog = $('<div>').attr('id','formDialog').html($(resp).find('form:first').parent('div').html());
$('body').append(dialog);
dialog.find(':submit').hide();
dialog.dialog({
title: a.attr('title') ? a.attr('title') : '',
modal: true,
buttons: {
'Save': function() {
$("#new_request_form").validate({
submitHandler: function(form) {
submitFormWithAjax($(this).find('form'));
$(this).dialog('close');
}
});
},
'Cancel': function() {$(this).dialog('close');}
},
close: function() {$(this).remove();},
width: 600,
height: 500,
show: "fade",
hide: "fade"
});
var $ac_start_date = '<?php echo $ac_end_date ?>',
$ac_start_date_flip = '<?php echo $ac_end_date_flip ?>',
$ac_start_parsed = Date.parse($ac_start_date),
_today = new Date().getTime();
// For Opera and older winXP IE n such
if (isNaN($ac_start_parsed)) {
$ac_start_parsed = Date.parse($ac_start_date_flip);
}
var _aDayinMS = 1000 * 60 * 60 * 24;
// Calculate the difference in milliseconds
var difference_ms = Math.abs($ac_start_parsed - _today);
// Convert back to days and return
var DAY_DIFFERENCE = Math.round(difference_ms/_aDayinMS);
// do initialization here
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
yearRange: '0:+100',
minDate: '+1d',
maxDate: '+' + (DAY_DIFFERENCE + 1) + 'd'
});
// do initialization here
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
yearRange: '0:+100',
minDate: '+1d',
maxDate: '+' + (DAY_DIFFERENCE + 1) + 'd'
});
}, 'html');
return false;
});
}
function submitFormWithAjax(form) {
form = $(form);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: (form.attr('method')),
dataType: 'script',
success: function(data){
$(this).dialog('close');
// Refresh table
}
});
return false;
}
FORM
<?php
require_once("../config.php");
include_once("scripts/connection.php");
?>
<p class="validateTips">All form fields are required.</p>
<div>
<form id="new_request_form" action="insert_new_request.php" method="POST" class="new_request">
<fieldset>
<legend><p class="subheadertext">Request Holiday</p></legend>
<table width="100%" border="0">
<?php
$username = $USER->firstname.' '.$USER->lastname;
$is_academic_result = mysql_query('SELECT * FROM holiday_entitlement_academic WHERE employee = \'' . $username . '\'');
if($is_academic = mysql_fetch_array($is_academic_result)) {
switch($is_academic['units']) {
case 'days':
echo'<tr>
<td width="150px" valign="middle"><label for="days">Days:</label></td>
<td valign="top">
<select id="days" name="days">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<tr>
<td width="150px" valign="middle"><label for="startdate">Start Date:</label></td>
<td valign="top"><input type="text" name="startdate" id="startdate" class="required" readonly="readonly"/></td>
</tr>';
break;
case 'hours':
echo'<tr>
<td width="150px" valign="middle"><label for="days">Hours:</label></td>
<td valign="top"><input type="text" name="hours" id="hours" class="required" /></td>
</tr>
<tr>
<td width="150px" valign="middle"><label for="startdate">Start Date:</label></td>
<td valign="top"><input type="text" name="startdate" id="startdate" class="required" readonly="readonly"/></td>
</tr>
<tr>
<td width="150px" valign="middle"><label for="startdate">End Date:</label></td>
<td valign="top"><input type="text" name="enddate" id="enddate" class="required" readonly="readonly"/></td>
</tr>';
break;
default:
break;
}
}
?>
</table>
<input type="hidden" id="acyear" name="acyear" value="<?php echo $academic_start_date; ?>"/>
<input type="hidden" id="user" name="user" value="<?php echo $USER->id; ?>"/>
<input type="hidden" id="employee" name="employee" value="<?php echo $USER->firstname.' '.$USER->lastname; ?>"/>
</fieldset>
</form>
</div>
EDIT - What it does
with the following when you click save it does not do anything, the modal stays up and even if you fill the form it does not do anything:
'Save': function() {
$("#new_request_form").validate({
submitHandler: function(form) {
submitFormWithAjax($(this).find('form'));
$(this).dialog('close');
}
});
},
With the following the form gets submitted and works as expected just no validation:
'Save': function() {
submitFormWithAjax($(this).find('form'));
$(this).dialog('close');
},
I guess when calling submitHandler function, you have passed the wrong selector. $(this) represent the form itself so there is no need to find the form in it.
So Replace this code
submitFormWithAjax($(this).find('form'));
With
submitFormWithAjax($(this));
Or Alternately
submitFormWithAjax($("#new_request_form"));
This will fix you problem.