PHP Ajax load file with jQuery inside file - javascript

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
});
});

Related

ajax load different page div into a div

i am trying to load a div from another page into a div
the issue is that the other page div is loaded via js as well
this is the code i use
$.ajax({
url: 'https://mywebsite.com/pageiwantoload',
type: 'GET',
success: function(res) {
var data = $.parseHTML(res);
$(data).find('#ajap').each(function(){
$('#here').append($(this).html());
});
}
});
so https://mywebsite.com/pageiwantoload div id ajap is loaded via js as well
is there any way to make the page fully loaded then get the div id ajap ? or any other solution
<span class="woocommerce-Price-amount amount" id="ajap">'+c+"</span>
this is what i am trying to get this is inside a js file
I have a question. Is '#here' div inside https://mywebsite.com/pageiwantoload request? In this case you aren't loading html just parsing it. Always use $(document).ready to wait for a full-loaded page. If you have dependencies between AJAX calls use $.done instead of callbacks.
for example :
$ajax(urlwholoads#here).done($ajax.pageiwanttolad).done(parserequestandLoad#HereDiv).

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();

AJAX isn't loading the other js and css style

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".

Insert text into a div with jquery load

I'm trying to get jquery to load the text from a text file into a div for a blog, but it's not working at all. any help?
this is what I'm using (what I've seen other's use). Also, I'm not testing it locally.
$("#content").load("articlename.txt");
update:
is there any way for it to keep the enters as breaks?
There is a no direct way to get data from external file in jquery.
But via ajax its possible.
$(document).ready(function() {
$("#loadData").click(function() {
$.ajax({
url : "articlename.txt",
dataType: "text",
success : function (data) {
$("#content").html(data);
}
});
});
});
$(document).ready(function() {
$("#content").load("articlename.txt");
});
Wrap your call inside document.ready.

How to update a value by jQuery AJAX

I load content of a page by jQuery AJAX as
$(document).ready(function(){
$('#next').click(function(event){
$.ajax({
url: "load.php?start="+$('#lastid').text(),
success: function(html){
$("#results").append(html);
$("#lastid").empty().load('html #start');
}
});
});
});
In the current document, I have <div id="lastid"></div> and in the external php file <div id="start"></div>
The value for id="start" is updated from database, and it will be transferred to id="lastid". However, this code only works for FIRST click. For default <div id="lastid">1</div>, when clicking the button (id="more") it will read load.php?start=1 and updates the current document to <div id="lastid">11</div> (it's visible). But the second click will not load load.php?start=11
It seems that $('lastid') well reads the default value of <div id="lastid"></div>, but NOT when it has been updated by $("#lastid").empty().load('html #start')
How can I modify this code to work for subsequent clicks?
Wow, what a mess! Let's clean up a bit :)
You need to get rid of the id, as an id has to be unique and if you load another div with id lastId into your site, jQuery will not know which id to get. If you have many divs, each containing the id, you can just read the last id by using ('div:last').text();
So your ajax would look like this:
$(document).ready(function(){
$('#next').click(function(event){
$.ajax({
url: "load.php",
data: "start="+$('div:last').text()
success: function(html){
$("#results").append(html);
}
});
});
});
I also don't know what you do with the last line in the success, as load should be used to load data from the server with ajax, what is what you do by using $.ajax(). Also load() takes at least an url as parameter, see here.
try .live() function instead of .click()
Mate,
What I see from you code is that you are attaching an event once the page is loaded. And this creates a static call with static values that don't get updated as you continue.
My suggestions is to use a function that will feed an Id dynamically to your ajax call as follows:
$(document).ready(function(){
$(document).on("click", '#next', function(event){
$.ajax({
url: buildurl(),
success: function(html){
$("#results").append(html);
$("#lastid").empty().load('html #start');
}
});
});
});
function buildurl()
{
return "load.php?start="+ $('#lastid').text();
}
This will force your event to always call this function and the function to get a fresh value from lastid.
Regards
you have to change your success function because you have multiple #lastid when clicking twice.
try something like:
success: function(html){
$("#lastid").removeAttr("id"); // remove's the id from #lastid
$("#results").append(html); // appends the new one
$("#lastid").empty().load('html #start');
}

Categories