load in jQuery doesn't work in Chrome nor Safari

Question

[UPDATE] It only works in Firefox and not at Chrome nor Safari. I am following a jQuery tutorial (AHAH) but the description doesn't show up in the "show more" section when I click on the flowers.

$(document).ready(function(e) {

var $flowers = $('#flower-items');

$('#flower-items').find('a').on('click', function(e){
    e.preventDefault();

    var $desc = $('#flower-description');

    switch($(this).attr('href')) {
        case 'calla.html' :
            $desc.load('fragments/lilies.html');
            break;
        case 'sunflowers.html' :
            $desc.load('fragments/sunflower.html');
            break;
        case 'iris.html' :
            $desc.load('fragments/irises.html');
            break;
        case 'alstromeria.html' :
            $desc.load('fragments/peruvian.html');
            break;
    }

here's the folder structure:

Have you tried watching your console in your browser to see if you are accessing the HTML files correctly? — Alain Nisam, Feb 24 '16 at 03:34

score 1 · Accepted Answer · answered Feb 24 '16 at 03:50

This works for me in CHROME:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<ul id="flower-items">
    <li><a href="calla.html">Flower 1</a></li>
    <li><a href="sunflowers.html">Flower 2</a></li>
    <li><a href="iris.html">Flower 3</a></li>
    <li><a href="alstromeria.html">Flower 4</a></li>
    <li><a href="5.html">Flower 5</a></li>
    <li><a href="6.html">Flower 6</a></li>
    <li><a href="7.html">Flower 7</a></li>
</ul>

<div id="flower-description">Flower Description</div>



<script type="text/javascript">
$(document).ready(function(){

    var $flowers = $('#flower-items');

    $('#flower-items').find('a').on('click', function(e){
        alert('a');
        e.preventDefault();

        var $desc = $('#flower-description');

        switch($(this).attr('href')) {
            case 'calla.html' :
                alert('b')
                $desc.load('fragments/lilies.html');
                break;
            case 'sunflowers.html' :
                $desc.load('fragments/sunflower.html');
                break;
            case 'iris.html' :
                $desc.load('fragments/irises.html');
                break;
            case 'alstromeria.html' :
                $desc.load('fragments/peruvian.html');
                break;
        }
    })

})
</script>

You should see this in console:

load in jQuery doesn't work in Chrome nor Safari

1 Answers1