Coldfusion and Jquery results table formatting

Question

I am using Coldfusion 9 and Sql Server 2008 r2. I am trying to use this live search which displays results.

Original Post is : http://www.raymondcamden.com/index.cfm/2011/2/1/Using-jQuery-to-search-against-different-types-of-content

I want to add a table to this, so I can get it to format. Any help will be great.

This is the Search.cfm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
<script>
$(document).ready(function() {

//http://stackoverflow.com/questions/217957/how-to-print-debug-messages-in-the-google-chrome-javascript-console/2757552#2757552
if (!window.console) console = {};
console.log = console.log || function(){};
console.dir = console.dir || function(){};


//listen for keyup on the field
$("#searchField").keyup(function() {
    //get and trim the value
    var field = $(this).val();
    field = $.trim(field)

    //if blank, nuke results and leave early
    if(field == "") {
        $("#results").html("");
        return;
    }

    console.log("searching for "+field);
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) {
        var s = "";
        s += "<h2>Results</h2>";
        for(var i=0; i<res.fd_table.length; i++) {
            s += "<p><b>uid:"+res.fd_table[i].fd_uid+"</b><br/>Device: "+res.fd_table[i].fd_dev + "<br/>";

        }

        $("#results").html(s);
    });
});
 })

<form>
Search: <input type="text" name="search" id="searchField">
</form>

<div id="results"></div>

Demo From the original post http://www.coldfusionjedi.com/demos/feb12011/test.cfm

This is the end result I am trying to achieve.

http://www.w3schools.com/html/html_tables.asp. This is the typer of outcome that I am trying to achieve. — Seansa, Oct 22 '13 at 19:58
are there any example where i can go look? all ive been finding is extreme table examples in jquery. Want simple one — Seansa, Oct 22 '13 at 20:05
as BDavis suggested if you really want to use a table, you should learn how to dynamically create one :) check this out http://jquerytipsntricks.wordpress.com/2013/08/18/bind-events-to-dynamically-created-elements-using-jquery/ — user2595617, Oct 22 '13 at 20:17

score 2 · Answer 1 · answered Oct 22 '13 at 20:05

You might want to take a look into how to dynamically build a table using JQuery. The way you have posed this question sounds a lot like "Please finish my homework assignment" more then asking for help on a legit project.

If you look into the $.getJSON() function that is there in the code the way the variable s is being used will give you a solid clue as to how this can be accomplished. A table is X number of tr tags for rows with X number of td cells containing the data. From there it is just a matter of looping over the query results rows for your tr tags and each column for your td tags.

Not going to write out the code for you, but I have given you enough to search the JQuery docs to point you in the right direction.

The reason I am asking is because I have no knowledge of jQuery. If you can point me to a similar sample, I would be very thankful to you. — Seansa, Oct 22 '13 at 20:20

score 0 · Answer 2 · answered Oct 23 '13 at 18:28

Here is the result, i am able to make a simple table. Thanks you all for the suggestions.

console.log("searching for "+field);
    $.getJSON("test.cfc?returnformat=json&method=search", {"search":field}, function(res,code) {
        var s = "<table name='table1' border='1'><tr><th>Uid</th><th>Device</th><th>Region</th><th>Problem</th><th>Description</th><th>Resolution</th><th>Agent</th></tr>";

        s += "";
        for(var i=0; i<res.fd_table.length; i++) {
            s += "<tr><td width='142' >"+res.fd_table[i].fd_uid+"</td><td>"+res.fd_table[i].fd_dev + 
            "</td><td>"+res.fd_table[i].fd_reg +
            "</td><td> "+res.fd_table[i].fd_prob + 
            "</td><td> "+res.fd_table[i].fd_pdes + 
            "</td><td>"+res.fd_table[i].fd_res + 
            "</td><td> "+res.fd_table[i].fd_agent + 
            "</td>";
           s += "</tr>";
        }
         s += "</table>";
        $("#results").html(s);
    });
   });
 })

Coldfusion and Jquery results table formatting

2 Answers2