Skip to main content
D
db_cf_adobe
Participant
November 16, 2011
Question

CF7 dynamic reload of a custom tag/template

  • November 16, 2011
  • 1 reply
  • 784 views

i have an application that loads part of a form via a custom tag. one of the things this tag does is takes a number as an argument and then outputs that many rows for a table. for example if 3 is passed as an argument, then it creates a table with 3 rows.

i want to have a button that the user can press and then it will add/remove rows from the form by passing a different number to the tag and reloading it without refreshing the entire page.

i can do this via javascript dom, but if i could i'd rather do it via reloading the custom tag (because it does some other things besides insert table rows).

thanks

    This topic has been closed for replies.

    1 reply

    D
    Dan_Bracuk
    Inspiring
    November 17, 2011

    A combination of iframe/innerHTML might work.

    I
    insuractive
    Inspiring
    November 17, 2011

    Even if you don't want to go down the route of making the entire functionality work client side (jQuery would make this really easy) - you could still use an ajax solution to call your CF code and return back the HTML for you page.  Althought the one change might be to call/roll the functionality up into a component or a CFM page - something that can be easily called via AJAX.  You still should be able to reuse your code and still get the benefits of modern-day client side scripting libraries.

    Hope that helps!

    -Michael

    D
    db_cf_adobeAuthor
    Participant
    November 17, 2011

    this sounds like it will work for me, let me post a sample of the code, how would i go about implementing this solution, thanks

    tstrow.cfm ----

    <cfimport taglib="/Modules" prefix="Test" />
    <cfparam name="dynrows" default="1" />

    <cfif isDefined("addrow")>
    <cfset dynrows = dynrows + addrow />
    </cfif>
    <cfif isDefined("ar")>
    <cfif isDefined("dr")>
         <cfset dynrows = dr + 1 />
        <cfelse>
         <cfset dynrows = dynrows + 1 />
        </cfif>
    </cfif>

    <html>
    <head>
    <title>testing page</title>
    </head>
    <body>
    <form action="tstrow.cfm" method="post">
    <table id="mytable" border="1">
    <thead>Table Head</thead>
        <tr><td>Start Date</td><td>End Date</td></tr>
    <tr><td><input type="text" name="start1" <cfif isDefined("FORM.start1")><cfoutput>value="#FORM.start1#" </cfoutput></cfif>/></td>
         <td><input type="text" name="end1" <cfif isDefined("FORM.end1")><cfoutput>value="#FORM.end1#" </cfoutput></cfif>/></td></tr>
    <tr><td><input type="text" name="start2" <cfif isDefined("FORM.start2")><cfoutput>value="#FORM.start2#" </cfoutput></cfif>/></td>
         <td><input type="text" name="end2" <cfif isDefined("FORM.end2")><cfoutput>value="#FORM.end2#" </cfoutput></cfif>/></td></tr>
    </table>
    <table id="datetable" border="1">
    <tr><td>Start</td><td>End</td></tr>
        <cfif isDefined("ar")>
         <cfoutput><Test:tbl rows=#dynrows# /></cfoutput>
        <cfelse>
         <Test:tbl rows=1 />
        </cfif>
    </table>
    <input type="submit" value="Add Row" name="ar" />
    <input type="hidden" name="dr" value="<cfoutput>#dynrows#</cfoutput>" />
    <input type="submit" value="Submit" name="sub" />
    </form>
    </body>
    </html>

    tbl.cfm ----

    <cfif thisTag.executionMode is "start">

    <cfparam name="attributes.rows" type="numeric" />

        <cfparam name="i" default="0" />

    <cfelseif thisTag.executionMode is "end">

    <cfoutput>

      <cfset i = 0 />

            <cfloop condition="i LT attributes.rows">

             <cfset tr = "drs" & i />

                <tr><td><input type="text" name="drs<cfoutput>#i#</cfoutput>" /></td><td><input type="text" name="dre<cfoutput>#i#</cfoutput>" /></td></tr>

                <cfset i = i + 1 />

            </cfloop>

        </cfoutput>

    </cfif>

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