I'm showing the jw player inside the thickbox and calling the jwplayer code through ajax. When I call it, it is showing the thickbox without jwplayer and Error console showing the reference error "jwplayer is not defined" error.I'm using the jquery 1.8 .When I call it 2nd time without page refresh it is showing the video inside the jwplayer and error console showing no error.I'm using the following code.plz let me know how can I fix it?
$.ajax {
type: 'POST',
url: 'modules/oneclickorder.php?divid=' + DIVID,
success: function (data) {
alert(data);
$("#oneclickorder1").html(data);
tb_show('Welcome', '#TB_inline?height=700&width=550&inlineId=' + DIVID + '&modal=true', null);
}
})
oneclickorder.php page code
echo '<div id="testvideo" style="display:none";>
<div id="playvideo" style="width:549px;height:550px; background-color:#FFF;"></div>
<script type="text/javascript" src="https://www.markettrendsignal.com/js/jwplayer.js"> </script>
<script type="text/javascript">
jwplayer("playvideo").setup({
flashplayer: "https://www.markettrendsignal.com/js/player.swf",
file:"reversalpatternsplugin.flv",
height: 330,
provider: "rtmp",
streamer: "rtmp://s2qwctg3okfahu.cloudfront.net/cfx/st",
width: 550,
autostart:true
});
</script>
It's acting that way because the js file for jwplayer isn't loaded when you execute the script the first time.
Here's a breakdown of what's happening.
When you first call the ajax function, you return the HTML code which will download the .js file and execute the javascript code. Problem is, it executes the code before the file is loaded. Remember this is injecting javascript... there is no document.ready... you're already passed that.
The second time you call the function it works because the .js file is already loaded (from the first time).
Solution: Add the js file in the main document.
plugins/content/jw_allvideos/jw_allvideos/includes/js/wmvplayer/silverlight.js
Copy All code
Change the encoding to ANSI
Paste all code, and save.
Related
I've got a dynamic page which I'm loading from an external PHP file when the booking link is clicked.
My issue is the jQuery code I need to run straight after it sometimes tries to execute before the PHP page is fully loaded (the follow and remove parts specifically). So when I try load the div, jQuery works sometimes, and other times not.
From what I've seen on other examples $(document).ready(function() is supposed to prevent the jQuery executing until the page is fully loaded, however since I'm loading a specific div (content) and not the entire page it seems to not work?
$(document).ready(function(){
$(document).on('click', '.booking', function (){
$('#content').load('calendar.php');
$.getJSON(url,data, function(data) {
$.each(data, function(index, data) {
$("#blocksid"+data.slot_id).css("background-color","#009cd0");
$("#follow"+data.slot_id).hide();
$("#remove"+data.slot_id).show();
});
});
return false;
});
});
Thanks in advance for any assistance!
To achieve what you are expecting in a predicable way you should run dependent javascript code
after loading content to div. Just create a call-back function for load method and have your dependent code inside it.
$('#content').load("calendar.php", function() {
//put the code here, that you need to run after loading content to above div
});
You need to set:
$.ajaxSetup({ async: false });
and then turn it back on by:
$.ajaxSetup({ async: true });
or use
$.ajax({
async:false
});
Ok so the title is a little odd but wasn't sure how to describe problem in 1 line (feel free to update it) so I'll explain the best I can.
I load content from a file foobar.php into a div #foobar in index.php like so:
$('.foo').click(function(){
var id = $(this).attr('id'),
cls = $(this).attr('class'),
dstr = 'id='+id;
if(cls=='bar'){
$.ajax({
type:'GET',
url:'foobar.php',
data:dstr,
cache:false,
success:function(a){
// this is where it calls for the content of foobar.php
$('#foobar').html(a);
}}
)
}
return false;
});
in foobar.php it queries database and shows the results depending on unique id which works fine, but it also has a form which I'm trying to use with jquery.form.
Now if I add the script links in foobar.php it works great:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.min.js"></script>
but these jquery files are are loaded in index.php so am wanting if possible to get jquery.form to work using the already loaded jquery files from index.php.
I know it doesn't currently work as it has something to do with the fact the content of foobar.php is being loaded into/via a dom and so as the lines above are not present in foobar.php it can't call them?!
You will have to call this (with your form selector instead of "#myForm") after you have loaded the page within the success function.
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
I have a PHP script that takes around 1 minute 20 seconds to load as it fetches data from other websites. However I need some way to show the user that the page is loading. Something like 'This page is loading and may take up to 2 minutes' with a .gif loading images.
I have tried jquery:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
// Put an animated GIF image insight of content
$("#content").empty().html('<img src="http://www.website.com/images/loading.gif" />');
// Make AJAX call
$("#content").load("http://website.com/page.php")
</script>
<div id="content">
Content to load here!
</div>
</body>
</html>
But the page is blank (don't know if i'm implementing something wrong).
Is there any other way of doing so?
I have looked at other questions but can't find anything that matches what I need, that I can get to work.
Thanks,
Jack.
You won't get a response from the server, until the script has finished loading. Therefor you have to 'prepend' the page with another page, which shows the loading part. That page should call the script you want to execute, through for example an AJAX call.
You can use an AJAX call with beforeSend and success events:
$.ajax({
url: "http://website.com/page.php", type: "POST",
beforeSend: function() {
$("#content").html('<img src="images/loading.gif" />');
},
success: function(data) {
$("#content").html(data);
}
})
you got the script tags wrong. you need to close the script with the src call, and open a new one for the actual code
Also, you need to load the DOM before using JQuery to fetch objects. You can use $(document).ready() or place your script after the DOM element.
Where is your jquery loaded in the file? If its loaded at the top, you should wait for the dom to load before executing its JS.
http://api.jquery.com/ready/
i have a simple setup, with php pulling html content from a database. if i go to my template page, it loads the data and returns it to the browser via a simple php echo ... not rocket science.
now, i've written an html file using jquery and an ajax call. i load the html file in my browser and the javascript / ajax query works.
when i load the html into the database and print it out via the php / echo, the content is the exact same when i view the source, but the ajax query doesn't execute.
<html>
<head>
<title>random query - api - get</title>
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
</head>
<body>
<pre>
executing the GET method
<script language="javascript" type="text/javascript">
$.ajax({
type: "GET",
url: "http://some-rand.om.api.com",
data: "011b38b8-011f-4b03-bb21-4c5bb26600b3",
success: function(msg){
alert( msg );
}
});
</script>
</pre>
</body>
</html>
Any comments / suggestions would be great. What I find bizarre, is i have no problem copying the source of http://jquery.com/ and pasting it into the db and doing the php / echo. this works fine. maybe an onLoad() would help...hm.
The issue is outlined in the following url:
XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin
When I load the javascript console in chrome I get this:
XMLHttpRequest cannot load http://some-rand.om.api.com/user?011b38b8-011f-4b03-bb21-4c5bb26600b3. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
To resolve the problem, on the api vhost, in the code that serves the content accessed by the ajax query, i added this (it is also php):
header('Access-Control-Allow-Origin: http://some-rand.om.client.com');
Now when I access it, it's all good and loads as expected. So, infact, it wasn't related to it being stored in the database, php or javascript. It was related to cross site scripting.
Or, to be super lazy (probably not a great idea...):
header('Access-Control-Allow-Origin: ' . $_SERVER["HTTP_ORIGIN"]);
If in your description of the problem you are listing the whole of the code, then the JavaScript should be wrapped in a $(document).ready(function(){ ... });.
i.e.
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://some-rand.om.api.com",
data: "011b38b8-011f-4b03-bb21-4c5bb26600b3",
success: function(msg){alert( msg );}
});
});
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you