CODEWITHSUNDEEP
javascriptjqueryhtmldatabasecoldfusion
Riot Goes Woof
Riot Goes Woof

Reputation: 3514

Can I have a coldfusion tag inside a Javascript tag?

I'm trying to print out info from a database using JQuery and coldfusion to display info of a student and their parking permit info, and other things related to the car they have on campus. When I try to load the webpage, I get an error saying that on line 84:

<cfquery name="q_sample" datasource="cars_live">

There is an unexpected token: "<". I'm guessing this is because it's already under the javascript tag. Is there any way to make JS and coldfusion work together, because in order to read what I want from the database, I need <cfquery name="q_sample" datasource="cars_live"> and $(this).text().

Here is the code for the student info page. #plates is just the name of the list with the item that the user clicked that brought them to this page.

<div data-role="page" id = 'Student' data-add-back-btn="true">
    <div data-role="header">
        <h1>Student Info Page</h1>
    </div><!-- /header -->
    <div data-role="content">
        <script type="text/javascript">
            $("#plates li").click(function() {
        <cfquery name="q_sample" datasource="cars_live">
            SELECT FIRST 10 *
            FROM veh_rec WHERE LICENSE=$(this).text()
        </cfquery>       
        <cfoutput query="q_sample">
            <p>License Plate Number: #license#, <br> Permit ID Number: #decal#, Student ID Number: #ID#</p>
        </cfoutput>
            });             
        </script>
    </div> <!-- /content -->
</div> <!--/Student -->

If you need any additional information please let me know!

UPDATE After taking Steve's advice, this is my new code.

joey.cfm

<cfparam name="License" default="">

<cfquery name="q_sample" datasource="cars_live">
  SELECT * FROM veh_rec WHERE LICENSE=<cfqueryparam cfsqltype="cf_sql_varchar" value="#License#">
</cfquery>       
<cfoutput query="q_sample">
  <p>License Plate Number: #license# <br> Permit ID Number: #decal#<br> Student ID Number: #ID#</p>
</cfoutput>

Part of html file

<div data-role="page" id = 'Student' data-add-back-btn="true">
    <div data-role="header">
        <h1>Student Info Page</h1>
    </div><!-- /header -->
    <div data-role="content">
        <script type="text/javascript">
            $("#plates li").click(function() {

                var strLicense=$(this).text();

                $.get("joey.cfm", { license: strLicense})
                .done(function(data) {
                  alert("Data Loaded: " + data);
                  $("#myResults").html(data);
                });
            });       
        </script>
        <div id="myResults"></div>

only problem now is that I cant get a return value unless I hard code in the license plate in the "value" area.

Upvotes: 2

Views: 4178

Answers (1)

steve
steve

Reputation: 1490

This code is incomplete, but will get you started: I have 2 files here... your main file, and then a very simple file to retrieve the data from the server. You can make a cfc to handle it any way you would like, but this will get you started.

Main File:

<div data-role="page" id = 'Student' data-add-back-btn="true">
    <div data-role="header">
        <h1>Student Info Page</h1>
    </div><!-- /header -->
    <div data-role="content">
        <div id="result">


        </div>
    </div> <!-- /content -->
</div> <!--/Student -->

<script type="text/javascript">
    $("#plates li").click(function() {

        var strLicense=$(this).text();

        $.get("getDetails.cfm", { license: strLicense})
        .done(function(data) {
          alert("Data Loaded: " + data);
          $("#result").text(data);
        });
    });             
</script>

GetDetails.cfm

<cfparam name="License" default="">

<cfquery name="q_sample" datasource="cars_live">
  SELECT FIRST 10 *
  FROM veh_rec WHERE LICENSE=<cfqueryparam cfsqltype="cf_sql_varchar" value="#License#">
</cfquery>       
<cfoutput query="q_sample">
  <p>License Plate Number: #license#, <br> Permit ID Number: #decal#, Student ID Number: #ID#</p>
</cfoutput>

Your click method will pass your string (I made a variable called license) to jquery and then the .get function will call a new file, getdetails.cfm and pass the url.variable as license. Your query will then run and pass the results back to the .get function.

Upvotes: 7

Related Questions