I use jquery datepicker and it not display after I click ajax button.
Is there any way to show datepicker again after click? I use wicket 8.
BasePage.java
public class BasePage extends WebPage {
...
}
BasePage.html
<body>
...
<script src="/js/jquery.min.js"></script>
<script src="/js/jqueryui.min.js"></script>
<script src="/js/main.js"></script>
</body>
HomePage.java
public class HomePage extends BasePage {
public HomePage() {
SearchForm searchForm = new SearchForm();
Form<SearchForm> form = new Form<>(new CompoundPropertyModel<SearchForm>(searchForm))
AjaxButton btn = new AjaxButton() {
protected void onSubmit(AjaxRequest target) {
// Handle search data
...
target.add(form);
}
};
TextField<String> date = new TextField<>("searchDate");
form.add(date);
form.add(btn);
}
}
HomePage.html
<wicket:extend>
<form wicket:id="form">
<input wicket:id="searchDate" class="datepicker" />
<button wicket:id="btn">Search</button>
</form>
</wicket:extend>
main.js
$(function() {
$(".datepicker").datepicker();
...
});
After click ajax button all script in file main.js not working
Please help me.
when you update form via AJAX you replace each element inside it, which includes the input field you use with datepicker. But doing so you loose the javascript setting done by main.js when page was first loaded.
You can solve this in two ways. First, you could update only those elements that need to be refreshed, for example the component that you use to show search result (I suppose there must be such an element in your code).
The second solution, more heavier and complicated, is to make a custom TextField component that execute the datepicker javascript code each time is rendered.
An example of such solution can be found is in the user guide: https://wicket-guide.herokuapp.com/wicket/bookmarkable/org.wicketTutorial.ajaxdatepicker.HomePage
I would recommend to follow the first solution as it's more natural and simpler and requires less code.
UPDATE:
If you want to refresh the textfield another simple solution is to use target.appendJavaScript​ to reapply the datepicker plugin:
target.add("$('#" + date.getMarkupId() + "').datepicker();");
this should add the datepicker to the fresh new field.
Related
I am trying to insert a piece of html code (ion-header-bar) after i click on login button . I need this code to be added on top of all the modules. As it is a same piece of code in all the modules, is there anyway to achieve it by writing it in a single place rather than adding the repeated code to all the modules.
EDIT I realize that the question did not clarify which version of ionic is used. This answer is only working for ionic 2 and ionic 3 (and possibly later versions) - ionic 1 will work differently
if you follow the typical structure of an Ionic 2 or 3 Project (with an App.component using <ion-nav>) you would just put the <ion-header-bar> next to your <ion-nav> with an *ngIf:
/// src/app/app.html
<ion-header-bar *ngIf="isUserLoggedIn()">This only shows when is UserLoggedIn() returns true</ion-header-bar>
<ion-nav [root]="rootPage"></ion-nav>
And inside your app.component.ts you just implement the function used by the *ngIf
/// src/app/app.component.ts
#Component({
templateUrl: 'app.html'
})
export class MyApp {
public rootPage: any = MenuPage;
public isUserLoggedIn(): boolean {
// TODO: Implement this to return true when the user is logged in
}
}
there are many ways to do this - but this is about the simplest I can think of right now, given the limited information you provided.
I created a codepen for this:
https://codepen.io/anon/pen/aEYBmL
In your HTML add ng-if to your header bar and give it a function that just returns true when the user is logged in:
<html>
(...)
<body ng-controller="MyCtrl">
<ion-header-bar class="bar-positive" ng-if="isUserLoggedIn()">
<h1 class="title">this only shows if isUserLoggedIn() returns true</h1>
</ion-header-bar>
<ion-content>
<h1 style="margin-top: 56px">Here is your other content!</h1>
</ion-content>
</body>
</html>
then attach that function or variable to your scope inside your controller:
angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.isUserLoggedIn = () => {
// TODO Implement this
return true;
}
});
read about ng-if here:
https://docs.angularjs.org/api/ng/directive/ngIf
EDIT: Displaying a component on every screen:
Look at this codepen:
https://codepen.io/calendee/pen/ubzDq
here you have your ion-nav-navbar (which is simmilar to a ion-header-bar with a backbutton and a title) outside of ion-nav-bar, which makes it display all the time - without putting it everywhere
///This wont be replaced as its not inside the ion-nav-view. So its displayed on every screen.
<ion-nav-bar>
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
/// Everything in here will be replaced by your current navstack
</ion-nav-view>
I have an integer field and when i enter a non integer value (let's say a symbolic one) the Feedback panel should be triggered automatically with default message, but it does not work, I have to call it in onError method of the form by method error().
This is the textField, that i use:
RequiredTextField<Integer> intField =
new RequiredTextField<>("intValue", integerValue,Integer.class);
this is my simple FeedBackPanel:
fragment.add(new FeedbackPanel("feedback"));
it works only when i call method error() in method onError() of the form.
Could you show us how you create your Form and the Model you use? As far as I understand it you will want to bind a Model to your Fields. My best guess is that your Model does not have a property "intValue".
You might want to (re)visit the Wicket Wiki "More on Models".
I'm not sure how you are setting your model. And once you add RequiredTextField it will not allow you empty and since you set the Integer type it will not allow characters to be entered.
I have tried some code snippet which is working perfectly and validating.
HomePage.html
<html xmlns:wicket="http://wicket.apache.org">
<body>
<form wicket:id="someForm">
<div wicket:id="feedback"></div>
<input type="text" wicket:id="requiredText">
<input type="submit" value="submit">
</form>
</body>
</html>
HomePage.Java
public class HomePage extends WebPage {
private static final long serialVersionUID = 1L;
public HomePage(final PageParameters parameters) {
super(parameters);
Form form = new Form("someForm");
form.add(new FeedbackPanel("feedback"));
IModel integerValue= Model.of("");
form.add(new RequiredTextField("requiredText",integerValue,Integer.class));
add(form);
}
}
Please let me get back to me on this incase if you need anything .
I recently started using the latest Desktop version of Google Material Design Lite, I figured it doesn't have a modal pop up and the team has not yet implemented it for the next release.
I have tried to include bootstrap model into it, but thats not working infect seems pretty messed, I believe with the classes/styles clashing with each others.
Any Idea what will work good as an replacement ??
Thanks for your help.
I was also looking for a similar plugin and then I found mdl-jquery-modal-dialog
https://github.com/oRRs/mdl-jquery-modal-dialog
I used this because the other one I found was having issue on IE11. This one works fine.
<button id="show-info" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Show Info
</button>
Here a JSFiddle: https://jsfiddle.net/w5cpw7yf/
I came up with a pure JavaScript Solution for this
You can use the default bootstrap data attributes for the buttons, and make sure that your buttons and modals have their own unique IDs.
You need to have Material Design Lite's JS included before using this JavaScript
Check out the code. Any reviews are welcomed. :)
// Selecting all Buttons with data-toggle="modal", i.e. the modal triggers on the page
var modalTriggers = document.querySelectorAll('[data-toggle="modal"]');
// Getting the target modal of every button and applying listeners
for (var i = modalTriggers.length - 1; i >= 0; i--) {
var t = modalTriggers[i].getAttribute('data-target');
var id = '#' + modalTriggers[i].getAttribute('id');
modalProcess(t, id);
}
/**
* It applies the listeners to modal and modal triggers
* #param {string} selector [The Dialog ID]
* #param {string} button [The Dialog triggering Button ID]
*/
function modalProcess(selector, button) {
var dialog = document.querySelector(selector);
var showDialogButton = document.querySelector(button);
if (dialog) {
if (!dialog.showModal) {
dialogPolyfill.registerDialog(dialog);
}
showDialogButton.addEventListener('click', function() {
dialog.showModal();
});
dialog.querySelector('.close').addEventListener('click', function() {
dialog.close();
});
}
}
<!-- Button to trigger Modal-->
<button class="mdl-button mdl-js-button" id="show-dialog" data-toggle="modal" data-target="#upload-pic">
Show Modal
</button>
<!-- Modal -->
<dialog id="upload-pic" class="mdl-dialog mdl-typography--text-center">
<span class="close">×</span>
<h4 class="mdl-dialog__title">Hello World</h4>
<div class="mdl-dialog__content">
<p>This is some content</p>
</div>
</dialog>
I use MDL with bootstrap and the modal is displayed correctly after adding the data-backdrop attribute this to the modal element:
<dialog data-backdrop="false">
Hope it helps!
I want my page to load javascript dynamically to my body:
<script type= "text/javascript" src="this path should be decided from wicket dynamically"/>
I am using wicket version 1.4 therefore JavaScriptResourceReference does not exist in my version (for my inspection it wasn't ' )
how can I solve this ?
thanks in advance :).
I specify my comment into an answer.
You can use this code snippet:
WebMarkupContainer scriptContainer = new WebMarkupContainer("scriptContainer ");
scriptContainer .add(new AttributeAppender("type", Model.of("text/javascript")));
scriptContainer .add(
new AttributeAppender("src", urlFor(
new JavaScriptResourceReference(
YourClass.class, "JavaScriptFile.js"), null).toString()));
add(scriptContainer );
and the corresponding html:
<script wicket:id="scriptContainer "></script>
Just change the string JavaScriptFile.js to load any other Javascript file.
JavascriptPackageResource.getHeaderContributor() does exactly what you need.
You need nothing in your markup, just add the HeaderContributor it returns to your page.
Update: For Wicket 1.5 see the migration guide, but it goes like this:
public class MyPage extends WebPage {
public MyPage() {
}
public void renderHead(IHeaderResponse response) {
response.renderJavaScriptReference(new PackageResourceReference(YuiLib.class,
"yahoo-dom-event/yahoo-dom-event.js"));
response.renderCSSReference(new PackageResourceReference(AbstractCalendar.class,
"assets/skins/sam/calendar.css"));
}
}
If you want to put your <script> element in the body, you can simply declare it as a WebMarkupContainer and add an AttributeModifier to set the src attribute. Although in that case wicket won't generate the relative URLs for you, you have to do it yourself.
I'm not sure I understood completely.
If you are trying to create and append a script to the body after the page is loaded you should do it this way:
<script type="text/javascript">
function load_js() {
var element = document.createElement("script");
element.src = "scripts/YOUR_SCRIPT_SRC.js"; // <---- HERE <-----
document.body.appendChild(element);
}
// Wait for the page to be loaded
if(window.addEventListener)
window.addEventListener("load",load_js,false);
else if(window.attachEvent)
window.attachEvent("onload",load_js);
else
window.onload = load_js;
</script>
What I did here is create a new script element, and then apply to it its source.
That way you can control dynamicaly the src. After that I append it to the body.
The last part is there so the new element is applied only after the page is loaded.
I'm stuck -
I need to have a Wicket Panel be able to add a class attribute to the <body> tag of whatever page it's on.
Example usage:
Java:
add(new SpecialSidebarComponent("sidebar"));
Generated HTML:
<body class="sidebar">
...
<div id="sidebar">My Wicket Panel</div>
...
</body>
I cannot add a wicket:id and make the body a Wicket component, because this makes it very difficult to add components to a page in the big page hierarchy I have, and it still also doesn't easily allow for a Panel to modify the body attribute.
I thought BodyTagAttributeModifier may be for this, but apparently it is for something else and cannot get it to function ( Wicket: how to use the BodyTagAttributeModifier class? )
Any helpful ideas?
Update:
In looking at it, it appears the BodyTagAttributeModifier class is only for a Panel's parent tag, not the Page's <body> tag:
Example (Scala syntax):
class Home extends WebPage {
add(new Sidebar("sidebar"))
}
class Sidebar(id: String) extends Panel(id) {
add(new BodyTagAttributeModifier("class", true, new Model("layout-class"), getParent))
}
Template:
<html>
<body>
<div wicket:id="sidebar">Sidebar</div>
</body>
</html>
Rendered:
<html>
<body>
<div class="layout-class">
<h1>Hello World!</h1>
</div>
</body>
</html>
Very confusing name IMHO. Doesn't solve the issue but at least makes more sense.
I personally think the Javascript option is the cleanest for this specific case. However, your comment about add(Component...) being final leads me to believe that you might be interested in the setTransparentResolver(true) method. Here's how it works...
BasePage.html
<body wicket:id="body">
<div wicket:id="panel" />
</body>
BasePage.java
public class BasePage extends Page {
public String bodyClass = "";
public BasePage() {
super();
WebMarkupContainer bodyContainer = new WebMarkupContainer("body");
bodyContainer.setTransparentResolver(true);
bodyContainer.add(new SimpleAttributeModifier("class", new PropertyModel<String>(this, "bodyClass")));
}
}
MyPage.java (extends BasePage)
public class MyPage extends BasePage {
public MyPage() {
super();
add(new SidebarPanel("panel"));
super.bodyClass = "sidebar";
}
}
Even though you are not adding the SidebarPanel directly to the bodyContainer in the BasePage, it will still work out because of setTransparentResolver(true).
For your simple case, go with the Javascript. For the general issue of feeling constrained by subclasses not being able to fit inside containers, be aware of transparent resolving.
If you really can't give the <body> tag a wicket:id (I'll assume you don't have a BasePage that every, or almost every, other page extends in which to abstract this), it'll be not possible to know at page render time (when that <body> tag is rendered) what class to append to it, it will be simply copied as is from your HTML to the output.
You could achieve the same via javascript, however. Make your Panel implement IHeaderContributor and use IHeaderResponse.renderOnDomReadyJavscript().
public abstract class SpecialSidebarComponent(String id) extends Panel
implements IHeaderContributor {
.....
public void renderHead(IHeaderResponse response){
String javascript = "document.body.setAttribute('class', 'sidebar');";
response.renderOnDomReadyJavascript(javascript);
}
....
}
I think you were on the right track with BodyTagAttributeModifier, at least according to JavaDoc. The compilation problems in the linked article stem from the use of a non-existing Constructor...
in SpecialSidebarComponent you should be able to do this:
add(new BodyTagAttributeModifier("class", Model.of("sidebar"), this));
Can't try this right now because I'm not at my development computer...