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
Related
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()">
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
I have created a page with lightening components as shown the below image, I want to change my pick-List field into radio button next to picklist option to choose the appropriate selection, can someone please help to create radio buttons instead of pickList filed
in the component I have used below code
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputSelect label="Race Type"
aura:id="Type"
class="slds-select"
labelClass="slds-form-element__label"
value="{!v.newRace.Race_Type__c}" />
</div>
Maybe something in line with this: (replace v.Name with attribute that contains the name of the race):
<aura:component>
<lightning:radioGroup name="radioGroup"
label="slds-form-element__label"
options="{! v.newRace.Race_Type__c }"
value="{! v.Name}"
type="radio"/>
</aura:component>
There is a website which has 4 web pages. On first page there is a button, On 2nd page there are also some buttons, on 3rd page there is also a single button, and 4th page also contained a single button. Problem is that my code programmatically clicks the button of first page 2nd page and 3rd page. But is is not clicking the button on 4th page programmatically. How can I enable my code to do that? Please suggest a reliable solution for this .. The HTML code of the button is given below
<FORM NAME='form1' METHOD='post' action='/dflogin.php'><INPUT TYPE='hidden' NAME='txtId' value='E712050-15'><INPUT TYPE='hidden' NAME='txtassId' value='1'><INPUT TYPE='hidden' NAME='txtPsw' value='HH29'><INPUT TYPE='hidden' NAME='txtLog' value='0'><h6 align='right'><INPUT TYPE='SUBMIT' NAME='btnSub' value='Next' style='background-color:#009900; color:#fff;'></h6></FORM>
This code clicks a button programmatically, you should be able to adapt this to what you need and hopefully it should work for you.
For Each webpageelement As HtmlElement In allButtons
If webpageelement.GetAttribute("value").Equals("Next") Then
webpageelement.InvokeMember("click")
Exit For
End If
Next
is it possible to show "choose file" window, when i click on some image ? i want to hide that input and browse button, which shows when i type
thanks
Long answer: Yes, you absolutely can. Get ready for some Javascript/CSS haxx that I cooked up. First the Javascript:
function getFilePathFromDialog() {
document.getElementById('fileBrowser').click();
document.getElementById('filePath').value = document.getElementById('fileBrowser').value;
}
Now the HTML:
<img src="path/to/image.jpg" onlick="getFilePathFromDialog();">
<input type="text" id="filePath" name="filePath" /><br />
<input type="file" id="fileBrowser" name="fileBrowser" style="visibility:hidden; display:none;" />
Basically all this does is hide the actual file dialog input field from view. When you click on your image it will fire the file dialog's click event. When the user chooses a file and clicks "Open", it will put the file path selected in the textbox called "filePath".
No, because of security restrictions in the browser. You have to go with Flash or Java to achieve that.