I've a dev site

I've a dev site (http://www.amplifyco.com/ownership-opportunities/available-homes/) that is not running js correctly.

It's original live site (http://www.uwharriepoint.com/ownership-opportunities/available-homes/) shows how it should work when you click on an image, click on a property, or use the dropdown search.

  • DJ Nickles

    I've copied and pasted the theme's templates and other template files from the live site to this dev site. I've also replicated the directories and js and css files as best as I could without being able to access ftp or add plugins. The sites look identical but the js is not functioning on the dev site. The original live site (http://www.uwharriepoint.com/ownership-opportunities/available-homes/) shows how it should work when you click on an image, click on a property, or use the dropdown search.

    I haven't heard anything from support since my original chat session. Please update.

    • Anton Vanyukov

      Hi DJ Nickles ,
      Sorry for keeping you waiting for so long.
      I've taken a look at your website. I've noticed a few things you should try and fix. First of all, the table with id="properties" is missing class="dataTable"
      Also I've noticed that you have multiple versions of jQuery included. Were you trying to copy and paste the code from the original website? If so, you do not need to include jQuery in the template, as it is loaded by default by WordPress.
      Can you try and fix these issues and see if it helps?

  • DJ Nickles

    Anton,
    Thank you.
    I was able to solve the missing class="dataTable" by calling jquery.dataTables.min.js from header.php instead of from the page template files. It seems that the order in which that js file loads makes a difference.

    Your instruction regarding "multiple versions of jQuery included" is eluding me. Are you referring to any of the following files in the theme's js directory?
    jquery.dataTables.min.js
    jquery.easing.min.js
    jquery.fullscreenr.js
    jquery.infieldlabel.min.js
    jquery.min.js
    jquery.prettyPhoto.js
    supersized.3.2.6.js
    swfobject.js

    If you instruct me to remove any of those, I'll need to remove any reference to them from the page template files too, correct?

    You may notice a whole new set of js errors in the browser console since class="dataTable" is fixed.

  • DJ Nickles

    Anton,
    Thank you. I've commented out the js script links in the header.php file and added the following code to the theme's function.php file:

    /**
    *Enqueue Scripts
    */
    function up_scripts() {
    wp_register_script('jQuery', get_template_directory_uri() . '/wp-includes/js/jquery/jquery.js', array('jquery'),'1.1', true);
    wp_enqueue_script('jQuery');
    
    wp_register_script('jQuery.min', get_template_directory_uri() . '/wp-content/themes/up/js/jquery.min.js', array('jquery'),'1.1', true);
    wp_enqueue_script('jQuery.min');
    
    wp_register_script('dataTables', get_template_directory_uri() . '/wp-content/themes/up/js/jquery.dataTables.min.js', array('jquery'),'1.1', true);
    wp_enqueue_script('dataTables');
    
    wp_register_script('swfobject', get_template_directory_uri() . '/wp-content/themes/up/js/swfobject.js', array('jquery'),'1.1', true);
    wp_enqueue_script('swfobject');
    
    wp_register_script('prettyPhoto', get_template_directory_uri() . '/wp-content/themes/up/js/jquery.prettyPhoto.js', array('jquery'),'1.1', true);
    wp_enqueue_script('prettyPhoto');
    
    wp_register_script('easing', get_template_directory_uri() . '/wp-content/themes/up/js/jquery.easing.min.js', array('jquery'),'1.1', true);
    wp_enqueue_script('easing');
    
    wp_register_script('supersized', get_template_directory_uri() . '/wp-content/themes/up/js/supersized.3.2.6.js', array('jquery'),'1.1', true);
    wp_enqueue_script('supersized');
    
    wp_register_script('up.global', get_template_directory_uri() . '/wp-content/themes/up/js/up.global.js', array('jquery'),'1.1', true);
    wp_enqueue_script('up.global');
    }
    
    add_action( 'wp_enqueue_scripts', 'up_scripts' );

    The expansion feature is working when you click on any property on the page as it should, http://www.amplifyco.com/ownership-opportunities/available-homes/. But inside the expansion you'll see three icons to the left: Map, Print, and Virtual tour.
    Print is working.
    Virtual tour link loads in Chrome but the images do not display. Loads in Firefox but the images do not display and Firefox also opens a 2nd blank page.
    The Map link is not loading properly. It does partially work if after it loads, you right click on the map area and select Play.

    You can see the working original version here (http://www.uwharriepoint.com/ownership-opportunities/available-homes/) but the new site is having the above problems.

    The WPMU dev support feature is activated on the new site (http://www.amplifyco.com) if you need to get in.

  • Anton Vanyukov

    I still don't really understand why you are adding so many instances of jQuery.
    This line of code array('jquery') means that the script requires jQuery and one will be provided by WordPress. You do not need to include it two extra times (your first two includes).

    The virtual tour is not working, because your image sources are not accessible. These are not valid sources:

    <div class="ws_images">
        <ul>
            <li>
                <img id="image-1" src="3287" alt="" title=""/>Front View of Home
            </li>
            <li>
                <img id="image-2" src="3282" alt="" title=""/>Rear View of Home
            </li>
            ...
        </ul>
    </div>

    You should check the virtual tours section and see that the images are there and have valid urls.

  • DJ Nickles

    Anton,
    Thank you. I didn't notice the src referencing the image id instead of the image url. That's been corrected now. I also commented out the first two jQuery calls in the functions.php file as you suggested.

    Results from the above two changes are that the 1st image displays for the virtual tour now but the other images are not sliding in. The slider image list seems correct now as the urls are listed instead of the image id's. I'm not seeing js errors in the browser console.

  • DJ Nickles

    Anton,
    Thank you. That was another good catch. ? It's curious how I copied the js files and the page template files from the old site but I'm having to adjust them on the new site. But I realized after making the above change, that during my attempts to get the virtual tour working I had replaced that script.js file with one from the wowslider site and thus lost the slider id setting along with other settings (like the kenburns effect) from the old site. I've corrected for all of those other variables and the virtual tour is now working as it should!

    You are too good!

    In Firefox browser, the virtual tour is opening up an additional blank page. That is not happening with Chrome browser. TEMPLATE_list_homes.php uses window.open in virtualTourPop(url) function and it specifies target_blank when calling the function on line 114. Any thoughts on how to cure the additional blank window opening in Firefox browser?