Im trying to figure out how to create a wicket component wicket could represent a div that is then used by the Bootstrap-wyiswyg javascript. Once the page is submitted i want to be able to get the content of the div and have that represented on the server, in a IModel<String>.
The part im struggling with is getting the content from the div to the server-side. For instance if i used a textarea i would just have my component extends TextArea and that would do all of this for me. So really what im asking is whether there is a wicket component that i can add as a <div wicket:id="mycomponent"></div> but onsubmit populate the component's Model with the content of the div from the client-side. Or do I have to write all this code myself?
You can try adding a normal "wicket" textarea to your form (with display: none) and add a jQuery handler for the form's submit event that will do something like:
$('your-text-area-selector').html($('your-wysiwyg-div-selector').html());
Related
I have a situation that i can't handle and thats why need your help.
I have a jsp page (mention as A in below pic) where there are many rows and each of them can be edited.
At the end of the A jsp page, there is an option to print the page data.
Now, if some body clicks on the edit link/button, another page will open contain the data for that particular row and user can modify the data in the second page(i,e B).
Now, i want, as soon as the user save the B page, A page should be refreshed automatically to provid the updated data for printing.
Please guide me on how to acheive that . I'm using Spring MVC framework for the java application.
The Spring MVC way to meet your requirement is:
the Edit buttons in page A should be links calling page B with the id of the line to edit, something like Edit
the SaveAndClose button in page B should be a submit button that posts the edited values to a controller method. After server side processing, the controller method should redirect to page A. As a side effect, you use the PostRedirectGet pattern which avoids the ugly do you want to send again ... ?"
#RequestMapping(path = "...", method = RequestMethod.POST)
public String saveAndClose(...) {
...
return "redirect:/path/to/pageA";
}
Of course this will display all pages in same window.
If you want to redisplay the window containing pageA on the Save & Close from page B, still allowing the save to be known to the server, you should redirect to a special page (say pageC) that just contains javascript code asking the browser to redisplay pageA. You can either pass the name of the window containing pageA in a hidden field, or you can decide that as the programmer of the web application you know where it should be.
It can be achieved like this. Follow the steps mentioned
1] When you click on edit button in Page A, pass the id of the row to Page B as request parameter.
2]In Page B JSP receive the id of the row and store it in a hidden element.
3]Create a JavaScript function in Page A which should receive row Id and Modified data as parameter. Lets name it this function as updateRows(rowId,modifiedData). In this function write code to update the with id 'rowId' with modified data using javascript
4]Now When you click on 'Save & Close' Button in Page B. Save the data using call to server. If save succeeds then invoke the function updateRows passing it rowId stored in hidden element and modified data as parameters. This function will update the DOM with latest data.
This way you will avoid making server call to refresh the data
There is one more way if you don't want to use ajax.
In Page A define a javascript function refreshPageA(). In this function add page refreshing logic.
When you click on 'Save & Close' button in Page B save the data in server and forward to a plain jsp. In this JSP declare a onload handler. Inside onload handler add following code
opener.refreshPageA();
window.close()
This will refresh pageA and close page B window
I'v build a JSF component which works fine, I can see that it's being rendered the way i want.
I have problem when open a pop up from the page.
when I return from the pop up I can in the component renderer that the attributes of the component are null. and so the html DOM element are not it was before I opened the popup.
when I reload the page the attributes gets their values.and the html DOM element back to normal.
Anyone know why ?
<MyComponent attr1="test1" attr2="test2">
</MyComponen>
I solve the problem after overriede saveState and restoreState methods of UIComponentBase
in my component.
I have a datatable with some items. The datatable has some css on the table tag. When I update the dataproviders model list and send the component back with ajax the css doesn't get rendered.
However if I send the entire page using ajax the table is rendered correct.
Example:
<wicket:panel>
<table class="striped">
</table>
</wicket:panel>
This css class gives odd and even a different css.
This is how I update the component after changing the dataprovider.
ajaxRequestTarget.add(MyPage.this.get("myPanel")); //this panel contains the table
The data gets added but the css markup is gone.
Refreshing the page brings back the css.
ajaxRequestTarget.add(MyPage.this); //send the entire page
This works but the entire page gets refreshed(and this make the page scroll up.
Whats the difference in component rendering if you send the entire page, instead of only 1 component/panel?
I'm using chrome.
If you render styles via jQuery, you'll have to call it again to re-paint correctly.
ajaxRequestTarget.appendJavascript("renderMethod('.striped');");
I have this table column which sometimes needs to be hidden..
<td id="row1"><span wicket:id="state">Servicio de Reprografia</span></td>
Is it possible for me to find this somehow through java code and add a hidden attribute in order to completely hide this markup?
You will need to use <wicket:enclosure> to hide the surrounding markup when the wicket component is hidden:
<wicket:enclosure>
<td id="row1"><span wicket:id="state">Servicio de Reprografia</span></td>
</wicket:enclosure>
state.setVisible(false);
target.addComponent(state);
I suppose you want to do this in an onClick() or onSubmit() handler of one of your components on the page. In this case, you have to call:
getPage().get("path:to:component").setVisibleAllowed(false);
Furthermore, if you do this within an AJAX callback, you have to add the (now hidden) component to the AjaxRequestTarget.
path.to.component corresponds to the nesting of your wicket components. This will allow you to hide the <span> element. If you want to hide the <td>, too, I'd advise to move your wicket:id tag to the <td>element.
I am trying to use an image for a submit buttin like this
<input t:id="submitButton" t:type="image" type="image" src="images/h_logon_button.png"/>
but when i render the page, i get this error
Unable to resolve 'image' to a component class name.
How do I use an image to create the submit button. if I use css, the image disappears after validation fails.
Any ideas?
Tx
CSS will work. It sounds like another CSS rule with higher specificity is applied to the button on failed validation. Just inspect the button and see which rule overwrites it.
The error you are seeing is due to the t:type="image". Here you are telling tapestry that your input should be of component type image. You can fix this in three ways:
Remove the t:id="submitButton" and t:type="image" so that your submit will just be a plain old html submit
change the t:type to submit like t:type="submit"
Remove the t:type="image" and add a component relating to your provided id like #Component(id="submitButton") private Submit submitButton;
Tapestry has a specific component, ImageSubmit, for your situation.