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 mon 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);
});
});
});
PHP: jason2.php
$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);
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>
ANSWER
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
$(".deletemerk").css("border","3px solid red");
});
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 mon 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);
});
});
});
PHP: jason2.php
$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);
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>
ANSWER
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
$(".deletemerk").css("border","3px solid red");
});
3 Answers
Reset to default 4Shorthand properties (such as border) are not supported by jQuery.css().
http://api.jquery./css/
If you want to use all the three properties of border, try defining them independently , it might solve your problem.
I'm not sure this will solve your problem, but I would start by trying to clean up the way you're making that link. You may have missed one or two quotes. Instead of the confusion of escaping or failing to escape double quotes, just surround your string with single quotes:
var merkTag = '<a class="deletemerk" href="http://localhost/website/remove_merk.php?id='
+ this.pkFavorietemerken
+ '">'
+ this.merken
+ '</a>';
This leaves you free to use double quotes when you're building an HTML string. I've used multiple lines here just for clarity's sake. Clarity over brevity.