i want to parse this value, but i got error
i want to get URL like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
but i tried and got like this :
http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/[object%20HTMLLabelElement]/dan/17
i tried with this code :
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
this is my blade view :
<html>
<head><title></title></head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.11/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.11/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<body>
<ul></ul>
<label id="data" name="data" style="display: none;"></label>
<input type="text" id="datepicker" name="datepicker" value="Date"/> <br>
<script>
$('#datepicker').datepicker({
format : 'yyyy-mm-dd'
});
</script>
<button>test</button>
<script src="js/test.js" type="text/javascript"></script>
</body>
</html>
this is my js :
$("button").click( function() {
// var label = $(this).attr("data");
// var label = document.getElementById("data").value = ""+data;
var test = data;
var label = JSON.stringify(test);
//i want get url like this
//http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/2019-01-08/dan/17
$.getJSON( "http://192.168.11.213:8080/jadwaldokter-v04-0.0.1/Jadwal/JadwalDokterDenganTanggalDokter/"+label+"/dan/17", function(obj) {
$.each(obj, function(key, value) {
$("ul").append(value.hariPraktek);
});
});
});
someone can help me? :(
very thanks if someone want to help me :)
What you actually want is the datepicker value using var label = $('#datepicker').datepicker('getDate');
Related
With this code, I able to get selected date as unix.
jsfiddle
function getValue() {
var date = $('#example').data("DateTimePicker").date();
if( date ){
alert(date.unix());
}
}
How about PersianDate, I want to get selected date as unix.
jsfiddle
You can do it by using getState method on persianDatepicker instance, like this:
var pd = $('#example').persianDatepicker({
autoClose: true,
// other options
});
function showUnix() {
const state = pd.getState();
alert(state.selected.unixDate);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-date/dist/persian-date.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-datepicker/dist/js/persian-datepicker.js"></script>
<link href="https://unpkg.com/persian-datepicker#latest/dist/css/persian-datepicker.min.css" rel="stylesheet" />
<input type="text" id="example" class="initial-value-type-example inline-example leapyear-algorithmic">
<button onclick="showUnix()">show unix</button>
I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date and Time Pickers</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div>
<script>
// still need to figure out how to do this
// $(document).ready(function() { //maybe don't need this
function calculateTime() {
//create date format
var valuestart = $("select[name='timePicker1']"1).val();
var valuestop = $("select[name='timePicker1']"1).val();
//create date format
var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
var difference = timeEnd - timeStart;
var diff_result = new Date(difference);
var hourDiff = diff_result.getHours();
$("p").html("<b>Hour Difference:</b> " + hourDiff )
}
$("select").change(calculateTime);
calculateTime();
});
</script>
</div>
<div>
<p>Einweisungsdatum</p>
<!---datepicker first date--->
<input id="datePicker1">
<script>
$(document).ready(function(){
$('#datePicker1').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker1">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker1').kendoTimePicker();
});
</script>
</div>
<div>
<p>Reinigungsdatum</p>
<!---datepicker first date--->
<input id="datePicker2">
<script>
$(document).ready(function(){
$('#datePicker2').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker2">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker2').kendoTimePicker();
});
</script>
</div>
<p>start</p>
<div>
<p>end</p>
</div>
</body>
</html>
The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
Thanks for the help!
I'm writing a webpage where there is a table created with data from database. And here I'm using Ajax.
And below is my code.
index.jsp
<html>
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
</head>
<body>
<marquee>
<h1>This is an example of ajax</h1>
</marquee>
<p>
Date: <input type="text" id="startDatePicker">
</p>
<p>
Date: <input type="text" id="endDatePicker">
</p>
<form name="vinform">
Enter id:<input type="button" id="vutton" value="Click Me">
</form>
<span id="tableDiv"> <span id="err">Select Correct Dates</span>
</span>
<script type="text/javascript" src="table.js"></script>
</body>
</html>
table.js
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
Here each time i click on the button the table data gets appended instead of displaying only current result. I think this is due to the append in my javascript, Here I want to know how can i display table only, on each click of button based on the parameters, i want a new table to be displayed instead of getting appended to the existing one.
Please tell me how can i do this.
Thanks
Maybe you need to remove all content before add the new table:
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
$('#tabDiv').html(""); //here's the trick
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
But with this information I can't help you more.
Perhaps this would help if you don't want the err span to be removed
var startDate = $("#startDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
var endDate = $("#endDatePicker").datepicker({
dateFormat : 'yy-mm-dd'
});
$('#vutton').click(function() {
$.getJSON('ControllerServlet', {
'startDate' : startDate.val(),
'endDate' : endDate.val()
}, function(searchList) {
$('#tabDiv > table').remove(); // here's the trick
var $table = $('<table>').appendTo($('#tabDiv'));
$.each(searchList, function(index, result) {
$('#err').hide();
$('<tr>').appendTo($table).append(
$('<td>').text(result.caseNumber)).append(
$('<td>').text(result.caseOwner)).append(
$('<td>').text(result.status)).append(
$('<td>').text(result.issue)).append(
$('<td>').text(result.reason)).append(
$('<td>').text(result.age));
});
});
});
Good day.
I'm trying to add Google Places Autocomplete on dynamically created inputs using code below:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
var _id = "AutoCompl" + _autoComplCounter;
_autoComplCounter++;
var container = document.getElementById('AutoComplInputs');
container.innerHTML += "<br>" + _id;
var _elem_for_upd = document.createElement("input");
_elem_for_upd.type = "text";
_elem_for_upd.id = _id;
container.appendChild(_elem_for_upd);
assignAutoCompl(_id);
}
</script>
</head>
<body>
<div id="AutoComplInputs"></div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
But when I press on button, autocomplete works only on last input, and all prevoius become broken. I think that it can be connected to dynamic creation of inputs, as the code below works fine:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var _autoComplCounter = 0;
function assignAutoCompl(_id)
{
document.getElementById(_id).hidden = false;
var _autocomplete = new google.maps.places.Autocomplete(document.getElementById(_id));
_autocomplete.setTypes(['geocode']);
google.maps.event.addListener(_autocomplete, 'place_changed', function()
{
//processing code
});
}
function CreateElem()
{
assignAutoCompl("AutoCompl0");
assignAutoCompl("AutoCompl1");
}
</script>
</head>
<body>
<div id="AutoComplInputs">
<input id="AutoCompl0" type="text" hidden>
<input id="AutoCompl1" type="text" hidden>
</div>
<input type='button' value='Add' onclick='CreateElem();'>
</body>
</html>
I don't understand what I'm doing wrong ...
Don't use innerHTML to add content to container, you will lose all handlers bound to existing elements.
Use appendChild instead:
container.appendChild(document.createElement('br'));
container.appendChild(document.createTextNode(_id));
i am trying to output array values via a click using backbone view model, please advise how to output each array values on a separate line or maybe displaying each array value in a list item via jquery. Thanks :)
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
</head>
<body>
<button>click</button>
<div class="ctype"></div>
<div class="cexperience"></div>
<script type="text/javascript">
var Job1 = Backbone.Model.extend({
defaults:{
type:'permanent',
experience:['html','css','php']
}
});
var myJob1 = new Job1();
var Jobview1 = Backbone.View.extend({
el:'button',
events:{
'click':'render'
},
render: function(){
var _type = myJob1.get('type');
var _experience = myJob1.get('experience');
$('div.ctype').html(_type);
$('div.cexperience').html(_experience);
return this
}
})
$(document).ready(function(e) {
var myJobview1 = new Jobview1();
});
</script>
</body>
</html>
_.each(_experience, function (key, value) {
var tmp = $('<p />');
tmp.html(value);
$('.experience').append(tmp);
)};
this should work.
maybe you need to switch key, value to value, key.
i tend to forget the order of the parameters.