Develop Reference

JavaScript only loads once per tab? (Multiple "pages" with tables in single page)

Alright, so I'm creating a script to avoid activating a link in a parent div. I've added an image of the website to give you an idea of what it looks like and to make it easier for me to explain. The white tabs are controlled by Ajax and all of them are loaded when the Orders/Subscriptions page is loaded.
All the rows in the table are clickable, and the blue cogwheel shows a dropdown when you hover over it. This dropdown contains several links that need the javascript/jquery code to not activate the row link instead. The problem is that when you switch tabs, the js code won't run unless you reload the page (the active tab stays when reloaded), but the users of the website shouldn't have to reload the page every time they switch between the tabs.
I have absolutely no idea why the .js file only works on the active tab. Everything is written in Wicket/Java using a lot of Ajax events for this page.
JavaScript:
$(document).ready( function () {
$('.dropdown-menu > li > a').on('click', function(event) {
event.stopPropagation();
alert('Propagination Stopped');
});
EDIT:
Alright, so I now know it works if I add
location.reload();
when the tabs are clicked, but I kinda want to avoid this since that adds unnecessary loading time.

I figured out what the problem was. Since I use Ajax for the tabs I had to add
$(document).ajaxComplete(function { myFunction });
and put the onClick in there. That way it would load properly every time I switched tabs.
The invisible tables in the inactive tabs had display: none; which mean when they are set to display: visible; it isn't part of the DOM. So the script won't run unless page is reloaded.
Don't like answering my own question, but felt like the info should be shared.
Thanks for the help anyways guys!

You haven't shown how your script elements are defined and added to the DOM, so it's hard to be specific.
Once a script element has been added to the DOM (directly, or via markup), it is run once. If you want any functions defined by that script to be run again, you have to run them. So in your tab-switching code, add code to call a function if you want it to be run for that tab.
You also haven't shown how you're loading the tab content, or whether the tab content defines script tags. It's best not to have the tab content contain any more script than necessary. Instead, have a main script file loaded with the page that defines the main functions, and then at most have a single script in the dynamically-loaded tab content that executes a single function call to that already-loaded code. If you're loading via jQuery's load, it'll call the scripts for you unless you use a fragment identifier with load. (If you use a fragment identifier with load, it disregards scripts in the content entirely.)

I think this will help you!
the html code example
<ul id="ajaxContainer">
<li>the default content in your app</li>
</ul>
<nav id="pagination">
<ul>
<li><a class="active" href="/ajaxpath1">1</a></li>
<li>2</li>
<li>2</li>
</ul>
</nav>
<script src="jquerypath/jquery.js"></script>
<script src="appjspath/app.js"></script>
Code in your app.js as bellow
$(function() {
var $ajaxContainer = $('#ajaxContainer'),
CLSA = "active",
DOT = ".",
$pagination = $('#pagination'),
hasElMakeShow = function($el) {
//just make elment show hide
$el.show().siblings().hide();
},
appendNewEl = function($el) {
//new data requested should be append to container element
$ajaxContainer.append($el);
hasElMakeShow($el);
},
initBindEl = function(){
//init bind first active pagination el with its data elment
var $li = $ajaxContainer.find('>li'),
$active = $pagination.find(DOT + CLSA);
$active.data('el', $li);
},
switchNavA = function($el) {
//do some pagination switch active class work
$el.addClass(CLSA).closest('li').siblings().removeClass(CLSA);
};
initBindEl();//first bind current pagination
$pagination.delegate('>li a', 'click.page', function(e){
e.preventDefault();//prevent default jump
var $me = $(this),
isActive = $me.is(DOT + CLSA),
$targetEl = $me.data('el');
if(!isActive) {
if($targetEl.length) {
hasElMakeShow($targetEl);
} else {
var url = $me.attr('href');
$.get(url, function(data){
var $respondEl = $(data);
$me.data('el', $respondEl);
appendNewEl($respondEl);
switchNavA($me);
});
}
}
});
});

Refresh only update panel on parent from pop-up window

I have a button which opens a pop-up window and an Ajax update panel. Inside that window I have another button.
What code do I have to run if I want that update panel to be refreshed, when I press the button from the parent page, without refreshing the whole page?
I sow this code on a web which refreshes the page:
<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">
I am such a good friend with Java.

You need to utilize window.opener object.
window.opener.document.getElementById('Container').onclick();
I'd suggest using jQuery to ensure cross-browser compatibility. And also adding some null-checks of course.

Use Jquery :
If the DIV ID remains static :
$("#Container").click(function() {
// REFRESH CONTAINER HERE
});
If the Div ID is dynamic then make use of class instead of ID:
$(".Container").click(function() {
// REFRESH CONTAINER HERE
});

Panel Popup In JSF 1.1

Is it possible to have panel popup window in JSF 1.1 ? I would like to display a popup window when I click edit button and then would like to have few components in that panel popup window.
I am not using any other JSF like icefaces or richfaces, just plain JSF 1.1.
Any help is highly appreciable.
Thanks

Yes, it's definitely possible. Just bring in some good shot of JavaScript and/or CSS to show/hide and style the popup window. That's also what the average component library like RichFaces is doing with the only difference that it's all wrapped in a simple JSF component.
At its simplest you can use JS window.open() on click of a button/link.
<h:commandButton value="Edit" onclick="window.open('edit.jsf?id=#{item.id}'); return false;" />
The window.open() allows for fine grained customization of the window, such as the size and the browser bars which are to be displayed/hidden. Read the MDN documentation to learn about them. Returning false is mandatory to prevent the button from unnecessarily submitting the form.
Then, in the constructor of the backing bean associated with edit.jsf, you can grab the item by the id which is been passed as request parameter.
private Item item;
public EditItemBean() {
String id = (String) FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
this.item = someItemService.find(Long.valueOf(id));
}
Nasty, but that's what you get with JSF 1.1 which doesn't offer a JSF 1.2-supported #PostConstruct annotation or JSF 2.0-supported <f:viewParam> tag.
Finally, in the edit.jsf you need to bring in some conditionally rendered JavaScript piece which reloads the parent window (so that the edited data is redisplayed) and closes the popup window.
<h:form>
...
<h:commandButton value="Save" action="#{editItem.save}" />
</h:form>
<h:panelGroup rendered="#{editItem.success}">
<script type="text/javascript">
window.opener.location.reload(true);
window.close();
</script>
</h:panelGroup>
Set the success boolean in the action method when the saving is successful.
public void save() {
// ...
this.success = true;
}
There exist also solutions using a so-called "overlay window" dialog which is basically <div> which is positioned using CSS position: fixed; and spans the entire browser window with a transparent background and then therein another <div> which is centered and contains the real form. This however requires a bigger shot of JS/CSS. This is also what the average JSF component library and JavaScript framework/plugin (such as jQuery or YUI) is basically doing. It's only trickier to get it work seamlessly together with JSF as you would of course like to redisplay the popup when a validation error on the popup form occurs and that kind of things. It's much easier if you're using an ajax-enabled JSF implementation/library.

Howto set focus in Rich Faces panelBarItem?

Hi
I want to set focus on <h:inputText> element whenever rich:panelBarItem is opened.
I have:
<rich:panelBar>
<rich:panelBarItem onenter="setFocus();">
<h:inputText value="#{bean.value}"/>
</rich:panelBarItem>
</rich:panelBar>
it works fine when I open it with mouse click, but does not work first time when first panelBarItem is automatically opened.
How should I set focus on first opened panelBarItem? I really would like it to be some event(I could not find) on rich:panerBarItem or rich:panelBar.

You can call your method after page load to set focus to field. Something like
<script>
//call after page loaded
window.onload=setFocus();
</script>
or
<body onload="setFocus();">

Click inside iframe open event in parent (same domains)?

I want to use .slideToggle to open event details from my calendar (in iframe) My code is:
<div id="clickme"><iframe id="frame" src="index.php?option=com_jevents&view=month&task=month.calendar&template=ja_purity" mce_src="index.php?option=com_jevents&view=month&task=month.calendar&template=ja_purity">Your browser does not support iframes.</iframe></div>
<div id="book" style="display:none;"><iframe name="details" scrolling="no" frameborder="0"></iframe></div>
<script>
$('#clickme').click(function() {
$('#book').slideToggle('slow', function() {
// Animation complete.
});
});
</script>
You can see how it works here: wisko.pl
Now slide work only when i click iframe border. I'd like it to open when i click on event in calendar. Is it possible? How can i use .click function to check divs inside iframe?
Update:
Thank you. Still doesn't work. Am I doing something wrong? My main document has:
<script>
function showevent(){
$('#book').slideToggle('slow', function() {
// Animation complete.
});
}
</script>
In Iframe i put:
<script>
$('#eventstyle').click(function() {
document.parent.showevent();
}
</script>

in main document:
function showevent(){
$('#book').slideToggle('slow', function() {
// Animation complete.
});
}
inside iframe:
window.parent.showevent();
running this inside iframe will cause the function to run. And you have to catch the click event inside the iframe - you can't otherwise.
edit:
1. My bad: i put document.parent here instead of window.parent - fixed now
2. Your bad: when you use jquery to assign click events to things, you have to be sure these things already exist. all jquery code should be wrapped in $(document).ready(function(){/*your code here*/}); That's why it had no chance of working for you.