Skip to main content
A
Aquitaine
Inspiring
March 12, 2010
Question

IE8 Ignores 2nd cfdiv?

  • March 12, 2010
  • 2 replies
  • 1566 views

Hi there,

Strange problem that I haven't found any information on after a quick google hunt and forum search.

I have a page whose job it is to assign coaches to teams. It makes use of cfdiv and cfselect cfc binds to make it as fast and dynamic as possible. The idea is pretty simple:

- Choose a competition

- Based on competition choice, show a list of divisions

- Based on division choice, show a list of teams

- cfdiv to include small page responsible for removing coaches bsed off of team drop-down

- 2nd cfdiv to includee a small page list of coaches that you can assign to the specified team

In Firefox, this works fine. In IE8, it displays the first CFDIV but not the second. It is attempting to process the second div, since the AJAX debugger complains about how some form values in div2 that are used in div2 to pull up a list of users aren't defined -- but it's not actually displaying the form.

The main container page just has these two lines of code near the end:

<cfdiv id="div1" bind="url:coach-assignments-div1.cfm?teamID={teamID}" />

<cfdiv id="div2" bind="url:coach-assignments-div2.cfm?teamID={teamID}"  />

div1 works perfectly - div2 does not, only in IE. If I put style="height: 500px;" on the second <cfdiv> tag, it will display 500 pixels of empty space - but even if the first line of code in the div2 file is <p>blah</p> it won't display that.

I can definitely rewrite this to only use a single CFDIV, but I'm curious why this would happen, and why only in IE.

Thanks very much,

