Solved

CFdiv refresh and Jquery

Posted on 2013-01-07
10
1,282 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)

738 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