Passing part of a table through ajax

Question

I am using ajax to call a query but am trying to return a table. I have been able to get the hardcode version to return text into a textbox but I am trying to return it back as a table. Any help with this would be greatly appreciated.

AJAX Call

$.ajax({
    url: "proxy/TomorrowsDate.cfm",
    type: "post",
    dataType: "json",
    data: {date: Tmrwdate },
    success: function (data) {
        console.log(data);
        console.log( $('#DueTmrw'));
        $('#DueTmrw').val(data.TEXT);
    },
    error: function (xhr, textStatus, errorThrown) {
        console.log(errorThrown);
    }

proxy/TomorrowsDate.cfm

<cfset result = {} /> 
<cftry> 
    <cfset session.dealerwork.tomorrowsdate = form.date > 
    <cfset result.date = form.date/> 

    <cfquery name="tomorrowTextArea"> 
        SELECT dbo.Dealer_Track_Work.id, dbo.Dealer_Track_Work.dealerID, dbo.Dealer_Track_Work.Date_Received, dbo.Dealer_Track_Work.op_id, dbo.Dealer_Track_Work.Date_Due, 
        dbo.Dealer_Track_Work.Date_Complete, dbo.Dealer_Track_Work.Completed_Late, dbo.Dealer_Track_Work.Closed_by, dbo.Dealer_Track_Work.Rmks, dbo.Dealer_Track_Work.Processing_Location, 
        dbo.Dealer_Track_Work.Item_Count, dbo.Dealer_Track_Dealers.id, dbo.Dealer_Track_Dealers.Name
        FROM dbo.Dealer_Track_Work, dbo.Dealer_Track_Dealers
        WHERE dbo.Dealer_Track_Work.dealerID = dbo.Dealer_Track_Dealers.id  
        AND Date_Complete IS NULL
        AND Date_Due = <cfqueryparam value="#session.dealerwork.tomorrowsdate#" /> 
        AND Date_Complete IS NULL
    </cfquery> 

    <cfset result.text = ''>
    <cfoutput query="tomorrowTextArea">
        <cfset result.text = result.text & "<tr>
                                 <td>#id#</td>
                                 <td>#tomorrowTextArea.name#</td>
                                 <td>#Item_Count# ITEMS</td>
                              </tr>" />
    </cfoutput>



    <cfcatch type="any"> 
        <cfset result.error = CFCATCH.message > 
        <cfset result.detail = CFCATCH.detail > 
    </cfcatch> 
</cftry> 

<cfoutput>#SerializeJSON(result)#</cfoutput>

This is how I try to show the information back on the page: <span id="DueTmrw" name="DueTmrw"></span> (this does not show anything) if I use <textarea type="text" name="DueTmrw" id="DueTmrw" class="form-control" rows="7"></textarea> it shows the right results but just as html text not as the actual table. How do I display those rows as a table passing through ajax?

All the things I have tried:

<tbody>


     <span id="DueTmrw" name="DueTmrw"></span>
                           <textarea type="text" name="DueTmrw" id="DueTmrw" class="form-control" rows="7"></textarea>
                              <!---<cfoutput query="tomorrowTextArea">
                              <tr>
                                 <td>#id#</td>
                                 <td>#tomorrowTextArea.name#</td>
                                 <td>#Item_Count# ITEMS</td>
                              </tr>
                              </cfoutput>--->
                           </tbody>

Also tried doing something like this: $("DueTmrw > tbody").append('<tr><td>my data</td><td>more data</td></tr>');

I don't see any tags? You also may want to look at `cfsavecontent ` when building out html constructs in CF. — snackboy, Mar 15 '17 at 13:55
i was trying to only fill that portion of the table with the loop of results I wasnt changing the column headers or anything — David Brierton, Mar 15 '17 at 14:03
Okay...I didn't see the ``. So I am assuming there is a table tag there as well. — snackboy, Mar 15 '17 at 14:17
I think what I would do in this case is build the entire construct using `` (table and all), then set an `div.innerHTML` to the results. — snackboy, Mar 15 '17 at 14:21

radiovisual · Accepted Answer · 2017-03-15T17:53:29.903

3

jQuery's .val() is specifically meant to get/set values for input types for form components, for example <input> and <textarea> elements.

This is why your success callback works fine to update a <textarea> value with .val() but breaks when trying to update a span tag:

Use .val() to update form input types:

// this will work to change the value of an input field 
// (like a textarea) but will not update a <span> element.
$('#DueTmrw').val(data.TEXT);

To update the text of a non-form input type (like span, div, a, etc). use .text():

Use .text() to update non-form field types:

// this will work to change the text of a non-form input field 
// (like a span) but will not update an <input> or form input element.
$('#DueTmrw').text(data.TEXT);

If you want to set the HTML within an element, like the HTML you grabbed from the server, then use .html():

Use .html() if you want to update (replace) the innerHTML of an element on your page:

var htmlFromServer = '<tr><td>example</td></tr>';
var myElement = $('.someTag');
myElement.html(htmlFromServer);

Hope this helps!

edited Mar 15 '17 at 17:53

answered Mar 15 '17 at 16:26

radiovisual

6,298
1
26
41

i still cant figure out how to display this: ` #id# #tomorrowTextArea.name# #Item_Count# ITEMS ` – David Brierton Mar 15 '17 at 17:46
@DavidBrierton, check the `.html()` example that I added to my answer, I think that is what you are looking for – radiovisual Mar 15 '17 at 17:52
If I am just trying to loop through the tr - td td td - tr would i add the id to the tbody? like this? ` ` – David Brierton Mar 15 '17 at 17:56
wanna earn 100xp points haha http://stackoverflow.com/questions/42370858/pdf-does-not-work-in-adobe-reader-dc-but-all-other-readers – David Brierton Mar 15 '17 at 17:58

Passing part of a table through ajax

1 Answers1