Hello my problem is that whenever i load content to an iframe through javascript and jquery it only loads the first time and then i cannot load anything over it.
the function I use is this:
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").attr('src', sourceURL );
}
and i call it through
<li><span>Google</span></li>
Am I doing something wrong?
Thanks!
I've tried to reproduce your problem, but I was not able to. I've create a very simple site with to links and one iframe:
<a class="iframe" href="http://microsoft.com">Microsoft</a>
<a class="iframe" href="http://google.com">Google</a>
<iframe id="oPanel"></iframe>
and 4 lines of unobstrusive JavaScript to load those links within the iFrame:
$('a').click(function(){
$('#oPanel').attr('src',$(this).attr('href'));
return false;
});
And it's working as expected. You can try it here: http://jsfiddle.net/jQncy/
Related
I've made a function in wordpress with which I call an id into every post thru a shortcode. The function is:
function myshortcode_imdbid( ){
$id = dt_get_meta('ids');
return trim($id, 't');
}
add_shortcode( 'post_imdbid', 'myshortcode_imdbid' );
This function will print in every post a different id made of digits like: 232121
What I want to do is to call that ID into an iframe, do you have any idea on how to do that. Placing the shortcode inside the iframe won't work.
The iframe is always the same, only the ID is not the same. The iframe looks like:
<iframe class="API" frameborder="0" scrolling="no" data-apikey="XXXXXXXXXXXX" data-imdbid="HERE I MUST CALL MY ID"></iframe>
Do I need another function using that iframe and replace only the digits? If, so, any ideas?
Big thanks for reading this and I hope that someone can help.
The issue was fixed. the user using adsense plugin. the adsense plugin doent support the php in admin settings textbox.
so it is fixed by adding the below code in single-post.php
<iframe class="API" frameborder="0" scrolling="no" data-apikey="XXXXXXXXXXXX" data-imdbid="<?php echo do_shortcode('[post_imdbid]');?>"></iframe>
I'm trying to simply detect clicking an A link to display an Alert box. Whenever I place the script inside the php file my a link is located, it works fine, but whenever I place it in my custom JS file, it doesn't detect it, and I get the error 'Uncaught TypeError : Cannot set property "onclick" of null'.
The link between the php page and custom js page is definitely working, as I have previous working code on the page. It simply wont detect my A link it its located in an external script.
HTML
<a id="ConfirmHolidayClose" href="#">
<img src="assets/img/close-button.png" alt="Holiday-request-close-button"
class="CloseButton" />
</a>
JAVASCRIPT
document.getElementById("ConfirmHolidayClose").onclick=function(){
alert("Working");
}
UPDATE - Forgot to mention sorry, my a link is nested inside div called 'ConfirmHoliday'.
I have JS code manipulating the ConfirmHoliday div inside my Custom JS, so it cant be loading after because it is finding its parent div perfectly well at the moment.
The javascript file runs before the element is created, thus it doesn't exist. To solve this, you have couple options:
1) Surround the code with a window.onload function
window.onload = function () {
// Your code here
};
2) Put it in a separate js file and add a defer property to the script tag.
<script src="yourScript.js" defer="defer"></script>
3) Put the script tag after the anchor tag
It's trying to access the ConfirmHolidayClose element before it exists maybe? Where is your JS loaded in your page? I'm guessing in your <head>
A few solutions:
1) Move your script to bottom of page just above </body>
2) wrap your JS in dom ready function, this ensures no JS will run until the DOM tree exists. Easiest with jQuery, example below...
jQuery example
$(function() {
document.getElementById("ConfirmHolidayClose").onclick=function(){
alert("Working");
}
});
Vanilla example
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("ConfirmHolidayClose").onclick=function(){
alert("Working");
}
});
I am using external JavaScript to show video player on web page like...
<script src='http://player.field59.com/v3/vp/...........'></script>
Here is my code that cut the HTML code which is generated by above script tag and paste into specific container like <div id='dynamic-video-container'></div>
$(document).ready(function(){
if( $("div.subscriber-hide div.html-content div.bimVideoPlayer").length ) {
var video_content = $('<span>').append($('div.subscriber-hide div.bimVideoPlayer').clone()[0]).remove().html();
}
$('div.subscriber-hide div.html-content').remove();
$("div#dynamic-video-container").html(video_content);
});
I am doing this because I am not able to put external code directly into "<div id='dynamic-video-container'></div>" container.
My issue is this sometimes play functionality of video player is not working may be due to loading sequence of external code and code snippet.
Is there any option by which code snippet will execute when external js becomes fully loaded? Can anyone suggest idea to how to do this?
One more thing external code "<script src='http://player.field59.com/v3/vp/...........'></script>" is added by CMS so I am unable to change this line.
Try this
window.onload = function() {
//your code comes here
}
As window.onload is called after all the content and resources of the page are loaded. Hope this helps.
If I have a button that executes the code
$('#main').load('welcome.html');
and in welcome.html I have a button that executes the code
$('#main').load('otherpage.html');
the Javascript isn't executed, regardless of whether that function is on the parent file's HTML code or the child's.
How can I get a Javascript function to work from externally loaded HTML files?
EDIT
Here's a bit more of a sample...
Homepage:
<body>
<div id="main"></div>
</body>
<script>
document.onLoad(){
$('#main').load('welcome.html');
}
function show(file){
$('#main').load(file+'.html');
}
</script>
welcome.html page:
Test
...however when the Test button is clicked, test.html is not loaded into the Main div.
EDIT 2
Here is what the current state is and what the issue is - exactly.
I've uploaded the bones of the code to PasteBin.
When the 'grid' button is clicked, the content changes and the footer changes.
However, the footer, which has URLs based on Javascript, comes up with the error:
Uncaught SyntaxError: Unexpected token ILLEGAL
...when trying to access the 1i.html page.
There's a difference between test the variable and 'test' the string:
Test
Probably should be:
Test
It is important to understand that when loading script into page via AJAX that the main page has already gone through document.ready . Thus, any code you load will fire immediately.
If the code you load precedes the html it references, it will not find that html when it fires.
Placing the code after the html in remote page will resolve this issue
Check jQuery.live() and jQuery.on().
Maybe your eventhandler is wrong. When you import new markup via load() or ajax(), you have to initialize the handlers from new document. The easiest way is using jQuery.on or jQuery.live() instead of jQuery.click().
$('MYBUTTON').live('click', function(){
$('#main').load('your_url.html')
})
or use the callbackfunction to (re-)initialize the buttons event.
A better solution is this: Just add the target_url to buttons rel attribute...
<button rel="YOUR_URL.html">Open Page</button>
$('button[rel]').live('click', function(){
$('#main').load($(this).attr('rel'));
})
I want to use fancybox from inside flash.
I call a javascript function with
var url:URLRequest = new URLRequest("javascript:callPopup()");
navigateToURL(url, "_self");
and
function callPopup(){ alert("works");}
which works fine.
now I want to use this function to open my fancybox content.
the flash content is placed with swfobject. under the flashcontent-div I have my link to the fancybox-content:
<div id="micrositepopup">
<a id="popup" href="images/microsite/microsite.jpg">test</a>
</div>
and I call on pageload
$(document).ready(function() {$("a#popup").fancybox();});
when I click on the test-link all works fine.
but how could I call the function
function callPopup(){ $("a#popup").fancybox(); } // not working
to open the fabcybox with the linked content?
thnx!
ah - ok. you need to use
function callPopup(){ $("a#popup").trigger("click"); }
;-)
Solution:
you need to use: Jquery in Flash CS5 with Fancybox
http://www.experts-exchange.com/Software/Photos_Graphics/Web_Graphics/Macromedia_Flash/ActionScript/Q_26325406.html