I have to execute a div like this. When the user clicks on the card, it will be redirected to a different page, but when the user clicks on the button inside the card, it will be redirected to another page.
<v-ons-card
#click="goToPage1()"
>
<div>
// content
</div>
<div class="card-btn">
<v-ons-button
#click="gotopage2()"
>
View
</v-ons-button>
</div>
</v-ons-card>
In this implementation, when I click the button, it also triggers the card click event and then triggers the button click event. Is there any way I can prevent this?
Yes you can use Event Modifier for that. In your case you are searching for #click.stop.
So you can do as follow:
<v-ons-button #click.stop="gotopage2()">
Related
Here is the scenario:
I click a button and a popup comes and I want to test when I click on button, the popup should be visible
Sample code:
<button id='bt'>
<div id ='new_div' data-state = visible >
cy.get('#bt').click()
//after clicking this I need to test data-state of "new_div" is visible/not
cy.get('#new_div').should('have.data-state','visible') //something like this
You can do this:
cy.get('[data-state = visible]').should('be.exist')
It will basically check if this tag data-state = visible present or exist inside your DOM at the moment when the popup is visible.
But the best way, of course, is to grab selector from the opened popup!
I have a form which basically looks like this:
<form #submit.prevent="onSubmitted">
Email<input type="email" /> <br />Content<input type="text" />
<CancelSave #cancel="onCanceled" />
</form>
There are input fields for an email and content and there is a custom component which emits submit and cancel events. I want the submit event to be automatically caught by the form and not by the button group.
Note that I explicitly want to use the html <form> element to get the features of html validation which I can't have (without any validation libraries at least) if i just wrap all the inputs in a div and listen to the submit or cancel events.
All works fine except that when I press cancel it is also caught as a submit and the form gets submitted.
Here's a sample of my code:
https://codesandbox.io/embed/62lo86rprr
EDIT: FYI Apparently when pressing the cancel button, cancel AND submit are caught
The cancel button in your form does not have a type attribute. By default, buttons within forms are assumed to be of type submit. Add a type="reset" to the cancel button to avoid the submission.
See MDN docs
What happened: I have a page where user has to click on a button and selection is displayed in modal. When they clicked on what ever they wanted div element on the page is updated, via AJAX, which shows what they have selected and has an option "view item".
I have defined that "view item" should open up another modal view which will have all the information on the item, and now, referring to the above paragraph, rather then opening modal view user is being transferred to that page?
Question:
Is their a walk around for modal to be activated on the elements that were loaded after document load stage?
Example code: On initial load user is presented with following code, at this example item was set prior to load:
<div id="dynamic-area">
Item 1
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
When user have picked a different item after clicking on "change selection" #dynamic-area was fully updated with a data that was fetched via AJAX on the selected item.
So lets say, if user have picked item 3, we would have code below:
<div id="dynamic-area">
Item 3
view selection
</div>
<input type="radio" name="selection" id="selection" value="" data-toggle="modal" data-remote="/selection/search/1" />Change selection
Now if user to click on the "view selection", user is being to the page 'selection/view/3' when user should see modal.
After extending this function action worked as it should
I have created a declarative dojo wizard in dojo 1.5 that is embedded in a dojo dialog like this:
<div dojoType="dijit.Dialog" id="genWizardDialog" jsId="genWizardDialog" refreshOnShow="true" preventCache="true" title="Title">
<div dojoType="dojox.widget.Wizard" style='height: 375px; width:400px' hideDisabled="true" doneButtonLabel="someLabel">
<div id="wizard1" dojoType="dojox.widget.WizardPane" canGoBack="false" passFunction="panelOneDriver"></div>
<div id="wizard2" dojoType="dojox.widget.WizardPane" passFunction="validateBoxes" style="padding:8px; height:100%;"></div>
....I have some more panels.
</div>
<!-- Here I have setup the cancel method. -->
<script type="dojo/method" event="cancelFunction">
//dijit.byId("genWizardDialog").onSelected(0);
dijit.byId("genWizardDialog").hide();
</script>
</div>
Everything pretty much works. However, I have 4 panels. If I proceed to panel three and hit cancel. When I then click the button to start the dojo dialog I am already at panel 3! I want to start back at panel 1. As I have already invested time into the declarative approach I am hoping to avoid doing this programmatically. I found site that mentioned an onSelected() method to accomplish this -> http://dojo-toolkit.33424.n3.nabble.com/resetting-wizard-pane-and-contents-on-reopening-wizard-td158660.html, however, this didn't work and stands to reason since looking in the Wizard.js I don't see this method defined!
In your pasted code, you have the cancelFunction event in the dialog's div, not the wizard's. So move the <script> tag inside the div that has dojoType=dojox.widget.Wizard.
To select a specific wizard pane, you can use the selectChild function.
<script type="dojo/method" event="cancelFunction">
dijit.byId("genWizardDialog").hide();
dijit.byId("genWizard").selectChild("wizard1", false);
</script>
In the above, I've assumed that your wizard has an id "genWizard", so you'd have to add that to the wizard's div.
Now the wizard will jump to the first wizard pane when you click its cancel button.
It will not jump to the first wizard pane if you just click the dialog's X button. If you want that too, you need to use the dialog's onHide event.
<script type="dojo/method" event="onHide">
dijit.byId("genWizard").selectChild("wizard1", false);
</script>
This script tag has to be in the dialog's div, not the wizard's, make sure you get that right.
I need to attach onClick event to tab, not to its content. For example, viewing the example, I want the event firing when I click "Drinks" tab.
The following code results in firing event when I click on tab's content, so it is not what I need:
<div
dojoType="dijit.layout.ContentPane"
href="test.php"
onClick="alert(1);"
>
</div>
Attaching event to tab container results in firing event when click both tabs and tab content.
You want to connect to the event onShow. Take a look at the "Event Summary" heading in the reference documentation:
http://dojotoolkit.org/api/dijit/layout/ContentPane
<div dojoType="dijit.layout.ContentPane" href="test.php" onShow="console.log('I'm being shown')"></div>
maybe you can write a something like this :
dojo.connect(
dojo.byId("myTab"),
"onclick",
function(){
alert('click');
}
);