We Keep Coding

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

Multiply Jquery and JqueryUI objects conflict? (php)

I am trying to put a script together that works with a Jquery object and a Jquery slider that also works with JqueryUI. I'm trying to figure out howto put it all together in a webpage (php) but trying to put just the slider in my webpage breaks both the functions and they don't work properly anymore.
Does anybody has an idea of what i am missing here and how the script fails to work properly?
NOTE REMOVING V1.9 OR V1.3 DOESNT MATTER CAUSE THE SCRIPT STILL WORKS 50%, EITHER THE SLIDER DOESNT WORK OR THE AJAX CALLS IN SCRIPT.JS
*first load all scripts and styles.
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script>
<script src="/shop/templates/Euphoria-Art/js/jquery.limitslider.js"></script>
<script type="text/javascript" src="/shop/templates/Euphoria-Art/js/script.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/sunny/jquery-ui.css" rel="stylesheet" type="text/css"/>
SCRIPT.JS - There are 4 of these objects
$(document).ready(function() {
var form = $('#formB'); // form
var submit = $('#submitB'); // submit button
var alert = $('.pageB'); // div for show page
// form submit event
form.on('submit', function(e) {
e.preventDefault(); // prevent default form submit
$.ajax({
url: '********/offertebeginC.php', // form action url
type: 'post', // form submit method get/post
dataType: 'json', // request type html/json/xml
data: form.serialize(), // serialize form data
beforeSend: function() {
alert.fadeOut();
},
success: function(result) {
if(result.error){
alert.html(result.html).fadeIn();
console.log(e)
}else{
alert.html(result.html).fadeIn();
form.trigger('reset');
}
}
});
});
});

If you must include multiple versions of jQuery, for instance using a plugin which depends on an earlier version, you'll want to use $.noConflict().
Take a look at the docs here, and a bit of a tutorial here

Why neither event.preventDefault() nor 'return false' stop my AJAX form submit action?

When I submit a form with AJAX the event.preventDefault() of jQuery doesn't work.
Here is what my HTML code looks like:
<form method="post" action="my_post_create_url" id="post-form">
<textarea id="post-text" placeholder="Compose a new post"></textarea>
<button type="submit" id="submit-post">Post</button>
</form>
Here is my jQuery code:
$('#post-form').submit(function(e) {
e.preventDefault();
var url = $(this).attr("action");
$.ajax({
type: "POST",
url: url, // 'my_post_create_url'
data: $(this).serialize(),
dataType: "html",
success: function(msg){
alert("Success!");
}
});
});
And here is how I process it in my controller:
public function createAction(Request $request){
// some code here ...
$form->handleRequest($request);
if ($form->isValid()) {
// some code here ...
// ... then redirection
}
return $this->render(...)
}
I even tried the 'return false' at the end of the jQuery code but it still redirects me :(
EDIT 1 :
It seems $('#post-form').submit(function(e) does not trigger at all neither on Chrome nor on Safari, any further help?
EDIT 2 :
I have removed some javascript files in my base HTML file and it now works properly in all browsers. The problem is somewhere else in my js files.

Well, the issue came from the window.popsate which behave differently depending on Chrome (and Safari) or Firefox (and Opera), here was the problematical line in one of my js files:
$(window).on("popstate", function(e) { ... });
And here is some answers for the problem for those who are facing the same issue:
Popstate on page's load in Chrome

jquery popup effect 'onclick' submit button (WITHDRAWN)

Since I am a beginner, I have a beginner's question.
Using the famous fancyBox plugin. It is called in the head like so:
$(document).ready(function() {
$(".fancybox").fancybox();
});
Normally the script is attached by adding the class-name:
<a class="fancybox fancybox.iframe">...</a>
My present difficulty arises because I would like to run the fancyBox pop-up after the user submits a form:
<form action="http://maps.google.com/maps" method="get">
...(google API stuff etc, etc)...
<input type="submit" value="...">
My research to this point has led me to conclude that I probably have to use onsubmit or onclick within the
<input type="submit">
However, my experimentation has proven a futile effort.
Any help would be greatly appreciated.
========================================
UPDATE: (1/7/2013)
I am withdrawing my question because I have apparently wandered into subject matter that is slightly above my head at the moment. I choose not to delete the question in case someone in the future may find something of some use here. Thank you for your help everyone.
My reason: it appears that Google directions does not permit display in <iframe>. That being considered, configuring a workaround for fancyBox would be far too complex. I am abandoning the fancyBox and have gone with plain old Javascript:
as shown here

Post the form using $.ajax gives you the greatest control. You can then control the success and error conditions from the client side.
To do this you will either need to catch the submit event:
$('#form').submit(function() {
ajaxUpdate();
return false;
});
Then create a function:
function ajaxUpdate(){
var formSerial = $('#form').serialize();
$.ajax({
url: '<url to post to>',
dataType: "text",
type: "POST",
data: formSerial,
success: function(text) {
$(".fancybox").fancybox();
},
error: function(text) {
alert('error in posting');
}
});
}
You can then do what you like in the success and error blocks.
To load a window you could add the following to your function:
if(confirm("Do you want to open the directions?")){
$.fancybox({
'titleShow': false,
'width': 370,
'height': 300,
'href': <URL>,
'type': 'iframe'
});
}

Using jquery submit buttoin it can be possible :
$('#target').submit(function() {
$(".fancybox").fancybox();
return false;
});
After fancy box 'ok' button click submit the form ..
Hope this idea will helpfull.

Appending a Div tag not working properly

I am developing MVC 3 application and using razor syntax.
In this application I am giving commenting facility.
I have given the facility to adding a comment and it saved in DB.
and when user clicks on delete button it displays the message as "Clicked".
When user load entity, previously added comments get displayed on page with
delete button and when user click on that button the "clicked" msg appears.
now, when user add a new comment, it saved in DB sucsessfully and also appear on the page
along with Delete button.
now when user click on delete button msg wontcome...
( I append the Div tag while loading the new comment from DB)
I think , there is a issue regarding append, means previous comments Delete button
work well, but when I add button using append it wont works...
Here is the code, saves comment in DB and in sucsess , it creates HTML Code with button to disply the data on the page.
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#AddCommentButton').click(function ()
{
if (document.getElementById('Comment').value != "")
$.ajax({
type: 'post',
url: '/Comment/SaveComments',
dataType: 'json',
data:
{
'comments' : $('#Comment').val(),
'EType' : #Html.Raw(Json.Encode(ViewBag.EType)),
'EId' : #Html.Raw(Json.Encode(ViewBag.EId))
},
success: function (data) {
$("p.p12").append('<button type="button" id = "1" class="deleteComment">Delete</button><br />')
alert(data.Id);
}
});
});
});
</script>
and user clicks on Delete Button I have written this code.
$(document).ready(function () {
$(".deleteComment").click(function ()
{
alert("Clicked");
});
});
For previous comments, when user click on the delete button "Clicked' msg comes but when user clicks on newly added comment's delete button, msg wont come ...

