0

I'm calling my server each time a user enters / deletes a key in a search box, retrieving a large list of lists in JSON, which I loop through through in JS. In order to get the data onto my template I add HTML & CSS using Jquery. Here's an example to show what I mean...

<script type="text/javascript">
   $(document).ready(function() {
       $('#input-search').keyup(function(data) { 
        var search = $("#input-search").val();
        $.get("/search/", { search:search }, function(search){
            var matches = (search.search);  
            for (match in matches){
                console.log(matches[match].full_name);
                $(".searchable-container").append("<div>").addClass("items col-xs-12 col-sm-12 col-md-6 col-lg-6").append("<div>").addClass("info-block block-info clearfix").append("<div>").addClass("square-box pull-left").append("<span>").addClass("glyphicon glyphicon-user glyphicon-lg").append("<h5>")
            }});
        });
   });
</script>

I feel like this is not the best way to style my returned data as it's requiring a lot of trial and error, and it looks ugly. For example, using Jinja templates, I can simply add {{ curly braces }} and it calls my data wherever it's needed. I'm just wondering if there is something I'm missing, or a better way to do what I'm doing, given I'm new to JQuery.

Suraj Kapoor
  • 1,615
  • 4
  • 22
  • 34
  • 3
    Why don't you use templates? There are some really lightweight out there, e.g. dot-template. – Dirk Lachowski Aug 14 '14 at 14:06
  • 1
    Agreed. Use a templating library. I prefer Mustache - https://github.com/janl/mustache.js – Michael Aug 14 '14 at 14:08
  • when i do similar stuff, i often use a ` – Mr.Manhattan Aug 14 '14 at 14:08
  • Also, if you are going to be rolling your own, don't use 'append' a million times as it slows the page down. Just use it one time. – Michael Aug 14 '14 at 14:09
  • 2
    I typically would create an Underscore template for this which could do what you're doing, but in a cleaner way. – clint_milner Aug 14 '14 at 14:09
  • I'm currently writing this on Flask, which uses Jinja2 (sorry should have mentioned), so can I still use another template? – Suraj Kapoor Aug 14 '14 at 14:20
  • Thanks! I dug into the Underscore templates and it was exactly what I needed. For anyone else looking, I recommend this post - http://stackoverflow.com/questions/4778881/how-to-use-underscore-js-as-a-template-engine – Suraj Kapoor Aug 14 '14 at 19:36

1 Answers1

0

I suggest you to don't append directly the object. Just create it and then append it. Something like:

var obj1 = $("<div>");
var obj2 = $("<div>");

obj1.addClass(...);
...
$(".searchable-container").append(obj1);
$(".searchable-container").append(obj2);

But this is the way to go IMO.

ziotob
  • 71
  • 3
  • I can see how this is usefull, but is it really the practical way of appending to objects. it's not as if its a resource hog, but just seems to add unnecessary amount of code. IMO – Justin Kyle Parton Aug 14 '14 at 14:14
  • Alternatively you can try to pre instantiate the full structure and then just clone it with the jQuery function to save object instantiations, but somewhere you have to declare the structure. You can try to declare it in the html section, hide it and then clone it for populating with your data, but somewhere it has to be declared, even if using a template. – ziotob Aug 14 '14 at 14:20