Click even not working on <Label> [ Using EasyUI ] - javascript

In my project,I am using EasyUI.
I have two labels 'AA' and 'BB' whose color changes when I hover over it.Now,I want to do something when Label is clicked.But the click event is not working.
Here is my code:
<script>
function recDoc(){
alert("xietst");
}
</script>
<body style="height:100%">
<style>
.dlgLabel{cursor:pointer}
.dlgLabel:hover {background-color:blue;color:white}
</style>
<div id="dlg" class="easyui-dialog" title=""
style="width:88px;height:260px;top:130px;left:170px;padding:10px">
<label class="dlgLabel" onclick="recDoc()">AA</label><br />
<label class="dlgLabel">BB</label><br />
</div>
</body>
When I delete the class=easyui-dialog,it works.
But I would like for the label to be clickable even when I use easyui. Any help would be great.

You should follow the example as it is on the docs:
http://www.jeasyui.com/demo/main/index.php?plugin=Dialog

Related

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

I am I using the correct function for my element to turn red?

Ok so am trying to get just my headers (all 3 headers) to turn the color red when the "Red Headings" button is clicked by using the changeStuff function but it doesn't seem to run properly. So Is this the correct function I should be using?
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has it's own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script>
"jquery-2.1.4.js"
</script>
<script>
function changeStuff() {
$("h").addClass("redElements");
}
$("theRedButton").bind("click", changeStuff);
</script>
</body>
To add the class to all header elements, use:
function changeStuff() {
$("h1, h2, h3").addClass("redElements");
}
$("#theRedButton").on("click", changeStuff);
Edit: Here's the complete HTML content you need, which also shows how you should be bringing in jQuery and hooking into the document ready callback:
<head>
<title>Stanford Graduation</title>
<style type="text/css">
.redElements {
color: red;
}
</style>
</head>
<body>
<h1>Graduation</h1>
<p>Graduation is the culmination of four (or more years of hard work).</p>
<h2>Graduation Traditions</h2>
<p>Stanford Graduation has it's own amazing traditions.</p>
<h3>The Wacky Talk</h3>
<p>Stanford Seniors act and dress wacky as they enter the stadium.</p>
<h3 id="speakerHeading">Speakers</h3>
<p>Stanford graduation speakers always have Stanford ties.</p>
<div>
<input type="button" value="Red Headings" id="theRedButton" />
<input type="button" value="Fade Out Speaker" id="theSpeakersButton" />
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#theRedButton").on("click", changeStuff);
});
function changeStuff() {
$("h1, h2, h3").addClass("redElements");
}
</script>
</body>
And here's a working pen showing it in action: http://codepen.io/Ghazgkull/pen/rVRRbK
Your code has syntax errors.
Change it to
function changeStuff() {
$("h1,h2,h3").addClass("redElements");
}
$("#theRedButton").bind("click", changeStuff);
https://jsfiddle.net/2oj1s9mg/
Also
<script>
"jquery-2.1.4.js"
</script>
Should be
<script src="jquery-2.1.4.js"></script>
Try like this
$("h1,h2,h3").addClass("redElements");
There is no element name h
For id jquery use # .
Without # jquery treated provided selector as element
Add like this
$("#theRedButton").bind("click",changeStuff);
$("#theRedButton").bind("click",changeStuff);
added a # for select by id
and the $('h') should be $('h1,h2,h3,h4,h5');//or whatever you want to get that class on the page
Also I can see the jquery I hope you tried to demo a pseudo code else you have to include jQuery

What is the Dojo Equivalent to Button Click

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>

TextBox Get clear when div show/hide using jquery

I am working on a project in which I have two DIVs (DIV1, DIV2), both have no. of text boxes which are creating dynamically.
I have to hide one of the DIV. On another DIV click event I am showing these DIVs accordingly and enter some text in those textboxes of DIV1. When I hide this div1 and show the DIV2 and enter some text in some textboxes of the DIV2 and hide it. When I show the DIV1 the textboxes are empty. I want these textboxes to retain their values that I entered before I hide it. The same occurs with DIV2 as well.
All these operations are doing by jquery and I need help in jquery.
Can any body help me please.
Thanks in Advance.
You should be hiding your divs by using .css('display', 'none'), or by .toggle().
It seems you're deleting them, and then adding new ones to the DOM.
Can you show us your code?
Try code similar as below:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<style>
.container{
border:1px solid gray;
margin:10px;
}
p,input{margin:10px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#p1").click(function(){ $("#div2").toggle();});
$("#p2").click(function(){ $("#div1").toggle();});
});
</script>
</head>
<body>
<div class="container">
<p id="p1">Text in block2</p>
<div id="div1">
<input type="text" value="Some text in div 1" class="c1" />
<input type="text" value="Some text in div 1" class="c1" />
</div>
</div>
<div class="container">
<p id="p2">Text in block1</p>
<div id="div2">
<input type="text" value="Some text in div 2" class="c2" size="20"/>
<input type="text" value="" class="Some text in div 2" size="20"/>
</div>
</div>
</body>
</html>

How to do this box in Javascript?

I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!
Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}
a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});
$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});
If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.
THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown
It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});

Categories

Resources