Uisng jQuery,i can bind the check box dynamically but their are some problems i am facing not able to solve.
1.in fiddle,if you click Add a name button a popup will open and get the name.After pressing submit button the related data are dynamically bind in a table,but it should be bind in a table in 1st <tr>.Now it is binding below 2nd <tr> but i want it to be append in 1st <tr> below the sample line already given.
2.On page load,id=list should be hide,but if i add this line $("#list").hide(); to hide i am not getting the output.
jQuery:
<script>
$(document).ready(function ()
{
$("#btnShowModal").click(function ()
{
ShowDialog(true);
});
$("#btnClose").click(function ()
{
HideDialog();
});
$("#btnSubmit").click(function ()
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone();
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
});
});
function ShowDialog(modal)
{
$("#overlay").show();
$("#dialog").show();
if (modal)
{
$("#overlay").unbind("click");
}
else
{
$("#overlay").click(function ()
{
HideDialog();
});
}
}
function HideDialog()
{
$("#overlay").hide();
$("#dialog").hide();
}
</script>
css:
<style>
.dialog_display
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.dialog
{
display: none;
position: fixed;
width: 220px;
height: 130px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-size: 10pt;
}
.dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
#dynamic{display:none;}
</style>
html
<body>
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name of anyone involved</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Attila Hun</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
<tr>
<td><strong>Reported by</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td><button>Add from list</button></td>
</tr>
</table>
<div id="overlay" class="dialog_display"></div>
<div id="dialog" class="dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="dialog_title">Type a name</td>
<td class="dialog_title align_right">
Close
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b> </b>
</td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="text" value="" />
</div>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
</body>
You can see my code from this fiddle sample code
Please guide me to solve this.
You have to remove the id from the cloned tr's and unhide them when you add a new one, that's why you don't get any output if you hide #list
$("#btnSubmit").click(function (e)
{
var brand = $("#brand1").val();
var $newrow=$('#list').clone().show().removeAttr("id");
$newrow.find("td:eq(0)").text(brand);
$("#rounded_border").append($newrow);
HideDialog();
e.preventDefault();
});
Related
First of all I would like you to know that before I make a post here I read a lot about this subject but still can't apply the idea so this post is after long time of searching...
This is HTML Code
<!DOCTYPE html>
<html>
<head>
<title>test₺</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid" style="margin: 0; padding: 0;">
<nav style="height: 30px; width: 100%; background-color: dodgerblue"></nav>
</div>
<div class="container">
<div class="row">
<div class="menu col-sm-6">
<div class="mealType burger">
<div class="categoryTitle">Burger</div>
<div class="categoryContent" id="burger">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Burger</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Burger</td>
<td>15<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Barbeque</td>
<td>12<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType seaFood">
<div class="categoryTitle">Sea Food</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fish Sliece</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Fillet Fish</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td class="add">0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Hamour Fish</td>
<td>40<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
<div class="mealType steak">
<div class="categoryTitle">Steak</div>
<div class="categoryContent" id="seaFood">
<table>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Chicken Steak</td>
<td>18<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
<tr>
<td><img src="images/meal.png" alt=""></td>
<td>Beef Steak</td>
<td>25<span>₺</span></td>
<td class="add">+</td>
<td>-</td>
<td>0<span>x</span></td>
<td>0<span>₺</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="myCart col-sm-6">
<div class="myCartContaier">
<div class="myCartTitle">My Cart</div>
<div class="myCartDetails">
<table></table>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Javascript jQuery Code
'use strict';
// Start Remove the ability to select //
$(".mealType, .categoryTitle, .categoryContent, .table").attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);
// End Remove the ability to select //
$(function(){
$('.categoryTitle').on('click', function(){
var $this = $(this);
$this.next('div').slideToggle(200);
});
$('.add').on('click', function(){
var $this = $(this),
$elementToClone = $this.parent(),
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
if ($myCartDetails.children().hasClass('addCloned')) {
$($myCartDetails.children()).removeClass('addCLoned').detach();
} else {
$elementToClone.clone(true,true).appendTo($myCartDetails).addClass('addCloned');
}
});
});
CSS code if needed
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.menu {
background-color: white;
width: 200px;
}
.mealType {
background-color: red;
width: 400px;
margin: 0 auto;
box-shadow: 1px 1px 10px silver;
}
.menu, .myCart {
margin-top:0rem;
padding: 10px;
}
.categoryTitle {
background-color: dodgerblue;
width: 400px;
margin: 0 auto;
margin-top: 20px;
padding: 5px;
color: white;
font-weight: bold;
font-family: Calibri, sans-serif, Tahoma, Arial;
font-size: 18px;
text-shadow: 1px 1px 2px black;
cursor: pointer;
}
.categoryContent {
display: none;
}
.categoryTitle, .myCartTitle {
text-align: center;
}
table {
margin: 0 auto;
width: 400px;
}
table tr {
border-bottom: 1px solid silver;
}
table tr:nth-child(even) {
background-color: white;
}
table tr:nth-child(odd) {
background-color: #EEE;
}
table td {
padding: 5px 10px;
text-align: center;
color: black;
font-family: Calibri, sans-serif, Tahoma, Arial;
}
td img {
width: 30px;
}
table tr td:nth-of-type(4),table tr td:nth-of-type(5) {
cursor: pointer;
}
the idea is Add to cart by javascript I tried the clone with the argument (true,true) but still I am not able to apply the idea that I want I tried a lot of things but I am really unable to apply the idea that I want so I posted in stackoverflow hopefully there's a hero will guide me to the right way to apply like this idea and I really appreciate his effort I am waiting for you guys thanks a lot.
Click To See Simple Image Of The Idea
$myCartDetails = $this.parent().parent().parent().parent().parent().parent().next().children().children().next().children();
You really need to go back and learn the fundamental concepts of javascript, html, and css before you even try to make a cart.
Here is my style.css(From jssfiddle)
#comments {
background: #fff
}
iframe {
width: 100%;
height: 1200px;
border: 0;
}
#comment-wrap {
background: #fff;
position: relative
}
#comments #comment-wrap {
display: none;
z-index: 5;
padding: 10px
}
#comments:hover #comment-wrap {
display: block
}
Here is my jquery.js(from jsfiddle)
hover = function() {
if (!document.body.currentStyle) return;
var DIVcomments = document.getElementById('comments');
var DIVcomment_wrap = document.getElementById('comment-wrap');
DIVcomments.onmouseover = function() {
DIVcomment_wrap.style.display = 'block';
}
DIVcomments.onmouseout = function() {
DIVcomment_wrap.style.display = 'none';
}
}
window.onload = hover;
Here is the html that is made from a text file. The last column width is 1280px even though I asked it to be only for the iframe. When I hover on the wikipedia text, the display is within the columns making it very annoying and unable to hover on to the next record. I did search online and on stack overflow but couldn't find a valid settings for my td tag. Any pointers are appreciated to take the display outside the columns?
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
<html>
<style type=text/css>
table, th, td {
border: 1px solid black;
}
</style>
<body>
<table>
<th>HEADING1</th>
<th>HEADING2</th>
<th>HEADING3</th>
<th>HEADING4</th>
<tr>
<td>sam</td>
<td> newyork</td>
<td> 1345B</td>
<td style="width: 1280px"> <div id="comments"> Wikipedia <div id="comment-wrap"> <iframe src="http://wikipedia.com" width="1280" height="720"></iframe> </div> </div></td>
</tr>
<tr>
<td>msnam</td>
<td> newsdfyork</td>
<td> 1345B</td>
<td> 783473</td>
</tr>
<tr>
<td>sadfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7sdf83473</td>
</tr>
<tr>
<td>sam</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 783sdf473</td>
</tr>
<tr>
<td>sasdfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7834sdf73</td>
</tr>
</table>
</body>
</html>
maybe you want "flying" iframe
var DIVcomments = document.getElementById('comments');
var DIVcomment_wrap = document.getElementById('comment-wrap');
DIVcomments.addEventListener('mouseover', function() {
var pos = DIVcomments.getBoundingClientRect();
DIVcomment_wrap.style.top = pos.top + "px";
DIVcomment_wrap.style.left = (pos.left + 70) + "px";
DIVcomment_wrap.getElementsByTagName('iframe')[0].style.width = (document.body.offsetWidth - pos.left - 90) + "px";
DIVcomment_wrap.style.display = 'block';
});
DIVcomments.addEventListener('mouseout', function() {
DIVcomment_wrap.style.display = 'none';
});
#comments {
background: #fff
}
iframe {
width: 100%;
height: 1200px;
border: 0;
}
#comment-wrap {
background: #fff;
position: relative
}
#comments #comment-wrap {
display: none;
z-index: 5;
padding: 10px;
position: absolute;
}
#comments:hover #comment-wrap {
display: block
}
table,
th,
td {
border: 1px solid black;
}
iframe {
border: 1px solid #ccc;
}
<table>
<th>HEADING1</th>
<th>HEADING2</th>
<th>HEADING3</th>
<th>HEADING4</th>
<tr>
<td>sam</td>
<td> newyork</td>
<td> 1345B</td>
<td style="width: 1280px">
<div id="comments"> Wikipedia
<div id="comment-wrap">
<iframe src="https://www.wikipedia.org/" width="1280" height="720"></iframe>
</div>
</div>
</td>
</tr>
<tr>
<td>msnam</td>
<td> newsdfyork</td>
<td> 1345B</td>
<td> 783473</td>
</tr>
<tr>
<td>sadfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7sdf83473</td>
</tr>
<tr>
<td>sam</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 783sdf473</td>
</tr>
<tr>
<td>sasdfm</td>
<td> newysdfork</td>
<td> 1345B</td>
<td> 7834sdf73</td>
</tr>
</table>
I am trying to call a JS event, depending on a button press, (there are three buttons) i want some CSS to change the font-size (differently for each button), but what i have does not work. can anyone help?
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="7Global.css"/>
<title> CSGO </title>
<script>
function textSizeS(){
document.getElementById("Maintbl").style.font-size = "3px";
}
function textSizeM(){
document.getElementById("Maintbl").style.font-size = "26px";
}
function textSizeL(){
document.getElementById("Maintbl").style.font-size = "45px";
}
</script>
</head>
<body>
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<table id = "Maintbl" class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table id = "Maintbl" class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</body>
</html>
Like this, where I added a wrapper div to set the font size to, corrected the syntax error from ...style.font-size to ...style.fontSize and removed that duplicated id's (as they should be unique).
function textSizeS(){
document.getElementById("MaintblWrapper").style.fontSize = "3px";
}
function textSizeM(){
document.getElementById("MaintblWrapper").style.fontSize = "26px";
}
function textSizeL(){
document.getElementById("MaintblWrapper").style.fontSize = "45px";
}
body {
background-image: url("back2.jpg");
background-size: 100% 100%;
}
.buttonSize1{
font-size: 3px;
}
.buttonsize2{
font-size: 26px;
}
.buttonsize3{
font-size: 45px;
}
.fixed {
position: fixed;
Top: 100px;
Left: 0px;
width: 150px;
border: #0E6B5B 3px solid;
background-color: #FF9933;
}
p {
padding-left: 100px;
}
td {
padding-top: 10px;
padding-bottom: 50px;
text-align: center;
font-family: "Lucida Console", Monaco, monospace;
}
.opac {
opacity: 0.5;
filter: alpha(opacity=10); /* For IE8 and earlier */
}
.opac:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.MainTable{
border: #0E6B5B 3px solid;
background-color: #FF9933;
width: 50%;
padding-top: 10px;
padding-left: 100px;
padding-right: 100px;
}
table.center {
width:70%;
margin-left:15%;
margin-right:15%;
}
<table class = "fixed opac">
<tr>
<td>Home </td>
</tr>
<tr>
<td>Maps </td>
</tr>
<tr>
<td>Counter <br/> Terrorists </td>
</tr>
<tr>
<td>Terrorists </td>
</tr>
<tr>
<td>About </td>
</tr>
<tr>
<td><button class="buttonsize1" onclick="textSizeS()">A</button> <button class= "buttonsize2" onclick="textSizeM()">A</button> <button class= "buttonsize3" onclick="textSizeL()">A</button></td>
</tr>
</table>
<br/>
<br/>
<br/>
<div id = "MaintblWrapper">
<table class = "MainTable center">
<td> CS:GO’s Next Major </td>
<tr>
<td>
Europe Region – Hosted by DreamHack
</td>
</tr>
</table>
<table class = "MainTable center">
<td> Operation Wildfi </td>
<tr>
<td>
What’s new? Visit the page below for details!
</td>
</tr>
</table>
<table class = "MainTable center">
<td> We made some adjustments to rifles recently... </td>
<tr>
<td>
nCS:GO. M
</td>
</tr>
</table>
</div>
fontSize not font-size
Demo https://jsfiddle.net/eLrdeagq/
function textSizeS(){
document.getElementById("Maintbl").style.fontSize = "3px";
}
Thanks to help from members oka and Mike Robinson, I have managed to build two tables that users will view and play with using tabs and dropdowns.
My two tables have identical structures, each has an identical drop-down menu to show/hide columns. The idea is for the user to select a "choice" from the drop down, then tab over to the other table and compare choices.
Everything works, EXCEPT -- when you tab over to the other table, the correct column -- '.target' -- is shown (and the correct columns -- '.choice' -- are hidden) but the drop down resets to its default. So the drop down displays one choice; the shown columns display another, which will confuse viewers.
The code "remembers" which choices were hidden and which target was shown, but the drop down doesn't.
I'm a bit stumped. Any ideas what's going on?
Here are the jquery, css, html, and snippet:
function keepSelect() {
var val = $(this).val();
var target = '.' + val;
$('.choice').hide();
$(target).show();
}
$(document).ready(function() {
$('.sel').on('change', keepSelect).change();
$(document).on('change', '.sel', keepSelect).change();
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#' + tab_id).addClass('current');
})
})
body {
margin-top: 1px;
font-family: 'Trebuchet MS', serif;
line-height: 1.6
}
.container {
position: absolute;
width: 25%;
margin: 0 auto;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border: 3px solid red;
width: 25%;
font-family: Verdana;
font-size: 8pt;
text-align: center;
font-weight: normal;
}
ul.tabs li.current {
background: #ededed;
color: #222;
font-family: Verdana;
font-size: 10pt;
text-align: center;
font-weight: bold;
}
.tab-content {
display: none;
background: none;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
<div class='container'>
<ul class='tabs'>
<li class='tab-link current' data-tab='tab-1'>ViewA</li>
<li class='tab-link' data-tab='tab-2'>ViewB</li>
</ul>
<div id='tab-1' class='tab-content current'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>5000</td>
<td class="choice one">100</td>
<td class="choice two">200</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">40</td>
<td class="choice two">90</td>
</tr>
</table>
</div>
<div id='tab-2' class='tab-content'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>55.56</td>
<td class="choice one">2.9</td>
<td class="choice two">9.87</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">4.05</td>
<td class="choice two">8.77</td>
</tr>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Try this:
$(document).ready(function () {
$('.choice').hide();
$('.one').show();
$('.sel').change(function(){
$('.choice').hide();
$( '.' + this.value).show();
$('.sel').val( this.value );
});
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#' + tab_id).addClass('current');
});
});
jsFiddle Demo
$(document).ready(function () {
$('.sel').change(function(){
$('.choice').hide();
$( '.'+this.value).show();
$('.sel').val( this.value );
});
$('ul.tabs li').click(function () {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$('#' + tab_id).addClass('current');
});
});
body {
margin-top: 1px;
font-family:'Trebuchet MS', serif;
line-height: 1.6
}
.container {
position: absolute;
width: 25%;
margin: 0 auto;
}
ul.tabs {
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li {
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
border: 3px solid red;
width: 25%;
font-family: Verdana;
font-size: 8pt;
text-align: center;
font-weight: normal;
}
ul.tabs li.current {
background: #ededed;
color: #222;
font-family: Verdana;
font-size: 10pt;
text-align: center;
font-weight: bold;
}
.tab-content {
display: none;
background: none;
padding: 15px;
}
.tab-content.current {
display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='container'>
<ul class='tabs'>
<li class='tab-link current' data-tab='tab-1'>ViewA</li>
<li class='tab-link' data-tab='tab-2'>ViewB</li>
</ul>
<div id='tab-1' class='tab-content current'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>5000</td>
<td class="choice one">100</td>
<td class="choice two">200</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">40</td>
<td class="choice two">90</td>
</tr>
</table>
</div>
<div id='tab-2' class='tab-content'>
<select class="sel">
<option class="one" value="one">1</option>
<option class="two" value="two">2</option>
</select>
<table>
<tr>
<th>Module</th>
<th>Units</th>
<th class="choice one">Choice One</th>
<th class="choice two">Choice Two</th>
</tr>
<tr>
<td>type1</td>
<td>55.56</td>
<td class="choice one">2.9</td>
<td class="choice two">9.87</td>
</tr>
<tr>
<td>type2</td>
<td>350</td>
<td class="choice one">4.05</td>
<td class="choice two">8.77</td>
</tr>
</table>
</div>
</div>
I am trying to get a popup window which should be controlled by a jQuery function that will show/hide on the button click. My button is an asp.net control but I can't figure out how to "call" the jQuery function when the button is clicked
I have tried to add a function name to my asp.net control's onClientClick that should at least just show the popup div but that is not working. I am new to using jQuery and I believe I have everything set up correctly but I am not positive. I am also not certain whether or not I am trying to "call" the jquery function correctly.
Here is the jQuery code..
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(documnet).ready(function () {
$("#AddToCartBtn").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
$("#AddToCartBtn").click(function (e) {
ShowDialog(true);
e.preventDefault();
});
$("#btnClose").click(function (e) {
HideDialog();
e.preventDefault();
});
$("#btnSubmit").click(function (e) {
var brand = $("#brands input:radio:checked").val();
$("#output").html("<b>Your favorite mobile brand: </b>" + brand);
HideDialog();
e.preventDefault();
});
});
function ShowDialog() {
$("#overlay").show();
$("#dialog").fadeIn(300);
if (modal) {
$("#overlay").unbind("click");
}
else {
$("#overlay").click(function (e) {
HideDialog();
});
}
}
function HideDialog() {
$("#overlay").hide();
$("#dialog").fadeOut(300);
}
</script>
Heres the css..
.web_dialog_overlay
{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background: #000000;
opacity: .15;
filter: alpha(opacity=15);
-moz-opacity: .15;
z-index: 101;
display: none;
}
.web_dialog
{
display: none;
position: fixed;
width: 380px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -190px;
margin-top: -100px;
background-color: #ffffff;
border: 2px solid #336699;
padding: 0px;
z-index: 102;
font-family: Verdana;
font-size: 10pt;
}
.web_dialog_title
{
border-bottom: solid 2px #336699;
background-color: #336699;
padding: 4px;
color: White;
font-weight:bold;
}
.web_dialog_title a
{
color: White;
text-decoration: none;
}
.align_right
{
text-align: right;
}
and lastly the asp button control and the <div>'s
<asp:ImageButton ID="AddToCartBtn" runat="server" RowIndex='<%# Container.DisplayIndex %>'
ImageUrl="~/Pictures/ShoppingCart.png" onClientClick="ShowDialog()"
/>
<div id="output"></div>
<div id="overlay" runat="server" class="web_dialog_overlay"></div>
<div id="dialog" class="web_dialog">
<table style="width: 100%; border: 0px;" cellpadding="3" cellspacing="0">
<tr>
<td class="web_dialog_title">Online Survey</td>
<td class="web_dialog_title align_right">
Close
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<b>Choose your favorite mobile brand? </b>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="padding-left: 15px;">
<div id="brands">
<input id="brand1" name="brand" type="radio" checked="checked" value="Nokia" /> Nokia
<input id="brand2" name="brand" type="radio" value="Sony" /> Sony
<input id="brand3" name="brand" type="radio" value="Motorola" /> Motorola
</div>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="btnSubmit" type="button" value="Submit" />
</td>
</tr>
</table>
</div>
So recap, I am having trouble calling my jQuery function when my asp.net button is clicked. I don't think the function is ever getting called at all because when i set breakpoints at the function it never jumps to them when testing. Any help would be greatly appreciated
ASP.NET Buttons have a dynamic generated ID, depending on its parent controls. So your Button ID isn't #AddToCardBtn. Check the generated HTML for that. As a workaround you can call out the generated ID by: <%=AddToCardBtn.ClientID%> into your jquery code to get the generated client ID of your button.
Example:
$("#<%=AddToCardBtn.ClientID%>").click(function (e) {
ShowDialog(false);
e.preventDefault();
});
Thats the cause why your window isn't showed. The function isn't bound to your button.