Develop Reference

Button loading state Asp.net JavaScript

I using bootstrap and i want to use that; http://getbootstrap.com/javascript/#buttons-stateful
<asp:Button ID="Button1" runat="server" Text="Send It" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off" />
<script>
$('#Button1').on('click', function () {
var $btn = $(this).button('loading')
$btn.button('reset')
})
</script>
But it doesn't work. what can i do to work this?

When an ASP.NET control is rendered, it's assigned a new ID. If you do an inspect element on your button, you'll notice it's ID is actually not Button1. Because of this, your $('#Button1') selector is not finding anything.
If you're using a version of ASP.NET that supports it, you can put clientIDMode="static" on your button to keep the ID from changing.
If not, you can get the client ID by replacing $('#Button1') with $('#<%=Button1.ClientID%>')

Make sure jquery is loaded
Make sure boostrap css is loaded
Make sure bootstrap javascript is loaded
It looks like when your button is loaded it is immediately reset. Trying have the button load in the before step in an ajax request. Then put the rest in the complete step of the ajax step. This way you can see it working.

How to generate click event of panelgrid through jquery or javascript?

I am using JSF 2.0 and primefaces 3.0. I have a rowtoggler and rowexpansion. Since I am using primefaces old version so I dont have rowToggle event. And I need to call a method on server side through ajax at the time of row expansion. So I have put div tag around rowtoggler and calling a javascript function. Now I want to initiate ajax call through click event of panelgrid which is inside rowexpansion. If this happen then it would look like 3.4 rowToggle event.

You can use jQuery's event binding to execute Javascript when clicking on the row toggler.
<h:form id="form">
<p:dataTable id="dt" value="[1,2]">
<p:column>
<p:rowToggler />
</p:column>
</p:dataTable>
<p:remoteCommand name="remotecommand"
oncomplete="alert('remote command fired')" />
</h:form>
<script type="text/javascript">
$("[id='form:dt'] .ui-row-toggler").on("click", function() { remotecommand(); });
</script>
Explanation of Javascript:
The $("[id='form:dt'] .ui-row-toggler") selects the datatable by id (form:dt) and then selects all descendants that have the style class ui-row-toggler.
The .on("click", function() { remotecommand(); }) binds an anonymous function to a click event which fires a Javascript function declared by p:remoteCommand.
You can use the p:remoteCommand to execute bean methods with it's action or actionListener. ;-)
Note that this I don't find this to be a long term solution. Upgrading to PrimeFaces 3.4 would be a better solution.

I have put commandLink arround rowtoggler and I make ajax call through commandlink and I can also pass value through it using EL2.2
<p:commandLink action="#{myBean.doSomething(foo)}" >
<p:rowToggler/>
</p:commandLink>

I guess you'd something like
<p:panelGrid>
<p:ajax event="click" listener="#{bean.onclick}" />
...
the rest of the grid here
...
<p:panelGrid>
I haven't tested it but it works for other components

Except solution of siebz0r I found one more solution.
<p:commandLink action="#{bean.abcFunction}"> <p:rowToggler/> </p:commandLink>
it also works and simple too :-)

How can I refresh the datatable's page automatically ?

I am using Primefaces 3.4.
When I add a new data inside the database, I have to refresh the data table or the page to see the changes.
How can I make the page refreshing automatically ?

In most cases add datatable id in the update="datatableID" attribute of the p:ajax or p:commandButton

If you need the update be completely automatic and with no action from the user, like pushing a button, you need to use a poll
"Poll component make ajax calls in a specified interval."
<h:form id="form">
<h:outputText id="txt_count" value="#{counterBean.count}" />
<p:poll interval="3"
listener="#{counterBean.increment}" update="txt_count" />
</h:form>
this is the primefaces showcase sample
you can get ideas from it
cheers

Changes made to HTML output (ASP.Net) using JavaScript immediately undone

I have a page on which a list of properties is displayed (i.e houses). This list is made up using CSS. So I've built a second CSS class, which makes the properties/houses align properly in 2 columns. Until now I did this by pressing a button, posting back, and outputting different html (basicly the same, but with other Css class references).
Now I found this question on SO and I implemented a basic scenario. A div with the class "yellow" is written to the html page, and a button changes this class to "red". This happens, but the div immediately changes back to class "yellow".
I'm a very very beginner in JS but not a beginning programmer. This would be a great addition to my site, but I can't find a proper answer. I apologize if this question is redundant.
<script type="text/javascript">
function changeView() {
document.getElementById("box").className = " red";
}
Grtz, thanks in advance, Christophe,

By default a button element is of type 'submit' - which will cause your browser to post back to the server.
Try changing the type to button instead.
<input type="button" ....
More info on the difference here... Difference between <input type='button' /> and <input type='submit' />

If your button causes a postback (possibly a server control with an asp: tag), the javascript changes you made will be lost as by default an asp button submits a page to the server as a result of which your page reloads.
If all you need to change the class of a div make it a simple html button like
<input type="button" onclick="changeView()" value="Change" />

Javascript calling JSF handler method

I am reading an xml file using javascript and then I need to submit my form so that it calls a particular method in my JSF handler. Usually this can be done on a jsp when user clicks a button by having an actionlistener like so:
<h:commandLink styleClass="button" action="#{myHandler.outcome}" actionListener="#{myHandler.doNext}">
<span><h:outputText value="#{text.button_submit}" /></span> </h:commandLink>
I am not sure how to call a method like 'doNext' above in the handler from javascript. I cannot do a simple:
document.form.submit();
as it then repeats the processing i have already done. I want to read values from an xml file and then call a particular method in handler. Any ideas much appreciated.

I found a solution to this. I added a hidden button to my jsp like:
<p id="hiddenButton" style="display:none;" >
<h:commandLink id="hiddenRegButton" styleClass="button" action="#{myHandler.doNext}" />
</p>
and in my javascript I used jQuery to execute the click which leads t the "doNext" method in my Handler to get executed.
jQuery('#hiddenRegButton').click();
this was easier than I thought.