It is currently Fri Oct 24, 2014 6:08 pm Advanced search

onAfterGetContent - can't access sender.content DOM

Technical support, bug reports, feature requests and more.

onAfterGetContent - can't access sender.content DOM

Postby ihtus » Wed Feb 15, 2012 9:40 pm

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!
ihtus
 
Posts: 50
Joined: Wed Jan 18, 2012 11:34 pm
Location: Toronto, Canada

Re: onAfterGetContent - can't access sender.content DOM

Postby torstein.honsi » Thu Feb 16, 2012 12:09 pm

I set up an example for you. It uses onAfterGetContent to get the popup height right: http://jsfiddle.net/highcharts/khrwx/
Torstein Hønsi
CTO, Founder
Highsoft Solutions
User avatar
torstein.honsi
Site Admin
 
Posts: 9200
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Re: onAfterGetContent - can't access sender.content DOM

Postby ihtus » Thu Feb 16, 2012 3:05 pm

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!
ihtus
 
Posts: 50
Joined: Wed Jan 18, 2012 11:34 pm
Location: Toronto, Canada

Re: onAfterGetContent - can't access sender.content DOM

Postby RoadRash » Mon Feb 20, 2012 10:33 am

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[hilight], height:100[/hilight]});\">$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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: onAfterGetContent - can't access sender.content DOM

Postby ihtus » Tue Feb 21, 2012 10:16 pm

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!
ihtus
 
Posts: 50
Joined: Wed Jan 18, 2012 11:34 pm
Location: Toronto, Canada

Re: onAfterGetContent - can't access sender.content DOM

Postby RoadRash » Thu Feb 23, 2012 3:45 pm

Will it work if you replace
Code: Select all
hs.cacheAjax = false;

with
Code: Select all
hs.preserveContent = false;
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: onAfterGetContent - can't access sender.content DOM

Postby ihtus » Thu Feb 23, 2012 11:38 pm

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..
ihtus
 
Posts: 50
Joined: Wed Jan 18, 2012 11:34 pm
Location: Toronto, Canada

Re: onAfterGetContent - can't access sender.content DOM

Postby RoadRash » Fri Feb 24, 2012 1:14 pm

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
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: onAfterGetContent - can't access sender.content DOM

Postby ihtus » Fri Feb 24, 2012 3:06 pm

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.
ihtus
 
Posts: 50
Joined: Wed Jan 18, 2012 11:34 pm
Location: Toronto, Canada


Return to Highslide JS Usage

Who is online

Users browsing this forum: No registered users and 3 guests