Sticky notes in your webpage... Part 2 with Database

In part 1, we discussed most of the functions in postitall. Here we discuss how we can save them in the database so that we can show them as and when needed. Let's see how we need to do it.

1. Add a new save button for a new personal note.

 var r = $('<a id="pia_save_0" class="PIAicon" href="#" style="opacity: 1; display: inline;"> <i class="fa fa-floppy-o note-icon-save" aria-hidden="true" title="Save" onclick="SaveNote();"> </i> </a>');  
         $("#idPIAIconBottom_0").append(r);  //0 is the id for new note. only one note can be opened at first and upon saving it, another can be opened.

2. "onclick="SaveNote();" this will call the function below;

 // The id is 0 for the new personal note. This is called inside your new personal note popup  
 function SaveNote() {  
   try{  
     var p = jQuery.noConflict();   
     cstPersonalNoteUpd(0, '', p('#pia_editable_0').html(), true, p('#minicolors_bg_0').val(), p('#minicolors_text_0').val(), '', '');  
     p.PostItAll.destroy('#PIApostit_0');  //0 is the id
   }  
   catch (err) {  
     alert(err.message);  
   }  
 }  




3. "cstPersonalNoteUpd" is a JS function that uses JQuery AJAX to handle DB operations (Insert / Update)

 function cstPersonalNoteUpd(idPersonalNote, lbPersonalNote, flActive, lbBackGroundColor, lbFontColor, dtCallBack, idPNDescr) {  
   try {  
     if (lbPersonalNote.length == 0)   
       return;  
     var objPara = {  
       idPersonalNote: idPersonalNote,        
       lbPersonalNote: lbPersonalNote,  
       flActive: flActive,  
       lbBackGroundColor: lbBackGroundColor,  
       lbFontColor: lbFontColor,  
       dtCallBack: dtCallBack  
     };  
     $.ajax({  
       type: "POST",  
       url: 'yourservice.asmx/cstPersonalNoteUpd',  
       data: JSON.stringify(objPara),  
       contentType: "application/json; charset=utf-8",  
       dataType: "json",  
       success: function (msg) {  
         var ret = JSON.parse(msg.d);  
         $('#hdnIdPersonalNote').val(ret); // get the id to a hidden field          
       },  
       error: function (err) {  
         alert(err.responseText);  
       }  
     });  
   }  
   catch (err) {  
     alert(err.message);  
   }  
 }  




4. Write your own service with "cstPersonalNoteUpd" webmethod.

     [WebMethod(EnableSession = true)]  
     public string cstPersonalNoteUpd(int idPersonalNote, string lbTitlePersonalNote, string lbPersonalNote, bool flActive, string lbBackGroundColor, string lbFontColor, string dtCallBack)  
     {  
       if (HttpContext.Current.Session["LoggedInPerson"] == null) return new JavaScriptSerializer().Serialize(string.Empty);  
       JavaScriptSerializer js = new JavaScriptSerializer() { MaxJsonLength = Int32.MaxValue };  
       PersonEntity person = (PersonEntity)HttpContext.Current.Session["LoggedInPerson"];  
       PersonalNoteEntity pn = new PersonalNoteEntity();  
       pn.idPersonalNote = idPersonalNote;         
       pn.idPerson = person.idPerson;         
       pn.lbPersonalNote = string.IsNullOrEmpty(lbPersonalNote.Trim()) ? null : lbPersonalNote.Trim();   
       pn.flActive = flActive;  //boolean
       pn.lbBackGroundColor = string.IsNullOrEmpty(lbBackGroundColor.Trim()) ? null : lbBackGroundColor.Trim();   
       pn.lbFontColor = string.IsNullOrEmpty(lbFontColor.Trim()) ? null : lbFontColor.Trim();   
       if (!string.IsNullOrEmpty(dtCallBack))  //for hiding
       {  
         DateTime dtCB = DateTime.ParseExact(dtCallBack, "dd/MM/yyyy",CultureInfo.InvariantCulture);  
         pn.dtCallBack = dtCB;  
       }        
       new bllPersonalNote().cstPersonalNoteUpd(pn);  
       return js.Serialize(pn.idPersonalNote.ToString());  //return the id
     }  

5. The "cstPersonalNoteUpd" function should be called whenever a text is changed or a new personal note is created to save them in the database. If new, the id is returned and otherwise it updates. (You need to handle it in your procedure as below;)

 IF ISNULL(@idPersonalNote, 0) = 0 AND @idPerson > 0      
  BEGIN     
  -- Mode Insert    
  END  
 ELSE  
  BEGIN   
  -- update more  
  END  
 END  

6. Now you have done both the server side as well as client side function call. A new note will be saved. But to update an existing one, you can use "onChange" event of the postitall.

 onChange: function (id) {  
       cstPersonalNoteUpd(pid, '', p('#pia_editable_' + pid).html(), true, p('#minicolors_bg_' + pid).val(), p('#minicolors_text_' + pid).val(), '', idPNDescr);  
       return undefined;  
     },  

The pid is the id of the note where you can pass to update the existing record in the DB.

7. Same as above, you can have your own service call to return the list of notes available in the DB and show them in the web application.

Let's see how it is shown in the application.

Adding a new note.

To show the list in your dashboard. ( clicking on a single note can open it in the note editor.