2012-05-08 18 views
2

私はjQuery Sticky Notes Pluginを使用しますhttp://www.jquery-sticky-notes.com/ 私はasp.net Webサービスとajaxを使ってノートを作成し、編集して削除すると、json配列を使ってデータベースからノートを取得します。 問題がある:私は今1つのノートならば、それはjquery sticky notes plugin

jQuery(document).ready(function() { 
      var options = { 
       notes:[{"id":1, 
         "text":"Test Internet Explorer", 
         "pos_x": 50, 
         "pos_y": 50, 
         "width": 200,       
         "height": 200,              
        }] 
       ,resizable: true 
       ,controls: true 
       ,editCallback: edited 
       ,createCallback: created 
       ,deleteCallback: deleted 
       ,moveCallback: moved      
       ,resizeCallback: resized      

      }; 
      jQuery("#notes").stickyNotes(options); 
     }); 

ノートは、ノートのプロパティが含まれているオプションの配列を使用するデータベース からノートで、このプラグインを読み込むカント: - はどのように私はこの配列を使用してデータベースからノートでこのプラグインをpopuleteすることができます

+0

Uはuがhttp://jsfiddle.net/のコードともjQueryのAJAXとサンプルJSON配列またはWebサービス出力貼り付けることができます。あなたはasp.net mvc 3を使用して? – Thulasiram

+0

http://jsfiddle.net/qA8NA/1/ –

+0

var Jnotes1 = $ .parseJSON(data); var Jnotes2 = JSON.stringify(data)ここにJnotes2の出力をペーストできますか? – Thulasiram

答えて

2

下記のコードを試して、コードのコメントに従って、Note配列を入力してください(3行目からForループなどを配置する必要があります)。 2番目の最後の行と同じように配列をoption.notesに割り当てます。

jQuery(document).ready(function() { 
      var note= new Object(); 
      ///////Populate the Notes array here 
      note=[{"id":1, 
          "text":"Sticky Text1", 
          "pos_x": 20, 
          "pos_y": 50, 
          "width": 200,       
          "height": 200,              
         },{"id":1, 
          "text":"Sticky Text 2", 
          "pos_x": 50, 
          "pos_y": 50, 
          "width": 200,       
          "height": 200,              
         }]; 
       ///////Populate the Notes array here 

       var options = { 
        notes:null 
        ,resizable: true 
        ,controls: true 
        ,editCallback: edited 
        ,createCallback: created 
        ,deleteCallback: deleted 
        ,moveCallback: moved      
        ,resizeCallback: resized      

       }; 
       options.notes=note; 
       jQuery("#notes").stickyNotes(options); 
+1

jqueryまたはajaxを使用してノードを動的に追加する方がよいでしょう。 – Talha

0
$(documet).ready(function() { 
      //calling for edit text  
      var edited = function (note) { 
       alert("Edited note with id " + note.id + ", new text is: " + note.text); 
      }; 
      // calling:create new note to add it to database 
      var created = function (note) { 
       alert("Created note with id " + note.id + ", text is: " + note.text); 
      }; 

      //calling to delete note from database 
      var deleted = function (note) { 
       alert("Deleted note with id " + note.id + ", text is: " + note.text); 
      }; 

      //calling to update location 
      var moved = function (note) { 
       alert("Moved note with id " + note.id + ", text is: " + note.text); 
      }; 

      //calling to update size 
      var resized = function (note) { 
       alert("Resized note with id " + note.id + ", text is: " + note.text); 
      }; 

      $.ajax({ 
       type: "POST", 
       url: "../../Services/sticky_notes.asmx/getnotes", 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function suc(data, status) { 
        var Jnotes = $.parseJSON(data); 

        //i have json now how can i use it to populate option 
        var options = { 
         notes: Jnotes, 
         resizable: true, 
         controls: true, 
         editCallback: edited, 
         createCallback: created, 
         deleteCallback: deleted, 
         moveCallback: moved, 
         resizeCallback: resized 
        }; 

        $("#notes").stickyNotes(options); 
       }, 
       error: function error(request, status, error) { 
        csscody.alert(request.statusText); 
       } 
      }); 
     }); 
+0

var Jnotes1 = $ .parseJSON(data); var Jnotes2 = JSON.stringify(data) ここにJnotes2の出力をペーストできますか? – Thulasiram

+0

$ .parseJSON(data.d);を使用しないでください。それは単次元配列用です。 – Thulasiram