I would like to play a video on my ASP.NET Webpage, but I have no clue how to pull this off and I don't understand anything about the YouTube API. I'm clueless when it comes to API's
But what I want to achieve is the following:
when I click on a button (trailer), I take the title of the movie/game and search with it in the YouTube database (or something like that). And the best (or first or idk) found video will be the one playing on my webpage.
For example:
I have a page with all the details on the movie "Iron Man", when I click on the button "Trailer", I'd like to play the trailer from the movie Iron Man on my webpage.
Is this possible, if yes, how do I do this?
I can't provide code, because I have no clue how to even begin with this. I just have a button and a label with the title as text. That's it ..
If someone can help me out, please explain it very detailed so I can maybe understand it.
Thanks in advance! You'd me helping me out big time!
Here is some simple javascript and html i wrote that allows the user to bring in a youtube video when searched hope it helps.
let me know here is the fiddle aswell
-http://jsfiddle.net/cse_tushar/qn4C7/
html
<input type="text" id="Search" /><br/>
<input id="show" type="button" value="Submit" onclick="Show();"/>
<div id="result">
</div>
Javascript
$(document).ready(function () {
$("#show").click(function () {
getYoutube($("#Search").val() + "Offical Film Trailer");
});
});
function getYoutube(title) {
$.ajax({
type: "GET",
url: yt_url = 'http://gdata.youtube.com/feeds/api/videos?q=' + title + '&format=5&max-results=1&v=2&alt=jsonc',
dataType: "jsonp",
success: function (response) {
if (response.data.items) {
$.each(response.data.items, function (i, data) {
var video_id = data.id;
var video_title = data.title;
var video_viewCount = data.viewCount;
var video_frame = "<iframe width='600' height='385' src='http://www.youtube.com/embed/" + video_id + "' frameborder='0' type='text/html'></iframe>";
var final_res = "<div id='title'>" + video_title + "</div><div>" + video_frame + "</div><div id='count'>" + video_viewCount + " Views</div>";
$("#result").html(final_res);
});
} else {
$("#result").html("<div id='no'>No Video</div>");
}
}
});
}
Related
Currently I am stuck I want to return the title, plot and poster using themoviedb api I have no idea how to start the coding for this
Currently when i run a search the information is display in the console log of the browser i want to take that information and style it into a table format nothing fancy just the title and poster need help no clue where to start
doc site here http://docs.themoviedb.apiary.io/#get-%2F3%2Fsearch%2Fmovie
<html>
<head>
<title>Sample Seach</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var url = 'http://api.themoviedb.org/3/',
mode = 'search/movie',
input,
movieName,
key = '?api_key=My API KEY HERE';
$('button').click(function() {
var input = $('#movie').val(),
movieName = encodeURI(input);
$.ajax({
url: url + mode + key + '&query='+movieName ,
dataType: 'jsonp',
success: function(data) {
console.log(data);
}
});
});
});
</script>
</head>
<body>
<input id="movie" type="text" /><button>Search</button>
</body>
</html>
output looks like this it returns objects under a movie title in his chase 300
error when running each staement
Something like this:
$.ajax({
url: url + mode + key + '&query='+movieName ,
dataType: 'jsonp',
success: function(data) {
var table = '<table>';
$.each( data.results, function( key, value ) {
table += '<tr><td>' + value.original_title + '</td><td>' + value.release_date + '</td></tr>';
});
table += '</table>';
$('.myelement').html(table);
}
});
You don't read from the console. It's just for outputting debug information. The AJAX call basically returns an JavaScript object (whose structure you can see in the the console).
Access the data from it just like from any other JavaScript object (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects if you need to learn how) and work with that.
EDIT: If you need to know how to display the data on the web page, you need to learn about the DOM. See for example: http://www.elated.com/articles/javascript-dom-intro/
I need to apply bindings to a form and add implement submit binding to a single form.
This is code I have, but the previous bindings are not applied.
<form data-bind= "attr: { 'id': 'form-' + ($index() + 1) }, submit: $root.updateStore">
..
</form>
Is the syntax gone wrong? Iam stuck with this guys. Any help would be appreciated. Thanks in advance.
Answering your main question straight up: your syntax hasn't gone wrong, it's just fine.
I'm not sure what you mean by "the previous bindings are not applied", and the code you posted isn't enough to reproduce the issue. It may help to include more code in your question, help us reproduce the issue.
If you want to see your own code in action, have a look at this fiddle. There I've assumed the following full View:
<!-- ko foreach: myForms -->
<form data-bind= "attr: { 'id': 'form-' + ($index() + 1) }, submit: $root.updateStore">
Form with id
'<span data-bind="text: 'form-' + ($index() + 1)"></span>'
<input type='submit' />
</form>
<!-- /ko -->
With the following ViewModels:
function form() { }
function vm() {
var self = this;
self.myForms = ko.observableArray([new form(), new form()]);
self.updateStore = function(formElement) { alert('submitting ' + formElement.id); };
}
You can see the View has a span showing that id in a span as well. If you inspect the forms in the fiddle in a developer toolbar you can see that the IDs are bound just fine.
Hi I am using jQuery load to grab a ahref from a link and then I want to load a div from the page im getting into a div so have tried this:
// lets load the contents
$('#navigationLinks a:not(:first-child)').click(function(event){
$('#wrapper').animate({
'left':'0px'
});
var href = $('#navigationLinks a').attr('href');
$('#content').load(href + ' #resultDiv');
event.preventDefault();
});
This is the HTML:
<div id="navigationLinks">
Dashboard Home
Industry Overview
Regions
Industries
Security Pipeline
Audit Events & Issues
Account Filter
Contractual vs. Delivered Services
</div>
I tried removing the space in ' #resultDiv' before the # but that didn't help, any help would be greatly appreciated.
You should try this
$(document).ready(function(){
$('#navigationLinks a:not(:first-child)').click(function(e){
var href = e.target;
$('#content').load(href + ' #resultDiv');
e.preventDefault();
});
});
The problem was that var href = $('#navigationLinks a').attr('href'); will always get the first link in the block and not the actually link that was clicked.
I have written some code using jQuery to use Ajax to get data from another WebForm, and it works fine. I'm copying the code to another project, but it won't work properly. When a class member is clicked, it will give me the ProductID that I have concatenated onto the input ID, but it never alerts the data from the $.get. The test page (/Products/Ajax/Default.aspx) that I have set up simply returns the text "TESTING...". I installed Web Development Helper in IE, and it shows that the request is getting to the test page and that the status is 200 with my correct return text. However, jQuery refreshes my calling page before it will ever show me the data that I'm asking for. Below are the code snippets from my page. Please let me know if there are other code blocks that you need to see. Thank you!
<script type="text/javascript">
$(document).ready(function() {
$(".addtocart_a").click(function() {
var sProdIDFileID = $(this).attr("id");
var aProdIDFileID = sProdIDFileID.split("_");
var sProdID = aProdIDFileID[5];
// *** This alert shows fine -- ProdID: 7
alert("ProdID: " + sProdID);
$.get("/Products/Ajax/Default.aspx", { test: "yes" }, function(data) {
// *** This alert never gets displayed
alert("Data Loaded: " + data);
}, "text");
});
});
</script>
<input src="/images/add_to_cart.png" name="ctl00$ctl00$ContentPlaceHolder1$ContentPlaceHolder1$aAddToCart_7" type="image" id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_aAddToCart_7" class="addtocart_a" />
The easiest way is to tell jQuery not to return anything.
$(".addtocart_a").click(function(e){
// REST OF FUNCTION
return false;
});
Good luck! If you need anything else let me know.
This is a follow-up question to ASP.NET How to pass container value as javascript argument
Darin Dimitrov has kindly provided his answer using jQuery,
But for some reason, I was not able to select the grid row I wanted to.
Here is the jQuery used to select row.
$(function() {
$('#_TrustGrid input[name^=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
Here is the actual output HTML markup.
<input
id="_TrustGrid_ctl16_ctl05_ctl00_trustDocIDTextBox"
type="text" value="198327493"
name="_TrustGrid$ctl16$ctl05$ctl00$trustDocIDTextBox"/>
I have just started using jQuery tonight and been going through the official jQuery Selectors documentation but have been unsuccessful.
Am I missing something here?
What I did to save the full id of the control I used in my .aspx page:
<input type="hidden"
id="SubcontractorDropDownID"
value="<%= SubcontractorDropDown.ClientID %>" />
You can then just get the value of the id and then use that in your query to know which row to use.
At first glance, I think you just want a '$' instead of '^' and you should be targeting the ID and not the NAME in your selector?
$(function() {
$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
I do not know why selecting through #_TrustGrid would not work.
I was able to get around the problem by specifying :input as shown below.
$(function() {
//$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(':input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});