I'm working on an HTML file that acts as its own page in an Electron App. In this file, I have a button, which shows a pop-up form upon clicking.
Here's the relevant code for the button and the content that pops up:
<button class="open-button" id="openConfig">Change Configuration</button>
<div class="modal-content" id="networkConfig">
<div class="modal-header">
<h2>Configuration Settings</h2>
</div>
<div class="modal-body">
<p>To get started, enter some initial information about the network you want to configure.</p>
<p>Leave the number of nodes as zero if you would like to start from scratch.</p>
<br />
<p>Number of nodes:</p>
<input type="number" id="nodeNumber" value="0" min="0" max="30">
<br /><br />
<p>Preference:</p>
<div>
<input type="radio" id="prefsecure" name="option" value="Secure" checked>
<label for="prefsecure">Secure (Recommended)</label>
</div>
<div>
<input type="radio" id="prefefficient" name="option" value="Efficient">
<label for="prefefficient">Efficient</label>
</div>
<br />
</div>
<div class="modal-footer">
<button type="submit" class="btn">Start Configuration</button>
<button type="button" class="btn cancel" id="closeConfig">Cancel</button>
<br /><br />
</div>
</div>
Also, here are the relevant javascript functions that allow me to open/close this pop-up:
function openForm() {
document.getElementById("networkConfig").style.display = "block";
}
function closeForm() {
document.getElementById("networkConfig").style.display = "none";
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('openConfig')
.addEventListener('click', openForm);
});
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('closeConfig')
.addEventListener('click', closeForm);
});
What I would like to do is take that content that pops up when the button is clicked (the button's id="openConfig") and put that into a separate HTML file (the id of the content I want in a separate file is "networkConfig"). This is to help compartmentalize my code. How can I make the button refer to this other file? Anyone has any leads? I would greatly appreciate any help at all!
Also, I apologize if I've made any mistake while posting this. It's my first post to stackoverflow, and I haven't been able to find what I'm looking for these past few days. Thank you for reading!
If i got it right, the way for you to do that is to either POST the content you want to reuse somewhere, initializing an empty variable, adding the markdown and thus being able to prompt it elsewhere, or save a temporary file containing the markup (insecure).
Related
Im calling a function from onclick of a button. When i press the button it executes my function deletes everything from the screen and displays the button inside my function. Everything works ok but why does it delete everything from screen. How to make it for it to only run the function but keep previous html elements prior to clicking the function?
<div id="form-container">
<form id="dim_form" action="">
<div class="bg">
<label class="form-label-a" for="dimm">Dimension</label>
<input id="dimm" type="text" />
</div>
<div class="bg">
<label class="form-label-b" for="dimm_upper">Upper tolerance</label>
<input id="dimm_upper" type="text" required />
</div>
<div class="bg">
<label class="form-label-c" for="dimm_lower">Lower tolerence</label>
<input id="dimm_lower" type="text" required />
</div>
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
</form>
</div>
data_table()
document.write("<input class='download' type='button' id='button-a' value='download xls' />");
I tried with "button" instead of submit. return false, basically everything i found on google and nothing works for me.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
When this method is not used for testing, it is often used to write some text to an output stream opened by the document.open() method. See "More Examples" below
see the full documentation here: https://www.w3schools.com/jsref/met_doc_write.asp
if you want to add some nodes without cleaning the whole HTML try append
https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append
document.write will erase everything you had earlier. Instead use append.
function data_table() {
const input = document.createElement('input');
input.type = "submit";
input.id = "button-a";
input.value = "download xls";
document.querySelector('.bg').appendChild(input);
}
<div class="bg">
<input class="form-button" type="submit" onclick="data_table();" value="Calculate" />
</div>
Document is referred to the entire html page when you are trying to do document.write it will write on the entire page....
There can be couple of work arounds but i will suggest this one
Give class to the element you want to add element to.
Get element by the class you assign to the element in first step
var x = document.getElementsByClassName("example");
if you want to keep whats already there
x.appendChild("whatever you want to add goes here");
if you want to add only new element and discard everything previously present
x.innerHtml="whatever you want to add goes here";
I'm writing a website where the user would hit a button to start.
Depending on which button they push, a new section on the page will appear.
More buttons in this section - hit one of those buttons and one of a few sections will appear.
I have code which is starting to get really long and messy.
So I was looking for a cleaner/better way of managing what needs to be visible at any one time.
I want to avoid installing something like angular/react/knockout - because it seems like a lot of overhead for just 1 page on a large(ish) website. So ideally just naked javascript or jquery.
But i'd also like to avoid pages and pages of javascript full of $('div1').show(); $('div2').hide();
etc
And it is becoming difficult to manage them all.
I've created a fiddle so hopefully you can see what I am trying to accomplish (it's only about 1/5 complete but already looking a mess):
https://jsfiddle.net/6w4mfndf/
But basically it's looking like this at the moment:
<div name="Group1">
<input name="group1" type="radio" id="btn1" />
<span>1</span>
<input name="group1" type="radio" id="btn2" />
<span>2</span>
<div>
<div name="group2">
<div id="div_btn1" style="display:none">
<input name="group2" type="radio" id="btn1_1" />
<span>1_1</span>
<input name="group2" type="radio" id="btn1_2" />
<span>1_1</span>
</div>
</div>
<script>
$(function () {
$('#btn1').change(function() {
if ($('#btn1').is(':checked')) {
$('#div_btn1').show();
$('#div_btn1_1').hide();
}
});
</script>
I am working with MVC if there is any kind of way that can be used to help model the data out. (Unlikely I'd guess, but just throwing it out there).
Any solutions I am missing?
Why not try to have a class that is shared by all the buttons which triggers the js and a data attribute that informs the js as to which div of content to show?
Something along these lines for example:
<div class="content-block" id="content1">
Content 1
</div>
<div class="content-block" id="content2">
Content 2
</div>
<button class="content-button" data-content-block="content1" value="content 1"></button>
<button class="content-button" data-content-block="content2" value="content 2"></button>
<script>
$(function () {
$(".content-block").hide();
$(".content-button").click(function() {
$(".content-block").hide();
var contentBlock = $(this).attr("data-content-block");
$("#" + contentBlock).show();
});
});
</script>
I've been through 2 web-related classes with similar projects in popup using html and javascript, but the problem is that the popup either won't show at all or showing for half a second and immediately closing on itself. I can't post the whole code, but here's the rough block of code (I put the script at the very bottom of the file, outside the html tag):
<script type="text/javascript">
var popup = document.getElementById('popup');
var btn = document.getElementById('btn_popup');
var close = document.getElementById('close');
btn.onclick = function(){
popup.style.display = "block";
}
close.onclick = function(){
popup.style.display = "none";
}
</script>
<html>
<body>
<div id="titleBar">
<h2>Title</h2>
<div>
<form action="page.php" method="get">
<input type="text" name="item"> by
<select name="search">
<option value="v1">Value 1</option>
<option value="v2">Value 2</option>
<option value="v3">Value 3</option>
</select>
<input type="submit" value="SEARCH">
<button id="btn_popup">Popup Button</button>
</form>
</div>
</div>
<div id="popup">
<div id="popup_content">
<header>
<span id="close">X</span>
<p>Popup Form</p><br>
</header>
<article>
<div>
<form method="POST" action="page.php">
<input type="text" name="n1" placeholder="N1">
<input type="text" name="n2" placeholder="N2">
<input type="text" name="n3" placeholder="N3">
<input type="text" name="n4" placeholder="N4"><br>
<select name="list">
<option value="">Select One</option>
<?php
//code to generate options
?>
</select><br>
<input type="submit" value="Click">
</form>
</div>
</article>
</div>
</div>
</body>
</html>
I copied these parts of code from other pages, but they no longer work on this page but they work on the previous page without any problems. I also use PHP to generate the dropdown list in the popup form. In the previous page, the popup shows like it should be, but in this page the popup only shows for like half a second and closes by itself.
Is there any fix to this? Or at least any clues on the problem? And please don't recommend me to use framework (other than w3, but not w3 modals) to fix this. I'm using the latest Google Chrome to view these files, already tried with Mozilla as well but gives the same result.
The problem is that this:
<form action="page.php" method="get">
causes a load of page.php when you click the button.
The reason for this is that the default "type" of a button tag is "submit".
Just add type="button":
<button type="button" id="btn_popup">Popup Button</button>
but the problem is that the popup either won't show at all or showing for half a second and immediately closing on itself.
This is because the form is getting submitted once u clicked on popup button.
Keep your popup button outside of the form, otherwise you have to handle prevent events.
<form>
//your code
</form>
<button id="btn_popup">Popup Button</button>
I created a fiddle, please check it once
https://jsfiddle.net/ponrajpaul/42g9bk3c/
I have an input and two buttons, each of which are supposed to change the text within the input field. If I put the single line of code within onclick directly, it works perfectly. If I move the line to a separate function and attempt to call it via onclick, nothing happens, and I don't know why.
I've looked at many other SO questions about onclick, but none of them seemed to help with this. I'm stumped. JSFiddle is here: https://jsfiddle.net/wjw00h44/2/
Relevant code:
<div class="container">
<div class="row">
<div class="col-sm-8">
<input type="text" class="form-control" id="noun-sentence" placeholder="Enter a sentence here">
</div>
<button type="button" class="btn btn-default" onclick="document.getElementById('noun-sentence').value = 'go away'">Check</button>
<button type="button" class="btn btn-default" id="noun-button" onclick="changeWords()">Check2</button>
</div>
<p id="test_p"></p>
</div>
<script>
function changeWords() {
document.getElementById('noun-sentence').value = 'go away';
return false;
}
</script>
In js fiddle, click on the settings gear icon in the javascript window and change how the script loads. Don't put it in either of the 'on' events, but either directly in the head or body elements. Then click 'run' and try again.
Friends
Im writing a jsp that opens a pop-up window using jQuery that has checkboxs and a user can then select all checkbox values on a pop-up window and then on Submit , it gets displayed to the parent window,
So far I am able to open up a pop-up on click that displays the list of checkboxes and Im struggling to send the checked checkbox values to the parent page , Please suggest
My code is
<form action= "" id ="overlay_form" method= "post" style="display:none">
<h3>Select Language</h3>
<br /><br />
<input type="checkbox" name="countryCheckbox[]" value="English" /> English <br/>
<input type="checkbox" name="countryCheckbox[]" value="French" /> French <br/>
<input type="checkbox" name="countryCheckbox[]" value="Norwagian" /> Norwagian <br/>
<input type="checkbox" name="countryCheckbox[]" value="Swedish" /> Swedish <br/>
<input type="checkbox" name="countryCheckbox[]" value="Chinese" /> Chinese <br/>
<br /><br />
<div class="row-fluid grid-footer">
<div class="span8"></div>
<div class="span5">
<input class="btn btn-primary btn-primary-secondary" type="submit" name="saveDepartmentBtn" id="saveOrg" value="Save" onclick="this.disabled='disabled'; document.getElementById('saveOrg').disabled='disable';this.form.submit(); ">
</div>
<div class="span1">
<button class="btn btn-secondary" type="button" cancel-action="/admin/role/list" ><spring:message code="common.cancel" /></button>
</div>
</div>
</form>
<p id="text">
Selected Languages are:
</p>
Now to send the checked checkboxes data to the parent my JQuery code is
$(document).ready(function(){
$('#overlay_form').submit(function(){
$('input:checkbox:checked').each(function(){
window.parent.$("#text").text(parent.$("#text").text() + $(this).val()+" ,");
});
parent.$.close();
return false;
});
});
However Send the selected checkboxes data to the Parent window is not working
Please advice
You're not actually creating a real window. It's an overlay. So it's not a popup, it's not a window, and thus there is no window.parent for what you're working in.
Instead you have a hidden div / form that gets shown and positioned overtop of your window. Since this is all done with CSS and Javascript, there is no parent to your form because it's in the same window as the rest of your markup.
I'm sure if you looked at the javascript console of your browser you'd see an error along the lines of window.parent is null / not an object.
There's the explanation. Here's the answer: remove window.parent and parent from your code. And since it's not a window, you're not closing a window, so your close is likely a fadeOut.
$(document).ready(function(){
$('#overlay_form').submit(function(){
$('input:checkbox:checked').each(function(){
$("#text").text($("#text").text() + $(this).val()+ " ,");
});
$('#overlay_form').fadeOut(500);
return false;
});
});