How to reset a selectmenu inside a modal dialog, using jQuery UI - javascript

I have a jQuery UI selectmenu inside a jQuery modal dialog. I would like to clear the selection of the selectmenu, when the modal dialog is closed, whether by the OK or Cancel buttons, or the close box.
I'm trying to update a web app I didn't write to eliminate the use of the jAlert/jConfirm/jPrompt library that seems to have been withdrawn. I built an example that I want to work before I rip apart this app I didn't write to replace many jPrompt calls.
I've demonstrated that I can display the selectmenu inside the model dialog, and can return the selection to the modal dialog, where I intend to store it where it is needed.
What I haven't been able to do so far is clear the selection from the selectmenu, when the user exits the modal dialog, by clicking the OK or Cancel buttons or the close box. I've tried to apply about a half-dozen suggestions I've found on this site, but none of those work in this case.
I've included my example here:
<button id="opener">Change Category</button>
<div id="popup_message" style="display: none;">
<form id="category_popup">
<select name="category" id="category">
<option>Choose a category</option>
<option value="G1">G1</option>
<option value="G3">G3</option>
<option value="C1G1">C1G1</option>
<option value="C2G1">C2G1</option>
<option value="C3G1">C3G1</option>
<option value="C4G1">C4G1</option>
<option value="C5G1">C5G1</option>
<option value="C6G1">C6G1</option>
<option value="C7G1">C7G1</option>
<option value="C8G1">C8G1</option>
<option value="C9G1">C9G1</option>
<option value="C1G3">C1G3</option>
<option value="C2G3">C2G3</option>
</select>
</form>
</div>
<script>
$('#popup_message').dialog({
autoOpen: false,
modal: true,
title: 'Choose Category',
buttons: [{
text: 'OK',
click: function() {
alert('Category= ' + $('#category').find(':selected').text());
$(this).dialog('close');
return $('#category').val();
}
},
{
text: 'Cancel',
click: function() {
$(this).dialog('close');
}
}
]
});
$('#opener').on('click', function() {
$('#popup_message').dialog('open');
});
$('#popup_message').on('dialogclose', function() {
// $('#category_popup option').attr('selected',false);
// $('#category_popup').trigger('reset');
$('#category').selectmenu('refresh');
// $(':input','#category_popup').removeAttr('selected');
// $('#category_popup').val([]);
truth = true; // to allow a breakpoint here
});
$('#category').selectmenu();
</script>

You need to change the index before like this :
$('#popup_message').on('dialogclose', function() {
// $('#category_popup option').attr('selected',false);
// $('#category_popup').trigger('reset');
var myselect = $("select#category");
myselect[0].selectedIndex = 0;
myselect.selectmenu("refresh");
// $(':input','#category_popup').removeAttr('selected');
// $('#category_popup').val([]);
truth = true; // to allow a breakpoint here
});

Related

Select item from multiple select menu

This is a strange bug I have in my script.
When I click the option "Test", the alert appears.
However when I select it (using the control key) it doesn't alert.
As a test, ctrl select 'Desktop' then click 'Test'. You'll see no Alert :(
Why is this?
JS:
var $cb = document.querySelector("#equipments");
$cb.addEventListener("change", function() {
if ($cb.value == "test") {
// if true
alert("Selected!");
} else {
// false
}
})
HTML
<select id="equipments" name="equipments[]" multiple="multiple" class="form-control" multiple data-live-search="true" required>
<option value="laptop">Laptop</option>
<option value="desktop">Desktop</option>
<option value="test" >Test</option>
<option value="none">None</option>
</select>
Fiddle: https://jsfiddle.net/0mvngqsc/
You cannot. The change event does not define ctrlKey, as you have noted.
change is an event which uses the base event interface, which does not handle ctrlKey. To have ctrlKey defined, you need to use a TouchEvent, MouseEvent, or KeyboardEvent.
there is a property called selectedOptions which gives us the object of the selected items.i am just iterating through that object using for of.unfortunately couldn't get it working on change event.i hope this helps you to reach your results
var $cb = document.querySelector("#equipments").selectedOptions;
var $sb = document.querySelector("#submit");
$sb.addEventListener("click", function () {
for (let el in $cb) {
console.log($cb[el].value);
if ($cb[el].value == "test") {
// if true
alert("Selected!");
}
else {
// false
}
}
})
<select id="equipments" name="equipments[]" multiple="multiple" class="form-control" multiple
data-live-search="true" required>
<option value="laptop">Laptop</option>
<option value="desktop">Desktop</option>
<option value="test">Test</option>
<option value="none">None</option>
</select>
<button id="submit">Submit</button>

