jQuery的粘滯便箋插入

Question

我使用jQuery粘滯便箋插件http://www.jquery-sticky-notes.com/ 我連接數據庫使用asp.net web服務和ajax創建註釋和編輯和刪除，然後我從數據庫使用json數組獲取筆記。 問題是：我不能填充此插件與數據庫 它使用的選項數組

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這個插件與筆記的選項

Answer 1

嘗試下面的代碼，並根據代碼中的註釋填充Note數組，從第3行開始（您需要放置For循環或其他東西）。然後像第二行一樣將該數組分配到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); 

Answer 2

$(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); 
       } 
      }); 
     });