7 Replies Latest reply on Oct 29, 2008 8:22 AM by Newsgroup_User

    A little help with ajax cfdiv tag

    thenotorious_flag
      Hi, i am displaying my categories records in atable, and against each category i have an edit link.

      i am trying like that if i click the edit link [It is not a button]. the page should gets loaded with a textbox and category name already filled and then i click submit to submit the form.

      I am using the code as below:

      <cfoutput query="showcategories">
      <tr>
      <td>#trim(category)#</td>
      <td><a href="##" onClick="?catID=#catID#">Edit</a></td>
      </tr>
      </cfoutput>
      <cfif isdefined('url.catID')>
      <cfdiv bind="url:divsource.cfm?catID={catID}" ID="theDiv" style="background-color:##CCffFF; color:red; height:350"/>
      </cfif>

      mydivsource page contains this:

      <cfdump var="#url#">
      <cfinvoke component="cfc.product" method="categories" chkcatID="#URL.catID#" returnvariable="getCatID"/>
      <cfform name="categoryByID">
      <cfinput type="text" name="categoryname" value="#getCatID.category#" tooltip="The Category Name" tabindex="1">
      <cfinput type="hidden" name="catID" value="#getCatID.catID#">
      <cfinput type="button" name="button2" value="Edit Category">
      </cfform>

      when i try to run, i get the error as like below:

      syntax error
      [Break on this error] ?catID=3

      can anyone guide me in this? plz i m very new to ajax stuff in cf.
        • 1. Re: A little help with ajax cfdiv tag
          Level 7
          onClick event expects a javascript function. what you have there should
          be in the HREF attribute.

          Azadi Saryev
          Sabai-dee.com
          http://www.sabai-dee.com/
          • 2. Re: A little help with ajax cfdiv tag
            thenotorious_flag Level 1
            Well that does not seems to work either.

            Here is the code what i tried?

            But It Generates and Error, When i click the edit link, the following eror is prompted.

            Bind Failed, Element Not Found catID

            the following dump is generated.

            struct
            CATID [empty string]
            _CF_CLIENTID A874C1300D4469CFC73B80E70B13CF70
            _CF_CONTAINERID thecategory
            _CF_NOCACHE true
            _CF_NODEBUG true

            Ok now i do not know why it is not picking up the catID definedin the url and the link.

            • 3. Re: A little help with ajax cfdiv tag
              Level 7
              well, that is because, obviuosly, you do not have a form element named
              "CatID".
              you need not bind you cfdiv to a form element - just use #url.catID# in
              the bind url:

              <cfdiv bind="url:divsource.cfm?catID=#url.catID#" id="thecategory"
              style="background-color:##CCffFF; color:red; height:350"/>

              even better: why do you need to use some link to reload your page to
              update the cfdiv when you have ColdFusion.navigate() function?

              try this instead of your code:

              <cfoutput query="showcategories">
              <tr>
              <td>#trim(category)#</td>
              <td><a href="##"
              onclick="ColdFusion.navigate('divsource.cfm?catID=#catID#',
              'thecategory');">Edit</a></td>
              </tr>
              </cfoutput>
              <cfdiv id="thecategory"
              style="background-color:##CCffFF; color:red; height:350"/>

              if you want to have your cfdiv hidden until an Edit link is clicked, add
              display:none; to its style, and then change its display style to
              'block' in the Edit link's onclick event. you may well write a little js
              function that will display the cfdiv and update its content and call
              that function in the Edit link's onclick event.

              Additional Info:
              if you have a form in the cfdiv's content (which it looks like you do),
              remember this: if you use CFFORM tag, than the form will submit into
              cfdiv without refreshing the whole page; a simple FORM tag will submit
              to the main page refreshing it.

              hth


              Azadi Saryev
              Sabai-dee.com
              http://www.sabai-dee.com/
              • 4. Re: A little help with ajax cfdiv tag
                thenotorious_flag Level 1
                Thanks Mate, the Coldfusion.navigate function actually worked but i tested it though in all browsers [ie,mozilla,chrome,safari,opera] out of these only IE seems to create problem.

                The content does not load when i click in IE,

                The code i am using is below:

                <cfoutput query="showcategories">
                <tr>
                <td>#trim(category)#</td>
                <td><a href="##"
                onclick="ColdFusion.navigate('divsource.cfm?catID=#catID#',
                'thecategory');">Edit</a></td>
                </tr>
                </cfoutput>
                <cfdiv id="thecategory"
                style="background-color:##CCffFF; color:red; height:350"/>
                • 5. Re: A little help with ajax cfdiv tag
                  Level 7
                  make sure your HTML is properly formed!!!

                  it looks like your cfdiv is inside a <table>, but not in its own row and
                  cell (<tr><td> block).

                  either move the cfdiv to outside of the table or put it inside a
                  properly formatted table row and cell. IE is picky about these things
                  more than FF and other browsers...

                  hth

                  Azadi Saryev
                  Sabai-dee.com
                  http://www.sabai-dee.com/
                  • 6. Re: A little help with ajax cfdiv tag
                    thenotorious_flag Level 1
                    Thanks Mate, It worked. Actually It was broken table table which was making in not work.

                    I completed and now issue arise is when i try to submit the Simple HTML based <form> inside <cfdiv>, i make changes and do a submit, It does not load the main Page with the contents.

                    What it do is it makes the change and stay as it is.

                    Everything from database gets changed to whatever value i Specify. But the main page does not load after i click Edit Button.

                    Is Something wrong.

                    I have read from livedocs that if u use <cfform>, the values will submit back to the container but simple HTML form will load the whole page. so in my case, I am doing wrong?

                    here is what is inside that <cfdiv> tag i am doing

                    • 7. Re: A little help with ajax cfdiv tag
                      Level 7
                      maybe you should read the ColdFUsion.Ajax.submitForm description:

                      Submits form data without refreshing the page when the results are returned.


                      Azadi Saryev
                      Sabai-dee.com
                      http://www.sabai-dee.com/