I'm trying to get a hidden form CLASS to show onclick of a class.
Heres my code:
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
<div class="product">
<input type="submit" class="clickme" />
<script>
document.getElementsByClassName('clickme')[0].onclick = function(){
document.write('<form class="etc"><label>Etc</label><select></select>');
};
</script>
</div>
The forms inside the scripts are styled.
I want the click to show only the content in the script, however nothing is working, Alerts work fine - So my question is can i use HTML in Scripts? And if so - based on what you see in this code, how can i do that?
I know this is not really what you expect as answer but I believe you can pretty much what you are trying to do with jquery click and jquery html.
Hope this helps
Related
I am trying to change the value of a text area and clicking the button to submit it, but my code doesn't seem to click on the target. What could I be doing wrong? Could it be that the modal is preventing the click?
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>
<form id="form1" name="form1" method="post">
<p>
<input type="button" value="submit" onclick="setValue()" />
</p>
<p>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
document.getElementById("throw").click();
}
</script>
</p>
</div>
</div>
Edit:
omg, I am SO sorry. I did not explain this well. I wrote this almost at 2 am my time. I was tired and frustrated (i spent a few hours trying to find what I was doing wrong) and did not explain myself properly. Let me try again.
What I posted was a snippet of the code where I believe is the problem since the function bit that modifies "set" does work, but the part that is supposed to click on "throw" doesn't. (ignore that empty p).
I am editing the source code of this git: https://github.com/MajorVictory/3DDiceRoller
I have managed to edit a few things like adding buttons and setting a modal from where the button you see in the snippet operates from. Visual reference: enter image description here
Set and Throw
In short, "document.getElementById('set').value = "5d10";" works, but "document.getElementById("throw").click();" doesn't.
There is no element called 'set' in your html code.
The correct code is this:
<!DOCTYPE html>
<html>
<head>
<title>Training File Upload</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p></p>
<form id="form1" name="form1" method="post">
<input type="button" id='set' value="submit" onclick="setValue()" />
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('set').value = "5d10";
}
</script>
</p>
</div>
</div>
</body>
</html>
I have a chat, which has a textarea part for typing. Works good.
I open a modal, the textarea still remains above, due to z-index. However it doesn't get focus when I click with the mouse. Looks like it's disabled.
It doesn't work also if I open the chat after I opened the modal.
Any ideas?
The chat window has absolute positioning.
For some reason that I don't know, Boostrap don't permit do that.
I make some think like this using Bulma ( a pure css lib ):
<div class="container" id="app">
<div class="modal">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
<table>
<tr>
<td>Jhon</td>
<td>Hi</td>
</tr>
</table>
<input type="text" class="input" />
</div>
<button class="modal-close"></button>
</div>
<textarea style="position:absolute;z-index: 9999" name="" id="" cols="30" rows="2"></textarea>
<br /><br /><br />
<p>
<button class="button" id="showModal">Show</button>
</p>
</div>
OBS: Bulma don't have JavaScript code, and you should make the transition of classes yourself.
JavaScript:
$("#showModal").click(function() {
$(".modal").addClass("is-active");
});
$(".modal-close").click(function() {
$(".modal").removeClass("is-active");
});
http://codepen.io/edgardleal/pen/GWWKoO?editors=1010
I have five buttons in my html page. I used to create four of them by javascript and one with html, but after various changes decided to create all of them with html. The problem is that previously all of my buttons worked just fine, but after the change the ones previously made by javascript don't work anymore. I use getElementById("").onclick = function() for all of the buttons, yet only one of them works. (I only made the functionality for one of the four buttons because I encountered this problem)
Here is the javascript for both of the buttons. button1 is the one that doesn't work, I even tried with only having console.log() inside the function, but it didn't do anything.
document.getElementById("button1").onclick = function(){var element = document.getElementById('presetPicker');element.value = this.value;providerManager.refreshProviders();};
document.getElementById("DownloadXml").onclick = function (){createReport('http://192.168.0.101:8080/rest/v1/excel-reports/run/XLT_211607',verifyReport)};
Here is the html part of the page
<body>
<div id="container1">
<header>
<img src="http://www.jamk.fi/globalassets/tietoa-jamkista--about-jamk/materiaalit-esitteet-asiakaslehdet-ja-logot/jamkin-logot/jamk_fi--tunnus/jamkfi_tunnus_sininen_suomi.png" alt="Jamk logo" style="width:50%;height:50%;margin-left:25%;">
</header>
<div id="container2">
<div id="textContainer">
<h2>Fosfaattifosfori PO4-P [mg/l]</h2>
</div>
<div id="Graafi"></div>
<div class="input">
<div id="buttonContainer1">
<ul id="buttonList" class="timeForm">
<input id="button1" type="button" class="buttonGroup1" value="Previous day"
><input id="button2" type="button" class="buttonGroup1" value="Previous week"
><input id="button3" type="button" class="buttonGroup1" value="Previous month"
><input id="button4" type="button" class="buttonGroup1" value="Previous year">
</ul>
</div>
<div id="buttonContainer2">
<div id="list">
<ul id="downloadList">
<input id="DownloadXml" type="button" value="Download" />
</ul>
</div>
<div id="download_div">
<img id="loading_gif" src="/modules/dashboards/web/public/359.gif" alt="Loading" style="display:block;">
</div>
</div>
<iframe id="download_frame" style="display:none;"></iframe>
</div>
<div class="testi">
<select id="presetPicker" class="testi" ></select>
</div>
<footer>
</footer>
</div>
</div>
</body>
By adding an option <option value="Previous day">Previous day</option> to the select, your code works again. So either that is the problem, or the function providerManager.refreshProviders();, which I can't check, is giving you issues.
Can you please provide a jsFiddle with the example?
I think you are loading the script before the DOM elements are drawn.
Maybe a $(document).ready() should resolve.
I found the problem. Looks like there was no problem with the code itself, but I was using Firefox Web console to debug, and for some reason it didn't register any console.log() commands. After debugging with Browser console I found the debug data.
Feeling quite ashamed now
EDIT: should I remove the question or let it stay here to remind every starting developer to doubt their debug tools?
I am trying to create a model in angularJS with angular UI, and I tried to use this code in my page's controller
$scope.insertEvent = function() {
$modal.open({
templateUrl: 'views/overlays/insert-event.html'
});
};
Inside insert-event.html it looks like this:
<section class="overlay overlay-insert-event">
<span class="bg"></span>
<form class="wrap">
<header>
Insert an Event
</header>
<div class="main">
<label>Name<input type="text" ng-model="newEvent.name" name="name" /></label>
<label>Start<input type="text" date-picker ng-model="newEvent.start" name="start" /></label>
<label>Stop<input type="text" date-picker ng-model="newEvent.stop" name="stop" /></label>
</div>
<footer>
<button ng-click="insertEventSubmit()">Insert</button>
<a ng-click="insertEventReset()">Cancel</a>
</footer>
</form>
</section>
Now the problem is that when I open it, the background of the overlay with the semi-tranparent black appears, but the content doesn't appear. I hope someone can help me understand how this works. Thank you in advance, Daniel!
Where is your views folder located? Try '/views/overlays/insert-event.html' if it is directly located under the project.
Try wrapping the HTML for your modal content in proper HTML tags with an ng-app directive defined. Worked for me when I also got just the background overlay when opening the modal.
<html>
<head>
<title>
Modal
</title>
</head>
<body>
<div ng-app="yourAppName">
<<<YOUR_CONTENT>>>
</div>
</body>
</html>
see below are what i tried.
jQuery:
$("#type_name").click(function(){
$("#add_form").fadeIn(1000);
$("#involved_name").val("");
positionPopup('#add_form');
$("#involved_name").focus();
});
html:
<div id="add_form" style="display:none">
<h2>Enter involved Name<h2>
<table><tr><td>
<input type="text" id="involved_name" name="name" maxlength="20" /></td></tr>
</table>
<div style="width:180px;margin:20px 5px 0 10px" align="right">
<button type="button" class="close" name="cancel" class="forward backicon">
<img src="{{ STATIC_URL }}images/button-icon-ir-back.png" width="12" height="17" alt="" />
Cancel</button> {% include "buttons/add.html" %}
</div>
</div>
onclick button on html:
<button type="submit" name="edit" class="forward" id="type_name"><font color="#026BE2">Type a name </font></button>
The above code is not working,not showing any errors in console,but popup is not displaying.Need help.
You aren't binding the event correctly after the DOM has been constructed. You may need to wrap your code around a $.ready(), or $() for short.
$(function () {
$("#type_name").click(function () {
$("#add_form").fadeIn(1000);
$("#involved_name").val("");
positionPopup('#add_form');
$("#involved_name").focus();
});
});
Alternatively, you can simply move your piece of code just before the closing body tag i.e. </body>.
No other problems seems to be of much concern.
Guess $.ready should work, as #Alexander has pointed out.
Also try $("#type_name").live('click',function(){});
Incase of newer jQuery version replace .live by .on
This will bind your events dynamically... irrespective of your DOM loading.