CODEWITHSUNDEEP
javascriptjquery
Mehdi
Mehdi

Reputation: 65

jQuery malfunctions another script

I was trying to build a radio-enabled search box, and with a little search, I found what I was looking for. I was trying to make the buttons look like toggles so I ran into this! I liked it. It's what I was looking for. But, once I added jQuery, the whole search thing didn't work anymore. And to be honest, I have no idea why. Here's the HTML with jQuery :

<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
function dosearch() {
  var sf=document.searchform;
  for (i=sf.sengines.length-1; i > -1; i--) {
    if (sf.sengines[i].checked) {
      var submitto = sf.sengines[i].value + escape(sf.searchterms.value);
    }
  }
  window.location.href = submitto;
  return false;
}
</script>
<script type="text/javascript">
$('#sites input:radio').addClass('input_hidden');
$('#sites label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
})
</script>
<style>
.input_hidden {
    position: absolute;
    left: -9999px;
}
.selected {
    background-color: #ccc;
}
#sites label {
    display: inline-block;
    cursor: pointer;
}
#sites label:hover {
    background-color: #efefef;
}
#sites label img {
    padding: 3px;

}
</style>
</head>
<body>
<div id="sites">
<form name="searchform" onSubmit="return dosearch();">
<input id='first' name="sengines" type="radio" checked='checked' value="http://myurl.com/search?q="/><label for="first"><img src="http://sstatic.net/serverfault/img/favicon.ico" alt="Server Fault" /></label>
<input id='req' name="sengines" type="radio" value="http://www.myotherurl.com/search?q="/><label for="req"><img src="http://sstatic.net/superuser/img/favicon.ico" alt="Super User" /></label>
<input type="text" name="searchterms"/>
</form></div>
</body>
</html>

Remove jQuery and the function will work. jQuery is critical and I can't just delete it from code. Other parts of the original webpage are heavily using it.

Upvotes: 0

Views: 156

Answers (1)

eyecatchUp
eyecatchUp

Reputation: 10560

You copy+pasted the code from the fiddle as is. But since the seperated HTML, JS and CSS parts are being put together, you missed an important part: to actually instantiate the jQuery part to be executed when the DOM is fully loaded.

In the fiddle, the final source code gives you:

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$('#sites input:radio').addClass('input_hidden');
$('#sites label').click(function() {
    $(this).addClass('selected').siblings().removeClass('selected');
});
});//]]>    
</script>

Update: Furthermore, you did not closed the script tag correctly when including jQuery. This broke the functionality of the code within the script tag right after the jQuery include.

This <script src="jquery.js"/> should read <script src="jquery.js"></script>

Here is a fully working version now:

<!doctype html>
<html>
<head>
  <style>
    .input_hidden {position: absolute; left: -9999px;}
    .selected {background-color: #ccc;}
    #sites label {display: inline-block; cursor: pointer;}
    #sites label:hover {background-color: #efefef;}
    #sites label img {padding: 3px;}
  </style>
</head>
<body>
  <div id="sites">
    <form name="searchform" id="s">
      <input id='first' name="sengines" type="radio" checked='checked' value="http://myurl.com/search?q=">
      <label for="first" class="selected"><img src="//sstatic.net/serverfault/img/favicon.ico" alt="Server Fault"></label>
      <input id='req' name="sengines" type="radio" value="http://www.myotherurl.com/search?q=">
      <label for="req"><img src="//sstatic.net/superuser/img/favicon.ico" alt="Super User"></label>
      <input type="text" name="searchterms" id="searchterms">
    </form>
  </div>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script>
  $().ready(function() {
    $('#sites input:radio').addClass('input_hidden');
    $('#sites label').click(function() {
      $(this).addClass('selected').siblings().removeClass('selected');
    });
    $('#s').submit(function(e) {
      e.preventDefault();
      window.location.href = $(this).find(':checked').val() + $('#searchterms').val();
      return !0;
    });
  });
  </script>
</body>
</html>

Upvotes: 1

Related Questions