I can't get the code below to work. I'm placing a player on the page and loading it with a video. This works as expected. Then I have a number of thumbnails of other videos I want to play when the user clicks on one of them (only two shown here). This part does not work. I get an error message on the console saying that ytplayer.loadvideobyID isn't a function. I'm testing this on Firefox 26.0.
<html>
<head>
</head>
<body>
<table width="900" align="center" border="0" cellpadding="0" cellspacing="1">
<tbody>
<tr>
<td>
<div id="ytplayer"></div>
<td>
</tr>
<tr>
<td>
<img src="http://img.youtube.com/vi/tCnEH8MRrjE/hqdefault.jpg" width="176" height="132">
</td>
</tr>
<tr>
<td>
<img src="http://img.youtube.com/vi/lqdFrGFo6SQ/hqdefault.jpg" width="176" height="132">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubeIframeAPIReady()
{
player = new YT.Player('ytplayer',
{
height: '390',
width: '640',
videoId: 'tCnEH8MRrjE',
});
}
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>
</body>
</html>
You're confusing the ID of the HTML element ("ytplayer") with the name of the Javascript variable (player). Change ytplayer.loadVideoById(...) to player.loadVideoById(...).
Alternatively, you can just use the same symbol (either player or ytplayer) for all of them...
Related
i am starting to learn to use angular's ui bootstrap library and trying to get a popover working. Am i missing something in my setup?
i've provided a plunker example. my requirement is to have a popover over cells in a table that gets refreshed by $interval every second.
http://plnkr.co/edit/hF3EDIRfKA1VOfSennZq?p=preview
<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>angular-test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.2/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript">
var app = angular.module("test", ['ngAnimate', 'ui.bootstrap']);
app.controller("testCtrl", function($scope, $interval) {
var stats = [{
"name": "john",
"stat1": 3,
"stat2": 5
}];
var count = 0;
$scope.getTestInfo = function() {
$scope.count = count++;
$scope.stats = stats;
}
$interval(function(){$scope.getTestInfo();}, 1000);
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4" ng-controller="testCtrl" ng-init="count=0">
<table id="table1" class="table table-hover table-condensed">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
</tr>
</thead>
<tbody class="bg-info">
<tr ng-repeat="stat in stats">
<td uib-popover="testcolumn1">{{stat.name}}</td>
<td uib-popover="{{stat.stat1}}">{{stat.stat1 + count}}</td>
<td uib-popover="testcolumn3">{{stat.stat2}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
You just need to add the metadata (popover-trigger etc.) for the popover modal. I forked your plunkr to demonstrate. http://plnkr.co/edit/d1eAf2NEAA9mCXmNN5LC?p=preview
I've set up a html where: when you click on a journal button, you open a jquery modal dialog box with more information and the journal. All well and good. But I want audio to play when the dialog box is opened.
So far I have 11 dialog boxes and 11 separate audios for each respective one, but when the audio is set to 'autoplay' all the audios on the page start playing as soon as the page is loaded at once.
How can I make it so that the audio for each respective journal button only starts playing when the dialog box opening button is clicked?
Here's my code for one of the dialog boxes:
<div id="dialog-4" title="The brushwood platform"><p><span style=""><em>Kevin and Izzy worked on excavating the brushwood platform.</em></span></p>
<table width="688" height="390" align="center" class="dialog_form">
<tr>
<td width="320" height="189"><figure><img src="images/megaphone.png" width="250" height="320" border="0" alt="Illustration of Izzy and Kevin filler"/><figcaption>Illustration of Kevin and Izzy</figcaption></figure></td>
<th width="13"> </th>
<td width="631"><p>This is an area that had been created by laying down brushwood and then covering with worked timbers.</p></td>
</tr>
<tr>
<td height="142" style="text-align: center"><audio id="audio4" title="Spoken Journal" preload="auto" controls autoplay loop >
<source src="../Kizzy (brushwood, reed peat).mp3" type="audio/mpeg">
Your browser does not support the audio element. </audio>
</td>
<td> </td>
<td><p>The platform is on the lake edge and was likely used for stability on the boggy ground. Evidence of flint knapping has been found in and around the platform.</p></td>
</tr>
<tr>
<th height="251"><figure><img src="images/imgp2925-copy.jpg" width="300" height="190" alt="Brushwood"/><figcaption>Part of the brushwood platform excavated in 2015 at Star Carr.</figcaption></figure></th>
<th> </th>
</tr>
</div>
<button id="opener-4"></button>
</article>
var __adobewebfontsappname__="dreamweaver"
$(function() {
$( "#dialog-4" ).dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
width: 950,
height: 600,
buttons: {
OK: function() {$(this).dialog("close");}
},
});
$( "#opener-4" ).click(function() {
$( "#dialog-4" ).dialog( "open" );
});
});
I'm trying to add a jQuery dialog in each row of a table, using jQuery, and dataTables plugin.
I want to add in the dialog data specific to each row.
I've seen in other post that you can think of two ways:
1) One dialog for each row.
2) Only one dialog for all the rows, and then fill it with specific data.
In this example, I have a list of courses in a table, with name(nombre), code(codigo), and mode(modo).
For each row, there is a button (modificar) that should show a dialog to edit the data for that course. Of course, in each dialog, must be loaded the data of that row.
My idea (viewed other ideas in other post) is to put the dialog inside the row, so I can load the data from that row.
I created a class (masInfo) and in the Javascript code, I put a function that should open the dialog after the button is. But it doesn't work.
Do you have any idea? Thanks.
HTML Y JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type="text/css"
href="css/milk.css" rel="stylesheet" />
<title>Paginadores tablas</title>
</head>
<body>
<%
CatalogoCursos catalogoCursos = CatalogoCursos.getCatalogoCursos();
ArrayList<Curso> cursos = catalogoCursos.getCursos();
%>
<div id="miTabla">
<form id="formulario" name="formulario" method="post">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
<div title="Modificar curso">
<table>
<tr>
<td><input type="text" name="mod_nombre" value="<%=curso.getNombre()%>"/></td>
<td><input type="text" name="mod_codigo" value="<%=curso.getCodigo()%>"/></td>
<td><input type="text" name="mod_modo" value="<%=curso.getStringModo()%>"/></td>
</tr>
</table>
</div>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</form>
</div>
</body>
</html>
JAVASCRIPT
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.custom.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
(function($) {
// Dialog
$('.masInfo').next().dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
$('#dialog').dialog('open');
return false;
});
});
You are much better off using just one dialog and populate the relevant information in the dialog on the button click. The way you currently do it will result in a lot of duplicated input elements.
So, the HTML would look like:
<div id="miTabla">
<table id="tabla">
<thead>
<tr>
<th>Nombre </th>
<th>Código </th>
<th>Modo de juego </th>
<th> Acción </th>
</tr>
</thead>
<tbody>
<%
for(Curso curso: cursos) {
%>
<tr>
<td><%=curso.getNombre()%></td>
<td><%=curso.getCodigo()%></td>
<td><%=curso.getStringModo()%></td>
<td>
<input type="button" class="masInfo" value="modificar"/>
</td>
</td>
</tr>
<%
}
%>
</tbody>
</table>
</div>
<div title="Modificar curso" id="ModificarDialog">
<form id="formulario" name="formulario" method="post">
<table>
<tr>
<td><input type="text" name="mod_nombre" id="mod_nombre" /></td>
<td><input type="text" name="mod_codigo" id="mod_codigo" /></td>
<td><input type="text" name="mod_modo" id="mod_modo" /></td>
</tr>
</table>
</form>
</div>
JavaScript would change to:
(function($) {
// Dialog
$('#ModificarDialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Borrar": function() {
document.formulario.submit();
$(this).dialog("close");
},
"Cancelar": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('.masInfo').click(function(){
var cells = $(this).parent().find('td');
$('#mod_monbre').val(cells.eq(0).text());
$('#mod_codigo').val(cells.eq(1).text());
$('#mod_modo').val(cells.eq(2).text());
$('#dialog').dialog('open');
return false;
});
});
1.I want to dynamically generate div containing textbox with unique id on click of button
<input id="<%:rid %>" type="button" value="reply"/>
2.I also want to use jquery ajax mathod to carry the textbox data to ashx file .
Can anyone help me
code
var lineItemCount = 0;
$(document).ready(function () {
$(".commentbox input[type='button']").click(function () {
var id = $(this).attr("id");
alert(id);
var cid = id.substring(5);
var containerid = "container" + cid;
alert(containerid);
//Increase the lineitemcount
lineItemCount++;
//Add a new lineitem to the container, pass the lineItemCount to makesure
getLineItem()
// can generate a unique lineItem with unique Textbox ids
$(containerid).append(getLineItem(lineItemCount));
});
});
//Create a new DIV with Textboxes
function getLineItem(number) {
var div = document.createElement('div');
//Give the div a unique id
div.setAttribute('id', 'lineitem_' + number);
//pass unique values to the getTextbox() function
var t1 = getTextbox('txt_' + number + '_1');
div.appendChild(t1);
return div;
}
//Create a textbox, make sure the id passed to this function is unique...
function getTextbox(id) {
var textbox = document.createElement('input');
textbox.setAttribute('id', id);
textbox.setAttribute('name', id);
return textbox;
}
iteration through model in aspx page
<%var i=1;%>
<%foreach (var commentitem in item.commentsModelList)
{
<table border="0" class="commentbox">
<tr>
<%var rid = "reply" + i;%>
<div id="<%:containerid %>">
<td> <input id="<%:rid %>" type="button" value="reply"/>
</div>
</td>
</tr>
</table>
<% i++;}%>
I changed your markup little bit to get the corresponding id of items on my click events
HTML
<table border="0" class="commentbox">
<tr>
<td>Some Item text
</td>
</tr>
<tr>
<td>
<div id="container-1" ></div>
<input type="button" class='btnReply' id="reply-1" value="Reply" />
</td>
</tr>
</table>
And the Script
$(function(){
$(".commentbox .btnReply").click(function(){
$(this).hide();
var id=$(this).attr("id").split("-")[1]
var strDiv="<input type='text' class='txtCmnt' id='txtReply-"+id+"' /> <input type='button' class='btnSave' value='Save' id='btnSave-"+id+"' /> ";
$("#container-"+id).html(strDiv);
});
$(".commentbox").on("click",".btnSave",function(){
var itemId=$(this).attr("id").split("-")[1]
var txt=$(this).parent().find(".txtCmnt").val();
$.post("/echo/json/", {reply: txt, id: itemId},function(data){
alert(data);
//do whatever with the response
})
});
});
Here is the jsfiddle example : http://jsfiddle.net/UGMkq/30/
You need to change the post target url to your relevant page which handles the ajax response.
EDIT : As per the comment about handing Multiple Divs
As long as you have the container div ids unique, it will work, I just changed the markup to include more than one item.
<table border="0" class="commentbox">
<tr>
<td>Some Item text<br/>
<div id="container-1" ></div>
<input type="button" class='btnReply' id="reply-1" value="Reply" />
</td>
</tr>
<tr>
<td>Some Another Content here <br/>
<div id="container-2" ></div>
<input type="button" class='btnReply' id="reply-2" value="Reply" />
</td>
</tr>
</table>
Here is the sample :http://jsfiddle.net/UGMkq/44/
For the above output to be rendered, you probably want to write your razor syntax like this
<table border="0" class="commentbox">
#foreach (var commentitem in item.commentsModelList)
{
<tr>
<td>Some Another Content here<br/>
<div id="container-#(commentitem.Id)" ></div>
<input type="button" class='btnReply' id="reply-#(commentitem.Id)" value="Reply" />
</td>
</tr>
}
</table>
Instead of creating a new table for each item, I created a new row in existing table.
I am trying to parse this HTML page here with HTML Agility Pack, but I cannot seem to get it to work as expected.
This is my page (shortened):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de-ch" xml:lang="de-ch">
<head>
</head>
<body id="Adressservices">
<div id="page">
<div id="page-544">
<table class="full">
<thead>
<tr>
<th class="first" scope="col" style="width: 18%;">Type</th>
<th class="col" style="width: 20%;">Name</th>
<th class="col">Date</th>
<th class="col" style="text-align: right; width: 10%;">Size</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">Change</td>
<td>somefile01.zip</td>
<td style="width: 5%;"><b class="filesize">2012-03-01</b></td>
<td style="text-align: right;"><b class="filesize">881.00</b></td>
</tr>
<tr>
<td class="first">Change</td>
<td>somefile02.zip</td>
<td style="width: 5%;"><b class="filesize">2012-02-01</b></td>
<td style="text-align: right;"><b class="filesize">1400.00</b></td>
</tr>
<tr>.....</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
The real page has quite a few more <tr>....</tr> rows in that table.
I was able to download the page just fine with HTML Agility Pack using this code snippet:
HtmlWeb web = new HtmlWeb();
HtmlDocument archiveDoc = web.Load(_archiveUrl);
var tables = archiveDoc.DocumentNode.SelectNodes("//table");
So I get a handle on my <table> element, works just fine.
Now I was trying to get the first <tr> element from within that table, and I tried this:
HtmlNode node = tables[0];
var allTRNodes = node.SelectNodes("tbody/tr");
var firstTR = allTRNodes[0];
Here, I'm not getting the n <tr> nodes as expected - but just two. And the first of those doesn't contain a list of y child nodes of type <td> either ...
Then I tried Linq-to-"HTML":
HtmlNode node = tables[0];
var firstTR = node.Element("tbody").Element("tr");
but again: I'm not getting the first <tr> node containing a list of y child nodes of type <td> either ...
Trying to get the list of all <td> nodes inside the first <tr> also didn't work quite as expected:
HtmlNode node = tables[0];
var allTDNodes = node.SelectNodes("tbody/tr/td");
var firstTD = allTDNodes[0];
instead of the y <td> nodes expected, I'm getting just three child nodes - two of the #text, the last one of type <td> - why??
Seems like HTML Agility Pack is misinterpreting the list of <td> nodes as nested nodes......
Any ideas? Thoughts? Hints how to solve this?
use descendant as in this example:
var linkNode = doc.DocumentNode.SelectSingle("//div[#id=\"content-wrapper\"]/dl/dd");
var hrefNode = linkNode.SelectSingleNode("descendant::a");
Something I don't agree with HtmlAgility pack that node.SelectNode* call traversing dom from the top and not from the current node.
Here's adopted sample for your case
// table
var tableNode = docNode.SelectSingleNode("//table");
// first tr
var trNode = tableNode.SelectSingleNode("descendant::tr");
// you can also try, but it's overkill
var trNode1 = tableNode.SelectSingleNode("descendant::tr[0]");
// then your td
var tdNode = trNode.SelectSingleNode("descendant::td");