CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

madseksperten Nybegynder

04. marts 2014 - 13:45 Der er 21 kommentarer og
1 løsning

Javascript kalenderfunktion kaldes fra database

Hejsa.

Nu skal jeg se om jeg kan formulere mig korrekt. Jeg ved godt det er et stort spørgsmål, som er svært at besvare konkret. Jeg vil bare gerne vide om jeg er på rette spor. Jeg er igang med at lave et arbejdsskema. Dermed menes at jeg har en kalenderfunktion som er lavet i javascript. Det ser sådan ud:

http://postimg.org/image/gzzqm5fsj/

Calendar : har navnet datepicker
Calendar 2 : har navnet datepicker2

Her er meningen at man skal kunne vælge en "fra" dato "til" dato, hvorved så man får udskrevet det antal timer der er arbejdet i denne given periode. Jeg har via en servlet ved navn dataExchange etabeleret connectionen til min MySQL database. Jeg har i min MySQL database columns der ser sådan ud:

Date Day_hours Day_minutes Allday_hours

Min SQL query regner så det samlede antal timer sammen via dette:
SELECT *, (Day_hours + (Day_minutes / 100)) as Allday_hours FROM Workdata

Det betyder nu at hvis jeg fx vælger fra 2014-02-25 til 2014-03-03, skal den tage timerne i denne periode fra Allday_hours.

Jeg har prøvet at starte med at lave en javascript som skulle tage inputs fra kalenderen. Den ser sådan ud:

$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
$("#datepicker2").datepicker();
});

Jeg har endvidere kigget på at bruge AJAX:

function showHours(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","dataExchange.java?q="+str,true);
xmlhttp.send();
}

Men er jeg helt forkert på den?

Med Venlig Hilsen
Mads

Synes godt om

jakobdo Ekspert

04. marts 2014 - 14:34 #1

Da du allerede bruger jquery i forbindelse med dine datepickers. Ville jeg nok hellere kigge på:

https://api.jquery.com/jQuery.get/

noget ala: (utestet) :o)

$.get( "dataExchange.java", {startDate: $("#datepicker").val()}, {function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});

Synes godt om

madseksperten Nybegynder

04. marts 2014 - 18:02 #2

Jeg har prøvet at skifte taktik, og starte med at kalde min servlet fra AJAX, og få det til at virke først. Jeg har fået strikket denne kode sammen. Er det helt ved siden af?

<script>
function showHours(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(xmlhttp.open("GET","http://localhost:8080/WorkPackage/dataExchange",true));
xmlhttp.send();
}

</script>

WorkPackage er min package go dataExchange er min servlet

Synes godt om

madseksperten Nybegynder

04. marts 2014 - 18:13 #3

ah ok, jeg havde ikke lige set du havde skrevet. Jeg prøver lige at kigge på det. Men hvordan kaldes datoerne fra databasen?

Synes godt om

madseksperten Nybegynder

04. marts 2014 - 19:07 #4

Jeg har prøvet at strikke noget kode sammen. Det ser sådan ud:

<%@ page language="java" contentType="text/html; charset=US-ASCII"
pageEncoding="US-ASCII"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<title>Working Hours</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
$("#datepicker2").datepicker();
});

$.get( "dataExchange.java", {startDate: $("#datepicker").val()},
function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
</script>
</head>
<body>

<form>
<input id="datepicker"/>
</form>
<form>
<input id="datepicker2" />
</form>

</body>
</html>

Er min input form korrekt til at starte med?

Mvh Mads

Synes godt om

jakobdo Ekspert

04. marts 2014 - 20:08 #5

Din form ser nogenlunde ok ud. :o)

Din js burde dog kunne nøjes med dette:

$(document).ready(function() {
$("#datepicker").datepicker();
$("#datepicker2").datepicker();
$.get( "dataExchange.java", {startDate: $("#datepicker").val()},
function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
});

Synes godt om

madseksperten Nybegynder

04. marts 2014 - 21:47 #6

Ok mange tak for svaret. Jeg skal lige have ordnet noget i databasen, så tester det lige bagefter.

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 14:36 #7

Jeg tænker på, når jeg vælger en fra dato til dato. Skal jeg så ikke have en submit function som kalder den? Nu vælger jeg datoerne, men der sker ikke noget.

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 14:49 #8

Iøvrigt jeg kan se at når jeg vælger i min jquery kalender, er formatet i form feltet:

03/03/2014

I min MySQL database noteres det som:

2014-03-03

Er dette et problem, eller er det ligegyldigt?

Synes godt om

jakobdo Ekspert

05. marts 2014 - 14:50 #9

Kig på denne: http://api.jqueryui.com/datepicker/#option-onSelect

Og alternativt også på denne: http://jqueryui.com/datepicker/#date-range

Synes godt om

jakobdo Ekspert

05. marts 2014 - 14:51 #10

Det er et problem.
Men du kan enten omskrive det i serverscript eller rette formattet i jquery datepicker: http://api.jqueryui.com/datepicker/#option-altFormat

Synes godt om

jakobdo Ekspert

05. marts 2014 - 14:51 #11

Og denne er nok mere korrekt: http://api.jqueryui.com/datepicker/#option-dateFormat

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 15:02 #12

Mange tak for det hurtige svar. Jeg er lidt rundt på gulvet, fordi jeg troede jeg havde forstået en masse ting, men det lader til at ikke være sandt.

<form>
<input id="datepicker"/>
<input id="datepicker2"/>
</form>
<script>

$(document).ready(function() {
$("#datepicker").datepicker();
$("#datepicker2").datepicker();
$.get( "dataExchange.java", {startDate: $("#datepicker").val()},
function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );
});
});

