Solved

CFdiv refresh and Jquery

Posted on 2013-01-07
10
1,214 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_
Comment Utility
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_
Comment Utility
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
Comment Utility
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
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
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
Comment Utility
Sorry, I was in between your posts.
0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:lantervj
Comment Utility
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
Comment Utility
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
Comment Utility
It was the url:path that was causing the error.  Many thanks.
0
 

Author Closing Comment

by:lantervj
Comment Utility
As usual, fast and correct.
0
 
LVL 52

Expert Comment

by:_agx_
Comment Utility
Great, glad I could help.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now