jQuery Mobile: applying method selectmenu on multiple select fields

On my jQuery Mobile page I would like to implement multiple filter select menus. It works totally fine with only one select menu and an id, but not with multiple.
JSFiddle with my problem:
http://jsfiddle.net/asvyY/40/
(By contrast, my fiddle with ONLY ONE select menu and a select menu id works: http://jsfiddle.net/asvyY/41/)
Error message:
Uncaught Error: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
My code:
HTML:
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<form>
<select class="filter-menu" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="filter-menu" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="filter-menu" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
</div>
</div>
JS:
$(document).on("pagecreate", "#page1", function(){
$(".filter-menu").selectmenu( "refresh", true );
});
$.mobile.document
.on("listviewcreate", "#filter-menu-menu", function (e) {
var input,
listbox = $("#filter-menu-listbox"),
form = listbox.jqmData("filter-form"),
listview = $(e.target);
if (!form) {
input = $("<input data-type='search'></input>");
form = $("<form></form>").append(input);
input.textinput();
$("#filter-menu-listbox")
.prepend(form)
.jqmData("filter-form", form);
}
listview.filterable({
input: input
});
})
// The custom select list may show up as either a popup or a dialog,
// depending how much vertical room there is on the screen. If it shows up
// as a dialog, then the form containing the filter input field must be
// transferred to the dialog so that the user can continue to use it for
// filtering list items.
//
// After the dialog is closed, the form containing the filter input is
// transferred back into the popup.
.on("pagebeforeshow pagehide", "#filter-menu-dialog", function (e) {
var form = $("#filter-menu-listbox").jqmData("filter-form"),
placeInDialog = (e.type === "pagebeforeshow"),
destination = placeInDialog ? $(e.target).find(".ui-content") : $("#filter-menu-listbox");
form.find("input")
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput("option", "inset", !placeInDialog)
.end()
.prependTo(destination);
});
Here is my working JSFiddle: http://jsfiddle.net/asvyY/46/
I deleted the following lines, because jqm automatically transforms the select-tag into a select-menu
$(document).on("pagecreate", "#page1", function(){
$(".filter-menu").selectmenu( "refresh", true );
});
The correct syntax for the listviewcreate event is:
$( ".selector" ).on( "listviewcreate", function( event ) {} );
In the listviewcreate event i changed the id's to classes and initiated the listbox
listbox = $("<ul class='.filter-menu-listbox'></ul>");
I hope i could help you and sry for my bad english :)
You are running into problems because with multiple selectmenus you are using class names and no ids.
Give your selectmenus unique ids as well as the common class name. For the listviewcreate you can use the classnames and find other dom elements using closest()/find().etc.
$.mobile.document.on("listviewcreate", ".ui-selectmenu-list", function (e) {
var input,
listbox = $(this).closest(".ui-selectmenu"),
form = listbox.jqmData("filter-form"),
listview = $(this);
if (!form) {
input = $("<input data-type='search'></input>");
form = $("<form></form>").append(input);
input.textinput();
listbox
.prepend(form)
.jqmData("filter-form", form);
}
listview.filterable({
input: input
});
})
In the case of a long list showing as a dialog. I am retrieving the base ID of the selectmenu and then using it to build selectors as needed:
.on("pagebeforeshow pagehide", ".ui-selectmenu.ui-dialog", function (e) {
var id=$(this).prop("id").replace("-dialog","");
var form = $("#" + id + "-listbox").jqmData("filter-form"),
placeInDialog = (e.type === "pagebeforeshow"),
destination = placeInDialog ? $(this).find(".ui-content") : $("#" + id + "-listbox");
form.find("input")
// Turn off the "inset" option when the filter input is inside a dialog
// and turn it back on when it is placed back inside the popup, because
// it looks better that way.
.textinput("option", "inset", !placeInDialog)
.end()
.prependTo(destination);
});
Updated FIDDLE

Save and reset values from drop down list

I have drop down list, after select value from it I push the button and some calculations are made. I save value from list by this:
<select name="dropDownTo" id="dropDownTo">
<option value="Yard">Yard</option>
<option value="Feet">Feet</option>
<option value="Metre">Metre</option>
</select>
<button onclick="MyFunc()">Update</button>
<script>
document.getElementById("dropDownTo").onchange = function() {
localStorage['dropDownTo'] = document.getElementById("dropDownTo").value;
}
function MyFunc(){
document.getElementById("dropDownTo").value = localStorage['dropDownTo'];
window.onload = document.getElementById("dropDownTo").value;
alert(document.getElementById("dropDownTo").value);
}
</script>
But the select value stay selected after closing the window. Is it possible restore default value after closing the page?
You should run an action before the page exits, restoring the value to its default. There is a javascript event for that. Window.onbeforeunload
window.onbeforeunload = function(){
return 'You are leaving this page';
}
Setting a value as selected will initially select that value every time the page is loaded:
<option value="value2" selected>Value 2</option>

