Link Javascript mit GWT-Widget

Ich schaffe picker mit 1- Bootstrap picker js/CSS-Dateien, die Datepicker (localted im Web-Verzeichnis und in die HTML-Datei) 2- gwt Popup das Textfeld-Widget zu erstellen, in dem die Datum sollte ausgefüllt werdenLink Javascript mit GWT-Widget

das Problem Ich bin konfrontiert, dass die JS ist nicht in der Lage, die Textbox zu identifizieren, die ich in GWT erstellen, während, wenn ich das Textfeld direkt in der HTML-Datei einfügen der Datepicker ist Arbeitsdatei (js arbeitet)

dies die HTML-Datei, die ich bin mit

<html> 
<head> 
    <title>Application</title> 

    <link rel="stylesheet" href="resources/css/datepicker.css" rel="stylesheet"/> 


</head> 
<body> 
<script type="text/javascript" language="javascript" src="com.myApp.Users/com.myApp.Users.nocache.js"></script> 
<h1>Users Application</h1> 
</body> 
      <div id="3b2"> 
       <!-- when adding the below element it is working fine --> 
       <!--<input type="text" placeholder="flight date" id="airlineCal" class="input-block-level">--> 
      </div> 

<!-- Bootstrap core JavaScript 
    ================================================== --> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script src="resources/js/bootstrap-datepicker.js"></script> 
<script src="resources/js/triphop.js"></script> 

<script> 
    $(document).ready(function() { 

     $("#airlineCal").datepicker({ 
      format: "dd/mm/yyyy" 
     }); 

    }); 
</script> 
</html>

und das ist, wie ich das Widget erschaffe

final TextBox flightdateTextBox = new TextBox(); 
flightdateTextBox.getElement().setPropertyString("id", "airlineCal"); 
RootPanel.get("3b2").add(flightdateTextBox);

Quelle

2016-03-22 Qais Ammari

als Behelfslösung zurückzukehren , habe ich den Eingabetext in den HTML-Code eingefügt und angefangen, ihn im gwt-Modul selbst mit DOM-Bibliothek zu lesen (((InputElement) (Element) DOM.getElementById ("airlineCal")). getValue();) –

Um dies dauerhaft zu lösen, habe ich die Datumsauswahlbox anstelle einer js-Datumsauswahl verwendet. damit konnte ich den Datumsauswahl-Widget für den Zugriff auf ..

// Create a date picker 
DatePicker datePicker = new DatePicker(); 

// Set the value in the text box when the user selects a date 
datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() { 
    public void onValueChange(ValueChangeEvent<Date> event) { 
    Date date = event.getValue(); 
    String dateString = DateTimeFormat.getMediumDateFormat().format(date); 
    text.setText(dateString); 
    } 
}); 


// Add the widgets to the page 
RootPanel.get().add(datePicker);

um das Datum Wert zu erhalten, die getValue() -Methode des Datepicker verwenden, um einen java.util.Date

Quelle

2016-10-18 09:06:47

können Sie auch anwenden Stile zu der Datumsauswahl, um es hübsch zu machen –

Vielleicht ist das Problem ist, dass <input> Element noch nicht erstellt wird, wenn Datepicker-Code aufgerufen wird. Sie können versuchen, Timeout einstellen, bevor Eingabe von ID bekommen (was ein bisschen hässlich aussieht):

$(document).ready(function() { 
    setTimeout(function() { 
     $("#airlineCal").datepicker({ 
      format: "dd/mm/yyyy" 
     }); 
    }, 3000);  
});

Quelle

2016-03-23 14:48:57

Ihre JS Laden nach DOM created.Override diese Methode und Ihre JS aufrufen, wenn Sie UiBinder verwenden

@Override 
    protected void onAttach() { 
     super.onAttach(); 
     callJS(); 
    } 


    private native void callJS()/*-{ 
    $(doc).ready(function() { 
    $("#airlineCal").datepicker({ 
     format: "dd/mm/yyyy" 
    }); 

    }); 

    }-*/;

Quelle

2016-03-24 09:58:53

Link Javascript mit GWT-Widget

Antwort

Verwandte Themen