I would like to be able to set the video ID to be played from user input via an <input type="text"> field.
My naive attempt looks like so
<!DOCTYPE html>
<html>
<body>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
<script>
function loadVideo() {
var ytplayer = document.getElementByID("ytplayer");
var videoid = document.getElementByID("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
</body>
</html>
but the player widget remains blank after entering an ID and clicking "Load".
What is wrong?
Define a function before using it. Simply move the <script> above the <button>
You have a typo twice getElementById has a lower case "d".
In the end it will look like this:
<!DOCTYPE html>
<html>
<body>
<script>
function loadVideo() {
var ytplayer = document.getElementById("ytplayer");
var videoid = document.getElementById("ytvideoid").value;
ytplayer.cueVideoById({
videoId: videoid
});
ytplayer.playVideo();
}
</script>
<p>
ID:<input type="text" id="ytvideoid">
<button onclick="loadVideo()">Load</button>
</p>
<iframe id="ytplayer" type="text/html" width="640" height="390"</iframe>
</body>
</html>
I can't help you any further than that however, because your example doesn't work after these two things are fixed, as it doesn't contain all the code needed to make it work.
Related
I'm currently building a mobile site for iPad using jquery mobile and ASP.NET MVC 4. I have a dynamically created listview that is displaying search results. I want the user to be able to click on an item in the listview and have the text from that particular list item appear in a textbox that is also in the view.
I can get this to work in Safari on my desktop machine, but it will not work on an iPad.
For the sake of simplicity and to attempt to narrow down the problem, I hard-coded a simple little listview in my View. The results were the same. Works on desktop in Safari, but not on iPad.
Here is the very simplified VIEW code that works in Safari on desktop (Please note that _Header is a separate, partial View):
#section Header
{
<script type="text/javascript">
$('#testJs li').on('click', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
#{ Html.RenderPartial("_Header"); }
}
#section Content
{
<input type="text" id="testText">
<ul id="testJs" data-role="listview" data-inset="true" data-theme="c">
<li id="task400" class="tasks">Test task 400</li>
<li id="task295" class="tasks">Test task 295</li>
</ul>
}
Please note that I have tried changing 'click' to 'tap' (see below) with no success. It still doesn't work on iPad.
<script type="text/javascript">
$('#testJs li').on('tap', (function () {
var results = $.trim($(this).text());
$('#testText').val(results);
}));
</script>
I've also tried using the following with the same results. Still doesn't work on the iPad.
<script type="text/javascript">
$('#testJs').delegate('li', 'tap', function () {
var results = $.trim($(this).text());
$('#testText').val(results);
});
</script>
I do wonder if this has something to do with our use of layout pages. We have slightly different layout pages, depending on if the site is being rendered on a mobile device or not.
Mobile Layout View:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobileCss", "~/Content/css")
<script type="text/javascript">
$(document).ready(function () {
$.mobile.ajaxEnabled = false;
});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header", false) }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
Desktop Layout View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
#if (IsSectionDefined("Header")) {
#RenderSection("Header") }
else { <h1>#ViewBag.Title</h1> }
</div>
<div data-role="content">
#RenderSection("Content")
</div>
</div>
</body>
</html>
I've been stuck on this for a few days, so any help would be appreciated. Everything I try works on my desktop, but not on an iPad - which is where I actually need it to function.
Thanks!
Did you try using bind on your testJs li? I'd bind a tapHandler like below:
<script>
$(function(){
$( "#testJs li" ).bind( "tap", tHandler );
function tHandler( event ){
var results = $.trim($(this).text());
$("#testText").val(results);
}
});
</script>
or with on like this should work:
$('#testJs').on('tap', 'li', function (event) {
var results = $.trim($(this).text());
$("#testText").val(results);
console.log('this should work')
}
Also used double quotes on top example but that shouldn't make a difference I don't think. If it doesn't then make sure you .js references are correct, and use firebug in firefox to debug for any straggling errors.
I'm just starting out in jQM development and have hit a bit of a brick wall.
In short, I have a javascript file and two pages. In the main page (index.html) I'm populating a listview dynamically, and registering the tap event for each and every item for this listview. The on tap event, in return, calls the changepage method to an external page (details.html). This works fine 100% of the time.
In the javascript file, I'm registering for events on pagebeforeshow for the details.html page. This works okay first time out, but any subsequent calls are not triggering the pagebeforeshow event at all. Having had a closer look i can see that the pagechange is being called, pagebeforechange event is being fired okay, but the pagebeforeshow is only fired for that particular item only (untill a complete refresh).
I have set up a sample for you to be able to look at. I would seriously appreciate any feedback given. For all I know - I may be using the wrong events!?
The closest post I could find on SO was Pagebeforeshow not fired on second time change Page event however it doesn't particularly deal with listviews so I'm not sure if it's related or not.
Thanks,
Matt
Index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
</ul>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
details.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<b>Page placeholder</b>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
jquery.custom.js (JS Library)
$(document).on("pagebeforechange", function (event, data) {
alert('changing page...');
});
$(document).on('pageinit', function () {
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
$("#ListItems").off();
$("#ListItems").on("listviewbeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
var max = 200;
var limit = 0;
var itemslist = [
{"id":1, "desc":"item1"},
{"id":2, "desc":"item2"},
{"id":3, "desc":"testitm1"},
{"id":4, "desc":"testitm2"}
];
$.each(itemslist, function (i, val) {
if (limit < max) {
if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
$ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');
$('#' + val.id).off();
$('#' + val.id).on('tap', function (event) {
var elementId = $(this).attr('id');
$.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
});
limit++;
}
}
});
$ul.listview("refresh");
$ul.trigger("updatelayout");
}
});
});
You are incorrectly binding page event.
Instead of this:
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
Use this:
$(document).on("pagebeforeshow", "#detailsPage",function(event){
alert('about to show page...');
});
Remember, jQuery Mobile page events must always be added with event delegation.
Also your don't need to use off() with page events, they do not suffer from multiple event binding problem. If you have more question feel free to ask in comments.
I have following html page:
<html>
<head>
<script type="text/javascript">
var myDiv = null;
window.onload = function() {
myDiv = document.getElementById("myDiv");
};
function buttonClick() {
myDiv.style.width = "200px";
myDiv.style.height = "100px";
}
</script>
</head>
<body>
<div id="myDiv" style="left:10px; top:10px; width:1000px; height:250px; overflow:auto;">
<iframe scrolling="no" id="myIframe" style="width:100%;height:100%" src="a.svg"></iframe>
</div>
<input type="button" id="button1" onclick="buttonClick()" value="resize div"/>
</body>
</html>
and a SVG "a.svg" that is the content of the iframe above:
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500">
<circle cx="500" cy="250" r="240"/>
<script type="text/ecmascript"><![CDATA[
window.onresize = function() {
console.log("resize");
};
]]></script>
</svg>
When i now open the html page on iOS Safari and i click the button to resize the iframe to 200x100 pixels, i do not get the resize event.
But if I do the same on a PC browser like Firefox, I get the resize event.
I know that iframes are handled differently in iOS Safari, but how can I make this working ?
I am trying to attach onBlur and onFocus handler to a SSN input field. However, I am seeing an error saying object has no method 'ON'. The code is at http://jsfiddle.net/H4Q5f/
As you can see, I commented out to figure out the details, however had no luck so far. Any help is appreciated. For convenience, here is the code:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="../../appjavascript/ssa/mkwr/mytest.js"></script>
</head>
<body>
<div data-role="page" id="MyTestPage">
<div data-role="header" data-position="fixed" data-logo="true" data-tap-toggle="false" data-fullscreen="false" >
<h1> Page Title </h1>
</div>
<div data-role="content">
<div class="content-primary divcontent">
<h1 class='h1title'>Using This App</h1>
<p> Here are the instructions </a>
</p>
</div>
<div class="inputdata">
<br /> <br />
<input type="text" name="accessCode" id="AccessCode" value="" placeholder="Access Code:" /> <br />
<input type="text" id="ssn1" class="ssn" value="" placeholder="SSN1:" /> <br />
<input type="text" id="ssn2" class="ssn" value="" placeholder="SSN2:" /> <br />
</div>
<input type="button" id="myalert" value="Next" />
</div>
<!-- /content -->
</body>
</html>
And here is the java script
if (typeof TEST == "undefined" || !TEST) {
var TEST = {};
}
( function() {
TEST.mkwr = {
init : function() { // this is a public function
$("[data-role='page']").on("pagebeforeshow", TEST.mkwr.hideError());
$("[data-role='page']").on("pageshow", TEST.mkwr.setHandlers());
},
// On Blur, we need to add the '-'s if they doesn't exist so the user
// view edit the entered value formatted
ssnOnBlurHandler : function(input) { // Auto format SSN on blur
if ($(input).val().length == 9) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(3, 5);
var _ssnSegmentC = _ssn.substring(5, 9);
$(input).val(
_ssnSegmentA + "-" + _ssnSegmentB + "-" + _ssnSegmentC);
}
}, // _ssnOnBlurHandler
// On focus, we need to remove the '-'s if they exist so the user
// can edit the entered value
ssnOnFocusHandler : function(input) {
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
if ($(input).val().length == 11) {
var _ssn = $(input).val();
var _ssnSegmentA = _ssn.substring(0, 3);
var _ssnSegmentB = _ssn.substring(4, 6);
var _ssnSegmentC = _ssn.substring(7, 11);
$(input).val(_ssnSegmentA + _ssnSegmentB + _ssnSegmentC);
}
}, // _ssnOnFocusHandler
// Hide all errors
hideError : function() {
$(".error").hide(); // Hide all errors
},
setHandlers : function() {
alert("Set Handlers");
// $(".ssn").each( function() {
// var input = this; input.blur(TEST.mkwr.ssnOnBlurHandler(input))
// });
// $(".ssn").each( function() {
// var input = this; input.focus(TEST.mkwr.ssnOnFocusHandler(input))
// });
}
};
})(); // end the anonymous function
$("[data-role='page']").bind("pageinit", TEST.mkwr.init());
I found a couple of issues with the code on the jsfiddle. Here is an updated one that is working to fire handlers and parse code. It looks like your ssn logic might need to be fixed a little but everything is getting you to there.
http://jsfiddle.net/H4Q5f/10/
The problems I saw were partly what was mentioned before you were using .on instead of .bind given the jquery version. But also you were not setting your handlers but rather firing your handlers. You had this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler(input))
which would return the result of the function to the set method which is not what you were looking for. So I changed it to this:
input.bind("blur",TEST.mkwr.ssnOnBlurHandler)
So now you are passing the handler to the set method so that it will fire when the event takes place.
Hope this makes sense.
The .on() function was introduced in jQuery 1.7. The code you've posted above includes jQuery 1.6.4 (<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>), which doesn't have that function. You can either upgrade to the latest version of jQuery (recommended) or use the equivalent function - .bind() - for the older versions.
Stripped down code shows that I can change an attribute, in this case data-split-icon, but cannot get a refresh. Console.log show it has changed, so does the element view in chrome developer tools.
http://jsfiddle.net/mckennatim/MQ9rj/ 'Get' button simulates a programmatically created list. 'Change' button simulates changing an attribute.
Refresh, listview, trigger, create, pagecreate I try all combinations. Nothing works
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<a href="#" data-icon="back" id="get" data-role="button" >get</a>
<h2>TestPage</h2>
change
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('#get').click(function() {
for (i=1; i<6; i++){
$('#list').append('<li><a>list</a><a class="orig">items</a></li>');
}
$('#list').listview('refresh');
return false;
});
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
//$('#list').listview();
//$('#list').listview('refresh');
$('#thelists').trigger('create');
$('#thelists').trigger('pagecreate');
$('#list').listview();
$('#list').listview('refresh');
return false;
});
</script>
</body>
</html>
Looks like jQM also adds some markup on the children span tags, try something like this
http://jsfiddle.net/phillpafford/MQ9rj/18/
JS
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
$("[data-icon=gear]").each(function() {
var $this = $(this);
$this.attr('data-icon','info');
$this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');
});
$('#list').listview('refresh',true);
return false;
});