JQueryは1.0系じゃないと動かないみたいです。
JavaScriptとJQueryの練習で書いてみた。適当なロゴ画像とローディング画像を持ってきて、以下のコードを貼っつけるとこんな感じになります。
普通にリクエスト投げてHTMLのスクレイピングしてるけど、XML-RPCプラグイン入れてるんだから、それ使えばいいと書いてる途中で気付きました。けど、これはこれで面白かったのでそのまま。
JQuery1.0.3でIEだと動いてませんでした。たぶん原因はNew Ticket – jQuery Core - Bug Trackerだったぽい。ついでにshowとhideを使うようにして、ちょっとだけJQueryらしく書き換え。
$(function(){ var base_url = "http://someTracSite/"; var check_attribute = function(key) { return $( "#" + key ).attr("checked")? "&" + key + "=on": ""; } $("span#loading").hide(); $("span#loading").ajaxStart(function(){ $(this).show(); }); $("span#loading").ajaxStop(function(){ $(this).hide(); }); var projects = new Object(); var retrieve_projects = function(data, status) { var temp_elem = $(document.createElement("div")); temp_elem.html(data); var a_elem = $("a",temp_elem); var select_elem = $("#projects"); a_elem.each(function(){ var href_attr = $(this).href().split("/")[4]; projects[ href_attr ] = { pj_name:href_attr, pj_title:$(this).text(), pj_url:$(this).href() }; var option_elem = $( document.createElement("option") ); option_elem.html( $(this).text() ); option_elem.val( href_attr ); option_elem.addClass( "project" ); select_elem.append( option_elem ); }); } $.get(base_url, retrieve_projects ); var search_into_project = function(project) { return function(data, status) { var temp_elem = $(document.createElement("div")); temp_elem.html(data); // prefixでTracってついてるwikiページを検索結果から除外 $("dl#results dt", temp_elem).each(function() { if ($(this).text().match(new RegExp("^Trac")) != undefined) { $(this).next().remove(); $(this).next().remove(); $(this).remove(); } }); var res_elem = $("div#searchable",temp_elem); $("a", res_elem).attr("target", "_blank"); var res_area_elem = $(document.createElement("div")); res_area_elem.addClass("indiv_result"); $("div#search_result").append( res_area_elem ); var h3_elem = $(document.createElement("h3")); var a_elem = $(document.createElement("a")); a_elem.html(project.pj_title); a_elem.href(project.pj_url); h3_elem.append(a_elem); res_area_elem.append( h3_elem ); if (res_elem.size() == 0) { res_area_elem.append( "no matches..." ); } else { res_area_elem.append( res_elem ); } } } $("#whole_search").click(function(){ $("div#search_result").empty(); var elem_selected = false; var project_elems = $("option.project"); $.each( project_elems, function ( i ) { if (this.selected) { elem_selected = true; var req_url = base_url + projects[ this.value ].pj_name + "/search?q=" + $( "#q" ).val() + check_attribute("wiki") + check_attribute( "changeset" ) + check_attribute( "ticket" ); $.get( req_url, search_into_project( projects[ this.value ] ) ); } } ); if (!elem_selected) { $.each( projects, function( i ) { var req_url = base_url + this.pj_name + "/search?q=" + $( "#q" ).val() + check_attribute("wiki") + check_attribute( "changeset" ) + check_attribute( "ticket" ); $.get( req_url, search_into_project(this) ); } ); } }); });
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Trac Whole Search</title> <link rel="stylesheet" href="../trac/SOME_TRAC_SITE/chrome/common/css/trac.css" type="text/css" /> <link rel="stylesheet" href="../trac/SOME_TRAC_SITE/chrome/common/css/search.css" type="text/css" /> <style type="text/css"> span#loading { margin-left:50px; position:relative; top:10px; } div.indiv_result { background-color:#F7F7F7; margin-left:20px; } </style> <script type="text/javascript" src="../trac/SOME_TRAC_SITE/chrome/common/js/trac.js"></script> <script type="text/javascript" src="jquery-latest.pack.js"></script> <script type="text/javascript" src="trac_ws.js"></script> <script type="text/javascript"> </script> </head> <body> <h1> <label for="q"><a href="http://tws_site/tws/"><img src="img/tws_logo.png" alt="Trac Whole Search" /></a></label> </h1> <div id="metanav" class="nav"> <ul> <li class="first"> </li> <li> </li> </ul> </div> </div> <div id="mainnav" class="nav"> <ul> <li class="first"> </li> <li> </li> <li class="active"> </li> <li class="last"> </li> </ul> </div> <div id="main"> <div id="content" class="search"> <p> <input type="text" id="q" name="q" size="40" value="" /> <input id="whole_search" type="submit" value="検索実行" /> <span id="loading"><img src="img/indicator_medium.gif"/></span> </p> <p> <input type="checkbox" id="ticket" name="ticket" checked="checked" /> <label for="ticket">Tickets</label> <input type="checkbox" id="changeset" name="changeset" checked="checked" /> <label for="changeset">Changesets</label> <input type="checkbox" id="wiki" name="wiki" checked="checked" /> <label for="wiki">Wiki</label> <select name="projects" id="projects" multiple="multiple"></select> </p> <hr /> <h2>Search Result</h2> <div id="search_result"></div> <hr /> </div> </div> <div id="footer"> <hr /> <p class="left">footer</p> <p class="right"> <a href='http://jquery.com/' title='jQuery JavaScript Library'><img src='http://jquery.com/files/buttons/110x31_gr01.png' alt='jQuery JavaScript Library' title='jQuery JavaScript Library' style='border:none;'/></a> </p> </div> </body> </html>
