ajax css not loading

PHP_CHILD · February 12, 2013

i want to reload parts of my page with the css intact. am using this code to load my css files but doesn't seem to work. if u could where is that am going wrong??

<script type="text/javascript">
$(document).ready(function(){
$.ajax({
 url:"css/style.css",
 success:function(data){
   $("<style></style>").appendTo("head").html(data);
 }
})
})

function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}


var http = createObject()


/* -------------------------- */
/* LOGIN */
/* -------------------------- */
/* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
var nocache = 0;
function login() {
// Optional: Show a waiting message in the layer with ID ajax_response
document.getElementById('login_response').innerHTML = "Loading..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var username= encodeURI(document.getElementById('username').value);
var password = encodeURI(document.getElementById('password').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', '/login.php?username='+username+'&password='+password+'&nocache = '+nocache);
http.onreadystatechange = loginReply;
http.send(null);
}
function loginReply() {
if(http.readyState == 4){ 
var response = http.responseText;
if(response == 0){


alert('Login failed! Verify user and password');



} 
else {
alert('Welcome'+response);
window.location='home.php';
}
}
}
function forgot()
{



document.getElementById('login_blue_hdr').innerHTML = "done.."


}

</script>
</head>

thanks in advances

jazzman1 · February 12, 2013

What debugging steps have you taken so far, so I see many places which could go wrong.

Which tools do you use to debug Javascript?

PHP_CHILD · February 13, 2013

What debugging steps have you taken so far, so I see many places which could go wrong.

Which tools do you use to debug Javascript?

no this is my first javascript usage.. i just want to have css apply even when i use it 2 reload parts of pages... i just get without-css-formatted data even when i use ID to echo it..

document.getElementById('login_blue_hdr').innerHTML = "done.."

like this....

GKWelding · February 13, 2013

jQuery ajax will initialise data as an empty string because the CSS file does not contain an overall block level element. I would change it to

var script   = document.createElement("script");
script.type  = "text/css";
script.src   = "/css/style.css";
document.body.appendChild(script);

jazzman1 · February 13, 2013

@PHP_CHILD, how to you expect investigating your scripts for Javascript errors without using some JS debugger tools?

If you're using Mozilla Firefox, I strongly recommend you to check the documentation of firebug, it's a really very powerful debugging javascript tool - http://getfirebug.com/

Anyway, moving on.....why did you try to mix up jquery and core Javascript?

I rewrote your script and it seems work to me.

1. index.html

<html>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
	 $.ajax({
		 url:"css/style.css",
		 success:function(data){
			 $("<style type=text/css>").appendTo("head").html(data);
		 }
	 })
 });

 function createObject() {
	 var request_type;
	 var browser = navigator.appName;
	 if(browser == "Microsoft Internet Explorer"){
		 request_type = new ActiveXObject("Microsoft.XMLHTTP");
	 }else{
		 request_type = new XMLHttpRequest();
	 }
	 return request_type;
 }


 var http = createObject()


 /* -------------------------- */
 /* LOGIN */
 /* -------------------------- */
 /* Required: var nocache is a random number to add to request. This value solve an Internet Explorer cache issue */
 var nocache = 0;
 function login() {
	 // Optional: Show a waiting message in the layer with ID ajax_response
	 document.getElementById('login_response').innerHTML = "Loading..."
	 // Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
	 var username= encodeURI(document.getElementById('username').value);
	 var password = encodeURI(document.getElementById('password').value);
	 // Set te random number to add to URL request
	 nocache = Math.random();
	 // Pass the login variables like URL variable
	 http.open('get', '/login.php?username='+username+'&password='+password+'&nocache = '+nocache);
	 http.onreadystatechange = loginReply;
	 http.send(null);
 }
 function loginReply() {
	 if(http.readyState == 4){
		 var response = http.responseText;
		 if(response == 0){


			 alert('Login failed! Verify user and password');



		 }
		 else {
			 alert('Welcome'+response);
			 window.location='home.php';
		 }
	 }
 }
 function forgot()
 {

	 document.getElementById('login_blue_hdr').innerHTML = "done.."


 }

</script>

</head>

<body>

<span>I have nothing more to say... </span>

<div id="foo">FOO! </div>

</body>
</html>

2. style.css


/*
Document : style
Created on : Feb 13, 2013, 7:13:08 AM
Author	 : jazzman
Description:
 Purpose of the stylesheet follows.
*/

/*
TODO customize this sample style
Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

div#foo {

background-color: yellow;
}

Sign In

ajax css not loading

Recommended Posts

PHP_CHILD

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

PHP_CHILD

Link to comment

Share on other sites

GKWelding

Link to comment

Share on other sites

jazzman1

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information