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!");
});
Related
I minimized the code snippets to show only the code needed, and the url for the server side file is actually connected to a url on my server.
HTML FILE
<head>
<script>
var btid = 1;
$.ajax({
url: "serverSide.php",
method: "POST",
data: { "btid": btid }
});
</script>
</head>
<body>
<?php include("serverSide.php"); ?>
</body>
serverSide FILE
<?php
$btid = $_POST['btid'];
echo($btid);
?>
DESCRIPTION
So what is going on is when the page loads, the javascript code runs. It creates a variable named btid equal to 1. This variable is then sent to a file on my server that is a php file. I want to echo that variable through php. But when I load the page, I get an error log stating that the code $btid = $_POST['btid']; has an Undefined Index.
I don't think your code is going to work as designed. You are using include("serverSide.php"); in the body of the HTML, but it is never going to have any $_POSTvalues unless you are posting a form.
Your ajax call is not doing anything with the value that is being returned.
I think you should remove the include("serverSide.php"); from the body of your HTML (it is serving no purpose in its current incarnation) and use the returned value of your ajax call to put the value of btid in the HTML (if that is where you want it).
When you use PHP's include as in <?php include("serverSide.php"); ?> PHP will execute the code on the file being included. That is what is causing your error, when the code is first evaluated it has no $_POST['btid'] because you haven't called it yet.
Your javascript will run on page load and make the ajax call correctly, but you are not using the response anywhere. In order to store the response from the Ajax call you need to add a success handler.
If I understood what you are trying correctly, your code should look more like this:
HTML FILE
<head>
</head>
<body>
<div id="response"></div>
<script>
var btid = 1;
$.ajax({
url: "serverSide.php",
method: "POST",
data: { "btid": btid },
success: function(res) {
$('#response').text(res);
}
});
</script>
</body>
What we are doing is making the ajax call and when the call is successful we assign the returned value as the div content. Also, I switched the script tag to the end of the body because we need to be sure all the document has loaded before changing anything (could have used $( document ).ready()).
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've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
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.
I have a main (index) page which loads pages dynamically and places them inside it's div but the Javascript within those pages doesn't execute. Specifically this part
<script type="text/javascript">
$(document).ready(function(){
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
</script>
You will have to use getScript like this:
$('#foo').load('bar.html', function(){
$.getScript("js/fileName.js");
// call a function from fileName.js
});
You will have to put your JS code in that file and call that via getScript and then you can call functions from it as shown above.
Write your javascript in the index.php or write at the bottom of loaded page without document.ready
This is in reality a cross-browser issue: When <div>s are dynamically filled with HTML containing <script> tags, these scripts may or may not run - and this behaviour is different not only between browsers, but also between browser versions.
The only workaround I know of is to extract your JS, send it seperately and execute it after the <div> content has been set.