How can i get this to load faster?? using jquery

geekisthenewsexy · September 16, 2010

hi, i've been working on this script to check whether a certain username is available or not.

i first tested it on a localhost,i'm using wampserver before i transferred it online on the site i'm working. but then when i tested it online, the script takes too long to reload..and i think it never does. it just says "please wait..". i waited but it won't check..

i don't think there are errors in it cuz it works fine on my localhost..i dont know.maybe you guys can help me?please?

this is the code for jscript:


<script src="jquery.js" type="text/JavaScript" language="JavaScript"></script>
<script language="javascript">
$(document).ready(function()
{
$("#username").blur(function()
{


    //remove all the class add the messagebox classes and start fading
	$("#msgbox").removeClass().addClass('messagebox').html('please wait..').fadeIn("slow");
	//check the username exists or not from ajax
	$.post("user_availability",{ username:$(this).val() } ,function(data)
        {

	if(data==ok)
	  {

	  	$("#msgbox").fadeTo(200,1.0,function()  //start fading the messagebox
		{ 
		  //add message and change the class of the box and start fading
		  $(this).html('Name is available to register!').addClass('messageboxok').fadeTo(200,10);	
		});

	  }
	else
	  {
	  	$("#msgbox").fadeTo(200,1.0,function() //start fading the messagebox
		{ 
		  //add message and change the class of the box and start fading
		  $(this).html('This Name Already exists!').addClass('messageboxerror').fadeTo(200,10);
		});


         		 }

        });

});
});

</script>

code for css:

<body>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
.top {
margin-bottom: 15px;
}
.messagebox{
position:absolute;
width:100px;
//margin-left:30px;
border:1px solid #c93;
background:#ffc;
padding:3px;
}
.messageboxok{
position:absolute;
width:auto;
//margin-left:30px;
border:1px solid #349534;
background:#C9FFCA;
padding:3px;
font-weight:bold;
color:#008000;

}
.messageboxerror{
position:absolute;
width:auto;
//margin-left:30px;
border:1px solid #CC0000;
background:#F7CBCA;
padding:3px;
font-weight:bold;
color:#CC0000;
}

</style>

<form method=post name=f1 action='dd3ck.php'>
<div align="left">
<div class="top" ><br>
  Please move the focus out of the box to check the availability of Name
</div>
<div >
   Name : <input name="username" type="text" id="username" value="" maxlength="15" />
   <span id="msgbox" style="display:none">
<?php 
include("user_availability.php");
?>
</span>
</div>
</div>

this is the code for "user_availability.php"


<?php
$con = mysql_connect("localhost","wmsuipil","WNSU2345");
if (!$con)
  {
  die('Could not connect: ' . mysql_error());
  }
mysql_select_db("wmsuipil_sampledb", $con);
@$username=intval($_GET['username']);
$sql="SELECT DISTINCT name,id FROM name WHERE name='$username'";
$result=mysql_query($sql);
$count=mysql_num_rows($result);
if($count!=1)
{
//user name is available
echo "ok";
}
else
{
//user name is not availble
echo "not ok";
} 
?>

Adam · September 16, 2010

Try checking the HTTP headers with the FF add-on Live HTTP Headers. That may give a clue as to why it's not working..

geekisthenewsexy · September 22, 2010

hi,uhm how does this work exactly? and how about for IE?

Adam · September 22, 2010

I'm not too sure with IE if you can monitor the headers, but if the problem exists in FF as well can you not just use Live HTTP Headers?

geekisthenewsexy · September 23, 2010

hey, i've downloaded the software but the problem is i don't know how to use it..i'm not familiar with it.. :-[

do you have any suggestions? :-\

Adam · September 23, 2010

Open up Live HTTP Headers, clear the window, check "Capture" if not already, submit the AJAX request. Helps not to have other applications open, say Gmail for example, that will periodically make requests as well. After you make the request, analyse the headers for any clues as to why this isn't working. The HTTP status (200, 404, 301, etc) may hold the most obvious clue.

I wasn't saying this would definitely provide the answer by the way, it's just one of the ways to debug AJAX requests as they happen behind the scenes.

geekisthenewsexy · September 23, 2010

i still don't get it..i'm sorry,i don't know where or what to look for.but here's the headers captured like you said..

http://classlist.wmsu-ipil.com/a.php

GET /a.php HTTP/1.1

Host: classlist.wmsu-ipil.com

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2. Gecko/20100722 Firefox/3.6.8

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Keep-Alive: 115

Connection: keep-alive

Cache-Control: max-age=0

HTTP/1.1 200 OK

Date: Thu, 23 Sep 2010 08:22:47 GMT

Server: Apache

X-Powered-By: PHP/5.2.14

Keep-Alive: timeout=5, max=100

Connection: Keep-Alive

Transfer-Encoding: chunked

Content-Type: text/html

----------------------------------------------------------

http://classlist.wmsu-ipil.com/jquery.js

GET /jquery.js HTTP/1.1

Host: classlist.wmsu-ipil.com

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2. Gecko/20100722 Firefox/3.6.8

Accept: */*

Accept-Language: en-us,en;q=0.5

Accept-Encoding: gzip,deflate

Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7

Keep-Alive: 115

Connection: keep-alive

Referer: http://classlist.wmsu-ipil.com/a.php

If-Modified-Since: Sat, 21 Aug 2010 00:33:46 GMT

Cache-Control: max-age=0

HTTP/1.1 304 Not Modified

Date: Thu, 23 Sep 2010 08:22:59 GMT

Server: Apache

Connection: Keep-Alive

Keep-Alive: timeout=5, max=100

----------------------------------------------------------

Adam · September 23, 2010

I think those are the headers from when you originally load the page? I went to the URL and looked myself anyway. When the AJAX request is submitted the headers contain:

POST /user_availability HTTP/1.1
(...)

HTTP/1.0 404 Not Found

And within your code:

$.post("user_availability",{ username:$(this).val() } ,function(data)

Shouldn't that be "user_availability.php"? Perhaps you had rewrite rules on your localhost that allowed that to work.

Adam · September 23, 2010

I managed to get it working with Firebug, but the file name wasn't the only problem:

if(data==ok)

"ok" above is a string, you need quotes around it.

geekisthenewsexy · September 23, 2010

oh! ok, i'll check it out..

geekisthenewsexy · September 23, 2010

wow,well the loading stuff's ok for now at least. thanks!

but..i think i still have a problem here.. it now says username is available eventhough it isn't..

man,but i got this working on a localhost.. >:(

i may have a problem with my coding don't you think?

Adam · September 23, 2010

I'm surprised this worked on your localhost to be honest.

There's a few odd bits I don't quite understand. In your PHP code you have:

@$username=intval($_GET['username']);

intval will return the integer value of the string, a number. "name" strikes me as a string?

geekisthenewsexy · September 27, 2010

hi,

well kind of.. so sorry bout that. i actually just copied the code,modified it for my program but i guess i got careless

$.post("user_availability",{ username:$(this).val() } ,function(data)

but now it's fine,thanks for your help by the way.appreciate it

Sign In

How can i get this to load faster?? using jquery

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information