I got a <h:commandbutton> like
<h:commandButton value="Neuer Abschnitt"
styleClass="btn btn-primary btn-info"
action="#{beitragBearbeitenBean.erstelleAbschnitt}" />
Well, I click onto the button, the method is called and after that, the page is jumping to the top (provied you are not at the top!)
Interestingly, a
<f:ajax execute="#form" />
does offer a little jump up.
How can I avoid a jump, generally?
an <h:commandButton> doess a full post of the page, no ajax stuff. So it is normal to jump back to the top of the same page (assuming your action returns null or is void). The <f:ajax> makes it refresh the form and most likely jumps to the top of the form (if the button you use is also in that form). Updating parts of the form (e.g. a panel inside the form) and not update the button since it can stay ourtside the panel most likely will cause that you stay at the same spot. But if the size of the panel changes, it might not (but then you can e.g. make your pannel scrollable so the button will not move).
Related
I would like to programmatically move to the next step in
I have a button bar component with the steppers controls:
<button id="cancel"
*ngIf="showCancelButton"
(click)="cancelWasClicked()">
Cancel
</button>
<button id="previous"
*ngIf="showPreviousButton"
(click)="previousWasClicked()" matStepperPrevious>
Previous
</button>
<button id="next"
*ngIf="showNextButton"
(click)="nextWasClicked()" matStepperNext>
Next
</button>
When I click the next button, I want to trigger some external validations which the result will manage if moving to the next step is what we want.
From the documentation, there is a next method but not sure where this method is available if I have a setup like this:
<mat-step>
<someComponent></someComponent>
<button-bar-component></button-bar-component> <!-- Contains the stepper buttons>
</mat-step>
<mat-step>
<someOtherComponent></someOtherComponent>
<button-bar-component></button-bar-component> <!-- Contains the stepper buttons>
</mat-step>
etc..
I saw a similar question here: Can I programmatically move the steps of a mat-horizontal-stepper in Angular / Angular Material
Issue with this is I do not have access to the id of the stepper within my button bar. Can I pass the ID as an input somehow and call stepper.next?
Solved my problem by passing my "stepper" as an input into the button bar component. This gave the button bar component access to the stepper API so I can do other logic on the button click.
In my application I placed a <p:panel> in a <h:form>. Now in this panel I have some <p:inputText> and at the end of panel I have two button one is Submit another is
Reset. Reset button works properly if it is pressed before submit the form. But if Once I submit the form and some text fields fails to validate
then that fields are containing the previous entered data. Now if I press Reset button to clear all the fields then it is not working.
My Reset button's code :
<p:commandButton value="#{Bundle['resetButton']}" process="#this" update="addCustomerPanel" immediate="true" />
The form is like :
<h:form id="customerForm">
<p:panel id="addCustomerPanel">
.......text fields and two buttons placed here
</p:panel>
<h:form>
Update
I have solved this problem by navigate to the same page on reset button click.
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I am working on .net 2.0 I am populating a Grid View with multiple textboxes. The textbox has text change event. There is also a button with click event. The problem I am facing is that when the I enter the text in textbox and then click on button, the text change event gets fired, and the execution does not come to button click block. How can I detect if button has been clicked when both the events are fired.
There is the textbox with call to function for text change event
<asp:TextBox ID="txtChassis" runat="server" CssClass="form_text_box" AutoPostBack="true" OnTextChanged="Chassis_TextChanged"></asp:TextBox>
and also call to function for button click event.
<input class="form_button" id="btnSearch" title="Show Details" accesskey="S" type="submit"
value="SAVE" name="btnSave" runat="server" onserverclick="btnSearch_ServerClick"/>
However, in case text is placed in textbox and button is clicked, then the text change event function gets called.
Your Problem is, that events in ASP are only raised after a PostBack.
The Post back happens if the Button is pressend, and the Client Posts Back (therfor the Name) his Data of the Fields.
After this PostBack the Server (your application) calls all events that happend during the last Page_Load.
As far as i know, there is no real order in which the events are thrown, but the textChanged event should be thrown anyway.
If you want to hand your textChanged event directly after the Text hast changed you have to use "AutoPostBack" as Myat Thu already mentioned. Be aware that this increases your traffic signifficant, and can also change the flow of your code!
I suggest designen the events indipendet so the user can hit the "PostBack Button" and all events are called at one post back. This saves traffic and load on the server.
But this is just my personal oppinion.
Are you writing code for a window application or a web application? If you're writing for a web application, there are properties for TextBoxes which are:
CaseValidation
AutoPostBack
You should try out both of these properties for your TextBox object.
I have two commandButtons and when I hit enter the first one submits. I really only want to submit the second button if the user hits enter. Any ideas?
I realize that the question is old, but maybe it is still interessing for someone to see a different solution.
You can use the Primefaces defaultCommand and adding an id to your prefered Button to define what happens when the Enter key is pressed. That's all.
<p:commandButton value="button1" action="#{bean.action1}"/>
<p:commandButton value="button2" id="btn_to_enter" action="#{bean.action2}"/>
<p:defaultCommand target="btn_to_enter" />
You have to swap the position of those two buttons thats all.
Your current code should be.
<p:commandButton value="button1" action="#{bean.action1}"/>
<p:commandButton value="button2" action="#{bean.action2}"/>
By default the button1 action will be triggered. You can present the user an alternative view, by adding style="float:right" to the button1.
<p:commandButton value="button1" style="float: right" action="#{bean.action2}"/>
<p:commandButton value="button2" action="#{bean.action1}"/>
Using the above the button1 will appear after the button2, and perform the action of button2, whenever the Enter is pressed.