Avatar billede madseksperten Nybegynder
14. marts 2014 - 09:09 Der er 13 kommentarer og
1 løsning

check javascript code

Hejsa.

Jeg har en datepicker, hvor jeg skal hente en dato ud fra en startDate og endDato. Efter Jacobdos hjælp har jeg prøvet at optimere min kode lidt, så den ser sådan ud nu. Når jeg vælger mine to datoer bliver det via getHoursSQL servlet hentet dato fra min database. Ser koden ok ud nu, eller? Når jeg kører min kode får jeg printet de valgte datoer ud i min console.

mvh Mads

<script>

  $(function() {
        $(".datepicker" ).datepicker({dateFormat: 'yy-mm-dd'});
      });
  </script>

  </head>
<body>
   
    DatePicker

    <form method="post" id="myForm" action="../getHoursSQL">
    Start Date:
        <input type="text" name="startDate" class="datepicker"/><br/>                   
    End Date:
        <input type="text" name="endDate" class="datepicker"/><br/>
   
        <input type="submit"/>
    </form>
    <div id="startresult"></div>
    <div id="endresult"></div>
     
</body>
<script type="text/javascript">

    $("input[name=endDate]").datepicker({
        dateFormat: 'yy-mm-dd',
        onSelect: function(date, instance){           
            var jsonStr = $('#myForm').serializeArray();
            console.log(JSON.stringify(jsonStr));
              $.ajax({
                  url: "../getHoursSQL",
                  type: "post",
                  data: JSON,
                  success: function(data){
                      start: $("#startDate").val();
                      alert("success");
                      $("#startresult").html(data);

                  },
                  error:function(){
                      alert("failure");
                      $("#startresult").html('there is error while submit');
                  } 
                });
        }
    });
</script>
Avatar billede jakobdo Ekspert
14. marts 2014 - 11:31 #1
Jeg tror jeg ville lave noget ala dette:

<script type="text/javascript">
  $(function() {
    $(".datepicker" ).datepicker({
      dateFormat: 'yy-mm-dd',
      onSelect: function(date, instance){
       
      },
    });
   
    $("input[name=endDate]").datepicker({
      dateFormat: 'yy-mm-dd',
      onSelect: function(date, instance){
        $.post( "../getHoursSQL", {start:$("#start").val(),end:$("#end").val()}, function( data ) {
          $( "#startresult" ).html( data );
        },'json');
      }
    });
  });
</script>
</head>
<body>
  DatePicker
  <form method="post" id="myForm" action="../getHoursSQL">
    Start Date: <input type="text" id="start" name="startDate" class="datepicker"/><br/>                   
    End Date: <input type="text" id="end" name="endDate" class="datepicker"/><br/>
    <input type="submit"/>
  </form>
  <div id="startresult"></div>
  <div id="endresult"></div>
</body>

Og så nok igen... ekstra tjek på om start og end er korrekte datoer.
Det tjek kan du også lave i serverkoden. (eller der skal du tjekke input)
Avatar billede madseksperten Nybegynder
14. marts 2014 - 11:43 #2
okay du er sej. Nu får jeg ikke nogle NullPointerException i min servlet. Nu får jeg bare printet de valgte datoer, men får et return på 0.0. Det vil sige min servlet ikke regner timerne ud. Men det ligger nok i servletten. Javascript burde virke nu tror jeg.

Mange tak for det og smider du et svar?

Mvh MAds
Avatar billede madseksperten Nybegynder
14. marts 2014 - 11:46 #3
Det må jo så være:

