I am displaying multiple dynamic modals to update some data.
<div class="modal fade experience-details exp_update" id="editExperienceModal_{{$exp->id}}" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
My modal's id goes like this editExperienceModal_1,editExperienceModal_2,etc..
Here is the select2 input
<select class="form-control sub-select2" name="clinic_name" id="select2_clinic_update_{{$exp->id}}" style="width:100%"></select>
If it's not been a dynamic content i can invoke select2 and dropdownParent like this
$("#select2_clinic_update").select2({
placeholder: 'Select clinic name',
dropdownParent: $('#editExperienceModal_'),
......
......
How do i invoke select2 for dynamically created inputs?
Finally, i found the solution
<select class="form-control sub-select2 select2_clinic_update" name="clinic_name" id="select2_clinic_update_{{$exp->id}}" style="width:100%">
<option value="{{$exp->clinic_id}}" selected="selected">{{$exp->clinic->be_name}}</option>
</select>
i provided a class to the select2 and intialize select2 with class name.
$(".select2_clinic_update").select2({
placeholder: 'Select clinic name',
// dropdownParent: $('#editExperienceModal_1'),
minimumInputLength: 2,
I removed tabindex="-1" from parent modal, so didn't need dropdownParent in select2.
Related
I have a simple bootstrap modal with displays a form with dropdown menu and submit button when a user clicks on a link. I try to select options from the dropdown menu with Capybara in an Rspec feature test, but it does not find the dropdown menu.
The feature spec:
scenario "User searches records" do
visit my_records_path
click_link 'Search Records'
within('#practiceSearchModal') do
select('Pennsylvania', from: '#state_search')
click_on('Submit')
end
end
The modal on the page:
<div class="modal fade in" id="practiceSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 654px;"></div>
<div class="modal-dialog" style="width: 750px;">
<div class="modal-content">
<select name="state" id="state_search" class="form-control">
<option value="">Select</option>
<option value="Pennsylvania">Pennsylvania</option>
<option value="New York">New York</option>
</select>
</div>
</div>
</div>
This is error I get with Capybara, it cannot find the select menu with id state_search:
Capybara::ElementNotFound:
Unable to find visible select box "#state_search" that is not disabled within #<Capybara::Node::Element tag="div" path="/html/body/div[1]/div[2]/div[4]/div[1]/div[2]/div/div[1]/form/div">
# /home/myuser/.rvm/gems/ruby-2.1.7#core/gems/capybara-2.18.0/lib/capybara/node/finders.rb:314:in `block in synced_resolve'
But I see the element on the page:
Why can't Capybara find the element which I see it on the screen after it clicks the link?
The from option takes the id, not a CSS selector -
select('Pennsylvania', from: ‘state_search')
Sometimes some js plugins may add visible: hidden onto your select box. You can add the option visible: :all to your select to help.
Try this:
find("#state_search", visible: false).find("option[value='Pennsylvania']").click
Or within scope as:
within '#state_search', visible: false do
find("option[value='Pennsylvania']").click
end
I added some new choices to my Select Menu and now JQM changed the "pop-up" behavior to a new window with a black background along with the menu choices?
I'm OK with the new window, but now my custom JavaScript code is no longer triggered because of the new JQM pop-up window?
Here's my Select Menu code:
<div data-role="fieldcontain">
<label for="ttType">Work-Order Type:<span class="required">*</span></label>
<select name="ttType" id="ttType" data-native-menu="true" data-mini="true" data-theme="d">
<cfoutput query="rsType" group="ttOption">
<optgroup label="#ttOption#">
<cfoutput>
<option value="#ttDesc#">#ttDesc#</option>
</cfoutput>
</optgroup>
</cfoutput>
</select>
</div>
Here's the field that no longer works:
<div data-role="fieldcontain">
<label for="ttEscalate">Escalation:<span class="required">*</span></label>
<input name="ttEscalate" type="text" id="ttEscalate" value="" readonly="readonly"
wdg:subtype="N1DependentField" data-mini="true" wdg:type="widget"
wdg:recordset="rsType" wdg:valuefield="ttDefEsc" wdg:pkey="ttDesc"
wdg:triggerobject="ttType"/>
</div>
<div data-role="fieldcontain">
Basically, when the "Select Type" value changes, I automatically fill in the Escalation text field with a "related value"
How do I stop JQM from defaulting to that black window? I'd prefer to just have the select drop-down stay on the same page.
PS: If I change the data-native-menu back to false, everything works fine, but I lose all the nice JQM formatting!
I have created a reactive form which has a form array. A Form Group is pushed into the form array on a button click. So every button click generates a section of html on screen.
This form group contains 2 drop down lists having parent-child relation i.e. selection of item in parent drop down decides values to be populated in child drop down.
When I select a value in parent drop down change event fetches results for child but this has to be limited to the scope of the specific form array element. Currently change event fetches data and sets values for child drop downs in each form array element. This is a basic structure of my mark up
<form [formGroup] = "mainForm" (ngSubmit)="savedata()">
<div>some form control</div>
<div formArrayName = "myArray" *ngFor="let arrayitem of myArray.controls";let i = index">
<div [formGroupName] = "i">
<div>
<select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="parentdrpdown">
<option value="" disabled selected hidden>Select a Parent...</option>
<option *ngFor="let pitem of parentdrpdown"
value={{pitem.id}}>
{{pitem.name}}
</option>
</select>
</div>
<div>
<select class="form-control" (change)="onSelect($event.target.value)" id="{{'header' + i}}" formControlName="childdrpdown">
<option value="" disabled selected hidden>Select a Child...</option>
<option *ngFor="let citem of childdrpdown"
value={{citem.id}}>
{{citem.name}}
</option>
</select>
</div>
</div>
</div>
constructor(private fb:
FormBuilder, private _segService: SegmentService) {
this.parentdrpdown= this._segService.getparentValues();
onSelect(pid) {
this.childdrpdown= this._segService.getChildSegment()
.filter((item) => item.parentid == pid);
}
parentdrpdown and childdrpdown are properties declared in component and they are loaded with values using http get request to a web server
Use below snippet for the code in reactive form in case of select tag.
<h1>My Application</h1>
<select formControlName="selectedValue">
<option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>
How to open popup box after selecting the option from drop down list in phonegap. I have gone through documents but only through anchor tag we can acheive that. Please help how can I do this.
Thanks in advance
If you are using select tag for dropdown then bind function onchange() with select tag.
AS
In HTML
<select id = "status_selector" onchange="fnStatusChanged()"></select>
In Java Script
<script>
function fnStatusChanged(){
// Write Something
}
<script>
Given a standard jQM select widget, e.g:
<div class="ui-field-contain">
<label for="select-native-1">Basic:</label>
<select name="select-native-1" id="select-native-1">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
and standard popup markp, e.g.:
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Selected Val?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">You selected the item with a value of</h3>
<p id="selectedVal"></p>
OK
</div>
</div>
You can handle the change event of the select and then call the popup widget's open method to launch the popup:
$("#select-native-1").on("change", function () {
var val = $(this).val();
$("#selectedVal").html(val);
$("#popupDialog").popup("open");
});
Here is a working DEMO
I have a view page that has two DIV tags.
If the session[UserType] = ‘Guest’ , then I need to diplay Guest DIV Section.
Else
If session[userType] = ‘Logged’
, then I don’t need to diplay Guest DIV Section.
<div id="Logged" >
<div class="txtContent">
<label for="product" class="Form_Label">product:<em>*</em></label>
<%= Html.DropDownList("product", " -- Select one -- ")%>
</div>
</div>
<div id="Guest">
<label for="DeliveryMethod">Delivery Method: </label>
<select name="DeliveryMethod" id="Select1" style="width: 100px">
<option value="email">Email</option>
<option value="fax">Fax</option>
<option value="mail">Mail</option>
</select>
</div>
Appreciate your responses.
Thanks
Sounds like you could do with either jQuery or a partialView.
My flavour would be to display a partial view based on the decision point.
Remember that your page shouldn't have any logic in it so you may want to write a helper to make the decision for you.
As an alternative you could render the page and then call a jQuery method that will return a partial view based on the parameter you send it.
If you require code please add a comment and I'll post some.
Edit
#Rita, if you're happy to have the HTML present on the page and you only want to hide/show the divs then here is the code for that;
<input type="hidden" id="hdnSessionValue" value="<%=session[UserType]">
<div id="Guest">
<label for="DeliveryMethod">Delivery Method: </label>
<select name="DeliveryMethod" id="Select1" style="width: 100px">
<option value="email">Email</option>
<option value="fax">Fax</option>
<option value="mail">Mail</option>
</select>
</div>
Then you have the following jQuery;
<script language="javascript">
$(document).ready( function () {
if ( $('#hdnSessionValue').val() == "Guest")
$('#Guest').show();
else
$('#Guest').hide();
} );
</script>
Edit2
Based on the amount of HTML you have to hide/show I don't think a jQuery postback is required.