I am using wicket components here. My view is as below.
I need to regenerate the report and reload the report frame with the button click (GO). But this div is not reloading even I replaced old element with a new report element. Can anyone help me with this?
form.add(new AjaxLink<Void>("goLink") {
#Override
public void onClick(final AjaxRequestTarget target) {
System.out.println(reportType+"go button clicked");
final IResourceStream stream = renderItems();
//generate report and create a new component using that.
Component component = new AIAIframe("reportFrame", stream);
component.setOutputMarkupId(true);
this.addOrReplace(component);
System.out.println("new framwe added reportframe");
}
});
add(form);
Please find the markup.html below
<wicket:extend>
<div style="margin-left:3%;">
<form wicket:id="form">
<span>
<h4>Report Erscheinung Auswahl</h4>
<select wicket:id="chooseType" style="margin-left:5%;">
<option>Kostenvoranschlag</option>
<option>Aufträge</option>
<option>Rechnungen</option>
</select>
</span>
<span>
GO
</span>
</form>
</div>
<br>
<style>
a.downloadLink {
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 6px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.aia-center {
margin:0 auto;
padding: 6px;
}
</style>
<div class="aia-center">
<span>Download as: </span>
<select wicket:id="formatSelect">
</select>
Download
</div>
<span style="height: 100%; width: 100%" wicket:id="reportFrame"></span>
You need to call target.add(component) if you want this component to be re-rendered with the Ajax response.
Since you re-create the component with wicket:id="reportFrame" you need to make sure that the initially rendered one (before the Ajax request) also had .setOutputMarkupId(true) so that the Ajax logic can find it in the browser DOM and replace it with the new one.
Related
My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?
I'm a beginner in web-programming and I've got this problem with a search bar. The thing is how do I finish it so it'd give out a drop bar with prospective results to choose from and to select other div to give out the search results themselves? Should be something similar as the tag search bar down this page.
The code is below and thanks in advance! WHERE "TODO"!!!
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
var delay = (function(){ // to set timer
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function() {
var $search = $("#search");
$search.keyup(function() {
delay(function () {
var $string = $("#search").val();
if ( $string == "" || /\s+$/.test($string)) return;
var $tag = $string.match(/\S+$/)[0]
$.getJSON('/get_tags_by_substring', {'tag':$tag}, function ($data) {
console.log($data);
/* TODO */
});
}, 500);
});
}); </script> </head>
<style>
.search_bar{
bottom: 5px;
right: 100px;
/* margin-right: 10px; */
float: right;
} </style>
<header> <style type="text/css"> .form {
float: right;
margin-top: 0px;
margin-right: 10px; } </style>
<div id="wrapper">
<div id = "header" style="display: table; width: 1150px;">
<div id="logo" style="display: table-cell;">
<a href="/">
{% load staticfiles %}
<!--img src="{% static '.../images/logo_1.png'%}" alt="... logo" align="left"-->
</a>
</div>
<div style="display: table-cell;">
<nav id="navig" style="margin:0px;">
<ul>
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
</ul>
</nav>
</div>
<div class="search_bar">
<input type="text" id="search" placeholder="tag..."/><br/>
<div id="search_results"></div>
</div>
</div>
</div> </header>
Let's consider I have a HTML markup:
<div class="pull-right">
<div class="btn-group">
<a href="#" class="btn btn-default">
<i class="ico ico-prev"></i>
</a>
<div class="dropdown2 inline">
<a href="#" class="btn btn-default btn-shorter">
<strong>1-8</strong>
</a>
<ul class="dropdown-menu spec_width">
<li><a data-ico="1" href="#">10-30</a></li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
</ul>
</div>
<a href="#" class="btn btn-default">
<i class="ico ico-next"></i>
</a>
</div>
<span class="page-title">from<strong>45</strong></span>
.dropdown-menu {
padding: 0;
margin: 0;
left: -1px;
top: 37px;
font-size: 13px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
-moz-box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
box-shadow: 0px 0px 25px 0px rgba(100, 100, 100, 0.5);
border: 1px solid #d1d4d3;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
background-color: #f9f9f9;
}
.dropdown-menu li > a {
color: #4d5357;
padding: 8px 20px;
}
.spec_width {
width: 72px;
min-width: 72px;
left: 50% !important;
margin-left: -36px;
max-height: 150px;
min-height: 30px;
float: left;
overflow: hidden;
display: block !important;
visibility: hidden;
}
.spec_width li {
line-height: 29px;
width: 100%;
text-align: center;
padding: 4px 0;
}
.spec_width li:hover {
background: #e1e1e1;
}
.spec_width li a {
padding: 0px 0;
background: none !important;
width: 100%;
text-align: center;
}
I use that markup in ModalWindow, and it works pretty good, but when I apply CSS class to <ul> tag I don't see it in the browser, but when I inspect element, it generates in HTML code. I think that it must be because I use it in ModalWindow, and something(script, style) is conflicted. Any ideas?
In order to use Wicket to create HTML emails, we need to fake the request/response cycle. I wrote this convenient method that renders a bookmarkable page (pageclass + pageparameters) to a string:
http://www.danwalmsley.com/render_a_wicket_page_to_a_string_for_html_email
protected String renderPage(Class extends Page> pageClass,
PageParameters pageParameters) {
//get the servlet context WebApplication application =
(WebApplication) WebApplication.get();
ServletContext context = application.getServletContext();
//fake a request/response cycle MockHttpSession servletSession =
new MockHttpSession(context); servletSession.setTemporary(true);
MockHttpServletRequest servletRequest = new MockHttpServletRequest(
application, servletSession, context); MockHttpServletResponse servletResponse = new MockHttpServletResponse(
servletRequest);
//initialize request and response servletRequest.initialize();
servletResponse.initialize();
WebRequest webRequest = new WebRequest(servletRequest);
BufferedWebResponse webResponse = new
BufferedWebResponse(servletResponse); webResponse.setAjax(true);
WebRequestCycle requestCycle = new WebRequestCycle(
application, webRequest, webResponse);
requestCycle.setRequestTarget(new
BookmarkablePageRequestTarget(pageClass, pageParameters));
try { requestCycle.request();
log.warn("Response after request: "+webResponse.toString());
if (requestCycle.wasHandled() == false) {
requestCycle.setRequestTarget(new WebErrorCodeResponseTarget(
HttpServletResponse.SC_NOT_FOUND)); } requestCycle.detach();
} finally { requestCycle.getResponse().close(); } return
webResponse.toString();
}
The problem was solved after I append target.appendJavaScript("launchJS();"); where I had AjaxRequestTarget in my pages.
I need to give Background color for Tabs in jsp.
<div id="tabs" style="width: 790px;">
<ul>
<li><spring:message code="Tab1" /></li>
<li><spring:message code="Tab2" /></li>
<li><spring:message code="Tab3" /></li>
<li><spring:message code="Tab4" /></li>
<li><spring:message code="Tab5" /></li>
<li><spring:message code="Tab6" /></li>
</ul>
my tab background color should be orange color.
Excepted result is
Attack UL tag:
#tabs ul { background-color: orange; }
#tabs a { background-color: orange; }
after Attacking li tag, I got background color for tab alone.
#tabs li {
display:inline;
background-color:orange;
border-top: .1em solid #03c;
border-left: .1em solid #03c;
border-right: .1em solid #03c;
}
Thanks for other friends help.
I am trying to build a photo gallery with Zenphoto. They use php and one can add a custom menue like this:
<div id="navmenu">
<?php printCustomMenu('main_menue'); ?>
</div>
I changed the appearance of the whole thing in the sylesheet, which looks like this:
#navmenu {
width: 1000px;
height: 42px;
margin: 0px auto 30px auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: left;
font-size: 21px;
background-color: #000000
}
#navmenu li {
display: inline;
}
#navmenu a {
color: #eee;
display: inline;
line-height: 2em;
padding: 0.375em 0.5em;
text-decoration: none;
}
#navmenu a:hover {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 21px;
color: #000000;
background-color: #ffff33;
padding: 0.375em 0.5em;
}
Now I want to change the background-color of the individual menu items, so that every menu item has its own color. Random or not I don't care. I created a js file that is wired correctly.
I have tried several bits of code I found, but nothing works. Now I tried to do this to see if I can change the color at all:
$(document).ready(function() {
$("navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
Does not work. I am new to all this programming and I would greatly appreciate any help. It would be super nice if you could answer for dummies, so that I can understand.
Use:
$("#navmenu").hover(function(){
You missed the ID # selector.
You need to properly address the div using # for an ID or a . for a class:
$(document).ready(function() {
$("#navmenu").hover(function(){
$(this).css('background-color', '#eeeeee')
});
});
A tip for beginners: if you're not getting the result you expect, you can verify that the function is being called by throwing in a console log message anywhere like this:
$(document).ready(function() {
console.log("document ready!");
$("#navmenu").hover(function(){
console.log("hover activated");
$(this).css('background-color', '#eeeeee')
});
});
You could give something like this a try as it will pick a random color on hover and switch back to the #EEE background on the hover out event:
jQuery:
$(function () {
$("#navmenu a").hover(function () {
var newColor = Math.floor(Math.random() * 16777215).toString(16);
$(this).css('background-color', '#' + newColor);
}, function () {
$(this).css('background-color', '#EEE')
});
});
Working Example: http://jsfiddle.net/Qc4R7/