$.post( "../getHoursSQL", {start:$("#startDate").val(),end:$("#endDate").val()}, function( data ) {

hvis mine forms header:

<form method="post" id="myForm" action="../getHoursSQL">
    Start Date: <input type="text" id="start" name="startDate" class="datepicker"/><br/>                   
    End Date: <input type="text" id="end" name="endDate" class="datepicker"/><br/>
    <input type="submit"/>
  </form>

ikke?
Avatar billede madseksperten Nybegynder
14. marts 2014 - 11:46 #4
eller i min Servlet mener jeg:

SimpleDateFormat format = new SimpleDateFormat("yy-mm-dd");
           
            java.util.Date util_StartDate = format.parse( req.getParameter("startDate") );   
            java.sql.Date sql_StartDate = new java.sql.Date( util_StartDate.getTime() );
           
            java.util.Date util_EndDate = format.parse( req.getParameter("endDate") );       
            java.sql.Date sql_EndDate = new java.sql.Date( util_EndDate.getTime() );
                pst.setDate( 1, sql_StartDate );
                pst.setDate(2, sql_EndDate );
                System.out.println(req.getParameter("startDate"));                           
                System.out.println(req.getParameter("endDate"));
Avatar billede madseksperten Nybegynder
14. marts 2014 - 11:51 #5
Så tror jeg sku det virker Arne. Eller jeg får ikke nogle exceptions mere. Jeg får dig udskrevet 0.0, når jeg vælger et interval hvor der skulle udskrives Allday_hours. Men ser det ikke fornuftigt ud?

<head>
  <script type="text/javascript">
  $(function() {
    $(".datepicker" ).datepicker({
      dateFormat: 'yy-mm-dd',
      onSelect: function(date, instance){
       
      },
    });
   
    $("input[name=endDate]").datepicker({
      dateFormat: 'yy-mm-dd',
      onSelect: function(date, instance){
        $.post( "../getHoursSQL", {start:$("#startDate").val(),end:$("#endDate").val()}, function( data ) {
          $( "#startresult" ).html( data );
        },'json');
      }
    });
  });
</script>

  </head>
<body>
   
    DatePicker Ajax Post Example:

    <form method="post" id="myForm" action="../getHoursSQL">
    Start Date:
        <input type="text" name="startDate" class="datepicker"/><br/>                   
    End Date:
        <input type="text" name="endDate" class="datepicker"/><br/>
   
        <input type="submit"/>
    </form>
    <div id="startresult"></div>
    <div id="endresult"></div>
</body>

Servlet:



import java.io.*;
import java.sql.*;
import java.text.SimpleDateFormat;
import javax.servlet.*;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;

@WebServlet("/getHoursSQL")
public class getHoursSQL extends HttpServlet{

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest req, HttpServletResponse res)
        throws ServletException, IOException{
       
        String connectionURL = "jdbc:mysql://localhost/NekiWork";
        Connection connection=null;
       
        try {
            //Load database driver
            Class.forName("com.mysql.jdbc.Driver");
            //Connection to the database
            connection = DriverManager.getConnection(connectionURL, "root", "");
            //Getting the data from database
         
            String sql = "SELECT *, (Day_hours + (Day_minutes / 60)) AS Allday_hours FROM Workdata "
                    + " WHERE Date = ? AND Date = ? ";
            PreparedStatement pst = connection.prepareStatement(sql);
           
            SimpleDateFormat format = new SimpleDateFormat("yy-mm-dd");
           
            java.util.Date util_StartDate = format.parse( req.getParameter("startDate") );   
            java.sql.Date sql_StartDate = new java.sql.Date( util_StartDate.getTime() );
           
            java.util.Date util_EndDate = format.parse( req.getParameter("endDate") );       
            java.sql.Date sql_EndDate = new java.sql.Date( util_EndDate.getTime() );
                pst.setDate( 1, sql_StartDate );
                pst.setDate(2, sql_EndDate );
                System.out.println(req.getParameter("startDate"));                           
                System.out.println(req.getParameter("endDate"));
            //Show the result from database
                ResultSet rs = pst.executeQuery();
           
              float Allday_hours_sum = 0;
                while (rs.next()){                                     
                    Allday_hours_sum += rs.getFloat("Allday_hours");
                   
                } 
                res.setContentType("text/html;charset=UTF-8");         
                res.getWriter().print(Allday_hours_sum);
               
                pst.close();
           
        }
        catch(ClassNotFoundException e){

            System.out.println("Couldn't load database driver: " + e.getMessage());
        }
        catch(SQLException e){
            System.out.println("SQLException caught: " + e.getMessage());
        }
        catch (Exception e){
            e.printStackTrace();
        }
        finally {

            try {
                if (connection != null) connection.close();
            }
            catch (SQLException ignored){
                System.out.println(ignored);
            }
        }
    }
}
Avatar billede madseksperten Nybegynder
14. marts 2014 - 11:52 #6
ups wrong place. Det skulle være i en anden tråd :-)
Avatar billede madseksperten Nybegynder
14. marts 2014 - 11:57 #7
Mærkeligt nok jeg ikke får skrevet:

$( "#startresult" ).html( data );

i mit div:

<div id="startresult"></div>
Avatar billede jakobdo Ekspert
14. marts 2014 - 12:29 #8
Men indeholder "data" noget?
prøv console.log(data); og se om den indeholder noget?

Du skal også huske at de GET variabler du har i din servlet, hedder:

start og end
Avatar billede madseksperten Nybegynder
14. marts 2014 - 12:32 #9
Tænker de hedder startDate og endDate?

SimpleDateFormat format = new SimpleDateFormat("yyyy-mm-dd");
           
            java.util.Date util_startDate = format.parse( req.getParameter("startDate") );   
            java.sql.Date sql_startDate = new java.sql.Date( util_startDate.getTime() );
           
            java.util.Date util_endDate = format.parse( req.getParameter("endDate") );       
            java.sql.Date sql_endDate = new java.sql.Date( util_endDate.getTime() );
               
                pst.setDate( 1, sql_startDate );
                pst.setDate(2, sql_endDate );
                System.out.println(req.getParameter("startDate"));                           
                System.out.println(req.getParameter("endDate"));

Jeg vil lige prøve det med console.log(data)
Avatar billede madseksperten Nybegynder
14. marts 2014 - 12:35 #10
Er det ikke sådan man laver det?

<script type="text/javascript">
  $(function() {
    $(".datepicker" ).datepicker({
      dateFormat: 'yy-mm-dd',
      onSelect: function(date, instance){
          console.log(data);
      },
    });
Avatar billede jakobdo Ekspert
14. marts 2014 - 12:36 #11
Jeg ville lave det i $.post... koden.
Avatar billede madseksperten Nybegynder
06. april 2014 - 10:08 #12
Hejsa

Undskyld den lange svar tid. Jeg har lige haft eksamen, så dette projekt har været lidt på stand by. Jeg vil lige begynde at kigge min kode igennem igen, og se om jeg kan se noget. Jeg lukker bare spørgsmålet her, så smider du et svar? :-)

Mvh Mads
Avatar billede jakobdo Ekspert
07. april 2014 - 09:21 #13
Svar!
Avatar billede jakobdo Ekspert
22. april 2014 - 12:02 #14
Takker for point.
Avatar billede 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.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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