jQuery iFrame Modal Return Value

I applied the modal function I found in this article. It is a jQuery modal that puts the source file in an <iframe> and display as modal. Now, the problem is that I need to return to value to the background page from the modal after the user selected an item.
Here is some jQuery code: (This is were the page is loaded)
var openMyModal = function(source)
{
modalWindow.windowId = "myModal";
modalWindow.width = 480;
modalWindow.height = 405;
modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src='" + source + "'></iframe>";
modalWindow.open();
};
Posible code in Modal:
<select name="selItem">
<option value="item1">Item 1</option>
<option value="item2">Item 2</option>
<option value="item3">Item 3</option>
<option value="item4">Item 4</option>
</select>
<input type="button" id="btnSel" name="btnSel" value="Select" />
There is a button in the modal display which when clicked, it will pass the value to an input text back to the background page then remove the modal.
How can I achieve this? Thank you very much!
Possible solution is to add click listener on the button of the model after it opens. here is some code:
modalWindow.open(function()
{
//callback
$('#btnSel').on('click', function()
{
//do what you need here.
});
});
Note:
Make sure there is some way to run a callback function like I suggested.
from the documentation you can add your logic in the open option:
var modalWindow = {
....
open:function()
{
//your stuff - click listener
}
};

How to get previously selected option?

Here's my code:
<select>
<option selected="selected">Actions</option>
<option>Create Subset</option>
<option>Goto</option>
<option>End</option>
</select>
I'm showing popup for whatever option user selects, and on pressing Esc or on clicking the close button, the popup will disappear.
Now, suppose user selected "Create Subset" option and filled appropriate data into that popup. Currently "Create Subset" will be there in select box.
Now if user changed the option to "Goto" (i.e. there will be "Goto" in the select box) and pressed Esc, hence the popup will disappear but there will still be "Goto" in the <select> box!
So my question is: Is there any way to change the select box option to the previously selected option when the user hits Esc or click the close button?
First you gotta give your option's some values and your select box - some id:
<select id="yourselect">
<option value="Actions" selected="selected">Actions</option>
<option value="Create Subset">Create Subset</option>
<option value="Goto">Goto</option>
<option value="End">End</option>
</select>
Then bind a change event to listen to your checkbox changes and remember the current and previous options that were selected:
$("#yourselect").on("change", function() {
if( $(this).data("selected") ) {
$(this).data( "prev-selected", $(this).data("selected") );
}
$(this).data( "selected", $(this).val() );
});
After that, when user presses Esc or click Cancel button, you need to restore the option
if( $("#yourselect").data("prev-selected") ) {
$("#yourselect")
.find( 'option[value="' + $("#yourselect").data("prev-selected") + '"]' )
.prop( "selected", true );
}
else {
$("#yourselect").find( "option:eq(0)" ).prop( "selected", true );
}
Since you have not added relevant code. Here i created reference jsfiddle . When user selects option from select box, it will display popup, and on close of popup it will update select. Not sure if this is what you need, let me know.
<div id='selectPopup'>
previous selected <input type='text' value='' id='selected'/>
<form name='test'>
<select id='inptPAN' name='inptPAN'>
<option value='1'>item 1</option>
<option value='2'>item 2</option>
<option value='3'>item 3</option>
<option value='4'>item 4</option>
<option value='5'>item 5</option>
<option value='6'>item 6</option>
</select>
</form>
</div>
$(document).ready(function () {
// this function is triggered as soon as something changes in the form
$("select[name='inptPAN']").change(function () {
//console.log('found change');
$("#selected").val($(this).val())
selectDialog('Pan', 'You had selected, Text: ' + $(':selected', this).text() + ' And Value : ' + $(this).val());
});
// Esc button event to close pop up.
$(document).keyup(function(event) {
if(event.which === 27) {
previousSelected = $("#selected").val();
$("#inptPAN").val('1');
// or enable below line to set previous selected
//$("#inptPAN").val(previousSelected);
$('<div></div>').dialog("close");
}
});
function selectDialog(title, text) {
return $('<div></div>').append(text)
.dialog({
resizable: true,
modal: true,
buttons: {
"CLOSE": function () {
previousSelected = $("#selected").val();
$("#inptPAN").val('1');
// or enable below line to set previous selected
//$("#inptPAN").val(previousSelected);
$(this).dialog("close");
}
}
});
}
});

Categories

Resources