Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm having a hard time passing my JavaScript data to HTML. I can send my video data to iframe so that a search retrieves a list of embedded videos. OR I could set my html var equal to href and display a written list of videos, whose url link redirects to YouTube itself. I want to combine these ideas.
My goal is to display a written list of video titles with thumbnails. When a link is clicked, the video should embed in the current page.
The exact problem is that I expected the onclick functionality to start the playVid function, pass it the video ID data, and send that to the iframe. It didn't. I get uncaught reference error playVid not defined. How is this so?
Update:
1) Tried to put playVid before showResults. Still undefined though.
2) Changed onclick="playVid(value.id.videoId)"> to onclick="playVid(' + value.id.videoId + ')"> Still undefined though.
3)
This is the code updating according to your suggestions. It's half-way there. Something gets passed to iframe and the video frame is embedded. playVid is now defined with no problems. The problem is not the data source. It works perfectly before we try to embed. I will post an image of my errors now, which are now about chrome extensions which is weird.
4) I solved the chrome errors I was receiving by installing the Google Cast chrome extension. Apparently Chrome will sometime give errors on embedded YouTube videos unless you download the extension, even if the extension really has nothing to do with embedded videos.
5) Last roadblock seems to be YouTube error "errorCode":"api.invalidparam"
SOLUTION
function showResults(results) {
var html = '';
$.each(results, function(index,value) {
html += '<li><img src="' +value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>'; });
$('#results').html(html);
$('#results li a').click(function(e){
playVid($(this).attr('href'));
});
}
function playVid(vidID) {
var embedVid = vidID+'?autoplay=1';
document.getElementById('player').src = embedVid;
}
Try this:
1- remove this onclick="playVid(value.id.videoId)" from showResults function and replace it with assigning an id:
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
2- add this after the each loop:
$('#results').html(html);
$('#results li a').click(function(){
playVid($(this).attr('id'));
});
You probably need to write the entire iframe tag to the document on click instead of just changing the source of an existing iframe. First create an outer div # 800x440 to contain the iframe, and then set
outer.innerHTML = '<iframe SRC="' + embedVid + '"></iframe>'
Your issue may be with this line...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
Try this instead...
html += '<li><img src="' + value.snippet.thumbnails.medium.url + '">' + value.snippet.title + ')</li>';
also try move the playVid() function outside this... $(function(){
Related
On the latest version of Full Calendar, I have a link wrapped around my event resources. When you double click on the event resource name I would like a modal to pop up.
The problem I'm having is as soon as the calendar loads it loads each of the modals for each of the resources as if I've just double-clicked on them.
Has anybody else come across this and does anybody have any idea on how to fix it?
resourceRender: function(renderInfo) {
if(renderInfo.resource.extendedProps.unassign==false)
renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>" + renderInfo.resource.title + "</a>";
else
renderInfo.el.querySelector('.fc-cell-text').innerHTML = "<span class='text-red'>" + renderInfo.resource.title + "</span>";
},
The problem is the way you've created the hyperlink:
.innerHTML = "<a ondblclick=" + showProfileModal('staff', renderInfo.resource.id) + " class='text-staff'>"
In that context, showProfileModal() is not part of your HTML string, instead it's treated as actual code to be executed...and so that's what happens, it gets executed.
You're using it as if the result of that function was something to be included in the HTML string. If you want that to be treated as text, something to be added to the HTML declaration, then include it inside the string:
.innerHTML = '<a ondblclick="showProfileModal(\'staff\',\'' + renderInfo.resource.id + '\')\" class=\"text-staff\">'
Demo: https://codepen.io/ADyson82/pen/WNeKYav?&editable=true&editors=001
(Of course if you wanted to make that code less messy without all the character escaping and so on, you could use createElement and addEventListener to create the hyperlink and set the double-click event handler instead.)
Hi I am using this code for Printing the window content
"<html><head><script>function step1(){\n" +
"setTimeout('step2()', 1000);}\n" +
"function step2(){window.print();}\n" +
"</scri" + "pt></head><body onload='step1()'>\n" +
"<object id='PrintId' data='"+source+"' type='application/pdf' style='width:100% !important;height:100% !important'><embed id='PrintId' src='" + source +
"' type='application/pdf' style='width:100% !important;height:100% !important'/></object></body></html>";
As same code i am using for to print Images using "Image tag" instead of Object and Embed tag it was working fine but for PDF or Docx,txt file it is not working on any Browser where i am wrong please help me
Thanks
On line 2, setTimeout('step2()' should be replaced with setTimeout(step2, because setTimeout takes the actual function, in this case step2. You were giving it a string instead.
Edit: Actually setTimeout can take a string which will be executed once the timer expires so that probably isn't the problem.
I have the following pice of code but it is not working for me.
$('#seisUrl').html(""); // reset div.
var urls = url,
filepath , filename;
for(var i=0;i<urls.length;i++){
if(urls[i] != ''){
filename = basename(urls[i]);
filepath = dirname(urls[i]);
$('#seisUrl').append(
'<a rel="zoom-id:zoom; seismic" href="' + filepath + 'thumbnail_' + filename
+ '" rev="' + filepath + 'thumbnail_' + filename
+ '" class="fancyboxseismic"'
+'></a>'
);
}
}
$(".fancyboxseismic").fancybox({
});
The html output is
<div id="seisUrl" style="">
<a class="fancyboxseismic" rev="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" href="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic3.jpg" rel="zoom-id:zoom; seismic"></a>
<a class="fancyboxseismic" rev="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" href="http://website-dev.uk.spectrumasa.com/mcmap//public/filespool/2/270/thumbnail_seismic_CroatianAdriatic2.jpg" rel="zoom-id:zoom; seismic"></a>
</div>
This seems to working fine on my curent site which you can find by browsing to http://www.spectrumasa.com/mcmap/large.php . then go to Meditttereanean-> Adriatic->Croatia. the problematic button is "seismic".
On my dev box i have updated fancybox to 2.1.5 version. I have changed the buttons from list items to normal a tags in a div. using css to style them inline. I have not changed anyother code but it seems like fancybox is not able to pick up the image classes. when i do view source after the images have been appended via jquery it is not there. howver i can see it in firbug console.
seems to work on here but doesn't seem to work on dev bnox
I had a fancybox class where i shouldn't of had. it does work fine.
"<a class='btn' href=\"#\" onclick=\"trackFactsheetView("+surveyId+",\'seismic\');\" >Seismic</a>"
this link was calling another function which was triggering fancyboxseismic.
I'm trying to get posts from a blog to show on my website via RSS/JavaScript. I can successfully get the title and link to posts to pull in, but nothing else will show when I try to get the actual post content. I feel like I'm missing something simple although after reading through Google's API docs for the last two days I can't seem to figure it out.
Here is the script I'm using:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
var feedContainer=document.getElementById("blog-feed")
var feedURL="http://MYBLOGTITLE.blogspot.com/feeds/posts/default?alt=rss"
var postsReturned=2
var rssoutput="<ul>"
function rssFeedSetup(){
var pullFeed=new google.feeds.Feed(feedURL)
pullFeed.setNumEntries(postsReturned)
pullFeed.load(showFeed)
}
function showFeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a>" + thefeeds[i].content +"</li>"
rssoutput+="</ul>"
feedContainer.innerHTML=rssoutput
}
else
alert("There was an error loading the blog posts.")
}
window.onload=function(){
rssFeedSetup()
}
</script>
Does anyone know if it's possible to get the content this way, or am I approaching this completely wrong? Thank you!
For the sake of clarity, you should include brackets in your for-loop:
for (var i=0; i<thefeeds.length; i++) {
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a>" + thefeeds[i].content +"</li>"
}
I'm not sure if this is causing your problem or not. You may have some browser compatibility issues without the brackets.
You should also include semicolons at the end of every statement.
I managed to get your code working by changing the blog URL to an active Blogspot blog. I had to add
<div id="blog-feed"></div>
above your javascript.
Upon further digging, it looks like it's an issue with the Google Feed API and Blogger not passing all of the info to it. When debugging and viewing the raw RSS I can see the content, but when viewing what the script returns it is empty. The code above is working as intended for RSS feeds from Wordpress, it's only Blogger not working. I'll just go with the titles and links for now - thank you!
This question already has answers here:
Turning live() into on() in jQuery
(5 answers)
Event handler not working on dynamic content [duplicate]
(2 answers)
Closed 9 years ago.
I have been using this code to get a simple lightbox working on a site of mine.
And I tried to modify it slightly so:
a) The lightbox fades in- Done
b) The script pulls in the src attribute not the href- Done
b) I can pull in data from a custom "data-description" attribute on the <img> that is being clicked (or tapped I suppose) to a <p> in the lightbox.
Issues
With the second, when the image is first clicked, It works fine. When any other is clicked, or it is clicked again, nothing happens- I can't work out why as I seem to be doing it right?
Also, when using jQuery 1.9, live() is apparently depreciated- I was using 1.8.2 before and didn't notice until now, I have tried on() with no sucess, and being a JS beginner am puzzled as to how to fix it, this issue means that the lightbox won't close.
Almost-working-but-broken code here: http://codepen.io/hwg/pen/ybEAw - Sorry about all the comments but I find it easier that way.
JS:
$(document).ready(function() { //Document Ready
$('.inner_img').click(function(e) {
//prevent default action (hyperlink)
e.preventDefault();
//Get clicked link href
var image_src = $(this).attr("src");
// Get Description
var desc = $(this).attr("data-description");
/*
If the lightbox window HTML already exists in document,
change the img src to to match the href of whatever link was clicked
If the lightbox window HTML doesn't exists, create it and insert it.
(This will only happen the first time around)
*/
if ($('#lightbox').length > 0) { // #lightbox exists
//place href as img src value
$('#content').html('<img src="' + image_src + '" />');
// Change Description in the P tag
$('.desc').html(' '+ desc +' ');
//show lightbox window - you could use .show('fast') for a transition
$('#lightbox').fadeIn(); // Fades it in
}
else { //#lightbox does not exist - create and insert (runs 1st time only)
//create HTML markup for lightbox window
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' + //insert clicked link's href into img src
'<img src="' + image_src +'" />' +
'<p class="desc">'+ desc +'</p>' + // Adds Description from <img data-description="..">
'</div>' +
'</div>';
//insert lightbox HTML into page
$(lightbox).hide().appendTo("body").fadeIn();
}
});
//Click anywhere on the page to get rid of lightbox window
$('#lightbox').on('click', function() { //must use live, as the lightbox element is inserted into the DOM
$("#lightbox").fadeOut(); // Fades it out
});
}); // End
Thanks for any help.
EDIT: I have been shown that the live/on issue is very common, I can see where I went wrong. Thanks for the assistance on this commenters.
However, why won't my code work for the second issue?
use event delegation with on -
$(document.body).on('click','#lightbox', function() {
$("#lightbox").fadeOut(); // Fades it out
});
Demo ---> http://codepen.io/anon/pen/ywJhe
You can change
$('.inner_img').click(function(e) {
to
$(document.body).on('click', '.inner_img', function(e) {
so that events occurring after the binding will still be delegated to the new elements.