0

PHP/MySQLを使ってブログを作っていて編集投稿機能があります。

[編集] をクリックすると、ページが「更新」され (同じページに移動しますが、URL が変更されます)、 が<div>展開され、編集したい投稿のテキストが に表示されます<textarea>。

別の SO ユーザーの助けを借りて、この作業の一部を完了しました。唯一の問題は、編集可能なテキストをすべての<texarea>ボックスに入れていることです。

これが実際の例です: http://thebulb.daysofthedad.net/testing.php

これを機能させる方法についていくつか考えていますが、jQuery や Ajax が苦手なため、その方法がわかりません。

  1. 編集可能なコンテンツを含む に ID を追加し、<textarea>その ID を jQuery スクリプトに渡します。
  2. ページを変更せずに、Ajax を使用して、編集したいテキストを に挿入します<textarea>。
  3. <textarea>[編集] をクリックすると、テキストのボックスが送信フォームのボックスに変わります。私が見つけた例（http://jsfiddle.net/25Hay/2/）を使用してその部分を機能させることができますが、それを検証のためにPHPスクリプトに送信してデータベースに挿入する方法がわかりません。

私が現在使用しているjQueryは次のとおりです。

$(function(){
    // Insert editable text into the <textarea> box
    $('.blogcontainer textarea[name=postcontent]').filter(function(i) { return $.trim($(this).val()) != ""; }).closest('.postreplycontainer').slideDown("fast");

    // Execute when Edit link is clicked
    $(document).on('click', '.postreply', function(e) {
        // Collapse all previous expanded <div>'s
        $(this).closest('.blogcontainer').siblings('.blogcontainer').find('.postreplycontainer').slideUp("fast");
        // Expand / Collapse <div>' when "Post Reply" is clicked
        $(this).closest('.blogcontainer').find('.postreplycontainer').slideToggle("fast")
            // Focus <textarea> when <div> is expanded
            .find('textarea[name=postcontent]').focus();
    });
});
4

1 に答える 1

1

data-id1)テキストエリアへの追加は簡単な方法です。post_id=5投稿を編集したいときに既にURL に含まれていることがわかりますので、それを使用できると思います (テキストエリアの更新に使用するスクリプトが見つかりません)。

2) と 3)

jQuery を使用した Ajax は非常に使いやすいです。ここで詳細を読むことができますhttp://api.jquery.com/jquery.ajax/

これは JSFiddle の例です。

$.ajax({
    url: '/echo/html/', // for JSfiddle only, here you will use the url that you normaly put in a form taget
    data: {
        textarea: textarea_value,
        postID: post_id,
        html: textarea_value // so jsFIDDLE can answer
    }, // this is the data you send to that URL, in this case it's your value, in PHP you will then get them with $_POST['textarea'] or $_POST['postID']
    type: 'post', // default is get, you can set it to post or head, text etc...
    success: function (answer) {
        // answer is what you get back from the server if the data was sent
        alert(answer)
    },
    error: function () {
        alert('something went wrong')
    }
});
于 2013-06-27T11:17:58.857 に答える