Solved

CFdiv refresh and Jquery

Posted on 2013-01-07
10
1,240 Views
Last Modified: 2013-01-07
<input name="btnScan" type="button" id="btnScan" style="WIDTH: 120;HEIGHT: 30" onClick="return btnScan_onclick()" value="Scan"/>
<input name="ScanDocument" id="ScanDocument" type="text" value="{DocType}" class="ScanDocument">
<cfselect name="DocType" id="DocType" class="selectClass" query="qGetDocTypes" display="name" value="DocTypeID">

<cfdiv style="border:1" id="handler_#docAreaID#" bind="url:#request.controlurl#documentHandler/?ScannedDocument={ScanDocument}">

$(".ScanDocument").val('changed to trigger bind');

Open in new window


If I select a document type from the cfselect, the input field (ScanDocument) is changed to reflect it. But the cfdiv bind is not triggered.

I can change the bind to {DocType} and the bind happens every time I select a different document type. But, I cannot simulate the bind from Javascript or Jquery so that after I upload a new file (btnScan) I can refresh the list that's in the cfdiv.
0
Comment
Question by:lantervj
  • 5
  • 5
10 Comments
 
LVL 52

Expert Comment

by:_agx_
ID: 38751749
Why use a bind *and* a jquery trigger? They're doing the same thing, with different libraries, which may cause problems ...

Anyway, this sample code updates both the text field and cfdiv whenever something is selected from the list.

<!--- sample values for testing only ---->
<cfset docAreaID = 111>

<cfset qGetDocTypes = queryNew("")>
<cfset queryAddColumn(qGetDocTypes, "DocTypeID", listToArray("1,2,3"))>
<cfset queryAddColumn(qGetDocTypes, "Name", listToArray("AAA,BBB,CCC"))>

<!--- Change "testPage.cfm" to your URL --->
<cfform>
<input name="btnScan" type="button" id="btnScan" style="WIDTH: 120;HEIGHT: 30" onClick="return btnScan_onclick()" value="Scan"/>
<cfinput name="ScanDocument" id="ScanDocument" type="text" bind="{DocType}" class="ScanDocument">
<cfselect name="DocType" id="DocType" class="selectClass" query="qGetDocTypes" display="name" value="DocTypeID" />
<cfdiv style="border:1" id="handler_#docAreaID#" bind="url:testPage.cfm?ScannedDocument={ScanDocument}">
</cfform>

Open in new window

0
 
LVL 52

Expert Comment

by:_agx_
ID: 38751837
after I upload a new file (btnScan) I can refresh the list that's in the cfdiv.

You don't need jquery, you can use ColdFusion.navigate. Here's a working example that refreshes the cfdiv when you click the refresh button.  

<!--- TestPage.cfm ---->
<cfoutput>refreshed #now()#</cfoutput>
<cfdump var="#URL#">

<!--- SamplePage.cfm ---->
<!--- sample values for testing only ---->
<cfset docAreaID = 111>
<cfset qGetDocTypes = queryNew("")>
<cfset queryAddColumn(qGetDocTypes, "DocTypeID", listToArray("1,2,3"))>
<cfset queryAddColumn(qGetDocTypes, "Name", listToArray("AAA,BBB,CCC"))>

<script type="text/javascript">
	function refreshDiv(divToRefresh) {
		var doc = ColdFusion.getElementValue('ScanDocument');
	    ColdFusion.navigate('testPage.cfm?ScannedDocument='+ doc, divToRefresh);
	}
</script>
<cfform>
<cfinput name="ScanDocument" id="ScanDocument" type="text" bind="{DocType}" class="ScanDocument">
<cfselect name="DocType" id="DocType" class="selectClass" query="qGetDocTypes" display="name" value="DocTypeID" />
<cfdiv style="border:1" id="handler_#docAreaID#" bind="url:testPage.cfm?ScannedDocument={ScanDocument}">
<cfoutput>
<input name="refresh" type="button" onClick="refreshDiv('handler_#docAreaID#')" value="Refresh CFDIV"/>
</cfoutput>
</cfform>

