Why is my jQuery.css not working?

I am creating some kind of add / remove tags list that is mySQL related. I was able to get the tags from the database to display using an ajax call, but I cannot do any operation with them. Not even a general style. When I check Firebug, all the html seems to be in place, so I can't figure out what happened. 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 a lot, a lot of research, I finally solved this problem. The code wasn't really wrong, but some of it was out of place. Get.JSON is an asynchronous value, if you want to make any changes using the jQuery.css function you will need to do it inside the callback for 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


source to share


3 answers


Hidden properties (such as border

) are not supported jQuery.css()

.



http://api.jquery.com/css/

+4


source


If you want to use all three border properties, try to define them yourself, that might solve your problem.



+1


source


I'm not sure if this will solve your problem, but I'll start by trying to clean up the way this link was created. You may have missed one or two quotes. Instead of confusing leaving or not leaving 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 gives you the ability to use double quotes when creating your HTML string. I've used multiple lines here just for the sake of clarity. Clarity in brevity.

0


source







All Articles