I am trying to dynamically create a popup form with some input fields when the user clicks some button; I am having a hard time to return the input values when the user closes the popup.
On the main form, I have something like:
function GetAnswers() {
var answers=ShowPrompts();
return answers;
}
function ShowPrompts() {
var answer="";
var popup=window.open('','PopupForm');
TextControl= popup.document.createElement("INPUT");
TextControl.setAttribute("type", "text");
TextControl.value="";
TextControl.setAttribute("id", 'idInput1');
popup.document.body.appendChild(TextControl);
var ButtonControl = popup.document.createElement("button");
var TextNode = popup.document.createTextNode("Save");
ButtonControl.appendChild(TextNode);
ButtonControl.style.float="right";
popup.document.body.appendChild(ButtonControl);
ButtonControl.onclick = function(){
InputControl=popup.document.getElementById('idInput1');
answer=InputControl.value;
}
return answer;
}
The problem is "answer" is only set when the user clicks the Save button; so when ShowPrompts is called, it just returns "". How do I make the GetAnswers function to wait for the user to click on the Save button on the popup and get the answer value?
Related
I'm trying to open the Enrichr website (https://amp.pharm.mssm.edu/Enrichr/) and auto-fill a list of genes into the large box for genes. Here the variable "data" represents those genes. I have a button in my html code that executes the following function:
function myFunction()
{
var data = "hello";
var OpenWindow =window.open("https://amp.pharm.mssm.edu/Enrichr/");
OpenWindow.onload = function(){
OpenWindow.document.getElementById("text-area").value = data;
}}
This code doesn't seem to work. It opens the webpage but does not fill anything out. I don't think the onload function is working properly.
I think the problem is that you want to change OpenWindow.document.getElementById("text-area").value before page load completly. Maybe try it like this:
function myFunction() {
var data = "hello";
var OpenWindow =window.open("https://amp.pharm.mssm.edu/Enrichr/");
OpenWindow.onload = function () {
OpenWindow.document.getElementById("text-area").value = data;
}
}
I have a page that will open a popup and after something is done on that popup and user close it I want to get data from table / tds. Here is my calling function:
function clicked() {
windowOpener("SiteMap.html");
popupWin.onbeforeunload = function () {
var a = $("#drawTable", popupWin.document);
var tds = $(a).find("td");
tds.each(function () {
var p = $(this).data('point');
if (JSON.stringify(p.values) !== JSON.stringify(point.values)) { //here comes error, to this line
console.log(p.values);
}
})
};
}
.data('point') is created and populated already on that popup page, but still I am getting that $(this).data('point') is undefined. So, is it possible that in that point data is already destroyed? What is your recommendation how to deal with this?
thanks
I have a button on my website, which plays the music when you click on it and in the same time it changes the text inside of the button (to "Go to SoundCloud".)
I want that button (with the new text on it) to redirect to SoundCloud when I click on it.
Now I got both when click first time, which is redirect to SoundCloud and play the track. (plus it changes the text)
Any ideas, how to solve this problem? Thx!
var links = document.getElementById("playButton");
links.onclick = function() {
var html='<iframe width="100%" height="450" src="sourceOfMyMusic"></iframe>';
document.getElementById("soundCloud").innerHTML = html;
var newTexts = ["Go to SoundCloud"];
document.getElementById("playButton").innerHTML = newTexts;
newTexts.onclick = window.open('http://soundcloud.com/example');
};
Use a variable that indicates whether it's the first or second click.
var first_click = true;
links.onclick = function() {
if (first_click) {
// do stuff for first click
first_click = false;
} else {
// do stuff for second click
}
}
Just redefine the onclick after the first function call.
Put the onclick on the button instead of the html.
document.getElementById("playButton").onclick=window.open('http://soundcloud.com/example');
Another option in some cases is to use a ternary operator and a boolean toggle expression:
let btn = document.querySelector('.button');
let isToggledOn = false;
btn.addEventListener ('click', function(e) {
e.target.textContent = !isToggledOn ? 'Is ON' : 'Is OFF';
isToggledOn = !isToggledOn;
});
newTexts.onclick is not creating a function to open a window, it is simply taking the return value of window.open which is being executed right away.
It should look like:
newTexts.onclick = () => window.open('http://soundcloud.com/example');
Also this will not work as intended because newTexts is not the actual DOM element, you need to attach the new onclick on the element and not the array...
But to other answers in this page, the logic is hard to read, so I'd advise to refactor the logic to be more readable.
I'm trying to make a test app for Windows 8 that has two input boxes and one button (lets call it "Calculate" button). When the user presses the button he gets a result. He can enter his details in either metric or imperial units by choosing which units he wants to use in the settings flyout. Now what I'm trying to do is to commit the changes instantly. When the user selects for example the imperial units the input boxes and the result automatically change to imperial. Right now when I change the units from metric to imperial I must press the "Calculate" button again to see the results in imperial.
How can I do that?
Below is some of my code.
In the default .js file I created a button handler:
var test = document.getElementById("button");
test.addEventListener("click", doDemo, false);
In the main .js file where all the calculations are done it looks like this:
function doDemo(eventInfo) {
var applicationData = Windows.Storage.ApplicationData.current;
var roamingSettings = applicationData.roamingSettings;
if (roamingSettings.values["cmorft"] == 'imperial') {
var greetingString3 = "Imperial";
document.getElementById("units").innerText = greetingString3;
} else {
var greetingString4 = "metric";
document.getElementById("units").innerText = greetingString4;
}
I used the following to save the user's choice:
var applicationData = Windows.Storage.ApplicationData.current;
var roamingSettings = applicationData.roamingSettings;
WinJS.UI.Pages.define("/html/settings.html", {
// This function is called whenever a user navigates to this page. It
// populates the page elements with the app's data.
ready: function (element, options) {
var imperialRadio = document.getElementById("imperial"),
metricRadio = document.getElementById("metric");
// Set settings to existing values
if (roamingSettings.values.size > 0) {
if (roamingSettings.values["cmorft"]) {
setMIValue();
}
}
// Wire up on change events for settings controls
imperialRadio.onchange = function () {
roamingSettings.values["cmorft"] = getMIValue();
};
metricRadio.onchange = function () {
roamingSettings.values["cmorft"] = getMIValue();
};
},
unload: function () {
// Respond to navigations away from this page.
},
updateLayout: function (element, viewState, lastViewState) {
// Respond to changes in viewState.
}
If I understand you correctly, you simply need to set the innerText properties of your HTML elements when you change the units, not just when you click the button. In your demo it can be as simple as calling doDemo from within the onchange handlers for your radiobuttons, as that will read the updated setting and set the text.
I posted a very much similar question yesterday but no one answerd so far. Now I have changed the functionality and stuck with the following problem. In this scenario, I have a RadWindow that i am opening from code behind file (.aspx page) on a button click. On this rad window I have a hidden field where I am setting value and now OnClientBeforeClose event I want to get the value from hidden field and assign it to a text box on my .ASPX page which is the parent page of this Rad Window. Could please anyone give me any idea how to do that. I have looked inot many examples on Telerik and StackOverflow but nothing working for me. Thanks in advance.
Rad Window Diclaration in my .Aspx.cs page
RadWindow window = new RadWindow();
window.Title = "Comments Pick List";
window.ID = "CommentsListPopUpRadWindow";
window.NavigateUrl = "CommentsList.aspx";
window.OnClientBeforeClose = "CommentsListPopUpRadWindowBeforeClose";
window.Skin = "Metro";
window.Behaviors = WindowBehaviors.Close;
window.KeepInScreenBounds = true;
window.VisibleStatusbar = false;
window.Modal = true;
window.Width = 750;
window.MinHeight = 510;
window.VisibleOnPageLoad = true;
window.EnableViewState = false;
RadWindowManager1.Windows.Add(window);
JavaScript function on RadWindow .ASPX page where I am setting value to the hidden field
function displayItem(id) {
var selectedText = document.getElementById(id);
document.getElementById('hiddenSelectedTextField').value = selectedText.innerText;
}
JavaScript OnClientBeforeClose function on my .ASPX parent page (to close the RadWindow) where I am trying to get value from the hidden field and set in the TextBox of parent page
function CommentsListPopUpRadWindowBeforeClose(oWnd, args) {
}
You can easily pass arguments to the RadWindow's Close function, from the child page:
function GetRadWindow() {
if (window.radWindow) {
return window.radWindow;
}
if (window.frameElement && window.frameElement.radWindow) {
return window.frameElement.radWindow;
}
return null;
}
function ChildClose() {
GetRadWindow().Close(document.getElementById('hiddenSelectedTextField').value);
}
and then retrieve the argument in the parent page by specifiying its OnClose function:
Add, in the aspx.cs file:
window.OnClientClose = "CommentsListPopUpRadWindow_OnClose";
and in the aspx parent page:
function CommentsListPopUpRadWindow_OnClose(radWindow, args) {
var arg = args.get_argument();
}