jquery. Multiple effects on single page - javascript

So far I have learned that all effects and animations are queued. But what about when you have multiple effects and some are queue and others are not.
I am trying to get the two #sample effects are simultaneous which all work.
But I want the ui-effects-transfer to work as well but only after the other animations ran. I have tried in the way shown in the code. I have tried without a queue and I have tried simply effect("shake", "slow").
The problem is: The shake effect does not actually work, however I code it. Never shows up. It only works when I queue:false
The ui-effects-transfer (shake) animation just never happens.
$("#sample").effect("highlight", {duration: 6000, queue: false});
$("#sample").effect("transfer", {to: $("#{{ $stimuli['sample'][0] }}")}, 7000, function () {
$('#{{ $stimuli['sample'][0] }}').append('<div class="ui-effects-transfer"></div>');
});
$(".ui-effects-transfer").effect("shake", {queue: true}, "slow");
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="content-outer">
<div class="row add-bottom">
<div class="twelve columns" style=" text-align:center;">
<table style="width: 100%;">
<tbody style="border: 10px solid; ">
<tr>
<td id="{{$stimuli['comparison'][0]}}"> <a href='response/{{ $stimuli['comparison'][0]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][0]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][1]}}"> <a href='response/{{ $stimuli['comparison'][1]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][1]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][2]}}"><a href='response/{{ $stimuli['comparison'][2]}}'> <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][2]) }}.jpg' /></a></td>
</tr>
<tr>
<td> </td>
<td id="sample" style="padding: 10px; border: 15px solid #000;">
<img class='trial' src='{{ url('taskAssets/'.$stimuli['sample'][0]) }}.jpg'/></td>
<td> </td>
</tr>
<tr>
<td id="{{$stimuli['comparison'][3]}}"><a href='response/{{ $stimuli['comparison'][3]}}'> <img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][3]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][4]}}"> <a href='response/{{ $stimuli['comparison'][4]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][4]) }}.jpg' /></a></td>
<td id="{{$stimuli['comparison'][5]}}"> <a href='response/{{ $stimuli['comparison'][5]}}'><img class='trial' src='{{ url('taskAssets/'.$stimuli['comparison'][5]) }}.jpg' /></a></td>
</tr>
</tbody>
</table>
</div> <!-- Row End-->
</div>
</div>
<script>
CSS
trial
{
height: 175px;
width:200px;
object-fit: contain;
}
.ui-effects-transfer {
background:url("http://images.clipartpanda.com/finger-clipart-pointing-finger-md.png") no-repeat;
opacity: .8;
z-index: 10;
margin-top: 70px;
background-position: 50% 50%;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left:0;
background-size: 60px auto;
}
table td
{
position: relative;
}
Outputted HTML WHen the nonworking effect is excluded (so we see working append).
<!DOCTYPE html>
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<head>
<!--- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="http://localhost:8888/pp/public/assets/css/default.css">
<link rel="stylesheet" href="http://localhost:8888/pp/public/assets/css/layout.css">
<link rel="stylesheet" href="http://localhost:8888/pp/public/public/assets/css/media-queries.css">
<!-- Script
================================================== -->
<script src="js/modernizr.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="favicon.ico" >
</head>
<div class="content-outer">
<div class="row add-bottom">
<div class="twelve columns" style=" text-align:center;">
<table style="width: 100%;">
<tbody style="border: 10px solid; ">
<tr>
<td id="mouse"> <a href='response/mouse'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/mouse.jpg' /></a></td>
<td id="cow"> <a href='response/cow'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/cow.jpg' /></a></td>
<td id="dog"><a href='response/dog'> <img class='trial' src='http://localhost:8888/pp/public/taskAssets/dog.jpg' /></a></td>
</tr>
<tr>
<td> </td>
<td id="sample" style="padding: 10px; border: 15px solid #000;">
<img class='trial' src='http://localhost:8888/pp/public/taskAssets/mouse.jpg'/></td>
<td> </td>
</tr>
<tr>
<td id="car"><a href='response/car'> <img class='trial' src='http://localhost:8888/pp/public/taskAssets/car.jpg' /></a></td>
<td id="cat"> <a href='response/cat'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/cat.jpg' /></a></td>
<td id="house"> <a href='response/house'><img class='trial' src='http://localhost:8888/pp/public/taskAssets/house.jpg' /></a></td>
</tr>
</tbody>
</table>
</div> <!-- Row End-->
</div>
</div>
<script>
$("#sample").effect("highlight", {duration: 6000, queue: false});
$("#sample").effect("transfer", {to: $("#mouse")}, 7000, function () {
$('#mouse').append('<div class="ui-effects-transfer"></div>');
});
$('#sample').effect("highlight",{ queue: true }, 6000});
</script>
<!--
<script>
var x = #mouse;
setInterval(function() {
$("#sample").effect("transfer", {to: $(x)}, 9000);
}, 1000);
</script>-->
<!-- footer
================================================== -->
<footer>
<div class="row">
<div class="twelve columns">
<ul class="footer-social">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
<ul class="copyright">
<li>Copyright © 2015 JP Foster</li>
<li>Design by Sparrow.</li>
</ul>
</div>
<div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
</div>
</footer> <!-- Footer End-->
<!-- Java Script
================================================== -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/doubletaptogo.js"></script>
<script src="js/init.js"></script>
</body>
</html>

