What is the Dojo Equivalent to Button Click - javascript

In JavaScript - If I want to fire a button I do this -
<button type = 'button' id='myButton'>HiddenButton</button>
<script>
function callAutoClick(){
document.getElementById('myButton').click();
}
</script>
When I want to fire this button click, say, onChange of a text field -
<input type= 'text' onchange ='callAutoClick()'/>
I am not able to do the same in DOJO. I have found a solution using Javascript -
var divId = document.getElementById('myDivID');
divId.getElementsByTagName("button")[0].click();
But I don't want to have the dependency with the DivID. Is it possible to click a button just knowing the button's controlID. All I could find online were methods to define an OnClick() using dojo for a button and not clicking the button itself.
Plus I am designing the page with a BPM Tool so on including sections the DivID changes. When I open the page in FireBug I can see this -
<div id="div_1_1_2_1" class="Button CoachView CoachView_invisible CoachView_show" data-ibmbpm-layoutpreview="vertical" data-eventid="boundaryEvent_2" data-viewid="Hidden_Cancel" data-config="config23" data-bindingtype="" data-binding="" data-type="com.ibm.bpm.coach.Snapshot_2d5b8abc_ade1_4b8c_a9aa_dfc746e757d8.Button">
<button class="BPMButton BPMButtonBorder" type="button">Hidden_Cancel</button>
</div>
If you guys could suggest me a way to access the DOM object using the data-viewId also it would cater to my need.
Thanks in advance :)

You can use dojo/query:
function progClick() {
require(["dojo/query"], function(query) {
query("div[data-viewid=myViewId] > button").forEach(function(node) {
node.click();
});
});
}
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js" data-dojo-config="async: true"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css">
</head>
<body class="claro">
<div id="everChangingId" data-viewid="myViewId">
<button type="button" onclick="alert('my button got clicked!')">My Button</button>
</div>
<hr/>
<button type="button" onclick="progClick()">Programatically Click My button</button>
</body>
</html>

Related

Javascript removeAttribute style not working properly

I have a simple code in order to hide objects inside a div until a button is pressed.
The code works, but after execute the alert, the code roll back.
I understand there are several options to do the same, but same behavior occurs for others I have attempt (such as https://www.w3schools.com/jsref/prop_style_visibility.asp).
So I have attempt the removeAttribute style because it's easier to watch on Console.
I have attempt to put the script before the form, and after form, but same behavior occurs.
I have add some snapshots from Console in order to demonstrate it, please see below.
I am not sure what am I doing wrong. Tested on Chrome (89.0.4389.114) and Edge (89.0.774.75).
Any help is highly appreciated!
Thank you in advance.
PS. It is running inside a php code (using echo) due it has conditional values.
**PS. It works fine outside a form**
<body>
<form ...
(...)
<div class="field" id="pwdDIV" style="visibility: hidden">
..somocode..
</div>
<button class="button" onclick="showPwd()">Show Password</button>
</form>
<script>
function showPwd() {
var z = document.getElementById('pwdDIV');
alert("Get Style: "+z.style.visibility);
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
alert("Change to Style: "+"visible");
} else {
(...)
}
}
</script>
</body>
Before Press Show Password button
After press Show Password button - executing alert parameter
After execute Javascript code
Outside form sample (works fine outside forms)
<html>
<head>
<script type="text/javascript">
function showPwd() {
var z = document.getElementById('pwdDIV');
if (z.style.visibility === 'hidden') {
z.removeAttribute("style");
} else {
z.setAttribute("style", "visibility: hidden");
}
}
</script>
</head>
<body>
<button onclick="showPwd()">Show Password</button>
<div id="pwdDIV" style="visibility: hidden">
<input type="password" id="pwd1" name="pwd1">
</div>
</body>
</html>

Creating buttons that display buttons

