I have a Bootstrap modal with this button
<button class="btn btn-primary" type="button" id="send" data-btn-action="send">Send</button>
On the main page, where the modal is, I have the same button as above but with a submit type. So, on click of the modal's button, it triggers the button on the page. It works fine, but the data attribute is NULL if it's triggered from the modal but if I click on it directly, I get the data attribute value
My JS
let actionBtn = $("#send").attr('data-btn-action');
Thank you.
Related
I have a simple form that looks like this:
<form action = '../../uploadGI/index.php' method = 'post' target = '_blank'>
... (inputs)
<button class='btn actionbtn closebtn' onClick = 'this.form.submit()' ... >Submit</button>
</form>
The forms sends a number of parameters to a new page where the user can upload a document (or scan it), the parameters are related to the type of doc, the table and table record it refers to in the db.
When I leave target = "_blank" out the form works as intended. But with target _blank the button opens the page ... twice. What is causing this behaviour?
The default action for a button input in a form is to submit the form. No need for the onClick attribute/handler. Just remove the onClick
<button class='btn actionbtn closebtn' ... >Submit</button>
On an xpage I have a dialog which I want to open from csjs.
In the DDE KC it is explained as followed:
https://www.ibm.com/support/knowledgecenter/SSVRGU_9.0.0/com.ibm.designer.domino.ui.doc/extlib_controlref_dialog.html
So I added two buttons. One HTML and one Button control:
<button onclick="openDlgAction('1')">Open Dialog</button>
<xp:button value="Open Dialog" id="button4">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[XSP.openDialog("#{id:dlgAction}")]]></xp:this.script>
</xp:eventHandler>
</xp:button>
Here is how my dialog is rendered:
<span id="view:_id1:_id2:cbMain:dlgAction" style="display: none" title="Select Action"></span>
In order to generate the correct ID in my openDlgAction CSJS function I added it to the Xpage via a script block.
Here is how it is rendered in the browser:
<script type="text/javascript">
function openDlgAction(unid){
XSP.openDialog("view:_id1:_id2:cbMain:dlgAction")
}
</script>
The function under the Button control is rendered as followed:
function view__id1__id2_cbMain__id319_clientSide_onclick(thisEvent) {
XSP.openDialog("view:_id1:_id2:cbMain:dlgAction")
}
What I do not understand is why the Button control works (dialog appears) and under the HTML button the page refreshes quickly.
Out of curiosity I added another HTML button with an onclick event which also refreshed the xpage:
<button onclick="alert('hi')">click me</button>
What am i overlooking?
The page reloads when you click the "html buttons" because the buttons do not specify a button type. It's therefore interpreted as a submit button.
So set the button type to 'button':
<button type='button' onclick="openDlgAction('1')">Open Dialog</button>
I have a form with some input, and then a button that open a directive a modal popover where there is another form. the pristine state does not detect the changes in the directive.
How to solve this?
<form name="createFeeForm"
<input....
<input....
{{show the data from the something-popover}}
<something-popover....</something-popover>
<button ng-disabled="createFeeForm.$pristine">SAVE & CLOSE</button>
</form>
for the directives template.html
<form name="somethingForm">
<input...
<input...
<button ng-disabled="somethingForm.$pristine">SAVE & CLOSE</button>
</form>
The parent pristine will detect all input changes on input tag, except for the directive
I had a similar situation, and I couldn't trigger any kind of form behavior when it was a form inside another form (I wasn't using a directive, it was directly on the same file).
I'm using something like this:
The form triggers a modal id on href (in my case, I need to pass an Id, so I used a function for it):
<a data-toggle="modal" ng-click="passId(id)" href="#modalDirective">Open Modal</a>
and then, outside the form, you add the directive (usually I do it on the end of the page):
</form>
<something-popover....</something-popover>
When the page renders, Angular will load the template and the modal will be accessible, and yopu will have two separeted forms that you can handle.
Hope it helps!
I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.
it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".
I am using knockout js and bootstrap. I have a list of users with a delete button on each row.
I also have a bootstrap modal dialog that has a confirmation message whether to delete the user or not.
I have a click binding on the delete button that can remove the user from the model. How do i change it so that the deletion happens after the user has confirmed.
I have searched several examples and they all suggest to use custom bindings, and the closest i found was this fiddle example
http://jsfiddle.net/snaptopixel/vDZQk/
The one problem with this example is, it uses a pre-defined item from the model in the modal popup, what i want is to automatically bind the item that was deleted by the user and show the user name and other properties in the modal window and ask for confirmation.
Here is my modal dialog
<div class="modal-body">
<div class="well">
<p>By clicking 'Yes', you will remove the User 'foo' from the system. This action cannot be undone. To cancel this action, click 'No'. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
For example...
The modal window will say "Are you sure you want to delete User 'foo'? I would like to have access to the selected User inside the modal window.
Thanks for your help
Set a click binding on the 'Yes' button to the function that actually does the deletion, and set the click binding on the delete button to a function that displays the modal. You'll probably want that function to store the current item in an observable (itemToDelete or something like that) so that the actual delete function knows what to delete.