Avatar of lantervj
lantervjFlag for United States of America

asked on 

CFdiv refresh and Jquery

<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.
ColdFusion LanguageJavaScriptjQuery

Avatar of undefined
Last Comment
_agx_
Avatar of _agx_
_agx_
Flag of United States of America image

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

Avatar of _agx_
_agx_
Flag of United States of America image

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

Avatar of lantervj
lantervj
Flag of United States of America image

ASKER

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.
Avatar of _agx_
_agx_
Flag of United States of America image

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

Avatar of lantervj
lantervj
Flag of United States of America image

ASKER

Sorry, I was in between your posts.
Avatar of lantervj
lantervj
Flag of United States of America image

ASKER

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>
                        
      }
ASKER CERTIFIED SOLUTION
Avatar of _agx_
_agx_
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of lantervj
lantervj
Flag of United States of America image

ASKER

It was the url:path that was causing the error.  Many thanks.
Avatar of lantervj
lantervj
Flag of United States of America image

ASKER

As usual, fast and correct.
Avatar of _agx_
_agx_
Flag of United States of America image

Great, glad I could help.
JavaScript
JavaScript

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.

127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo