jquery редактирование страницы

2010-05-02 jquery ajax bottle

В данной заметке приведен пример изменения данных без перезагрузки страницы, будем изменять вики страницу.

Для разметки вики страницы загрузите pymark, загрузим его текущую папку

hg clone http://bitbucket.org/lega911/pymark

В качестве веб фреймворка будем использовать web bottle, вы его можете установить либо просто положить в текущую папку

wget http://github.com/defnull/bottle/raw/master/bottle.py

В текущей папке создадим файл - веб приложение

#!/usr/bin/python
# coding: utf8

from bottle import run, debug, route, request
from pymark import mark1
import os

@route('/:fname')
def getfile(fname):
    if os.path.isfile(fname): return open(fname,'rb')
    if fname == 'msg': return 'new message'
    abort(404)

@route('/mark/:fname')
def getfile(fname):
    return mark1(open(fname,'rb').read())

@route('/')
def main():
    buf = open('page.html','rb').read()
    if os.path.isfile('msg'): msg = mark1(open('msg','rb').read())
    else: msg = 'new message'
    return buf.replace('{{msg}}', msg )

@route('/send', method='POST')
def send():
    if 'msg' in request.POST:
        data = request.POST['msg']
        open('msg','wb').write(data)
        return mark1(data)
    return 'error post'

debug(True)
run(port=8080,reloader=True)

Теперь создадим главную страницу, и сохраним в текущую папку под именем page.html

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#but_save").hide();
            $("#but_cancel").hide();
            $("#but_edit").bind("click", function(e){
                $("#but_edit").hide();
                data = $("#msg").text();
                $("#msg").html( '<textarea style="width: 300px; height: 200px;" id="emsg">loading...</textarea>' );
                $.get("/msg", function(data) {
                    $("#emsg").text(data);
                    $("#but_save").show();
                    $("#but_cancel").show();
                });
            });
            $("#but_save").bind("click", function(e){
                $("#but_save").hide();
                $("#but_cancel").hide();
                data = $("#emsg").val();
                $.post("/send", { msg: data },
                    function(data){
                    $("#msg").html(data);
                    $("#but_edit").show();
                });
            });
            $("#but_cancel").bind("click", function(e){
                $("#but_save").hide();
                $("#but_cancel").hide();
                $.get("/mark/msg", function(data) {
                    $("#msg").html(data);
                    $("#but_edit").show();
                });
            });
        });
    </script>
    <style>
        .mess { border: 4px double black; margin: 5px; padding: 5px; width: 300px; height: 200px; }
        .menu { border: 1px solid blue; cursor: pointer; padding: 3px; }
    </style>
</head>
<body>
    <br />
    <div id="msg" class="mess">{{msg}}</div>
    <br />
    <span class="menu" id="but_edit">edit</span>
    <span class="menu" id="but_save">save</span>
    <span class="menu" id="but_cancel">cancel</span>
</body>
</html>

Готово, можно запускать веб приложение.

Home

Tags

jquery редактирование страницы