onAfterGetContent - can't access sender.content DOM

[ihtus]

Hello,

Thanks for Highslide! I am using it for displaying ajax responses.

Everything is ok, but I wasted a lot of time and didn't find any solution for my issue.

I have a <div id='mydiv'> that is inside ajax response and is displayed inside HighSlide popup.
Now I need to change height of this div before the popup appears.

I tried onBeforeExpand, the needed div is getting wanted height value in the DOM (style='height:50px;'), but not in appearance (it looks like height:0px;).

Then I tried onAfterGetContent, but realised that I can't even access elements of my content.

With onBeforeExpand I do can access the elements of the content, but the new set of styles are not displayed, just only in the DOM code.

Please see the code below and some outputs.

Code: Select all

hs.Expander.prototype.onBeforeExpand=function(sender){
var all = sender.content.getElementsByTagName('*');
for (var i=0, max=all.length; i < max; i++) {
   var str=str+all[i].tagName+' - '+all[i].id+'\\n';;
   
}
alert(str);

OutPut:

Code: Select all

undefinedDIV -
DIV -
DIV -
UL -
LI -
A -
SPAN -
LI -
A -
SPAN -
LI -
A -
SPAN -
LI -
A -
SPAN -
DIV -
DIV -
DIV - highslide_popup_wrapper_blank
DIV -
DIV - highslide_popup_wrapper
FORM -
TABLE -
TBODY -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
TR -
TD -
INPUT -
TD -
DIV -
INPUT -
INPUT - popup_ok
DIV -
DIV -
SPAN -
SPAN -

Code: Select all

hs.Expander.prototype.onAfterGetContent=function(sender){
var all = sender.content.getElementsByTagName('*');
for (var i=0, max=all.length; i < max; i++) {
   var str=str+all[i].tagName+' - '+all[i].id+'\\n';;
   
}
alert(str);

OutPut:

Code: Select all

undefinedDIV -
UL -
LI -
A -
SPAN -
LI -
A -
SPAN -
LI -
A -
SPAN -
LI -
A -
SPAN -
DIV -
DIV -
DIV -
SPAN -
SPAN -

As you see with onAfterGetContent I can't access the elements of my ajax response content.

Is there any solution for my issue? Thanks!

[torstein.honsi]

I set up an example for you. It uses onAfterGetContent to get the popup height right: http://jsfiddle.net/highcharts/khrwx/

[ihtus]

Torstein Hønsi,

Thank you for your answer and the working example.

However, I think it works in your case because of the method you call the content into popup, you are using inline content injection.

In my case I call the content apart, not inline, please see the code below:

PHP - code for the link

Code: Select all

<span style='color:#2AA7EA; cursor: pointer; cursor: hand; text-decoration:underline;' onclick=\"return hs.htmlExpand(this,{src:'/cgi_appsrv/designreq/cfg_divisions.php?ajaxtask=popupform_stat&div=$DdivID&stat=$statvalue' ,headingText: 'Set STAT', objectType: 'ajax', width: 100, height:100});\">$stattext</span>

PHP - code for the content

Code: Select all

      
case 'popupform_stat':
         if (isset($_REQUEST['stat'])) $selectedstat=$_REQUEST['stat'];
         else $selectedstat='';
         
         $selecteddiv=$_REQUEST['div'];
         
         
         echo "<div class='highslide_popup_content'><div id='highslide_popup_wrapper'>";
         
         echo "<form name=\"select_stat\">";
         echo "<table><tbody>";
         
         
         foreach ($StatList as $key => $division) {
            if ($key==$selectedstat) $ckecked="checked";
            else $ckecked="";
            echo "<tr><td vertical-align=middle align=left>";
            echo "<input type=\"radio\" name=\"stat\" value=\"$key\" $ckecked/></td><td>";
            echo $division;
            echo "</td></tr>";
         }
         echo "</tbody></table></form></div></div>";      
         
         echo "<div class='highslide_popup_btns'>
         <input style=\"float:right; margin:0px 0px 0px 5px;\" type=button class=BlueButton value='CANCEL' onclick='return hs.close(this)'>
         <input style=\"float:right;\" id=popup_ok type=button class=BlueButton value='SET' onclick=\"send_form_ajax_json('select_stat','ajaxtask','setstat','cfg_divisions.php','div=$selecteddiv',0); hs.close(this)\">      
         </div>
         </div>";
         
      break;


Unfortunately, I cannot use inline content method.

If I am doing something wrong, could you please generate a live example but instead of inline content injection - a remote content insert through ajax.

Thanks a lot!

[RoadRash]

Hi,

I think the problem is the fixed height you have set for the popup in your onclick event:

Code: Select all

<span style='color:#2AA7EA; cursor: pointer; cursor: hand; text-decoration:underline;' onclick=\"return hs.htmlExpand(this,{src:'/cgi_appsrv/designreq/cfg_divisions.php?ajaxtask=popupform_stat&div=$DdivID&stat=$statvalue' ,headingText: 'Set STAT', objectType: 'ajax', width: 100, height:100});\">$stattext</span>

See this demo: http://www.roadrash.no/hs-support/test/15242.html
This demo uses objectType: 'ajax'. The first popup has fixed height in the onclick; the second hasn’t.

[ihtus]

RoadRash,
Thank you very much for your example.
That helped me to track the problem in my code.

The fixed height is not the problem, because got same issue when height is not set.

So the only single line of code that caused the impossibility to access the DOM elements of the sender.content is

Code: Select all

hs.cacheAjax = false;

The problem is I really need that line to have the most fresh content in popup, but how to access DOM elements of sender.content having hs.cacheAjax = false; ?

Thank you in advance for any ideas!

[RoadRash]

Will it work if you replace

Code: Select all

hs.cacheAjax = false;

with

Code: Select all

hs.preserveContent = false;

[ihtus]

Unfortunately no,
here is my current config:

Code: Select all

   hs.cacheAjax = false;
   hs.forceAjaxReload=true;

   hs.preserveContent = false;

and it does not work with that..

[RoadRash]

You can’t access sender.content if you don’t allow the browser preloading the content. Setting hs.cacheAjax to false will stop the browser from preloading the content – reference page: http://highslide.com/ref/hs.cacheAjax

[ihtus]

RoadRash,
Thanks.

I thought with hs.cacheAjax = false; - onAfterGetContent is an event that fires after the moment the content (even not inline) is loaded to DOM and before the moment it's displayed in the popup.

Meanwhile if anyone has an workaround - I would highly appreciate any ideas.

Thanks.