/// 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
Posted by 고요한하늘
,