Button not working after javascript call - jsf

By clicking a commandLink, I call an event on actionListener and after that, my dataGrid updates via AJAX then, onComplete, I call a javascript. It works fine on the first time but when I click the commandLink again, it does nothing.
Here's my code:
<p:commandLink id="addCompBtn" value="Add Computer" actionListener="#{coltsysLab.addComputer}" update=":organizeForm:availableComputers :organizeForm:labStat" oncomplete="getPos();"/>
My Javascript just positions each computer in a specific fixed location.

I am not sure what getPos() does; however, let's assume that it does not release event binding to the input DOM.
Try updating the commandLink as well:
<p:commandLink id="addCompBtn" value="Add Computer" actionListener="#{coltsysLab.addComputer}" update="#this,availableComputers,labStat" oncomplete="getPos();"/>

You should try removing oncomplete="getPos();" from your button and test again. If the button works fine beyond the 1st time then the problem must come from your JavaScript function. If that's the case, you should use the Developer Tools on any browser to investigate the issue. For example, on Chrome browser, right-click anywhere on the page then click Inspect Element, the Console section might help.

Related

How to make Bootsfaces datatable display a dialog box on row selection

Currently working on a project which uses Bootsfaces. I have a bootsfaces datatable in which i need to open a dialog box upon row selection. Please advice how to proceed.
Below is the code
<b:dataTable onclick="$('viewBKDDialog').show()"
update=":ViewBKDForm"
value="#{bookingAdminController.itemsBookDet}"
var="car" ajax="true" select="true" responsive="true" >
</b:dataTable>
and i m using
<ui:include src="ViewBookingDetails_all.xhtml"/>
as the dialog box.
Currently, I don't have the complete solution, but let's analyze your code. That's interesting enough.
First of all, you want to open a modal dialog based on the selected row. (Actually, the "modal dialog" bit is an educated guess). However, you added the onclick handler to the entire table. JSF doesn't make the rows explicit, so you have to add the onclick handler to the cells of the table. For the sake of simplicity, let's assume you've assigned the onclick handler to a button within the table.
Second, there's a bug in every BootsFaces version <= 0.9.1 that prevents you from detecting which row has been selected. So you have to use a version >= 0.9.2. At the time of writing, that's the developer snapshot BootsFaces-0.9.2-SNAPSHOT. See issue 369 on how to get it and issue 486 on the row-select bug I've recently solved.
Third, you should take in mind that the JavaScript code of the onclick handler is executed before the AJAX request. I can only guess, but I assume that you want to update the content of the modal dialog based on the row selection. I also assume that the content is defined by an AJAX request. If both assumptions are true, you've got a problem. The onclick handler is executed before the AJAX call. So I suggest you use the oncomplete JavaScript callback handler that's offered by some BootsFaces components, such as b:commandButton.
Like I've said before, that's not a complete solution, but I hope it helps nonetheless.

How can I open a dialog when the page is opened

In one of our page we have a search button that open a search dialog so that the users can search and import some data from a remote system.
Now got I new requirement that this same dialog must be showed every time the page is opened - but only when the page will be used to create a new registry, in the update mode it should be showed only if the user click the button.
I've already tried some things, I can call the dialog by MB using Primefaces engine as below:
RequestContext.getCurrentInstance().execute("dialogArmaBos.show()")
This command Works great for the button case, but I can get it working when the page opens. If I try to use in the PostConstruct nothing happens.
I tried also <f:event type="preRenderView" ... with <f:metadata ... but nothing changes too.
Is there some way to make it?
According to the fabulous PrimeFaces documentation There is a visible attribute. Quote from the docs:
visible false Boolean When enabled, dialog is visible by default.
So simply use an EL in that attribute to have it show on pageload
<p:dialog visible="#{myBean.createMode}"... >
and have a boolean field in that bean that returns true if in creation mode.
For the rest you can show/hide it with the client-side api if needed

Close SP.UI.ModalDialog without returning result

