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>
Related
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.
I'm trying to make it so that a popover does/doesn't appear based on a conditional.
<form class="submit-form" action="{% url 'search' %}" method="post">
{% csrf_token %}
<input type="submit" class="show-more-button pop" id="mybtn" style="margin-left: 5px" name="mybtn"
value="Search" data-bs-toggle="popover"
data-bs-placement="right" data-bs-trigger="focus"
data-bs-content="Please select one or more ingredient">
</form>
$(document).on('click', '#mybtn', function (){
var $btn = $('#mybtn')[0]
var $pop = bootstrap.Popover.getInstance($btn)
if ($(lst).length > 0) {
$pop.hide()
}
However, on clicking the button the popover comes up briefly before being hidden.
Is there any way I can basically prevent the popover from appearing in the first place if the conditional is met or at least make it so that it doesn't flash before it's hidden?
The popover is being shown by Bootstrap due to the data-bs-toggle="popover" attribute. After that gets run, then your hiding code gets run. Hence the brief appearance.
Bootstrap has a "show.bs.popover" event. My guess is if you attach a listener for that event, then preventDefault on the event, that'll stop the popover from showing.
Alternatively, rather than relying on Bootstrap to automatically trigger the popover, you could do it manually - and only manually trigger the popover if the conditions succeed.
I want to trigger to buttons by clicking on a third button. One of my buttons submits data to a PHP file and the second one loads a bootstrap modal. When I run it, I feel that both are triggered, although the submit button works fine but the bootstrap modal disappears in a blink.
this is the code:
HTML
<button onclick="submitdata(); showbootstrapmodal();">Click to Trigger the two other buttons</button>
<button id="submit" name="submit" type="submit" form="#myform"></button>
<button id="modal" data-toggle="modal" data-target="#myModal"></button>
and here is the javascript code for the functions:
javascript
function submitdata(){
document.getElementById('submit').click();
return false;
}
function showbootstrapmodal(){
document.getElementById('modal').click();
return false;
Is there a flaw in my code?
Try removing 'return false;' from submitdata()
function submitdata(){
document.getElementById('submit').click();
}
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".
Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />