Disable any cache

[pino8314]

How do I prevent the contents of the div cache?

I explain better:
On the web page I have a div that acts as a container and 4 data link.
Whenever I click on a link on div are stored data through a document.getElementById ( 'p').innerHTML = 'data_1';
Example:

JS

Code: Select all

<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<script language="javascript">

    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;	

function prova(valore, valore_2){
		
	if (valore_2 == 1){
	document.getElementById('dati').innerHTML = " dati _1";
	hs.htmlExpand(valore, { contentId: 'highslide-html' });
	}else{
	
	document.getElementById(' dati ').innerHTML = " dati _2";
	hs.htmlExpand(valore, { contentId: 'highslide-html' });
	}
	
}


</script>

HTML

Code: Select all

<a href="#" id="link_1" onclick="return prova(this, 1);"  class="highslide">HTML content</a>
<br /><br />
<a href="#" id="link_2" onclick="return prova(this, 2);"  class="highslide">HTML content</a>

<div class="highslide-html-content" id="highslide-html">
	<div class="highslide-header">
		<ul>
			<li class="highslide-move">
				<a href="#" onclick="return false">Move</a>
			</li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this);">Close</a>
			</li>
		</ul>	    
	</div>
	<div class="highslide-body" id="dati">
		
	</div>
    <div class="highslide-footer">
        <div>
            <span class="highslide-resize" title="Resize">
                <span></span>
            </span>
        </div>
    </div>
</div>

But in all this I have a problem, if I click on the first link

Code: Select all

<a href="#" id="link_1" onclick="return prova(this, 1);"  class="highslide">HTML content</a>

On div is inserted -> dati_1

If I click on the second link

Code: Select all

<a href="#" id="link_1" onclick="return prova(this, 1);"  class="highslide">HTML content</a>

On div is first inserted and then -> dat1_2 after apertuta window, dati_2 is replaced with -> dati_1

The library uses a cache to store data already? If it is, how do I turn it off?

[pino8314]

What I get is to display one div by all the links on the web page. Whenever I click on a link, is given a different value within the div.

Something similar to this ... Only that I do not work

example

[pino8314]

Please help me, I do not believe that it is difficult to see only a div by all links .... I do not want to each link is created a new div but it must be open always the same.

[pino8314]

help please

[oshcha]

Hi,

I had similar problem with caching (still have but now little bit different).

Try cleaning content div and hs.sleeping[] array.

I have this method:

Code: Select all

  function clearHSContent() {
    var hsBody = document.getElementById('highslide-body');
    if (hsBody != null) {
      hsBody.innerHTML = '';
    }
    hs.sleeping = [];
  }

It works fine for me in FF, but have issues with IE

[torstein.honsi]

pino8314,

Have you tried hs.preserveContent = false?

[pino8314]

Hello, thanks for the reply ..
I tried your solution but I will not work ... I put the script on the main page

Code: Select all

<script type="text/javascript">    



    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;	
	
	  function clearHSContent() {
    var hsBody = document.getElementById('ciao');
    if (hsBody != null) {
      hsBody.innerHTML = '';
    }
    hs.sleeping = [];
  }
  
	function prova(valore, valore_2){

	
	if (valore_2 == 1){
	
		clearHSContent();
		document.getElementById('ciao').innerHTML = "dati_1";
		hs.htmlExpand(valore, { contentId: 'highslide-html' });
	
	}else{
	
		clearHSContent();
		document.getElementById('ciao').innerHTML = "dati_2";
		hs.htmlExpand(valore, { contentId: 'highslide-html' });
		
	}
	
}
	
</script>

Code: Select all

<a href="#" onclick="return prova(this, 1);" 
		class="highslide">
	HTML content
</a>
<br /><br />
<a href="#" onclick="return prova(this, 2);" 
		class="highslide">
	HTML content
</a>

<div class="highslide-html-content" id="highslide-html">
	<div class="highslide-header">
		<ul>
			<li class="highslide-move">
				<a href="#" onclick="return false">Move</a>
			</li>
			<li class="highslide-close">
				<a href="#" onclick="return hs.close(this);">Close</a>
			</li>
		</ul>	    
	</div>
	<div class="highslide-body" id="ciao">

	</div>
</div>

Call the function nothing but continue to see always the same as on div

[pino8314]

pino8314,

Have you tried hs.preserveContent = false?

yes But does not work

[torstein.honsi]

In Highslide the cloning of elements is set to a minimum to prevent problems with id's and getElementById. Therefore you should use an entirely different approach, replacing the content using events. Study http://vikjavev.no/highslide/ref/hs.Exp ... GetContent and http://vikjavev.no/highslide/ref/hs.Exp ... ype.custom for understanding.

JS:

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script language="javascript">

    hs.graphicsDir = 'highslide/graphics/';
    hs.outlineType = 'rounded-white';
    hs.outlineWhileAnimating = true;   

function prova(valore, valore_2){
      
   if (valore_2 == 1){
     // http://vikjavev.no/highslide/ref/hs.Expander.prototype.custom
     hs.htmlExpand(valore, { contentId: 'highslide-html' }, " dati_1");
   }else{
   
   hs.htmlExpand(valore, { contentId: 'highslide-html' }, " dati_2");
   }
   
}

// http://vikjavev.no/highslide/ref/hs.Expander.prototype.onAfterGetContent
hs.Expander.prototype.onAfterGetContent = function() {
  if (this.custom) {
    this.content.innerHTML = this.content.innerHTML.replace("{replace1}", this.custom);
  }
}
</script> 

HTML:

Code: Select all

<a href="#" id="link_1" onclick="return prova(this, 1);"  class="highslide">HTML content</a>
<br /><br />
<a href="#" id="link_2" onclick="return prova(this, 2);"  class="highslide">HTML content</a>

<div class="highslide-html-content" id="highslide-html">
   <div class="highslide-header">
      <ul>
         <li class="highslide-move">
            <a href="#" onclick="return false">Move</a>
         </li>
         <li class="highslide-close">
            <a href="#" onclick="return hs.close(this);">Close</a>
         </li>
      </ul>      
   </div>
   <div class="highslide-body">
      {replace1}
   </div>
    <div class="highslide-footer">
        <div>
            <span class="highslide-resize" title="Resize">
                <span></span>
            </span>
        </div>
    </div>
</div> 

[pino8314]

Thank you very much

[musicalsaw]

Quick reminder (and you did cover it in your examples) -However, make sure to have Events enabled in your js for this to work.

[MisterNeutron]

Quick reminder....

Seven years too late.