Aq

    This topic has been closed for replies.

    2 replies

    Fernis
    Fernis
    Inspiring
    March 12, 2010

    Where does your teamID come from? A form field on the page?

    This works for me, in IE8 and FF:

    test.cfm

    <html>
    <head>
    </head>
    <body>
    <cfform name="form1">
    <cfinput type="text" name="teamID" value="3">
    </cfform>
    <cfdiv id="div1" bind="url:test2.cfm?teamID={form1:teamID}"   />
    <cfdiv id="div2" bind="url:test2.cfm?teamID={form1:teamID}"  />
    </body>
    </html>

    test2.cfm

    <cfoutput>you chose #teamid#</cfoutput>

    --

    Are you sure the TeamID is present on page load? Could bindonload="false" help? Do you have all necessary <html><head><body> tags in place?

    Hope this helps.

    -Fernis

    T
    TLC-IT
    Inspiring
    March 12, 2010

    What does the HTML as actually recieved by the browser say?

    If you fire up the Developer Toolbar in IE8, what does its version of the DOM structure actually say?

    What does the POST or GET data as actually sent by the browser, actually say?  (Developer Toolbar, or Firefox's Firebug, can tell you this.)

    Prove it.  You're from Missouri now...

    You may be entirely correct that IE8 and/or CF is misbehaving in this strange way, but I for one would assume that surely you must be mistaken; that this surely must be (or be caused by) a "red herring."  If you were to step on this rock, it would dump you into the river.  And so,  I suggest that you start by securing this "objective proof."  This, in turn, should point you to wherever the problem may lie.  And if this truly counter-intuitive behavior that you suspect is indeed so, you will now be able to objectively prove it.

    A
    AquitaineAuthor
    Inspiring
    March 12, 2010

    Here's what I've found so far:

    If I leave cfDebug off, it apparently just can't find the correct cfdiv it wants to use, as I get this error:

    Error replacing HTML, element not found: cf_div1268409201188

    TeamID is present. If it weren't, then I'd be getting a CF error, and it wouldn't work in Firefox.

    All tags are properly opened and closed. The DOM explorer shows both divs, and records the HTML as follows:

    <DIV id=div1 _cf_innerHTML>
    <HR>

    <P>There are no coaches currently assigned to <STRONG>B 6C</STRONG>.</P></DIV>
    <DIV id=div2 _cf_innerHTML> </DIV></FORM>

    You can see that div1 is properly receiving the teamID and doing a lookup to get the team name (B 6C).

    The AJAX logger says it is updating the divs. The URLs it's using to replace the markup are correct and if I call them directly I get what I want. I can't see anything bizarre here. I've removed the results from the CFC queries since they're not relevant and are working correctly and just cluttered everything.

    info:http: Replaced markup for element:  div2

    info:http: Replaced markup for element:  div1

    info:bind: Assigned bind value: '' to  teamID.value

    info:http: HTTP GET  coach-assignments-div2.cfm?teamID=e63641ab-aaab-4c5f-8a03-e23d5caf1801&_cf_containerId=div2&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B67F86568101CB7082EA18291B5FBDCF&_cf_rc=7

    info:http: Replacing markup for element: div2  from URL coach-assignments-div2.cfm?teamID=e63641ab-aaab-4c5f-8a03-e23d5caf1801  with params _cf_containerId=div2

    info:http: HTTP GET  coach-assignments-div1.cfm?teamID=e63641ab-aaab-4c5f-8a03-e23d5caf1801&_cf_containerId=div1&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B67F86568101CB7082EA18291B5FBDCF&_cf_rc=6

    info:http: Replacing markup for element: div1  from URL coach-assignments-div1.cfm?teamID=e63641ab-aaab-4c5f-8a03-e23d5caf1801  with params _cf_containerId=div1

    info:http: Replaced markup for element:  div2

    info:http: Replaced markup for element:  div1

    info:bind: Assigned bind value: '' to  teamID.value

    info:http: HTTP GET  coach-assignments-div2.cfm?teamID=6ede9c20-946d-433b-a002-933836c58d3d&_cf_containerId=div2&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B67F86568101CB7082EA18291B5FBDCF&_cf_rc=5

    info:http: Replacing markup for element: div2  from URL coach-assignments-div2.cfm?teamID=6ede9c20-946d-433b-a002-933836c58d3d  with params _cf_containerId=div2

    info:http: HTTP GET  coach-assignments-div1.cfm?teamID=6ede9c20-946d-433b-a002-933836c58d3d&_cf_containerId=div1&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B67F86568101CB7082EA18291B5FBDCF&_cf_rc=4

    info:http: Replacing markup for element: div1  from URL coach-assignments-div1.cfm?teamID=6ede9c20-946d-433b-a002-933836c58d3d  with params _cf_containerId=div1

    info:bind: Assigned bind value: '' to  competitionID.value

    info:http: HTTP GET  /inleague-cfc/team.cfc?method=getTeamsForDiv&returnFormat=json&argumentCollection=%7B%22DIVISION%22%3A%22%22%2C%22COMPETITIONID%22%3A%221%22%2C%22SORTID%22%3A%22%22%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B67F86568101CB7082EA18291B5FBDCF&_cf_rc=2

    info:http: Invoking CFC:  /inleague-cfc/team.cfc , function: getTeamsForDiv , arguments:  {"DIVISION":"","COMPETITIONID":"1","SORTID":""}

    info:http: HTTP GET  /inleague-cfc/team.cfc?method=getDivisions&returnFormat=json&argumentCollection=%7B%22ALL%22%3A%22false%22%2C%22COMPETITIONID%22%3A%221%22%2C%22SORTID%22%3A%22%22%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=B67F86568101CB7082EA18291B5FBDCF&_cf_rc=1

    info:http: Invoking CFC:  /inleague-cfc/team.cfc , function: getCompetition , arguments:  {"SORTID":"1"}

    info:LogReader: LogReader initialized

    info:global: Logger initialized

    A
    AquitaineAuthor
    Inspiring
    March 12, 2010

    The problem was nested cfforms. The syntax went:

    Container page:

    <cfform>

    form stuff

    <cfdiv first div>

         ...<cfform>

              ...form stuff...

        ....</cfform>

    </cfdiv>

    <Cfdiv 2nd div>

         ...<cfform>

        .... form stuff ...

            </cfform>

    </cfdiv>

    </cfform>

    For whatever reason, it's OK with the first cfdiv and its own CFFORM, but not the 2nd - in IE only. It works if I close the first <cfform> tag on the container page before I call the <cfdiv>, which changes a couple other things but is manageable.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices