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

Edited February 13, 2013 by jazzman1

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

Join the conversation

Browse

Activity

Important Information