I have a SP.UI.ModalDialog. On the dialog there are two radio buttons:
Agree
Disagree
Then there is a submit button. The submit button checks to see what the value of the radio button is.
OnClick="if(document.getElementById('Agree').checked){var results ={result:'agree'};return SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK,results);}else{var results ={result:'disagree'};return SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,results)}">
Now I want to add a "Close dialog" button, that simply closes the dialog. I don't want it to return any results. How can I simply close the dialog?
The following is not working for me:
OnClick="window.frameElement.SP.UI.ModalDialog.commonModalDialogClose();"
For anyone referencing this question in the future, apparently the problem is internet explorer in my dev environment. Not sure if it's so much a browser issue as it is a dev environment issue, though. The same code works in QA with the same version of ie. Will have to investigate my browser settings further in my dev envrmnt.
For what it is worth, I was also struggling with using a button to close a modal window. Passing null worked for me.
var _html = document.createElement();
_html.innerHTML = 'Something written in here <input type="button" value="Close" onClick="SP.UI.ModalDialog.commonModalDialogClose(1, null)">'

moving from javascript window.open to Rich:ModalPanel

In my web application currently there are many pop up windows made by various JS function which i would like to replace with Rich:ModalPanel (I'm using Myfaces 2.0.12 and RichFaces 3.3.3). Below is a typical example i like to replace:
window.open("<%=basePath1%>jsp/custhistory.faces?userid="+pk);
where pk is the value retried from a hidden input such as <h:inputHidden id="userPk" value="#{1234}"/> inside the javascript function and then added to the end of the url above.
Looking at few RichFaces ModalPanel examples (and demos) i can't figure out how i can make the above work using ModalPanel. Can someone please provide an example or a link to a resource o
I have been using Richfaces 4, but the same theory should apply.
The modal panel is essentially a div that can be shown or hidden, so you could add a <ui:include> in there if you specifically need (or want) the panel to be a seperate file.
The modal panel is rendered as part of your page, but is styled as display:none I believe. If this is triggered by a client action you can call the Richfaces API to show the panel on command.
For instance instead of a command(Link|Button) triggering Richfaces.$('elName').show() it could trigger your js function which sets and values/params your modal panel needs and then call .show() itself.
Note: IE and firefox had a truly modal popup. This is not truly modal and javascript will process in the background, and if you do not give focus to the popup panel if the user types it will interact with the application in the background.
I had used a modal js popup to prompt a user with a yes/no question int his type of idiom
if(askUser("some question?")=='yes'){
//some code to do if yes
}else{
//some code to do if no
}
Depending on how generic you want this popup, that is not really possible without using an event that is fired and defining an event handler for that event to handle the rest of the function.

Intercept a4j:commandButton request

I am developing web application using A4J, Richfaces.
One of my requirement is, I need to check if the user has changed any values in the form when he is trying navigate away from the page.
I have save and cancel buttons in the page.
I am using a4j:command button for cancel functionality. Clicking on cancel button should do below things
Check if the user has modified anything in the form (this I am doing by using javascript and have a flag if user changed any values)
Display confirmation box (javascript confirm with values "Do you really want to discard the changes -- YES NO") when user changes form values
If user says YES, then submit the form using AJAX (by using A4J)
My a4j command button code is like this
<a4j:commandButton action="MyClass.cancel_action"
onclick="checkIsPageChanged()"/>
The issue here is, while using using a4j:commandButton, I cannot call the intermediate javascript function (the function which checks if user has updated any values and displays confirmation box) and then submit the request using ajax.
I have looked at the code generated by JSF and the code is like (not the exact but syntact)
<input type="button"
onclick="checkIsPageChanged();AJAX.submit('')/>
The thing is when I click on button, it is calling only checkIsPageChanged() and not calling AJAX.submit().
Any workaround for this will help me.
Thank you in advance.
Use a4j:jsFunction and call that from your a4j:commandButton when the checkIsPageChanged() returns true.
eg.
<a4j:commandButton action="MyClass.cancel_action"
onclick="if(checkIsPageChanged()) { cancel(); }"/>
<a4j:jsFunction name="cancel" action="MyClass.cancel_action"/>
To be more specific we can use:
onclick="if(!isPageChanged()) {return false}"
Returning false will not submit the request.

Resources