You need to subscribe to the click event of this delete button in a lively manner since it was added dynamically to the DOM. You cannot just use .click() in your document.ready because the delete button doesn't yet exist at this stage. So depending on the jQuery version that you are using there are 3 ways:
.on(), .delegate() or .live().
The recommended approach is .on() which is supported starting from jQuery 1.7:
$(document).on('click', '.deleteComment', function() {
alert("Clicked");
});
And you no longer need to wrap this in a document.ready.
If you are using an older version here's the same with .delegate() (introduced in jQuery 1.4.2):
$(document).delegate('.deleteComment', 'click', function() {
alert('Clicked');
});
And if you are using an even older version of jQuery, well, you should upgrade and if you don't want to upgrade use .live():
$('.deleteComment').live('click', function() {
alert('Clicked');
});
And while I am at your code here are a couple of other remarks.
Replace:
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
with:
<script src="#Url.Content("~/Scripts/jquery.js")" type="text/javascript"></script>
and also replace:
url: '/Comment/SaveComments',
with:
url: '#Url.Action("SaveComments", "Comment")',
And by the way as an alternative to putting the url in your javascript you could directly use the value of your AddCommentButton. You haven't shown it your markup I assume that it might look like this:
#Html.ActionLink("Add a comment", "SaveComments", "Comment", null, new { id = "AddCommentButton" })
And now all that's left is to unobtrusively AJAXify it:
$(document).ready(function () {
$('#AddCommentButton').click(function (evt) {
evt.preventDefault();
var comment = $('#Comment').val();
if (comment == '') {
alert('Please enter a comment');
return;
}
$.ajax({
type: 'post',
url: this.href,
data: {
comments : comments,
EType: #Html.Raw(Json.Encode(ViewBag.EType)),
EId: #Html.Raw(Json.Encode(ViewBag.EId))
},
success: function (data) {
// You probably need to embed the comment id as a HTML data-* attribute
// to the button instead of using a hardcoded id="1" value
// which by the way is an invalid value of an id in HTML:
$('p.p12').append(
$('<button/>', {
'class': 'deleteComment',
'html': 'Delete',
'data-id': data.Id
}).after($('<br/>'))
);
}
});
});
});
and now inside your Delete button click callback you will be able to access the id of the comment to be deleted:
$(document).on('click', '.deleteComment', function() {
var commentId = $(this).data('id');
// TODO: delete the comment
});
Absolutely never hardcode urls in an ASP.NET MVC application. Always use url helpers to generate them. The reason for this is that url helpers take into account the routing setup and the virtual directory in which your application might be running. So if later you decide to change the pattern of your routes or even deploy your application in IIS you will no longer need to go through all your pages and replace those wrongly hardcoded urls for your application to work.