javascript - jQuery malfunctions another script -
i trying build radio-enabled search box, , little search, found looking for. trying make buttons toggles ran this! liked it. it's looking for. but, once added jquery, whole search thing didn't work anymore. , honest, have no idea why. here's html 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; (i=sf.sengines.length-1; > -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 , function work. jquery critical , can't delete code. other parts of original webpage heavily using it.
you copy+pasted code fiddle is. since seperated html, js , css parts being put together, missed important part: instantiate jquery part executed when dom loaded.
in fiddle, 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, did not closed script tag correctly when including jquery. broke functionality of code within script tag right after jquery include.
this <script src="jquery.js"/> should read <script src="jquery.js"></script>
here 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>
Comments
Post a Comment