$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
// getter
var dateFormat = $( ".selector" ).datepicker( "option", "dateFormat" );

// setter
$( ".selector" ).datepicker( "option", "dateFormat", "yy-mm-dd" );
</script>
</body>

Det vil sige min dateformat skal kaldes på min form så? Jeg er bare ikke helt med på hvordan dateformat med denne kode kan ændre parametrene i MySQL, så de forstår hinanden :-/

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 15:12 #13

Man burde vel egentligt at kunne gøre sådan her, eller?

$(document).ready(function() {
$("#datepicker").datepicker({dateFormat: 'yy-mm-dd'});
$("#datepicker2").datepicker({dateFormat: 'yy-mm-dd'});
$.get( "dataExchange.java", {startDate: $("#datepicker").val()},
function( data ) {
$( ".result" ).html( data );
alert( "Load was performed." );

});
});

Synes godt om

jakobdo Ekspert

05. marts 2014 - 15:31 #14

Du skal ud i noget ala: http://jsfiddle.net/3V3kz/

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 15:36 #15

Mange tak for det Jacob. Jeg tjekker det lige ud :-)

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 17:00 #16

Norg Jacob, så har jeg sku fået det til at virke:

$(function(){
$("#start").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText,inst){
alert(dateText);
//Her skal du så lave din ajax kald:
$.ajax({
url: "../dataExchange",
type: "post",
data: Date,
success: function(){
alert("success");
$("#result").html('submitted successfully');
},
error:function(){
alert("failure");
$("#result").html('there is error while submit');
}
});
}
});
});

Nu kalder den i hvert fald succesfuldt fra databasen. Nu skal jeg så bare til noget andet. mange tusind tak for det og smider du et svar?

Mvh Mads

Synes godt om

madseksperten Nybegynder

05. marts 2014 - 17:02 #17

dem skal jeg vel så have 2 af ikke? Altså en til min start dato, og en til min slut dato?

<form>
<input id="start1" />
<input id="start2" />
</form>

<script>

$(function(){
$("#start1").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText,inst){
alert(dateText);
//Her skal du så lave din ajax kald:
$.ajax({
url: "../dataExchange",
type: "post",
data: Date,
success: function(){
alert("success");
$("#result").html('submitted successfully');
},
error:function(){
alert("failure");
$("#result").html('there is error while submit');
}
});
}
});
});

$(function(){
$("#start2").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText,inst){
alert(dateText);
//Her skal du så lave din ajax kald:
$.ajax({
url: "../dataExchange",
type: "post",
data: Date,
success: function(){
alert("success");
$("#result").html('submitted successfully');
},
error:function(){
alert("failure");
$("#result").html('there is error while submit');
}
});
}
});
});

</script>

Synes godt om

jakobdo Ekspert

05. marts 2014 - 19:51 #18

Du er på rette vej. :o)
Dog synes jeg ikke jeg ser du rent faktisk anvender DateText, som du jo får fra onSelect.

Samtidig, skal du jo have begge datoer.

Så du kunne måske også kigge på:

$("#start, #end").change() eller lign...
Og herefter kalde din dataExchange kode.

Synes godt om

madseksperten Nybegynder

09. marts 2014 - 10:02 #19

Det begynder at ligne noget tror jeg. Jeg lukker spørgsmålet her, så den ikke står åben. Mange tak for svarene og smider du et svar? :-)

Mvh Mads

Synes godt om

jakobdo Ekspert

09. marts 2014 - 10:10 #20

Svar

Synes godt om

jakobdo Ekspert

10. marts 2014 - 10:09 #21

Takker for point

Synes godt om

madseksperten Nybegynder

10. marts 2014 - 10:17 #22

Hvis du keder dig helt vildt på et tidspunkt, så ville jeg være lykkelig for hvis du kunne sige noget om min javascript kode i denne tråd:

http://www.eksperten.dk/spm/992457

:-)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS