0

I am working with some code that works fine in jsfiddle but not locally, here is the jsfiddle link

this is quite confusing

here is the local code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script  type="text/javascript">

$("input[type=radio]").click(function(event) {
    var myId = this.id;
    var targetId = myId + "_div";
    $("div.choice:not(#" + targetId + ")").addClass(".none");
    $("#" + targetId).removeClass(".none");
});
</script>


<style type="text/css">
.none {
    display:none;
}

</style>
</head>

<body>

<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="none">
<label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Virgin London Marathon</option>
               <option value = "2">Round the Island cycle challenge</option>
               <option value = "3">Kilimanjaro trek</option>
               <option value = "4">Thames Path Challenge</option>
             </select>


</div>
<div id="bank" class="none"><label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Pancake Making</option>
               <option value = "2">Egg and spoon race</option>
               <option value = "3">Sack race </option>
               <option value = "4">Three leg race</option>
             </select></div>

</body>
</html>
4
Contributors
6
Replies
37
Views
3 Years
Discussion Span
Last Post by Troy III
0

Could be an issue with a local firewall or something in regards to accessing JQuery. Have you considered adding the .mis.js file locally and trying again? It's a weak reponse and I apologise for that but it's all I can think of at this moment in time.

Edited by mmcdonald

0

For starters have you noted that you are not using the jQuery versions are different (1.10.2 on your local site and 1.10.1 on JSFiddle). That apart have you checked your browser console for potentially useful error messages? Not sure what browser you use - personally I would use Chrome since its debugging tools are absolutely first rate.

1

How about not trying to attach events to elements before they are created?!
Put the script that manipulates the DOM where it belongs: towards the end of the document body.

(the working code)

<!DOCTYPE html>
<html>
<head>

<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style>
.none {
    display:none;
}
</style>
</head>

<body>
<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="none">
<label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Virgin London Marathon</option>
               <option value = "2">Round the Island cycle challenge</option>
               <option value = "3">Kilimanjaro trek</option>
               <option value = "4">Thames Path Challenge</option>
             </select>


</div>
<div id="bank" class="none"><label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Pancake Making</option>
               <option value = "2">Egg and spoon race</option>
               <option value = "3">Sack race </option>
               <option value = "4">Three leg race</option>
             </select></div>
<script>

$(':radio').change(function (event) {
    var id = $(this).data('id');
    $('#' + id).addClass('none').siblings().removeClass('none');
});
</script>
</body>
</html>
Votes + Comments
nods
0

In some crucial coding scenarios, jQuery neglects our need to be giving error feedback, moreover it leans towards suppressing them completely, which is wrong!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.