I am experiencing the strangest behaviour on our website, and it is making things incredibly slow.
My team and I have a website running entirely on AJAX. So for the login, I have some js ajax that loads the login box into our index page. The html containing the login box has a script link in the head. This script listens for the login form submission, and sends the form data to the server for authentication through ajax.
The html that contains the login box only gets loaded once, but the js file that it links to gets loaded multiple times. The amount of times change. From 5 times to 15 times and I cannot see a pattern or anything. This happens everywhere on our site, not just at login time.
This issue really has me stumped and I'm totally stuck. Is it because I have ajax in a js file that is loaded in initially with ajax?
I would really appreciate your insight and help!
EDIT:
As requested, some code:
This is a stripped down version of loadContent() in the Interface.js file. This specific function loads all site content into the content area on index.php. When the page is refreshed, the first thing sent to the function is the location of the login.php file, containing the login box:
loadContent: function(page) {
var self = this;
//just some animations to make things look good
$(self.error).fadeOut(150, function() {
$(self.content).fadeOut(150, function() {
$(self.loading).fadeIn(150, function() {
$.ajax({
url: page,
success: function(data) {
//response data
var $response = $(data);
$(self.content_1).html($response);
//definitions for contentbox-2
self.contentHeading_2.html("Replies:");
self.content_2.html(postReplies);
//redisplay the content after it has loaded in.
$(self.loading).fadeOut(150, function() {
$(self.content).fadeIn(150, function() {
// Content faded in
});
});
},
error: function() {
$(self.loading).fadeOut(150, function() {
$(self.error).fadeIn(150, function() {
// Error faded in
});
});
}
});
});
});
});
this.page = page;
}
And then the login.php file:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div class="padded loginphp">
<div id="loginbox">
<!-- the login box comes here
</div> <!-- #loginbox -->
</div>
</body>
</html>
And the login.js file:
$(document).ready(function() {
$('#honeyloginform').submit(function(event) {
//event.preventDefault();
login();
return false;
});
});
function login() {
$('.errorinputfields').removeClass('errorinputfields');
if (isEmpty($('#username'))) {
$('#username').addClass('errorinputfields');
$('#username').focus();
return;
}
if (isEmpty($('#password'))) {
$('#password').addClass('errorinputfields');
$('#password').focus();
return;
}
$('#honeyloginform').fadeOut(100, function(){
$('#loginbox .loading').fadeIn(300, function(){
var pword = $('#password').val();
var remember = "no";
if ($('#remember').is(':checked')) {
remember = "yes";
}
var JSONobj = {
username: $('#username').val(),
password: pword,
rem: remember
};
$.ajax({
url: 'ajax/login.php',
data: JSONobj,
success: function(data) {
//alert(data);
var JSONobj = JSON.parse(data);
if (JSONobj.Success) {
Interface.login(); //just loads the landing page after login
//window.setTimeout('location.reload()', 300);
} else {
$('#loginbox .loading').fadeOut(300,function(){
$('#honeyloginform').fadeIn(300);
});
$('#username').focus();
$('#loading-message').text(JSONobj.Message).show();
}
}
});
});
});
}
I've managed to find the problem, and fix it!
I've made a change to my interface layout, and as a result, the three selectors, $(self.error), $(self.content) and $(self.loading) each contain more than one element, where it always only contained one each.
This seems to cause the callback functions to be compounded or something, as everything inside the final callback in loadContent() was called 9 times.
So it was a simple case of redefining the selectors, so that they refer to one element each.
Related
I've started using ajax requests recently. I am making a mobile web application where I am to the request for data on PHP side server script. The javascript function is to automatically execute when the user navigates to the page. But the script seems not to run until I refresh the page, here is my javascript code.
<script>
$( document ).ready(function(){
Date.prototype.yyyymmdd = function() {
var yyyy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};
function requestContent() {
var date = new Date();
$.ajax({
type:'POST',
url:'php/app/adminTimeline.php',
data:{
date: date.yyyymmdd()
},
success: function(data) {
if (data == '') {
alert("No data found!");
} else {
// $("#loading_spinner").css({"display":"none"});
$('#timeline-content').prepend(data);
}
},
error: function(data) {
// $("#loading_spinner").css({"display":"none"});
alert("Something went Wrong!");
}
});
}
window.onload = requestContent();
});
</script>
The document.onready method and window.onload the method seems not to be working too.
Ps: I have the Jquery library linked in the header too.
Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
https://learn.jquery.com/using-jquery-core/document-ready/
Also you're calling requestContent()
window.onload must be function, not returning value.
$(document).ready(function(){
// here you ajax
}
https://jsfiddle.net/cqfq5on5/1/
The code window.onload=requestContent(); will execute when the window loads, not necessarily when the entire document has loaded.
However where you create the date object, uses this, which executes after the document is fully loaded
$(document).ready(function(){
//Code
});
This means, that the POST request will be made once the window loads, which is before the document is fully loaded, thus, that date object will not exist until the page is refreshed, at which point the Javascript was likely cached. Also another answer (#sagid) pointed out, window.onload cannot be a returning value but must be a function.
i.e.
window.onload=function(){
//Code
};
This means, your solution is to change window.onload=requestContent(); to
$(document).ready(function(){
requestContent();
});
Good luck!
I have created one application in that there is one text box for searching information from table. Although i have written the code when we enter the character in search text box, after accepting one character control goes out of textbox.
this is my code for searching`
<script type="text/javascript">
$(document).ready(function()
{
var minlength = 1;
$("#searchTerm").keyup(function () {
value = $(this).val();
if (value.length > minlength )
{
searchTable(value);
}
else if(value.length < minlength)
{
searchTable("");
}
});
});
function searchTable(value)
{
$.ajax({
type: "GET",
url: "dispatient.php",
data:({search_keyword: value}),
success: function(success)
{
window.location.href = "dispatient.php?search_keyword="+value;
$("#searchTerm").focus();
},
error: function()
{
alert("Error occured.please try again");
},
complete: function(complete)
{
$("#searchTerm").focus();
},
});
}
<input id="searchTerm" Type="text" class="search_box" placeholder="Search"
value = <?php echo $_GET['search_keyword'] ?> >
`
Please suggest to me..
thanks in advance..
value is default attribute of javascript try to change the variable name of value into something like searchData
In your success callback, you are redirecting the page to dispatient.php. I believe, this is the same page that has the search functionality. Once you redirect, the page is reloaded again and there is no point in writing:
$("#searchTerm").focus();
Since, you are already using AJAX, try loading the data from success on to your page through JavaScript/jQuery without reloading the page.
create one div and load your data in that instead of reloading entire page.
try something like this instead of ajax Call
<div id="searchResult"></div>
$("#searchResult").load("search.php?search_keyword=value",function(){
//your callback
});
I am trying to directly load a page using ajax. Here are the details:
HTML:
<div id="feedback"> </div>
<script type="text/javascript" src="script.js"></script>
script.js:
$(document).ready(function() {
$.ajax({
url: 'do.php',
success: function(data){
$('#feedback').html(data);
});
});
do.php:
<?php
//Do whatever...
echo "Done!";
?>
What I am seeing is: the page first loads, and there is a delay before the "feedback" div gets written. How can I solve this?
As far as I know of course it will have that delay. Suppose your page containing <div id="feedback">[…]</div> is loaded at 0th second now:
$(document).ready(function() {
$.ajax({
url: 'do.php',
success: function(data){
$('#feedback').html(data);
});
});
Is called as apparently it’s visible when document loads. So suppose its called at 3rd second when the document is ready—you can refer to this page for details—now you will be seeing that feedback div blank for 3 seconds.
I can suggest 2 things:
You can place a loader image by default inside the div so your code will change to <div id="feedback"><img src='loader.gif'></div> (Assume you have the loader.gif in the same directory of the page). By doing this you will make the user visually understand that some processing is going on and will load data.
Instead if you can place file_get_contents() or include() so it will look something like this <div id="feedback"><?php file_get_contents('do.php');?></div> or <div id="feedback"><?php include('do.php');?></div> As far as I know file_get_contents will execute the page and then load while include will load and then execute hence in include() you have the variables in the page available whereas in file_get_contents are not available but CSS would work in both cases.
You could start loading immediately and then add the data when everything has completed.
var _data = null;
var _ready = false;
$.ajax({
url: 'do.php',
success: function(data){
_data = data;
tryAddData();
}
});
$(document).ready(function() {
_ready = true;
tryAddData();
});
function tryAddData(){
if(_ready && _data !== null){
$('#feedback').html(_data);
}
}
I am using Malsup's AJax form plugin.
What I have going is a "chat" page, basically a div that is being refreshed every 2 seconds, and refresh when the user submits something to the chat window.
Rough HTML layout of page:
<div id='refresh_openmsg'>
<div id='chatdiv'>Chat window here</div>
</div>
<div id='reply_block'>
<form id='send_msg_form'>Basic form goes here</form>
</div>
JS:
//create timer to refresh chat window every 2 seconds
<script type='text/javascript'>
$(document).ready(function() {
refresh_openmsg = setInterval(function (){$('#refresh_openmsg').load('messaging.php?view='+the_page+' #refresh_openmsg');}, 2000);
});
</script>
//This is what happens when the form is submitted
<script type='text/javascript'>
$(document).ready(function() {
var options = {
target: '',
dataType: 'html',
beforeSubmit: showRequest_sendmsg,
success: showResponse_sendmsg
};
$('#send_msg_form').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
});
function showRequest_sendmsg(formData, jqForm, options) {
return true;
}
function showResponse_sendmsg(responseText, statusText, xhr, $form) {
$("#reply_block").load('messaging.php?view='+the_page+' #reply_block', function() {
$('#reply_area').focus();
$("#refresh_openmsg").load('messaging.php?view='+the_page+' #refresh_openmsg', function() {
$("html, body").animate({ scrollTop: $(document).height() }, 500);
});
}).focus();
}
</script>
//on showResponse, I'm reloading the #reply_block div, and reloading the #refresh_openmsg div (#refresh_openmsg div is also being reloaded every 2 seconds)
The issue I'm running into is that the form is being submitted multiple times, sometimes twice, sometimes 3 times, and sometimes 4 or 5. Very strange, i've built similar pages before and have never ran into this issue. I know it's something with my code, and the never ending refreshes, but that's my only option at the moment. Anyone see a problem with this?
I've tried putting .die() before the .live event when submitting the form but that did not fix the issue.
You are reloading reply block div which is causing this piece to be triggered, hence after every load one more listener is getting added
$('#send_msg_form').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
you can try using like this:
$('#send_msg_form').live('submit', replyBlockDivLoaderHandler);
function replyBlockDivLoaderHandler(event){
if(event.handled != true){
$(this).ajaxSubmit(options);
event.handled = true;
}
}
So, for some reason my script refuses to work, although it seems to be correct.
I tried using $.ajax instead, but not working with that either. Any ideas what's gone wrong?
<script>
$(document).ready(function() {
$('#saveForm .submit').click(function() {
var _user = $('#saveForm .user');
_userId = $('#saveForm .userId');
_password = $('#saveForm .password');
$('#saveForm').append('<p>Loading...</p>');
$.post("ajax/fetchPhotos.php", {user:_user, userId:_userId, password:_password}, function(data) {
alert(data);
});
return false;
});
});
</script>
In ajax/fetchPhotos.php i have this:
<?php
set_time_limit(0);
session_start();
require_once("includes/functions.php");
require_once("includes/pclzip.lib.php");
/*
Huge block of code here (commented out for the moment)
*/
echo "wut?";
So, when clicking .submit, it should send a request to fetchPhotos.php with three params and then alert "wut?". Right now the page hangs in chrome.. nothing happens. In firefox the page just refreshes. I do get one error in the console, but i only see it for a split second as the page refreshes directly.
Thanks,
Pete
you must use the .val() method to get the value of the inputs.
try this way:
<script>
$(document).ready(function() {
$('#saveForm .submit').bind('click', function() {
var
user = $('#saveForm .user').val(),
id = $('#saveForm .userId').val(),
password = $('#saveForm .password').val();
$('#saveForm').append('<p>Loading...</p>');
$.post("ajax/fetchPhotos.php", {user:user, userId:id, password:password}, function(data) {
alert(data);
});
return false;
});
});
</script>
It seems syntax related problem and also try with absolute url or can do in this way
new Ajax.Request("ajax/fetchPhotos.php", {
method: 'post',
parameters: 'id='+id,
onComplete: function(transport) {
alert(transport.responseText);
}
});