AJAX isn't loading the other js and css style - javascript

I wrote a short AJAX code which is getting Facebook contents from a PHP file (in the PHP file I have declared class="gallery-img-link" as <a> and class="img-responsive img-thumbnail" as <img>).
I have the gallery-img-link on the bottom of site as jQuery script, the problem is when I add those classes by hand its working fine, but when I try to load those by a AJAX get request it seems to doesn't work.
Should I use it in a document.ready function?
I have tried live as well, but that didn't helped at all.
$(document).ready(function(){
$(\'#loading-image\').show();
$.ajax({
method:\'get\',
url:\'ajax.php\',
success:function(data){
$("#facebook").html(data);
},
complete: function(){
$(\'#loading-image\').hide();
}
});
});

For all JavaScript DOM manipulations you Need the DOM to be fully loaded.
Without having your PHP and other Code around I can just correct your JS:
$(document).ready(function(){
$('#loading-image').show();
$.ajax({
method: get ,
url: ajax.php ,
success: function(data){
$("#facebook").html(data);
},
complete: function(){
$('#loading-image').hide();
}
});
});
UPDATE:
Go Into the f12 Developer Tools in your Browser, and go to the Network Tab, then have a llok o all loaded Files, on should be ajax.php. Have a look what the File of that COntent is

Basicly the problem was that the content has been loaded but the "photo java script file" wasnt waiting to get the page loaded, so this function couldnt work at all. Becasue those AJAX loaded after "reading JS function".

Related

phph won't "live update" while using ssl

I am creating a php website which uses javascript to get values from the database every 5 seconds.
Everything is working well when I am visiting the website without ssl connection, but as soon as I type https:// before the url, the page loads but the parts that get updated every 5 seconds keeps stuck on the loading image.
This is how I receive the updates
index.php
<div id="stats">
<center><img src="/images/loading.gif" alt="Loading stats" title="Loading stats" /></center>
</div>
stats.js
//stats
function loadStats(){
$.ajax({
url: 'includes/stats.php',
success: function(data) {
$("#stats").html(data);
setTimeout("loadStats()", 5000);
}
});
}
$(function(){
loadStats();
});
includes/stats.php
Here I receive the databse info and echo the html
Thanks in advance!
edit:
I am using //domain/file.js now for all js/css/images but it still only
works without the ssl connection
It looks like JQuery is not loading correctly.
Lesley Peters points out:
The console outputs this: Uncaught ReferenceError: $ is not defined at stats.js:11
Line 11 is:
$(function(){
loadStats();
});
The parent page making the ajax callback may not be referencing jQuery, furthermore, make sure to load jQuery through HTTPS://.
If this does not work, you might want to consider running directly:
function loadStats(){
$.ajax({
url: 'includes/stats.php',
success: function(data) {
$("#stats").html(data);
setTimeout("loadStats()", 5000);
}
});
}
loadStats();

PHP Ajax load file with jQuery inside file

I am loading a PHP file using Ajax below which works great except I want to be able to load some javascrip/jQuery items within that file to function on the main index page.
prices();
function prices()
{
$.ajax({
type: "GET",
url: "inc/load_prices.php",
cache: false,
success: function(response){
$("#prices").hide().html(response).fadeIn(500);
}
});
}
setInterval(prices, 600000);
Inside load_prices.php I have some stock ticker type output which works fine outside the AJAX call using the below. However when loading the contact via AJAX it wont trigger the webticker.min.js file and wont render properly.
<!-- If loading this without AJAX the ticker works fine -->
<script src="js/jquery.webticker.min.js"></script>
<script>
$("#ticker").webTicker({
duplicate:true,
hoverpause:false,
});
</script>
How do I allow the contents of the prices() AJAX function to render properly when needed to reference jQuery?
Not sure but in load_prices.php
src="../js/jquery.webticker.min.js"
as both are in different directory
If interpret Question correctly, use $.getScript() to load webticker.min.js once. Not certain what purpose is of calling .webTicker() every 600000 ms?
$.getScript("js/jquery.webticker.min.js")
.then(function() {
$("#ticker")
.webTicker({
duplicate:true,
hoverpause:false
});
});

ajax loading php with facebook-Java not working

I have some code on a main page (index.php) that calls a php script (access.php) with javascript, as seen below.
The php (access.php) also has javascript but when I load it into the current page (index.php) then the javascript content in (access.php) is not working. Maybe this can't be done. Any thoughts?
The javascript does fire when I load access.php in a browser by itself.
$.post("access.php",
{FullName : response.name,ID: response.id,Email:response.email,UD:userDevice},
function(data)
{
document.getElementById('Container').innerHTML = data;
});
Perhaps I should have stated this before but it's using the Facebook Java SDK. MY END GOAL: I want to SEND VARS to a php that also has more/new Facebook-Java script that I can run from within the index.php.
This method worked. :)
$( "#Container" ).load( "access.php",
{FullName : response.name,ID: response.id,
Email:response.email,UD:userDevice} );

JQuery .load and html issue

I am trying to use Javascript to load different pages when you press a link. Here is the function I am using to change the page.
function loadPage(url){
$(".body").fadeOut(400, function(){
$(".body").load(url, function(){
$(".body").fadeIn(400);
});
});
};
The problem is, it fades the stuff into the page, but it disappears once the fadeIn is done. The code html from the file is still in the main files html, it just doesn't show up.
I had an issue, and I used this. File in your case would be the url:
var loader = function(file) {
$('.body').fadeOut(500);
$.ajax({
url: file
success: function(data) {
$('.body').html(data);
$('.body').fadeIn(500);
}
});
}
Changed the code to try and match what your looking to do, tested it with just a div with a background and it seems to work okay.
Is this the same as what you have ?
Andrew

null body issue with AJAX call

when i try to do an AJAX call to get some html text, i get a null body file. (Context is i am trying to do a hybrid application on Android and used weinre to check what i have received from the AJAX call)
The AJAX call is within the following code:
$(document).ready(function(){
$("#generate").click(function(){
$.ajax ({
cache: false,
url: "htmlpage1.html",
success: function(html) {
console.log(html);
$("#quote p").append(html);
}
});
});
and the htmlpage1.html is the following
<body>
This is page1
<p><b>And this is some text which has been bolded</b></p>
<p>And this is the link to page 2
</body>
did some research on stackoverflow and tried by luck with the following 'magical' line to the ajax code, the problem is somehow fixed
if(null==document.body){document.body = $('body')[0];}
what is the reason i get this issue in the first instance and how this problem is fixed by this code
if i dont use the magical code line but instead insert a dummy tag in the html_page1 file, i manage to get the html file via AJAX (i.e. null body tag is fixed. )
You could also try to find the body tag before appending it, it might give you the content you need... try playing with the selectors, I had a similar issue before.
$("#quote p").append($(html).find("body"));

Categories