Search jQuery

jQuery Forum

Why is my jQuery .css function not working?

in Using jQuery • 11 years ago

I'm building some kind of add/remove taglist that is connected with mySQL. I've managed to get the tags from the database to display with a ajax call, but i can't do any kind of operation to them. Not even a common style. When i check with Firebug all the html seems to be in place so i can't figure out what's wrong. Here is my code:

jQuery:

 $(document).ready(function() {

   $("#ontvangenjson").css("border","3px solid red");


   $.getJSON("jason2.php", function(data) {

      $.each(data, function(){

        var merkTag = " <a class=\"deletemerk\" href="+"http://localhost/website/remove_merk.php?id="+this.pkFavorietemerken+">" + this.merken + "</a>";

         $("#ontvangenjson").append(merkTag);

               });

           });

       });

RECEIVED JSON:

[{"pkFavorietemerken":"71","merken":"Nike"},{"pkFavorietemerken":"70","merken":"Le Coq Sportif"},{"pkFavorietemerken":"69","merken":"Converse"},{"pkFavorietemerken":"68","merken":"Champion"},{"pkFavorietemerken":"67","merken":"Adidas"}]

HTML:

<body>
<h1><label for="brands-form-brand">Get JSON data</label> <input type="button" id="knop" value="get JSON" /></h1>
<hr />
<p class="section-title"><strong>JSON Data received</strong></p>
<div id="ontvangenjson"> </div>
</body>

Replies(5)

jakecigar

Re: Why is my jQuery .css function not working?

11 years ago

Yet this works. Perhaps it’s a PHProblem.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#ontvangenjson").css("border", "3px solid red");
		data =[{"pkFavorietemerken":"71","merken":"Nike"},{"pkFavorietemerken":"70","merken":"Le Coq Sportif"},{"pkFavorietemerken":"69","merken":"Converse"},{"pkFavorietemerken":"68","merken":"Champion"},{"pkFavorietemerken":"67","merken":"Adidas"}] 
 		$.each(data, function () {
 			var merkTag = " <a class=\"deletemerk\" href=" + "http://localhost/website/remove_merk.php?id=" + this.pkFavorietemerken + ">" + this.merken + "</a>";
 			$("#ontvangenjson").append(merkTag);
 		});

	})
 </script>
	<title>Untitled</title>
</head>
<body>
<body>
  <h1><label for="brands-form-brand">Get JSON data</label> <input type="button" id="knop" value="get JSON" /></h1>
  <hr />
  <p class="section-title"><strong>JSON Data received</strong></p>
  <div id="ontvangenjson">  </div> 
</body>

</body>
</html>

JΛ̊KE

rick_smee..

Re: Re: Why is my jQuery .css function not working?

11 years ago

Yeah you're right in plain html it does work, i tried this earlier. My json producing php file looks like this:

$merken_lijst = "SELECT favorietemerken.pkFavorietemerken, favorietemerken.merken FROM favorietemerken JOIN bedrijven ON bedrijven.pkBedrijvenID=favorietemerken.fkBedrijvenID WHERE favorietemerken.fkBedrijvenID=$neem_id";

$rows = array();
$sth = mysql_query($merken_lijst);
while($r = mysql_fetch_assoc($sth)) {
$rows[] = $r;
}
print json_encode($rows);

To me everything seems good i really can't get my head arround this.

jakecigar

Re: Why is my jQuery .css function not working?

11 years ago

Are you sure that’s the JSON you get? Did you set a mime header? What does firebug say about the json response?

There is something else that has to be happening!

JΛ̊KE

rick_smee..

Re: Re: Why is my jQuery .css function not working?

11 years ago

After alot, alot,alot of research I've finaly solved this problem. The code wasn't really wrong but a piece of it was misplaced. The get.JSON is asynchronous meaning if you want to make any changes using the jQuery .css function you will need to do that inside the callback for the getJSON.

$.getJSON("jason2.php", function(data) {
var merkTag = "";
$.each(data, function(){
merkTag += " <a class=\"deletemerk\" href="+"http://localhost/website/remove_merk.php?id="+this.pkFavorietemerken+">" + this.merken + "</a>";
});

$("#ontvangenjson").append(merkTag);

// NEW CODE