2009-07-09 20 views
0

基本的に私が欲しいのは簡単です、人がクリックすると、フィールドが編集可能になります。jquery-jeditable not working

値を変更したら、キーボードでEscを押すか、外側をクリックしてレコードを保存します。

なぜ動作しないのか分かりません。ドキュメントは完成していないようです...誰でもこの作品の仕組みを知りましたか? ドキュメントページ:http://www.appelsiini.net/projects/jeditable

ここでは、レビューする人のために既存のコードをここに掲載します。

testing.html

<head> 

<title></title> 

<script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="jquery.jeditable.mini.js" type="text/javascript" charset="utf-8"></script> 

<script type="text/javascript" charset="utf-8"> 

$(function() { 

    $(".click").editable("jeditabletest.php", { 
     indicator : "<img src='indicator.gif'>", 
     tooltip : "Click to edit...", 
     style : "inherit" 
    }); 

}); 

</script> 

<style type="text/css"> 
#sidebar { 
    width: 0px; 
} 

#content { 
    width: 770px; 
} 

.editable input[type=submit] { 
    color: #F00; 
    font-weight: bold; 
} 
.editable input[type=button] { 
    color: #0F0; 
    font-weight: bold; 
} 

</style> 

</head> 



<body>  
     <b class="click" style="display: inline">Click me if you dare!</b></> or maybe you should   

</body> 
</html> 


jeditabletest.php 

<?php 
echo "hehehe" 
?> 

間違っていることをだれにも知っているのですか?私は何度も試みましたが、まったく働いていませんでした。関連するすべてのライブラリファイルが既に置かれ

+0

フィードバックのためのありがとう:-)最後に私はそれがうまくいかない理由を見つけました。編集後に他の場所をクリックすると、\t onblurを設定する必要があります: 'submit'、そうでない場合、スクリプトは外部ファイルへのajax呼び出しを実行しません。 –

答えて

1

:ESCが普遍キャンセルするために予約されているので

$(".editable").editable("http://www.example.com/save.php", { 
    onblur : "submit" 
}); 

ESCを押したときの提出は、一般的に悪い考えです。本当にこれをやりたければ、Jeditableコードを編集する必要があります。 jquery.jeditable.jsで以下を検索して編集してください。

/* discard changes if pressing esc */ 
input.keydown(function(e) { 
    if (e.keyCode == 27) { 
     e.preventDefault(); 
     reset.apply(form, [settings, self]); 
    } 
}); 
+0

jeditableから面白い問題が見つかりました。私が編集をクリックすると、「単語」の中心が整列Firefoxの で 例 - ... それから私は、Firefox、特定の単語の表裏をします使用してDBにテキストボックスからのデータを保存するために他の場所をクリック(たとえ私がajaxページで受信した文字列をトリミングした後でも)余分な空白があります。例:「単語」を保存したいが、dbに保存される最終データは「単語」 IEではこのような問題はありません。 このプロセスで何が起こっているかご存知ですか? –

+0

おっと、私はすでに問題を発見しました。 Firefoxでは、​​という単語を置くと、トリムできない空白が表示されます。 IEでは、通常のHTMLタグの空白をあらかじめ無視します。 –

0

yeapを:。私はそれがdivcontentEditableプロパティを使用していますhttp://valums.com/edit-in-place/

をお勧めします。あなたはそれを使用し始める前にそれを調べることができます。

JRH

0

私はあなたのコードを実行し、正常に動作するように見えました。私はそれがあなたのために働いていない理由は、この.htmlページは、http://localhost/mypage.htmlのようなWebサーバーから実行する必要があると思う。 jeditableプラグインは、編集したテキストを保存しようとするたびにサーバーへのAJAX呼び出しを行い、サーバーからページを実行するために必要なAJAX呼び出しを行います。

希望すると便利です。ユーザが外部クリックしたときに、以下のないフォームを送信可能にする