April 29, 2011
JQuery will work with Fiddler, but not on my server
Question by user730663
Fiddler Link : http://jsfiddle.net/nLxc4/5/
My code :
<html>
<head>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
function dynamicSearch() {
var val = $('#search').val();
if (val == '') val = '.';
var srch = new RegExp(val, "gi");
$('.active').each(function(i, el) {
if ($(this).text().match(srch)) {
$(this).show();
} else {
$(this).hide();
}
});
}
$(':checkbox').bind('change', function() {
var div = this.value.replace('value', '#div');
if (this.checked) {
$(div).addClass('active');
$(div).show();
} else {
$(div).removeClass('active');
$(div).hide();
}
});
$('#search').bind('keyup', dynamicSearch);
</script>
</head>
<body>
<form>
<label for="search">Search:</label>
<input type="text" name="search" id="search"/>
<input type="checkbox" name="modtype" value="value1" />value1
<input type="checkbox" name="modtype" value="value2" />value2
<input type="checkbox" name="modtype" value="value3" />value3
<input type="checkbox" name="modtype" value="value4" />value4
<input type="checkbox" name="modtype" value="value5" />value5
<div class="row" id="div1" style="display:none">Show Div 1</div>
<div class="row" id="div2" style="display:none">Show Div 2</div>
<div class="row" id="div3" style="display:none">Show Div 3</div>
<div class="row" id="div4" style="display:none">Show Div 4</div>
<div class="row" id="div5" style="display:none">Show Div 5</div>
</form>
</body>
</html>
As you can see, in the fiddler, when you click a check box it displays a particular div. On my home server, nothing happens. Can anyone see why this might be the case? Thanks very much.
Answer by Starx
Jsfiddler, wraps the js code inside $(document).ready() if you choose jQuery as the library. That’s why it is working there and not on your server.
Update the following in your code
$(document).ready(function() { //This
$(':checkbox').bind('change', function() {
var div = this.value.replace('value', '#div');
if (this.checked) {
$(div).addClass('active');
$(div).show();
} else {
$(div).removeClass('active');
$(div).hide();
}
});
$('#search').bind('keyup', dynamicSearch);
}); //And This
