Javascript not loading on page load

i have a code for a jquery bx slider for photos and videos. For some reason - it is not loading when the page loads - but if I click a tab to load something different in a block - which is also using the same jquery bxslider - then it does load properly.

If you go here:

http://test.cvp71.com/m/markets/view/TS-G6845R

you will notice that there are three images - one under another. But - in the description block - if you change the select menu to videos - the videos will display properly - AND - the photos will then display correctly.

I would examine where you are loading again; change what element of the page loads the jquery.

ok, so - it is in a module that is a duplicate of the groups module.

on the BxGeoupsTemplate.php page, I have this:

    function blockMedia (&$aDataEntry)
    {
       
            $oDb = new BxDolDb();
            $aItems = array();       
            $aPhotos = $oDb->getAll("SELECT * FROM `cf_markets_images` WHERE `entry_id` = '".$aDataEntry['id']."'");
                                       
                if (!empty($aPhotos)) {
                    foreach($aPhotos as $aPhotosItem) {
                            $aItems[] = array(
                            'photo_ID' => $aPhotosItem['media_id'],
                            'hash' => $oDb->getOne("SELECT `Hash` FROM `bx_photos_main` WHERE `ID` = '".$aPhotosItem['media_id']."'"),
                        );
                        }

                }
                $aVars = array (           
                        'bx_repeat:photos' => $aItems,                                               
                );
        return $this->parseHtmlByName('block_media', $aVars);
    }

and the block_media.html page is this:

<script src="http://test.cvp71.com/modules/ccf/markets/js/plugins/jquery.fitvids.js"></script>
<script src="http://test.cvp71.com/modules/ccf/markets/js/jquery.bxslider.js"></script>
<link href="http://test.cvp71.com/modules/ccf/markets/js/jquery.bxslider.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$('.bxslider').bxSlider({
});
    </script>
 
<div class="bx-def-font-large">

<bx_if:photos>

    <ul class="bxslider">
   
    <bx_repeat:photos>
          <li><img src="http://test.cvp71.com/m/photos/get_image/file/__hash__.jpg" alt=""/></li>
      </bx_repeat:photos> 
     
      </ul>
   
</bx_if:photos>

</div>

things done so far:

• turned caches on and off
• deleted all caches, cookies, history, and all that
• restarted pc
• restarted server
• updated java
• tried different browsers and mobile devices

Hi Prof. I had a similar problem a month or so ago and it turned out to be the js clashing with other js in Dolphin.

To workaround the problem, I ended up just putting the js slider in it's own FQDN and adding it to an iFrame in Dolphin. Worked a treat.

Did you try loading it in the page_500.html file?

i had not tried to put in the 500.html. I did try putting in _header as well as the new injections section - neither of which worked.

"To workaround the problem, I ended up just putting the js slider in it's own FQDN and adding it to an iFrame in Dolphin. Worked a treat." - please explain further.

I don't think this is relevant to your problem.

I went to your page and it is evident the jquery was not loaded until you switched to video. 

One tool that is often overlooked is the simple page view of the browser; I use it when I want to see if a problem is related to something as simple as an incorrect path.  Say you see where you have a link to the jquery; click on it and you should see the jquery listed in the window; I have used that often to make sure that a jquery/javascript was actually linked and loaded properly. 

all that is correct - i had already checked that aspect. Still not working unless i change to videos in the description field. It seems as if it is not loading the jquery.js - which comes with dolphin - until selecting the videos.

Then my suggestion is to look at the "trigger" for the script; I am guessing that the script is not recognising there is an element on the page it should apply the script to until you do the video switch.

I would do an inspect element on that block on page load; as I said above, my guess would be the id or class or something that the script is triggered on is different on the page load and changes when you switch to video.

Hi Prof. Admittedly as GG has mentioned, this may not be related to specifically your problem. But to answer you query below, when I was putting a slider on the site which used CSS3 and JS, the slider would just show up blank (empty space on the website).

I then created a "sliders.example.com" Apache virtual server, uploaded my slider content there with HTML, then in Dolphin setup an iFrame block which referenced the https://sliders.example.com site via "responsive" iFrame code.

Technically, this moved the CSS, JS to a "separate" site but from the Dolphin side it was embedded into Dolphin. This resulted in a seamless look-and-feel and it solved the problem.

admittedly - this taks is not one of extreme importance as there are already blocks for videos and photos. I just liked this slider better and i was hoping to combine videos and photos together in one block - with a tab to select which you want to look at - and with photos being the default shown. It takes up a lot less space and still allows me to get what I want mostly above the fold..

Was the proper trigger for the jquery present on initial page load?  That is what I would suspect as the problem.  What about document.ready?  Sometimes the jquery needs to be told to wait for the document to become ready before you apply the script.

Thanks GG. I was missing that part. Now it all works well, and I am thinking of replacing the photos, videos, and sounds block in all modules with this. Now I have all three in one block with a drop down list to select which you want to view. Takes up way less space than having three blocks.