having some problems with developing custom components in JSF. I am building a component which wraps some javascript generated charts (javascript appends SVG elements to specified div). They have some animations by the time they render. When some part of chart is changed, there is made modification for only part of the chart by calling some .js scripts (whole chart is not rendered again). So, the rendered component looks some like this:
<div> <--- master container
<span id="clientId" />
<script> .js script for chart generation </script>
<div id="chart">
<svg>...</svg> <--- generated by script
</div>
</div>
When is ajax render invoked with ID of this component, there is only span updated (so chart won't rerender). I catch the call, generate some modification script and return them to the client. Everything is ok.
The problem: when is updated some other component or container which holds this component with chart, the div "chart" is rerendered. Is there any server side way, how to exclude component to be updated?
Thanks
Related
I am building an XPages application based on a custom theme I bought.
I want to use include pages to display custom 'widgets' in the header
Unfortunatelly, the included pages are rendered in a tag, which is incompatible with the css stylesheet from the theme.
Here's the code including the pages (the idea is to make this configurable in the future)
<xp:panel styleClass="navbar-account">
<ul class="account-area">
<xp:include pageName="/nav_VisitIn.xsp"></xp:include>
<xp:include pageName="/nav_MyVisit.xsp"></xp:include>
<xp:include pageName="/nav_Profile.xsp"></xp:include>
</ul>
</xp:panel>
The rendered html looks something like this
The css for the list item tags (and all elements below) are similar to
.navbar-account .account-area > li {...}
I want to avoid having to modify all related styles from the theme.
Is there a way to make sure the include page is rendered without the div tag or can I remove the generated div tag (but not its content) from the DOM?
Try adding disableOutputTag="true" in your <xp:include> tags.
I have written fullcalendar code in one HTML file and want to use it in other HTML file in div tag, I did this by calling javascript function in which I set the innerHTML of div tag to object tag like:
document.getElementById("content").innerHTML = '<object class="preventScroll" id="calObj" type="text/html" data="Calendar.html" height="100%" width="100%" align="left"></object>';
It is rendering the calendar in div with id "content" but the dayclick and eventclick are not working
i guess you should try and add it as an dependent object rather than rendering it as html.
e.g:
document.getElementById("content").appendChild(calendarObject)
You loose the event binding because you are rendering an html and not "live" object
I have a 'My Scores' view in my Node JS / Sails JS app and I'm using partials, one for a List View, and another one for a Grid View. When the user clicks the Grid or List View from the nav bar I'd like to be able to swap the UI with the given partial.
List view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/list-view')%>
</div>
Grid view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/grid-view')%>
</div>
Please advise.
No problem--just use a variable for the partial name, instead of hardcoding it:
<%- partial(viewName) %>
then in your config/routes.js:
"/listView": {
view: "list.ejs",
locals: {viewName: "../partials/list-view.ejs"}
},
"/gridView": {
view: "list.ejs",
locals: {viewName: "../partials/grid-view.ejs"}
}
That's assuming you're just routing directly to views. If you're using a custom controller action and res.view() to display your content, you'll put the viewName value in the second res.view() argument, like res.view("list.ejs",{viewName: "../partials/list-view.ejs"}).
Now, if you're trying to do this without reloading the page, then #tonejac has the right idea in his comment--either switch them using Javascript/CSS, or use AJAX to load content on-demand. Sails can only help on the backend!
I'm using primeface timeline .first my timeline shows just loading then its displaying after I include code
<form prepenId="false" >
<p:timeline value="#{bean.value} />
</form>
.but my issue is the timeline shows just focus date in starting...and i cannot scroll or move content of timeline.the timeline is displaying just same content which s starting of my timeline (starting with focus date).but cannot move ...to left n right...cannot view others . ruler appears but its not moving the content of timeline.
It's available zooming and navigate on timeline component default on primefaces extension. Be sure that you use newest version of "primefaces-extension" component instead of old "primefaces" timeline component. Primefaces transferred development of timeline to primefaces extension. Send your all of your bean and facelts code please.
But there is an other way to set the options of original timeline plugin which framework use.
Set widgetVar attribute of timeline component:
<pe:timeline id="timeline" value="#{bean.events}"
eventStyle="box"
widgetVar="timelineWidget">
Then put or run this javascript on your facelet page:
<script type="text/javascript">
timelineWidget.jq.timeline(timelineWidget.cfg.dataSource,{"zoomable":"true"});
</script>
With this method, also you can set other properties which is javascript plugin support. Primefaces-Extension provide limited attributes of plugin.
Hope It'll help.
Press F5 in this example: DojoToolkit.
First the content is shown, and after that the layout gets into it's final state. In my application I want the opposite, so that the layout gets rendered, and after that the content is displayed. I don't want that 'jumping' phenomenon when loading. Is it possible to fix this somehow?
No, I don't think that there is such an option. Anyway, you could use a container div (with all the dojo layout elements in it) with initial state visbility:hidden, and after the page is loaded and parsed change it's visibility to "visible".
<div id="container" style="visibility:hidden">
<!-- dijit widgets inside the "container"-->
</div>
<script type="text/javascript">
dojo.ready(function(){
dojo.style("container:, "visibility", "visible");
});
</script>