Difficulty refreshing content pane

StephenFricke · ‎06-21-2013

I have several content panes within a document. I have a function which I want to refresh just one of the content panes. The function is:

          
function ResetContent(){
 dijit.byId("DijitID").refresh();
}

For some reason this puts all of the content of the entire document into this particular content pane, rather than refreshing the content pane to what it originally looked like. How can I change this function so the content pane refreshes and displays just the same as when I refresh the entire web page? Thank you!

JonathanUihlein · ‎06-25-2013

Can you provide more code for context? I will try to help.

StephenFricke · ‎06-25-2013

Can you provide more code for context? I will try to help.

Here is where I create the content pane:

   <div dojoType="dijit.layout.ContentPane" title="Biotics Data Subset" id="DijitID1">
    
            <span style="padding:10px 0;">Select REACCH Data to view information</span>
            <div id="toggle" name= "formName2" style="padding: 2px 2px;">



<form name="formName2">
 Select Biotics Layer: <br>
<select name="options1e" id= "options1e" onChange="updatefields1(this.selectedIndex)">
     <option selected>Select Layer</option>
     <option value="Earthworm">Earthworm</option>
     <option value="Hessian Fly">Hessian Fly</option>
     <option value="Pan Trap">Pan Trap</option>
     <option value="RLN">RLN</option>
     <option value="Seed">Seed</option>
     <option value="Suction Trap">Suction Trap</option>
     <option value="Sweep Net">Sweep Net</option>
     <option value="Wireworm">Wireworm</option>

</select><br>
        Select Field: <br>
<select name="options2e" id="options2e" >
onClick="alert(this.options[this.options.selectedIndex].value)">

</select><br>
 Field is less than, greater than, or equal to:
<select id="options3e" >
     <option value="Less Than">Less Than</option>
     <option value="Greater Than">Greater Than</option>
     <option value="Equal To">Equal To</option>


</select><br>
 Enter Quantity:<br>
<input type="text" name="Quantity" id= "options4e" ><br>


<br> <button dojoType="dijit.form.Button"  onClick="executeGP();">Extract Data</button>


</form>

Then when the executeGP succeeds it goes to this function:

function onTaskResultComplete(paramResult) {
 var featureSet = paramResult.value.url;


dijit.byId("DijitID1").setContent(
  "Biotics Layer: "+bioticsLayer+"<br>"+
 "Biotics Field: "+bioticsField+" is "+sign+" "+quantity+"<br>"+
 "<br><a href=" + featureSet + ">Click here to download the data</a><br><br>"+
 '<form><button dojoType="dijit.form.Button"  onClick="ResetContent()">Refresh</button><br></form>');

And then I click on the refresh button, which goes to this function:

          function ResetContent(){
dijit.byId('DijitID1').refresh();

But instead of just refreshing the content pane to its original content, it inserts the contents of all the content panes in the entire html document into this content pane. I also am getting these errors in the console box:

Error parsing in _ContentSetter#Setter_DijitID1_3 Error {}
Error undefined running custom onLoad code: This deferred has already been resolved

Let me know if you have any solutions. Thank you very much!

JonathanUihlein · ‎06-25-2013

Thank you for the update!

Take a look at this:
http://strickspage.com/extending-dijit-dialog-with-a-templated-widget-containing-widgets/

Your error might have to do with parseOnLoad (or rather, when the parsing is done).

If this post does not help, I would need to see more code; I don't see the source of your error in the code you've provided.

StephenFricke · ‎06-25-2013

Thank you for the update!

Take a look at this:
http://strickspage.com/extending-dijit-dialog-with-a-templated-widget-containing-widgets/

Your error might have to do with parseOnLoad (or rather, when the parsing is done).

If this post does not help, I would need to see more code; I don't see the source of your error in the code you've provided.

Hey thanks for the link. Unfortunately I can't make much sense of this example. Sorry I am still learning javascript. I am not using dijit.Dialog. Is there a particular part of my code that would be helpful?

JonathanUihlein · ‎06-26-2013

No problem Peter.

Can you post the function that initializes and parses the document template? Also, post the BorderContainer that wraps your main ContentPane(s).

You could always try to replicate the issue in a http://jsfiddle.net/ and paste that link.

BenFousek · ‎06-26-2013

The refresh() method reloads the "href" property of the content pane. In your example you do not have the "href" property set so it loads the base url of the application.

To reset the content you need to use

dijit.byId('myContnetPane').set('content', 'THE ORGINAL MARKUP')

like you did on your gp result.

StephenFricke · ‎06-26-2013

The refresh() method reloads the "href" property of the content pane. In your example you do not have the "href" property set so it loads the base url of the application.

To reset the content you need to use
dijit.byId('myContnetPane').set('content', 'THE ORGINAL MARKUP')
like you did on your gp result.

Thank you both so much for your help. I was hoping I could avoid trying to recreate the entire form with the setContent method. Is there some way that I could just reference the original content pane where you have written 'THE ORIGINAL MARKUP' and it will automatically reset?

BenFousek · ‎06-26-2013

Yes. Create a html file and call it form.html or whatever with just the code within the content pane.

Load the html in the content pane on load by setting href property:
[HTML]
<div id="myContentPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'My Form', preload:true, preventCache: true, href:'form.html'">
</div>[/HTML]

Update the content by the method you are currently using.

The reset function would look like this:

function reset() {
    cp = dijit.byId('myContentPane')
    cp.set('href', 'form.html');
    cp.refresh(); //may or may not need to refresh
}

I don't think you can use the refresh() method once you have set the content to something else programmatically, however you may need to call refresh() after setting the href.

Notice I set preventCache to true, or else you will have to clear browser cache if you make changes to the html file. This is a good idea when in development. Once you deploy it can be removed.

StephenFricke · ‎06-26-2013

No problem Peter.

Can you post the function that initializes and parses the document template? Also, post the BorderContainer that wraps your main ContentPane(s).

You could always try to replicate the issue in a http://jsfiddle.net/ and paste that link.

I believe this is where I initialize and parse the document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Updating the legend to display visible layers</title> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> 
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> 
 <style> 
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; }
      #rightPane{
        width:30%;
      }
      #legendPane{
        border: solid #97DCF2 1px;
      }
     
    </style> 

    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> 
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> 
    <script type="text/javascript"> 
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");
      dojo.require("esri.arcgis.utils");
      dojo.require("dijit.form.CheckBox");
      dojo.require("esri.dijit.OverviewMap");
      dojo.require("esri.dijit.Popup");

Here is the code where I setup up the border container:

  <body class="claro"> 
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> 
      <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
        <div dojoType="dijit.layout.AccordionContainer">

Let me know if you would like to see anything else, or spot something I should change. Thank you!