/// import
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/// logging
try { console.log('init console... done'); } catch(e) { console = { log: function() {} } }
/// body에 붙는 onload와 같이 페이지 시작시에 호출된다.( dom 개체가 모두 loading된후 호출 )
$(document).ready(function()
{
/// input.moption <- "<input" selector에서 class name이 "moption"이 click event가 발생하면 set_manual_status 함수를 호출한다.
$("input.moption").bind('click', set_manual_status);
$("a.link.word").bind('click', dha_result);
});
/// e <- 위에서 click event라고 명시했기 때문에 e는 click event가 넘어온다.
function set_manual_status(e)
{
/// $(this)는 jQuery object로써 click이 발생한 부분
/// ( <input type=\"radio\" name=\"manual_status\" value=\"-1\" class=\"moption\">초기화 )이 된다.
var manual = $(this).attr('value');
var form = $(this);
/// logging ( chrome )
console.log("word : " + $(this).siblings("input.word"));
/// closest는 $(this)를 중심으로 상위에 selector가 form이고 class name이 setoption인것을 찾는다.
/// form.setoption이 찾아진 위치에서 하위에 selector가 input이고 class name이 word를 찾는다.
$(this).closest("form.setoption").find("input.word");
/// .css는 찾아진 해당 위치의 background-color를 #f88로 변경한다.
$(this).closest("tr").find("td.manual_status").css("background-color", "#f88");
jQuery.ajax({
/// 호출할 URL
url: "http://10.30.143.80:3680/php/top_person/update_mysql.php",
/// 호출할 URL에서 리턴할 데이터의 TYPE
dataType: 'json',
/// URL 뒤에 붙일 파라미터들
data:
{
word: $(this).siblings("input.word").attr("value"),
manual: $(this).attr("value"),
},
/// ERROR LOG
error: function(jqXHR)
{
console.log("error jqHXR.responseText="+jqXHR.responseText);
},
/// URL에 호출돼서 결과물이 정상적으로 넘어올때 호출되는 함수로 리턴된 값은 data에 들어있다.
success: function(data, textStatus, jqXHR)
{
var rt = data.status;
var value = data.manual_status;
console.log("success. return status="+rt);
console.log("success. manual_status="+value);
form.closest("tr").find("td.manual_status").text(value).css("background-color", "#8f8");
return;
} // success
}); /* jQuery.ajax() */
}
//]]></script>
---- html code ----
<form name="setoption">
<td class="number" width=80px>" . ($num+1) . "</td>\n";/// default field
<input type="radio" name="manual_status" value="-1" class="moption">-1
<input type="radio" name="manual_status" value="0" class="moption">0
<input type="radio" name="manual_status" value="1" class="moption">1
<input type="radio" name="manual_status" value="2" class="moption">2
<input type="radio" name="manual_status" value="3" class="moption">3
<input type=hidden name="word" class="word" value="" . $word . "">
<input type=hidden name="page" class="page" value="" . $page . "">
<input type=hidden name="sort" class="sort" value="" . $sort . "">
</td>
</form>
'프로그램밍언어 > HTML,JAVASCRIPT' 카테고리의 다른 글
| eclipse (0) | 2014.06.20 |
|---|