Related

Dynamic image slider solution

<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<!-- required css -->
<link rel="stylesheet" type="text/css" href="http://localhost/blog/public/css/jquery.bxslider.css">
<style type="text/css">
.sliderContainer {
width: 320px;
margin: 0 auto;
}
</style>
</head>
<body>
<div style="float:right;">
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>1st Advertisement</h2>
<tr>
<td>
<a id="adv" href="http://www.w3.org"><img name="noslide" id="noslide" alt="my images" height="240"
width="320"
src="http://2.bp.blogspot.com/-M5lNkr0H3Bk/VJfppu-wPxI/AAAAAAAARhs/FSZY0iVdCF4/s1600/Hand%2BPainting%2Bhd%2Bimagess%2B(3).jpg"/></a>
</td>
</tr>
<tr>
<td align="center" style="font:small-caps bold 15px georgia; color:blue;">
<div id="fixeddiv">1st Advertisement</div>
</td>
</tr>
</table>
{{$count=count($slides)}}
<table style="border:3px solid #00008B;background-color:#90EE90;">
<h2>2nd Advertisement</h2>
<div class="sliderContainer">
<ul class="bxslider">
#foreach($slides as $key=>$val)
<li><a>{{$val->id}}</a><img src="http://localhost/blog/public/images/{{$val->image_name}}"/></li>
#endforeach
</ul>
</div>
</table>
</div>
<!-- required js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.bxslider').bxSlider({
// see documentation for more options
'auto': true
});
});
</script>
</body>
</html>
public function index()
{
$slides = DB::table('sliders')->get();
return view('home')->with('slides',$slides);
}
There are four images saved in my db. This is showing the images in a slider, but I want to make it dynamic. I will tell that image 1 will be shown 4 times and image 2 will be 2 times both randomly not serially. How can I do it?

Let's assume your HTML looks like this:
<ul id="container">
<li class="slide">Slide 1</li>
<li class="slide">Slide 2</li>
<li class="slide">Slide 3</li>
</ul>
Then you could try the following:
$('.bxslider').bxSlider({
'auto': true,
onSlideBefore: function($slideElement, oldIndex, newIndex) {
// updated newIndex here with your logic
}
});

iFrame Issue with showing content in desired iFrame size