I am trying to make an online questionnaire that will only show the next question after answering the current question. I am very new at this and trying to learn as I go. How do I make the 2nd set of buttons appear only when you answer yes to question 1?
<html>
Question 1
<p>
<button onclick="myFunction1()">Yes</button>
<script>
function myFunction1() {
document.getElementById("demo").innerHTML = "Yes on question 1, display question 2";document.getElementById("demo").style.color = "black";}
</script>
<button onclick="myFunction2()">No</button>
<script>
function myFunction2() { document.getElementById("demo").innerHTML ="No on question 1 negative answer to question 1 display negative response";document.getElementById("demo").style.color = "red";}
</script>
</html>
<p id="demo"></p>
</script>
</p></p></p>
</html>
<head>
<script>
function showImg() {
document.getElementById("map_img").style.display = "";
}
</script>
</head>
<body>
<button onclick="myFunction3()">Yes</button>
<script>
function myFunction3() { document.getElementById("demo2").innerHTML = "Yes to question 2";}</script>
</html>
<button onclick="myFunction4()">No</button>
<script>
function myFunction4() {
document.getElementById("demo2").innerHTML = "No to question 2";}
</script>
</body>
<p id="demo2"></p>
Use css display: none; to hide the second question, then when the user clicks the yes button, you change it to display:block;
Here is an example: https://jsfiddle.net/mrpbtbgy/2/
document.querySelector("#q1Btn").addEventListener("click",()=>{
document.querySelector("#question2").style.display="block";
});
In my opinion, you have to put your second, third and ... questions into div's tags with style="display:none"
When the users click on the Yes button, you can easily change the display to block and show the next question.
Another thing is that your html is not formatted well.
Here is an example of html.
<html>
<head>
</head>
<body>
<div>Your first question</div>
<div style="display:none" id="question2">Your second question</div>
<script>
You can put all your functions here
</script>
</body>
</html>
I did a very simple example for you, you can check on the following link:
https://jsfiddle.net/L7gp4c5g/
Hope to help you!
Put the what you want to hide in a div hidden:
<div id="question2" style="visibility: hidden">
<button onclick="onClick(2)">Yes</button>
<button onclick="onClick(2)">no</button>
</div>
Use javascript to programmatically hide or show next div:
<script>
function onClick(button) {
document.getElementById('question' + (button + 1)).style.visibility = "visible"
}
</script>
As other I would have said :
If you want to get the results at the end of all the questions. (if user leave, you won't get nothing.)
A solution would be to put each question in hidden divs, on the same page, displaying them after each validation. This way you won't need to put and remove content. Example:
function showquestion(number){
$("#question"+number).removeClass("hidden"); // Show the next question
$("#question"+(number-1)).addClass("hidden"); // Hide the current question
}
.hidden{display:none;
visibility : hidden;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="question1" class=""> Mauvaise réponse</div>
<div id="question1" class=""> Question 1 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(2)">No</button></div>
<div id="question2" class="hidden"> Question 2 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(3)">no</button></div>
<div id="question3" class="hidden"> Question 3 <button type="button" onclick="showquestion(0)">yes</button><button type="button" onclick="showquestion(4)">no</button></div>
But we forgot the "yes / no" part, nor talk about the visibility of the question solution inside the source code.
The correct way of doing this would be an ajax call on each question validation : The user send the response to a php script, this script validate the response, or not, then send the content that will be inserted on the user page.
It's the only way for the user don't cheat, and it allow you to save his response on each step (if you save something).

Unwanted Multiple KeyDown Events triggered on single keydown

So basically what I need to do is detect a keydown event of spacebar and hence perform some logic based on it in my javascript file.
So as you can see in my html, that there is a button "compose" on clicking which the message-container is displayed.
Now I need to implement Gmail like feature of converting the mail ids in recipients as tags but in my case a valid mail-id will be converted to a tag as soon as a space-bar is pressed, i.e, the string before the space bar will be checked for valid email-id.
So i've written the on-click function of the recipient container and the keydown function for spacebar.
Now here comes the problem. When the page is loaded for the first time, it works perfectly fine. I click inside the recipient box and as soon as i hit space bar, "spacebar pressed" gets printed on the browser console one time for one key down.
Now if I hide this message-container div by clicking the "close" button, and then again show the message-container div by clicking the "compose" button, and then when i click in the recipients box, it fires two keydown events for spacebar i.e., "spacebar pressed" will be printed twice.
And consequently, if i again close and reopen the box and click again, it will print "spacebar pressed" three times for every keydown of spacebar.
So is it something related to binding and unbinding of events or something else? Coz i have gone through similar links in which the key down event was getting binding again and again, but could really figure out how I would like kill the event on clicking of "close" button.
Here is html:
<!DOCTYPE html>
<html>
<head>
<title>ZMail</title>
<link rel="stylesheet" type="text/css" href="css/fonts.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="header">
<h2>ZMail</h2>
</div>
<div class="body-container">
<button type="button" class="compose-button" id="compose-button">Compose</button>
<div class="message-container" id="message-container">
<div class="compose-form-header">
<p> New Message </p>
<button type="button" class="close-button" id="close-button">x</button>
</div>
<form id="compose-form" method="POST" action="">
<div class="recipient-container" id="recipient-container">
<div class="to-box" id="to-box">
<p>To</p>
</div>
<div class="input-elements-container" id="input-elements-container">
<input type="text" id="recipient-box" name="recipients" placeholder="Recipients">
</div>
</div>
<input type="text" id="subject-box" name="subject" placeholder="Subject">
<textarea form="compose-form" id="message-text-box" name="message-text" ></textarea>
<div class="send-button-container">
<button type="submit" class="send-mail-button" id="send-mail-button">Send</button>
</div>
</form>
</div>
</div>
</body>
And here is the JS
var contacts = ['ankush.rgv#gmail.com']
$(document).on('ready', function(){
$("#message-container").hide();
$("#to-box").hide();
$("#compose-button").click(function (event) {
if($("#message-container").is(':hidden')){
$(function() {
$("#recipient-box" ).autocomplete({
source: contacts
});
});
$("#message-container").show();
}
});
$("#close-button").click(function (event) {
$("#message-container").hide();
$("#to-box").hide();
$("#recipient-box").val('');
$("#subject-box").val('');
$("#recipient-box").attr('placeholder', 'Recipients');
$("#subject-box").attr('placeholder', 'Subject');
});
$("#recipient-container").click(function (event) {
console.log("recipients clicked");
$("#to-box").show();
$("#recipient-box").attr('placeholder', '');
$(document).keydown(function(e) {
if (e.keyCode == 32) {
console.log("spacebar pressed!!");
}
});
});
$("#subject-box").click(function (event) {
$(this).attr('placeholder', '');
});
});
Any help will be appreciated.
Everytime you click on #recipient-container, .keydown() will add an extra event handler to the document, without removing the existing ones.
The easiest solution here would be to remove the handler when you click on #close-button. Unbinding events can be done with .off().
$(document).off('keydown');

Hidding TextBox in html

I have some text boxes in html which takes value from database based upon that value i want to hide that particular text box i.e if the value is null the text box disappear please help.Searched a lot but still confused as i want that function to run automatically so can't use on-click or on-change method. I have function that check for the value weather that value is null or not then i set that value to the text box. Found a method of changing the type of text box but not working.
readonly>
Hide
You could just do this. Im just setting the visibility to hidden to completely hide it.
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="myFunction()">Hide content of textarea</button>
<script>
function myFunction() {
document.getElementById("myP").style.visibility = "hidden";
}
</script>
</body>
</html>
Toggle
Now if you want to toggle you just add another function!
<!DOCTYPE html>
<html>
<body>
<textarea id="myP">This is a textarea.</textarea>
<button type="button" onclick="hide()">Hide content of textarea</button>
<button type="button" onclick="show()">Show content of textarea</button>
<script>
function hide() {
document.getElementById("myP").style.visibility = "hidden"
}
function show() {
document.getElementById("myP").style.visibility = "visible"
}
</script>
</body>
</html>

How to replace html button with plain text

How do you replace a button with whatever words were on the button before? I was looking at an answer to another similar question, which said to use something like:
var myBtn = document.getElementById("buttonId"),
mySpan = document.createElement("span");
mySpan.innerHTML = myBtn.innerHTML ;
myBtn .parentNode.replaceChild(mySpan, myBtn);
but that had made what other buttons do change. Does anyone know another way to change a button to regular text?
I know that that code works just by itself, but it doesn't work with my code for some reason, so I don't really care what's wrong with that code. I'm just wondering if anyone knows another way to do it.
Thanks
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">
<input type="button" value="Change into Text" id="submit" onClick="change()"> <!--button input that will trigger an event named change-->
</div>
</body>
</html>
<script type="text/javascript">
function change(){ //function to run when you click on the button...
var buttonValue = document.getElementById("submit").value; //stores the button value
document.getElementById("myDiv").innerHTML = buttonValue; // displays the value as a plain text inside "myDiv" - removing the button input entirely
}
</script>
EDIT:
I've just noticed you had multiple buttons in your page, which will make my previous example wrong. heres something that will make you work easier i think in case you will add extra buttons:
first heres the code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li id="id_1"><input type="button" value="Change into Text" onClick="change(1)" id="button_1"></li>
<li id="id_2"><input type="button" value="Change into Text" onClick="change(2)" id="button_2"></li>
<li id="id_3"><input type="button" value="Change into Text" onClick="change(3)" id="button_3"></li>
</ul>
</body>
</html>
<script type="text/javascript">
var id;
function change(id){
var buttonValue = document.getElementById("button_"+id).value;
document.getElementById("id_"+id).innerHTML = buttonValue;
}
</script>
In the HTML part, you can create a list (li) of buttons if that's your layout...
each list will have its own id, in this case id_x that will be used later when you replace its content. each button calls a function change(id) while id is just a unique number for each button.
In the JS part, the change(id) gets the id of the button that was clicked, takes its value, and replaces the innerHTML (content) of the relative list items with a plain text.
Let me know if you still need any other help.
Seems that you are looking for another way to replace the buttons with plain text, well I'll show you the jQuery way.
HTML
<div>
<button id="btn1" class="change-button">A button with some text 1</button>
<button id="btn2" class="change-button">A button with some text 2</button>
<button id="btn3" class="change-button">A button with some text 3</button>
</div>
jQuery
// When we click a button with a "change-button" class
$(".change-button").on("click", function(event){
// First we get the ID value of the clicked button
// example: "btn2"
var buttonId = $(this).attr('id');
// Then we get the html value of the clicked button
// example: "A button with some text 2"
var buttonText = $(this).html();
// We use the function replaceWith, to replace the button to a <span>
// with the buttonText variable we have
$('#' + buttonId).replaceWith("<span>" + buttonText + "</span>");
});
As you can see, it's a lot more cleaner with jQuery. You should try it!
Here is the fiddle so you can test it.
<html>
<script>
function fun()
{
var a = document.getElementById("hello").value;
document.getElementById("ad").innerHTML = a;
}
</script>
<body>
<div id="ad">
<input type="button" value="hello" id="hello" onClick="fun()">
</div>
</body>
</html>
sorry, edited the wrong post

Categories

Resources