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
}
};
Related
I have big trouble now. I am trying to make a small script with plain JavaScript. But I have one problem. If I click on button, nothing happens (but alert works). It seems to be like the page just refresh, because the console log doesn't work too.
<form>
<select class="select" id="test">
<optgroup>
<option selected disabled hidden>Default</option>
<option value="1">Value 1</option>
</optgroup>
</select>
<button class="btn" onclick="myFunction();">text</button>
</form>
function myFunction() {
var e = document.getElementById("test");
var strUser = e.options[e.selectedIndex].value;
if (strUser > 0) {
window.location.href = 'www.google.com';
} else {
alert("Error")
}
}
Your button is inside a form. Clicking it will submit the form.
So your onclick function runs, begins navigation to www.google.com (a URL which is missing the scheme), and then the form submits and begins navigation to the form's action (which is unspecified, so defaults to the URL of the current page).
The second navigation overrides the first, so you load the current page again instead of www.google.com.
You need to cancel the default behaviour of the form submission or the submit button.
Using the 1990s approach you are currently using:
<button class="btn" onclick="myFunction(); return false">
Or using modern code:
document.querySelector("form")
.addEventListener("submit", myFunction);
and
function myFunction (event) {
event.preventDefault();
// etc
getElementbyId just takes the string, it does not include the "#".
#Ondřej Musil, you have to take care when you ask something to don't forget about put details and a more complete code.
I think that I have your answer! But let me know if is that are you trying...
Do you have a Button and a Select? When you perform a click in the button, the will be called that function, right?
HTML
<button onclick="myFunction()"> Redirect </button>
<select id="test">
<option value="1" selected="selected">User 1</option>
<option value="2">User 2</option>
</select>
JS
function myFunction() {
var e = document.getElementById("test");
var strUser = e.options[e.selectedIndex].value;
if (strUser > 0) {
window.location.href = 'http://www.google.com';
} else {
alert("Error")
}
}
Please, try it!
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
});
I have the following select box and I'm trying to modify the All Product Categories text.
<select class="postform" id="ofproduct_cat" name="ofproduct_cat">
<option selected="selected" value="0">All Product Categories</option>
<option value="28" class="level-0">Los Bengala</option>
<option value="27" class="level-0">Merchandising</option>
<option value="29" class="level-0">The Faith Keepers</option>
</select>
I'm using the following code:
var selectFunction = function() {
document.getElementById('ofproduct_cat').options[0].text = 'Productos';
}
But it doesn't seem to work. It is linked from the header in a separate file.
I'm sure, it is function loading problem.
your code is correct only.
Try to load the script in page loading .. Like below code..
$(function(){
document.getElementById('ofproduct_cat').options[0].text = 'Productos';
});
Another Way
Create the function:
var selectFunction = function() {
document.getElementById('ofproduct_cat').options[0].text = 'Productos';
}
Call the Function:
$(function(){
selectFunction();
});
Because you said linked the file from separate file.
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
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>