Within my webpage I am having issues with a iFrames. The iFrame is being used to cycle through different Webpages.
The issue I am experiencing is that it appears as only a thin bar (see picture)? Can someone help me on how I fit the cycling websites within a defined diameter? I have research around this topic as I am already working with some code found in iFrames.
iFrame_Issue
Thanks in advance! -Adam
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Tab Title In Window-->
<title>GKN BI/IT PVD Notice Board</title>
<!-- CSS Style-->
<style type="text/css">
body { margin:0;padding:0;font-family: Sans-Serif;line-height: 1.5em;}
header {background: #FFFFFF;height: 100px;}
header h1 {margin: 0;padding-top: 15px;}
main {padding-bottom: 10010px;margin-bottom: -10000px;float: left;width: 100%;}
nav {padding-bottom: 10010px; margin-bottom: -10000px;float: left;width: 230px; margin-left: -230px;background: #FFFFFF;}
footer{ clear: left;width: 100%;background: #FACC2E;text-align: center;padding: 0px 0;}
#wrapper {overflow: hidden;}
<!--Same as 'nav' width -->
#content {margin-right: 230px; }
<!-- Padding for content -->
.innertube {margin: 15px;margin-top: 0; height: 200%; width: 200%;}
p {color: #555;}
nav ul {list-style-type: none;margin: 0;padding: 0;}
nav ul a {color: #336699;text-decoration: none;}
</style>
</head>
<!--Web banner-->
<header>
<center-left>
<table width="875" align="left" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Images/bi_it_banner.png">
</td>
</tr>
<!--Web banner 2-->
<tr>
<td>
<img src="Images/background.jpg">
</td>
</tr>
</table>
</header>
<body>
<div id="wrapper">
<main>
<!--Title and iFrame Cycle-->
<div id="content">
<div class="innertube">
<h1>Current Projects</h1>
<br>
<br>
<!--iFrame-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
var sites = [
"http://ourspace.gkn/drivelive/",
"http://ishare.driveline.gkn.com/SitePages/Home.aspx",
"https://idash.driveline.gkn.com/josso/signon/login.do?josso_back_to=http://idash.driveline.gkn.com/applicationOverview/josso_security_check&josso_partnerapp_id=applicationOverview"
];
var currentSite = sites.length;
$(document).ready(function () {
var $iframe = $("iframe").attr("src","http://www.google.com");
setInterval(function() {
(currentSite == 0) ? currentSite = sites.length - 1 : currentSite = currentSite -1;
$iframe.attr("src",sites[currentSite]);
}, 7000);
});
</script>
<style type="text/css" media="screen">
iframe {
height: 200%;
width: 100%;
border: none;
}
</style>
<br>
<iframe></iframe>
<br>
</div>
</div>
</main>
<!-- Code for Navigation Bar and Time&Date -->
<nav>
<div class="innertube">
<!--Time/Date Function-->
<center>
<table width="200" align="left" cellpadding="0" cellspacing="0">
<script type="text/javascript">
<!--Date-->
var tmonth=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
function GetClock(){
var d=new Date();
var nmonth=d.getMonth(),ndate=d.getDate(),nyear=d.getYear();
if(nyear<1000) nyear+=1900;
<!--Time-->
var nhour=d.getHours(),nmin=d.getMinutes(),nsec=d.getSeconds();
if(nmin<=9) nmin="0"+nmin
if(nsec<=9) nsec="0"+nsec;
document.getElementById('clockbox').innerHTML=""+tmonth[nmonth]+" "+ndate+", "+nyear+" "+nhour+":"+nmin+":"+nsec+"";
}
<!--Load into webpage and carry out function above-->
window.onload=function(){
GetClock();
setInterval(GetClock,1000);
}
</script>
<div id="clockbox"></div>
<h3>GKN Sites</h3>
<ul>
<li><a target="_blank" href="http://ourspace.gkn/drivelive/">Drivelive</a></li>
<li><a target="_blank" href="http://ishare.driveline.gkn.com/IT/SitePages/Home.aspx">BI/IT iShare</a></li>
<li><a target="_blank" href="">Others?</a></li>
</ul>
<h3>Suggested Reading</h3>
<ul>
<li><a target="_blank" href="#">Link 1</a></li>
<li><a target="_blank" href="#">Link 2</a></li>
<li><a target="_blank" href="#">Link 3</a></li>
<li><a target="_blank" href="#">Link 4</a></li>
<li><a target="_blank" href="#">Link 5</a></li>
</ul>
<h3>External News</h3>
<ul>
<li><a target="_blank" href="http://www.bbc.co.uk/news">BBC News</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/travel">BBC Travel</a></li>
<li><a target="_blank" href="http://www.bbc.co.uk/weather/">BBC Weather</a></li>
</ul>
</div>
</nav>
</div>
</table>
<!-- End of code for Navigation Bar -->
<footer>
<div class="innertube">
<marquee><img src="Images/GKN.svg.png" height="25" width="60"> Hopefully feed text from text file here</marquee>
</div>
</footer>
</body>
</html>

Trying to get the links when clicked to show the data in the divs?

I am not sure why this is not working. When I click the links the data suppose to show up in the divs, but for some reason nothing is showing up. Anyone have any suggestion on why that is? I am not sure if my script is setup right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>test</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/custom.css" rel="stylesheet">
<script>
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
</script>
</head>
<body>
<nav>
Received
<a href="#" target="_top" data-id="one">
<?php
//conects to the database
require_once("../db_connect.php");
$stmt = $db->prepare ("SELECT COUNT(*) AS rows_cnt FROM receivingrequests WHERE status='Received'");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['rows_cnt'];
}
?></a>
<br>
Info Div #2<br> Info Div #3
<br>
Info Div #4
</nav>
<div id="one" class="toggle_content">
<?php
//conects to the database
require_once("../db_connect.php");
//prepared statement with PDO to query the database
$stmt = $db->prepare("SELECT * FROM receivingrequests WHERE Status='RECEIVED'");
$stmt->execute();
?>
<?php //start of the while loop ?>
<?php while( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) { ?>
<table border="1" style="border: thin #000000; table-layout: fixed; width: 100%; background-color: #FFFFFF; display: table;" class="style1">
<tr>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Request#</strong></th>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Status</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Comments</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Date Requested</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Name</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Department</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>VasLblDate</strong></th>
</tr>
<tr>
<?php $id = $row['RequestNumber'];?>
<?php echo "<td> <a href='../update.php?id=$id'>$id</a></td>"?>
<td class="style2" style="width: 62px"><strong><?php echo $row['Status']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Comments']; ?></strong></td>
<td class="style2"><strong><?php echo $row['DATEREQUESTED']; ?></strong></td>
<td class="style2"><strong><?php echo $row['EmpName']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Department']; ?></strong></td>
<td class="style2"><strong><?php echo $row['VasLbDate']; ?></strong></td>
</tr>
</table>
<?php } //end of the while loop?>
</div>
<div id="two" class="toggle_content">Lorem ipsum... Two</div>
<div id="three" class="toggle_content">Lorem ipsum... Three</div>
<div id="four" class="toggle_content">Lorem ipsum... Four</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../javascript/jquery.js"></script>
<script src="../javascript/bootstrap.js"></script>
</body>
</html>

I was using the wrong Jquery. I also needed to put the Jquery script at the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>test</title>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body background="../images/background.jpg">
<nav>
Received
<a href="#" target="_top" data-id="one">
<?php
//conects to the database
require_once("../db_connect.php");
$stmt = $db->prepare ("SELECT COUNT(*) AS rows_cnt FROM receivingrequests WHERE status='Received'");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['rows_cnt'];
}
?></a>
<br>
Info Div #2<br> Info Div #3
<br>
Info Div #4
</nav>
<div id="one" class="toggle_content">
<?php
//conects to the database
require_once("../db_connect.php");
//prepared statement with PDO to query the database
$stmt = $db->prepare("SELECT * FROM receivingrequests WHERE Status='RECEIVED'");
$stmt->execute();
?>
<?php //start of the while loop ?>
<?php while( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) { ?>
<table border="1" style="border: thin #000000; table-layout: fixed; width: 100%; background-color: #FFFFFF; display: table;" class="style1">
<tr>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Request#</strong></th>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Status</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Comments</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Date Requested</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Name</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Department</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>VasLblDate</strong></th>
</tr>
<tr>
<?php $id = $row['RequestNumber'];?>
<?php echo "<td> <a href='../update.php?id=$id'>$id</a></td>"?>
<td class="style2" style="width: 62px"><strong><?php echo $row['Status']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Comments']; ?></strong></td>
<td class="style2"><strong><?php echo $row['DATEREQUESTED']; ?></strong></td>
<td class="style2"><strong><?php echo $row['EmpName']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Department']; ?></strong></td>
<td class="style2"><strong><?php echo $row['VasLbDate']; ?></strong></td>
</tr>
</table>
<?php } //end of the while loop?>
</div>
<div id="two" class="toggle_content">Lorem ipsum... Two</div>
<div id="three" class="toggle_content">Lorem ipsum... Three</div>
<div id="four" class="toggle_content">Lorem ipsum... Four</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
</script>
</body>
</html>
</body>
</html>

Also, for running any code you want to run after the page has fully loaded, get into the habit of surrounding your code with this:
$( document ).ready(function() {
...
});
So for the your page, you'll want this:
<script>
$( document ).ready(function() {
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
});
</script>

As one of the other posters has mentioned, you need to add JQuery to your project.
First, create a folder called "jquery" inside your web-page's directory. Then download the latest JQuery js file and save it inside your the "jquery" directory.
The latest JQuery (accurate at the time of posting this comment) is here.
http://code.jquery.com/jquery-2.1.3.min.js
After that, add this code to where the other links are:
<link href="jquery/jquery-2.1.3.min.js" rel="stylesheet">
Then adjust your href as necessary depending on whether your web-page is in the root directory or one of the sub-directories for your site.

Tables-PopOvers Angularjs

This is my earlier question which is not answered..as I am still looking for help
https://stackoverflow.com/questions/27230092/how-to-implement-popover-for-table-rows
I am trying show details of the selected table row on Popup, with my approach i could see data on Popover only for the first row of table.
Below is my code snaps, please help me to sort this
HTML Code :
<!DOCTYPE html>
<html ng-app="AngFactory">
<head>
<meta charset="ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com//twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="js/angular-resource.js"></script>
<script src="js/jQuery.js"></script>
<script src="modal/ConfigModal.js"></script>
<script src="main.js"></script>
<script src="services.js"></script>
<script src="mainController.js"></script>
<link href="css/myStyle.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body ng-controller="mainController">
<table class="hoverTable">
<thead >
<tr>
<th>PO Number</th>
<th>Document Type</th>aq
<th>Company Code</th>
</tr>
</thead>
<tr ng-repeat="X in resultSet " >
<td id="pop-over-link" ng-click="getPO_IT(X)">
<a ><test-directive></test-directive>{{X.PONumber}}</a>
</td>
<td >
{{X.DocType}}
</td>
<td >
{{X.CCode}}
</td>
</tr>
</table>
aq
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
</body>
</html>
JS Code :
app.directive('testDirective', function($compile) {
return {
restrict: 'EAC',
templateUrl:'TemplateID.html',
link: function(scope, elements, attrs) {
$("#pop-over-link").popover({
'placement': 'right',
'trigger': 'click',
'html': true,
'container': 'body',
'content': function() {
return $compile($("#pop-over-content").html())(scope);
}
});
scope.testFunction = function() {
alert("it works");
console.log("maybe");
}
}
}
});
TemplateID.html
<body>
<div id='pop-over-content' style='display:none'>
<h3>Data goes here</h3>
{{X.PONumber}}
<ul>
<li ng-repeat="Y in results">
<ul>
<li ng-repeat=" Z in Y.NavItem.results">
<b>PO Number </b>: {{Z.PoNumber}}
<b>PO Item </b>: {{Z.PoItem}}
<b>Material</b> : {{Z.Material}}
</li>
</ul>
</li>
</ul>
<button class='btn btn-primary' ng-click='testFunction()'>Close</button>
</div>
</body>

How to make id of elements written by JSTL available for scripting?

I'm developing a web app using Twitter-Bootstrap editable and Java Servlet Backend.
Using JSTL to render table data, and hooking up editable data form is not working.
JS developer console, show undefined, so it's not recognizing element id's produced inside foreach in JSTL.
Tried to wrap editable JS call on document ready, does not work.
I guess the problem is how to make id of elements written by JSTL available for scripting.
<%--
Document : index
Created on : 20/Abr/2013, 23:52:35
Author : Arthur
--%>
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap CSS-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap DatePicker CSS-->
<link href="css/datepicker.css" rel="stylesheet" media="screen">
<!-- Bootstrap Editable CSS-->
<link href="css/bootstrap-editable.css" rel="stylesheet" media="screen">
<!-- JQUERY -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Bootstrap JS-->
<script src="js/bootstrap-2.0.2.js"></script>
<!-- Bootstrap DatePicker JS-->
<script src="js/bootstrap-datepicker.js"></script>
<!-- Bootstrap EdiTable JS-->
<script src="js/bootstrap-editable.js"></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.dropdown-toggle').dropdown();
});//]]>
</script>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
padding-bottom: 40px;
background-color: #f5f5f5;
}
</style>
<title>.:StaffGest:.</title>
</head>
<body>
<!-- <div class="navbar navbar-inverse navbar-fixed-top">-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">.:StaffGest:.</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="dropdown">
Funcionários<b class="caret"></b>
<ul class="dropdown-menu">
<li>Novo</li>
<li>Editar</li>
<li>Apagar</li>
<li class="divider"></li>
<li class="nav-header">Pesquisar</li>
<li>Pesquisar Funcionário</li>
<li>Listar Todos</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
<div class="container">
<h1>Lista Funcionários:</h1>
<table class="table">
<thead>
<tr>
<th>Nome</th>
<th>Apelido</th>
<th>Data Nascimento</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="employee">
<tr>
<td>${employee.firstName}</td>
<td><a href="#" id="lastName" name="lastName" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.lastName}</td>
<td><a href="#" id="dob" name="dob" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"><fmt:formatDate value="${employee.dob}" pattern="MM/dd/yyyy"/></td>
<td><a href="#" id="email" name="email" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome">${employee.email}</td> </tr>
</c:forEach>
</tbody>
</table>
</div> <!-- /container -->
<script>
$('#firstName').editable({
});
$('#lastName').editable({
});
$('#dob').editable({
});
$('#email').editable({
});
</script>
</body>
</html>

Here's your mistake:
<c:forEach ...>
<a id="firstName" ...>
<a id="lastName" ...>
<a id="dob" ...>
<a id="email" ...>
</c:forEach>
Multiple elements with same id is illegal in HTML. The behavior in HTML DOM and JS is unspecified.
Give them an unique ID based on e.g. iteration index or iterated item's ID or, better, if they need to behave the same in editable(), just the same class name:
<c:forEach ...>
<a class="editable" ...>
<a class="editable" ...>
<a class="editable" ...>
<a class="editable" ...>
</c:forEach>
This way you can keep your JS DRY:
<script>
$('.editable').editable({
});
</script>

Categories