Member Avatar for jelly46

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
  • 1K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Troy III

Recommended Answers

All 6 Replies

Member Avatar for mmcdonald

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
Member Avatar for jelly46

Yeah i did its absolutley baffling me, thanks mate.

Member Avatar for jrewing

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.

Member Avatar for Troy III

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>
commented: nods +14
Member Avatar for jelly46

This lookes to be working fine now thanks TroyIII

Member Avatar for Troy III

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.