Open in new window

0
 

Author Comment

by:lantervj
ID: 38751870
Sorry, I'm not seeing the difference in code.  When I click the SCAN button I go through some Jquery to acquire an image from the scanner and upload it as a file on the server.  When that's finished I want to refresh the list of files (the CFdiv).  The CFdiv also has some edit, delete, and view options for each file.  The bind using ScannedDocument is just a "trick" (that's not working) to refresh the div.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 52

Expert Comment

by:_agx_
ID: 38751913
Hm.. did you run the exact code I posted? Specifically with the separate target page: "TestPage.cfm"? Because the demo code works perfectly for me.  It displays the time whenever the cfdiv is refreshed, so you can see the refresh is working.

> The bind using ScannedDocument is just a "trick" (that's not working) to refresh the div.

Well you don't have to use a bind.  ColdFusion.navigate works just fine without it. (See example).  So calling refreshDiv('divIDYouWantToRefresh') from jquery shouldn't behave any differently..

<cfset docAreaID = 111>
<script type="text/javascript">
	function refreshDiv(divToRefresh) {
            var doc = "I was called from javascript";
	    ColdFusion.navigate('testPage.cfm?ScannedDocument='+ doc, divToRefresh);
	}
</script>
<cfdiv id="handler_#docAreaID#" />
<form>
<cfoutput>
<input type="button" onClick="refreshDiv('handler_#docAreaID#')" value="Refresh CFDIV"/>
</cfoutput>
</form>

Open in new window

0
 

Author Comment

by:lantervj
ID: 38751961
Sorry, I was in between your posts.
0
 

Author Comment

by:lantervj
ID: 38752104
Error retrieving markup for element handler_2, unable to open connection to URL url:https://dev.ttt.net/control/documentHandler/?docareaID=2&variableID=27020&Fav=0&userid=24&showform=1

<input name="btnScan" type="button" id="btnScan" style="WIDTH: 120;HEIGHT: 20" onClick="return btnScan_onclick('handler_#docAreaID#')" value="Scan a Document"/>

   <script language="javascript" type="text/javascript">
      
      var scandoc = '';
      var ScanDoc1 = '';
      var TheDivToRefresh = '';
      
                  //====================IE or Firefox======================//
                  function ExplorerType()
                  {
                        var ua=(navigator.userAgent.toLowerCase());
                        if(ua.indexOf("gecko")!=-1) return "Firefox";
                        if(ua.indexOf("msie")!=-1) return "IE";
                        return "Unknow";
                  }
                  
                  //====================IE or Firefox end======================//
                  var WebTWAIN;
            
                  if(ExplorerType()=="Firefox")
                  {
                        var obj=document.getElementById("divFirefox");
                        obj.style.display="";
                        //obj.style.width = "1px";
                        //obj.style.height = "1px";
                        WebTWAIN = document.embeds[0];
                  }
                  else if(ExplorerType()=="IE")
                  {
                        var obj=document.getElementById("divIE");
                        obj.style.display="";
                        WebTWAIN = document.getElementById("DynamicWebTwain1");
                  }

                  var em = "";
                  function CheckIfImagesInBuffer() {
                    if (WebTWAIN.HowManyImagesInBuffer == 0)
                        {
                    alert("There is no image in buffer");
                    //em = em + "There is no image in buffer.\n";
                    //document.all.textarea.innerText = em;
                    //return;
                        }
                  }
                  
                  //===================begin to scan==========================//
            function btnScan_onclick(divToRefresh)
            {      
                  TheDivToRefresh = divToRefresh;
                  WebTWAIN.AcquireImage();
                  
            }
            
            //trigged after all transfers end
            function WebTWAIN_OnPostAllTransfers()
            {
                  WebTWAIN.IfSSL = true;
                  WebTWAIN.IfShowFileDialog = false;
                  WebTWAIN.SaveAllAsPDF("c:\scans\RecentScan.pdf");
                  var strActionPage;
                  var strHostIP;
                  var CurrentPathName = unescape(location.pathname);      // get current PathName in plain ASCII      
                  var CurrentPath = '<cfoutput>#request.controlurl#</cfoutput>documentHandler/';<cfoutput>
                  WebTWAIN.SetCookie(document.cookie);
                  var TheDocType = $("select.selectClass option:selected").val();
                    ScanDoc1 = $('input.scandocument').val();
                  ScanDoc = ScanDoc1.replace(/\s/g, '');
                  strActionPage = "/control/documentHandler/actUploadScan.cfm?indivnum=#indivnum#&docareaid=#docareaid#&docTypeId="+TheDocType+"&title="+ScanDoc+"&docfilename=Scan_#indivnum#_#users_info.lastname#&docFileEXT=PDF", "Scan_#indivnum#_#users_info.lastname#.pdf"; //the ActionPage's file path
                  strHostIP = "localhost";                   //the host's ip or name
                    WebTWAIN.HTTPPort = 443;
                    WebTWAIN.HTTPUploadAllThroughPostASPDF("dev.taxtalent.net", "/control/documentHandler/actUploadScan.cfm?indivnum=#indivnum#&docareaid=#docareaid#&docTypeId="+TheDocType+"&title="+ScanDoc+"&docfilename="+ScanDoc+"_#indivnum#_#users_info.lastname#&docFileEXT=PDF", ScanDoc+"_#indivnum#_#users_info.lastname#.pdf");
                  </cfoutput>
                  WebTWAIN.IfShowUI = false;
                  alert(TheDivToRefresh);
                  <cfoutput>
                ColdFusion.navigate('url:#request.controlurl#documentHandler/?docareaID=#docareaID#&variableID=#variableID#&Fav=#attributes.Fav#&userid=#attributes.userid#&showform=1',TheDivToRefresh);
                </cfoutput>
                        
      }
0
 
LVL 52

Accepted Solution

by:
_agx_ earned 500 total points
ID: 38752271
ColdFusion.navigate('url:#request.controlurl#documentHandler/?docareaID=#docareaID#&variableID=#variableID#&Fav=#attributes.Fav#&userid=#attributes.userid#&showform=1',TheDivToRefresh);

First, ColdFusion.navigate doesn't use a "url:" prefix. Just pass in a valid URL string (including any params) and the ID of the CFDIV.

Second, to avoid confusion, best to get the "refresh" code working in a separate function first. Then integrate it into your other javascript code.  Try using my test function as a base.  Pass in the CFDIV id and build the url string inside the function. Then do the refresh:

        
<!--- just for testing --->
<cfset docAreaID = 111>
<cfset variableID = "abc">
<script type="text/javascript">
       <cfoutput>
        // build base url with CF variables, since they won't change until 
        // the page is reloaded
       var baseURL = "theScriptYouWantToCall.cfm?&variableID=#variableID#&....";
       </cfoutput>

	function refreshDiv(divToRefresh) {
            // now add any DYNAMIC javascript parameters here
           var someValue = document.getElementById('someField').value;
           var urlString = baseURL +"&someExtraParam="+ someValue;
	   ColdFusion.navigate(urlString, divToRefresh);
	}
</script>
<cfdiv id="handler_#docAreaID#" />
<form>
<cfoutput>
<input type="text" id="someField" value="foo"/>
<input type="button" onClick="refreshDiv('handler_#docAreaID#')" value="Refresh CFDIV"/>
</cfoutput>
</form>

Open in new window

0
 

Author Comment

by:lantervj
ID: 38752293
It was the url:path that was causing the error.  Many thanks.
0
 

Author Closing Comment

by:lantervj
ID: 38752301
As usual, fast and correct.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 38752318
Great, glad I could help.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question