jQuery .load() a .cfm page - displays blank (FireBug shows blank result from GET)

LEGEND ,
Aug 29, 2016 Aug 29, 2016

Copy link to clipboard

Copied

Hello, all,

I've got a page where I'm using CFINCLUDE to include another .cfm page that has a list of groups that a user belongs to, and a form field that will allow an admin to add a group to a user's list.  It's a select drop-down with an ADD button.  The admin should be able to add a group to the user's list without refreshing the page, so I'm using AJaX to submit the data to a cfc; the cfc query runs (successfully adding the group), and returns either a 1 for success, or anything else for a fail.

If a 1 is returned, I'm trying to use jQuery.load() to refresh the data in the div surrounding the CFINCLUDE.  But the div becomes empty, and even FireBug is showing that the GET from the .load() is returning nothing.

Some sample pseudo-code:

Parent page (records.cfm):

<div id="rec_adminlist"><cfinclude template="rec_adminlist.cfm" /></div>

<script type="text/javascript">

function reloadDiv(divObj,pg){divObj.load(pg);}

</script>

Child page (rec_adminlist.cfm):

<select id="adminList"> ...</select><input type="button" value="Add" id="submitBtn" />

<script type="text/javascript">

     $('#submitBtn').click(function(){

          var $rec_adminlist = $('#rec_adminlist');

          $.post("/url/to/cfc/mycfc.cfc?method=addToAdminList",

                    {adminID: $('#adminList').val(), userID: "#userID#"}

                    ).fail(blah blah blah).always(function(data){

                                                            switch(data){

                                                                 case '1':

                                                                      reloadDiv($rec_adminlist,'rec_adminlist.cfm');

                                                                 break;

                                                                 }

                                                            }

                                                            );

          });

</script>

The INSERT into the database is successful; but the .load() brings back blank.  If I refresh the page, the new data is displayed.

I've never had a problem loading a .cfm page via AJaX, before.  Why is this returning blank?

V/r,

^_^

Views

1.4K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 29, 2016 Aug 29, 2016

Copy link to clipboard

Copied

I just replaced the CFINCLUDE with jQuery (on document ready) .load() upon page load, and it's showing a blank, too.

Is it not possible to load a server-side page with jQuery?  Could have sworn I did it, before.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 29, 2016 Aug 29, 2016

Copy link to clipboard

Copied

Just to make sure I wasn't losing my mind, I used .load() on a txt file, and it worked.  So, why not a .cfm file?

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 30, 2016 Aug 30, 2016

Copy link to clipboard

Copied

What http status does the page have when you call it? You will see it in the dev tools of the browser.

I assume if you call the page normally you see the result you expect after the post?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 30, 2016 Aug 30, 2016

Copy link to clipboard

Copied

200 OK 96ms.  And yes, if I call the page directly from the browser, it shows up just fine.  But calling it with jQuery.load() will display just a blank; even using FireBug to view the HTML shows no code.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Advocate ,
Aug 30, 2016 Aug 30, 2016

Copy link to clipboard

Copied

There are no variables used inside of the include which are set outside of it? The include is all self contained?

Can you do the following:

function reloadDiv(divObj,pg){

    divObj.load(pg, function(response, status, xhr){

        console.log("Response: " + response);

        console.log("Status: " + status);

    });

}

Post the results of the console.log

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 30, 2016 Aug 30, 2016

Copy link to clipboard

Copied

There is a variable that is being declared prior to the include.  I don't know why no errors were being triggered (nothing visual, no email sent), but the variable was mis-spelled, causing the display to abort (it should have notified me, one way or the other, but didn't.)

It is loading, now.

But why was it giving a 200 response, when the CF was clearly broken?  I should have been getting emails out the whazoo indicating what the problem was.  I finally discovered what was wrong when I placed the CFTRY/CFCATCH around the whole page instead of just the processing part.

V/r,

^_^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
May 08, 2017 May 08, 2017

Copy link to clipboard

Copied

LATEST

When you are using jQuery Load try getting the status and statusText too. This will tell you if your code is working correctly or giving any error.

$("#rec_adminlist").load("pageurl", function (response, status, xhr) {

    if (status == "error")

        alert("Error: " + xhr.status + ": " + xhr.statusText);

    });

});

You can also check documentation of - jQuery Load and see the different ways how it can be used to fetch data from other pages.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines