phph won't "live update" while using ssl - javascript

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

Related

How can I make an AJAX application similar to nodebb?

I am very new to ajax and am really struggling. My end goal is to make a forum software like nodebb. I've already made a php forum but decided not to use it because it just seemed old unlike faster looking forums like nodebb. What I'm trying to understand is how to make multiple tabs that display different information each but keep the same data for the header. I understand this is probably a very simple thing to do, but currently I am unable to accomplish this.
https://dogecraft.net is a great example of what I'm trying to accomplish.
If you click on the different tabs, it loads information in each one. I tried this but I had trouble with the url. When I reloaded, it simply just loaded my new file and that's not what I want.
(Yes, I am using a local jquery file. Jquery isn't the issue.)
I've tried w3schools but didn't find really helpful information
I've also tried many other websites.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$( "#one" ).click(function(){
$("#div1").load("/one/").hide().fadeIn();
window.history.pushState("object or string", "Title", "/one/");
});
});
$(document).ready(function(){
$( "#two" ).click(function(){
$("#div1").load("two.html").hide().fadeIn();
});
});
</script>
</head>
<body>
<button id='one'>Page one</button> <button id='two'>Page two</button>
<h2>This text never changes :)</h2>
<div id="div1"></div>
</body>
</html>
I would like to have a homepage 'index.html/php'
I need a button to load one page of content (one.html/php) and then another button that loads another page of content (two.html/php).
On refresh, I would like it to keep the same content that was on the homepage including the buttons in the header.
You could make an Ajax call to your html/php to retrieve the html code and then inject the content on your div. Here is an example:
$(document).ready(function() {
$("#one").click(function() {
$.ajax({
url : 'http://myserver.com/myhtmlpage.html',
success : function(html) {
$("#div1").html(html);
}
});
});
$("#two").click(function() {
$.ajax({
url : 'http://myserver.com/myphppage.php',
success : function(html) {
$("#div1").html(html);
}
});
});
});
When you click a button, an ajax call is made, and if succesful, the success function will be called. The first parameter has the html code of the webpage you requested. Then you can use the html function of jQuery you can inject it on your div.
A couple of tips:
You might want to use only one onready function, no need to declare it several times
You might consider returning a json object with the data instead of a php page. This will be useful later on if you consider using a framework such as Angular or Vue. If you can generate a JSON file on your php such as this:
{
"name": "John"
}
Then you could do something like this:
$("#two").click(function() {
$.getJSON({
url : 'http://http://myserver.com/myphppagethatservesjson.php',
success : function(json) {
$("#div1").html("<h1>My name is " + json.name + "</h1>");
}
});
});
Then it will render "My name is John".
This could be improved a lot,but I hope it could help you a bit.

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

Trouble getting XML data to show on HTML using jQuery

I'm working on my new PC builds website and I have trouble getting XML tag with specific attribute to show up in my HTML <p> element. My XML looks like this:
<?xml version="2016.6" encoding="UTF-8"?>
<parts>
...
<HDDs>
<hdd id="1">
<name>DiskOne</name>
<price>50</price>
</hdd>
<hdd id="2">
<name>DiskTwo</name>
<price>40</price>
</hdd>
</HDDs>
...
</parts>
I want to find tag <hdd> with attribute id="2" in above XML and show its child's name content in HTML <p> element, which has the id="test-xml". I used this jQuery code to get data from XML and show that in <p>:
function loadHDDs(name)
{
$.ajax({
type: "GET",
url: 'data/parts.xml',
dataType: "xml",
success: parseHDDsXml
});
}
function parseHDDsXml(xml, name)
{
$(xml).find('hdd[id="2"]').each(function(){
var name;
name = $(this).children('name').text();
$("#test-xml").text(name);
});
}
I found the code in another website and I don't really know, what do I need to write in brackets after loadHDDs, so I wrote name. I don't know how to cleanly make the script execute when the page is loaded, so I added onload="loadHDDs();" to the <body> element on my page. I use Google Chrome debugger to find errors. When I tested my page locally, on my computer, debugger, of course showed that XMLHttpRequest cannot load. I uploaded my project to the server and I receive no errors in the Chrome debugger at all, but the text in <p> element doesn't change to the XML text. What am I doing wrong? Maybe something is wrong with my script? Or XML document? Maybe I just don't know to execute jQuery script and onload just doesn't work? Please, help me! I'm a beginner in jQuery and Javascript, so I kindly ask you to show me the easiest and most understandable way of fixing the problem.
Thanks in advance!
EDIT: I don't have enough reputation to comment. I added error function to my Ajax as Nayeri suggested and now I get an error that loadHDDs is not defined. I don't understand that. We can clearly see function loadHDDs(name) in my script. I have checked the spelling a hundred times.
Add error function to your ajax to see your errors :
$.ajax({
type: "GET",
url: 'data/parts.xml',
dataType: "xml",
success: parseHDDsXml,
error : function (a,b,c){
console.log(a, b, c)
}
});
then your xml file seems is wrong so Remove the <?xml version="2016.6" encoding="UTF-8"?> line of your xml file

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

How to load ajax data into DIV without using .get() or .load()?

I have been given a URL by a partnering company to load content into a DIV. We put the following onto a page:
<div id="catalog"></div>
And then use .get() to put content into it. A problem arises due to the fact that we're using jQuery 1.3.2 on some of the older sites, and the engineering department is not going to update that any time soon. Both .get() and .load() are giving me errors.
I tried things such as:
$(document).ready(function () {
$.ajax("http://appserv.ourpartneringcompany.com/catalog/?acct=12345",function(data){
$('#catalog').html(data);
});
});
The error goes away, but the data doesn't load. Could I use jQuery.ajax()?
I don't think jQuery 1.3.2 supports that syntax.
Try modifying to:
$.ajax({
url: "http://....",
type: "GET",
success: function(data){
$('#catalog').html(data);
}
});

Categories