I have a simple mytable.view.xml with a table and a button. This table is just one among others in a form and all the tables are handled through different view.xml.
<mvc:view>
<l:VerticalLayout>
//Code for table headers and table
</l:VerticalLayout>
<Button id="myButton" text="test" visible="true" press="onMyButtonClicked"/>
</mvc:view>
Controller:
onMyButtonClicked: function(){
window.location.href = "http://example.com/;
}
onMyButtonClicked is getting invoked when I click on button, but that is being overridden by form submit. Since there is no logic to handle this submit, the page is just reloading instead of navigating to http://example.com/. In developer tools of browser I noticed that the navigate to example.com is being triggered and is cancelled.
One thing I tried and worked was inspecting this button on browser and adding a onclick="return false;" in the button tag. But from sap.m.button I cannot do this.
Tried event.PreventDefault(). This didn't work either.
Is there any other way to stop this button from behaving like a submit button?
A button won't trigger anything if the press event is not bound. For your case why not just remove the press event binding to a callback? Am I missing something? UI5 buttons don't behave like HTML button of type "submit" inside a form.
Related
I have a form with information about some people. Information is coming from a database, and next to each row is a button. When I press the button, modal should open and show only the information about that person. So if I have 5 people, there are also 5 buttons and each buttons should open a modal with information about that person.
My code is almost working. I don't know how to show a modal after pressing the button, because when I press the button the page reloads and the modal will start to show but it won't fully show becuase th page reload will prevent it. My code is working and the modal is showing the correct information, but the problem is that my page reloads after pressing the button,so it doesn't show my modal.
As far as I know I need to implement Ajax to my code but I am not sure how.
Here is my code:
https://github.com/luka3ska/Form
You should try:
<button name="test" type="button" onclick="onClick()">Click</button>
default value of type is submit. And this triggers a refresh.
So the type must be "button"
I think you have a problem about the event, you must stop the default behavior of the button.
You can do that with event.preventDefault().
In Javascript :
document.getElementById("buttonId").addEventListener("click", function(event){
event.preventDefault()
// Ajax request here ...
});
In JQuery :
$("buttonId").click(function(event){
event.preventDefault();
// Ajax request here ...
});
To extend on #Dumhuzy 's anwser and help you understand what's going on. Whenever you have a <button> within <form> that button will submit the form regardless of if it has the attribute type="submit" or not. Submitting a form will cause the page to reload.
<form action="">
<button>Will reload the page</button>
<button id="prevent">Will prevent reload</button>
</form>
To prevent the form from submitting you must prevent the default action with javascript.
document.getElementById("prevent").addEventListener("click", function(event){
event.preventDefault()
});
I have created a form using html5 form validation for my website. However, validation part works only if I dont add onclick=somefunction() in submit button. If I add onclick event, it skips the validation part and directly executes the onclick() event. Here is the code for submit button..How to ensure both validation part, as well as onclick event, executes?
<button type="submit" class="signupbtn" onclick="clickAlert()">Request for
Registration</button>
function clickAlert() {
alert("You will get a call to verify your Registration soon!");
}
This has nothing to do with the onclick event. It is caused by the alert.
You are pulling the focus away from the form which causes the browser generated error message to be removed at the instant it would normally be displayed.
Don't use alert(). Instead, modify the DOM of the page to display the message there.
Hello Stackoverflow!
I am experimenting with getting a chrome extensions cript to click a page button to trigger an AJAX request, however it would seem that physically clicking said button is not the same as using the following:
document.getElementsByTagName('input')[10].click();
the results of the getElements line is this:
<input type="submit" value="Continue ...">
Using document.forms sort of works, but unfortunately reloads the page, which is not what happens when the Ajaxrequest is fired by the click event.
document.forms[1].submit();
Calling the form returns the following:
<form
action="/battle.php" method="post" name="2913" id="2913" onsubmit="get('/battle.php', '', this);
disableSubmitButton(this);
return false;">…</form>
Doesn't seem obvious to a beginner programmer like me, why using the .click(); in F12 console (chrome) would be any different from the physical click. Also i have verified (sorf of) that the button on the screen is in fact the one i'm calling with the getElementsByTagName('input').
The page reloads because the type of the button is "submit". You could attach an event handler to the "click" button that can submit the form without reloading the page. Your code will look something like this:
Using JQuery:
$('#submitButton').on('click', function(e){
e.preventDefault(); // stops default submit
$('#2913').submit(); // or the ID of your form
});
And your HTML will be :
<input type="button" value="Continue ..." id="submitButton">
I'm using the PrimeFaces p:menuitem component to perform a deletion. In order to add a confirmation step, I used the onclick event in which a JavaScript confirm dialog is displayed. Below my code :
<p:menuitem icon="fa fa-fw fa-remove"
title="#{message.global_remove}"
value="#{message.global_remove}"
actionListener="#{componentListMB.delete(cp.id)}"
onclick="return confirm('#{message.component_list_confirm_deletion}')"
update=":component_list" />
The action is not fired when the user confirm the deletion but, instead, a # is added at the end of the URL.
Why the event is not fired while in a p:commandButton everything works fine ?
I'm using:
JSF 2.1.7
Primefaces 6.0
The action is not fired when the user confirm the deletion but, instead, a # is added at the end of the URL.
Primefaces is actually rendering your p:menuitem as a a HTML tag, using the onclick event of the element to execute its own Ajax request. E.g.
onclick="PrimeFaces.ab({...});return false;"
Notice that they added a return false; at the end which prevents the default browser behaviour of the a element, therefore no # will appear in the URL.
When you add the confirm function, it is placed at the beginning of the onclick element as follows:
onclick="return confirm('confirm?');PrimeFaces.ab({...});return false;"
In case you don't confirm it, no # will appear in the URL since the default behaviour was prevented. If you do confirm it will appear. But the Ajax action will never be executed since you are calling the return statement in the first place.
You can achieve the expected behaviour changing your p:menuitem's onclick event as follows:
onclick="if (!confirm('#{message.component_list_confirm_deletion}')) return false;"
Why the event is not fired while in a p:commandButton everything works fine ?
Primefaces treats differently the p:commandButton. It wraps user's onclick and Primefaces Ajax functions, placing each of them in a separate function, and sends them to Primefaces#bcn which executes the functions in order. The first one that returns false stops the processing of the remaining functions. The onclick in the generated HTML will be as follows:
onclick="PrimeFaces.bcn(this, event, [function(event){return confirm('confirm?')},function(event){PrimeFaces.ab({...});return false;}]);"
You could use the <p:confirm> inside <p:menuitem> to do the confirmation.
EDIT: just remove the return before the confirm() and all should work as expected also.
You could try to delegate your <p:menuitem> actionListener into a <p:commandButton>. Then nest a <p:confirm> inside the <p:commandButton> for your confirmation message. Then trigger your command button via the onclick attribute of <p:menuitem>.
Using confirm() without return does not resolve the problem. Instead, it submits the form even when the confirmation dialog is cancelled. I want to know if there is any workaround using onclick event before using
You shall reset values on cancel button in the confirmation dialog or you shall fetch new data at page loading.
Use a p:confirmDialog:
<p:menuitem icon="fa fa-fw fa-remove"
title="#{message.global_remove}"
value="#{message.global_remove}"
onclick="PF('confirm').show();"/>
<p:confirmDialog widgetVar="confirm"
message="#{message.component_list_confirm_deletion}">
<p:commandButton value="Confirm"
oncomplete="PF('confirm').hide();" update=":component_list"
action="#{componentListMB.delete(cp.id)}" />
<p:commandButton value="Cancel"
onclick="PF('confirm').hide();" /> </p:confirmDialog>
I have a web page I'm working on with jQuery. I'm getting erratic behavior from some elements on my page: Every time a button, any button, on the page is clicked, the page refreshes.
The page must somehow be running some code that reloads that page any time a button is clicked.
I'm completely stumped trying to figure out where the code is getting bound to the click handler, so I would like to know if it is possible to enumerate, at run-time, a list of handlers attached to a button.
Update: After reading the answers given below, I changed a line in my page:
<button id="btnSaveAndContinue" class="button" tabindex="290">Save and Continue</button>
to this:
<input type='button' id="btnSaveAndContinue" class="button" tabindex="290" value='Save and Continue' />
This is the default behaviour of a button. If you want to change it, do something like this:
$("button selector").click( function(event) {
event.preventDefault();
});
You have to stop the default behavior for the event with event.preventDefault() within your click handler.
See this