Ambrosia Ambrosia - 2 months ago 15
jQuery Question

What is the best way to go about creating a page of stickies with savable and retrievable content?

I have had a look at sticky notes with php and jquery and jStickyNote, and while both seem to look pretty nifty they lack some elements I am after. I haven't been able to find a way to allow particular users to modify the stickies they create, nor have I found a good way to save their stickies into my database. I am, and would like to keep using php, mysql and jquery. I have thought with the first link that I could just save the image created into a folder and save the url into that database but then I cannot go back and allow the user to change the content of the sticky. With the second link there does not seem to be support for saving the sticky at all. I'd also like to create a function where adding stickies to a message board (for everyone to see) does so in a randomly placed way that looks natural. Any ideas for either of these problems?

Answer

Here is some javascript that should help:

// Called when the edit (A) button is pressed
function edit(event, editButton)
{
    // Get existing title and change element to textarea
    var stickyTitle = $(editButton).parent().find('p.stickyTitle');
    var textareaTitle = $(document.createElement('textarea')).addClass('textareaTitle');
    $(textareaTitle).text(stickyTitle.html());

    // Get existing description and change element to textarea
    var stickyDescription = $(editButton).parent().find('p.stickyDescription');
    var textareaDescription = $(document.createElement('textarea')).addClass('textareaDescription');
    $(textareaDescription).text(stickyDescription.html());

    // Create save button
    var saveButton = $(document.createElement('div')).addClass('jSticky-create');                    

    // Add save button, then replace title, then replace description, then remove edit button
    $(editButton).before(saveButton);
    $(editButton).parent().find('p.stickyTitle').before(textareaTitle).remove();
    $(editButton).parent().find('p.stickyDescription').before(textareaDescription).remove();
    $(editButton).remove();

    // Set description textarea focus and set button actions
    textareaTitle.focus();
    setActions();
}

// Called when the save (tick) button is pressed
function save(event, saveButton)
{
    // Get existing title and change element to paragraph
    var textareaTitle = $(saveButton).parent().find('textarea.textareaTitle');
    var stickyTitle = $(document.createElement('p')).addClass('stickyTitle');
    var newTitleValue = textareaTitle.val();
    $(stickyTitle).html(newTitleValue);

    // Get existing description and change element to paragraph
    var textareaDescription = $(saveButton).parent().find('textarea.textareaDescription');
    var stickyDescription = $(document.createElement('p')).addClass('stickyDescription');
    var newDescriptionValue = textareaDescription.val();
    $(stickyDescription).html(newDescriptionValue);

    // Create edit button
    var editButton = $(document.createElement('div')).addClass('jSticky-edit');

    // Add edit button, then replace title, then replace description, then remove save button
    $(saveButton).before(editButton);
    $(saveButton).parent().find('textarea.textareaTitle').before(stickyTitle).remove();
    $(saveButton).parent().find('textarea.textareaDescription').before(stickyDescription).remove();
    $(saveButton).remove();

    // Set button actions
    setActions();

    // Add the object to the ads div
    $('#ads').append(object);

    // Update your database here
    // by calling the saveAd.php
}

function setActions()
{

    // call these after changes are made to anything
    $('.jSticky-create').unbind('click').click(function(e)
    {
        save(e, this);
    });

    $('.jSticky-edit').unbind('click').click(function(e)
    {
        edit(e, this);
    });

    $('.jSticky-delete').unbind('click').click(function(e)
    {
        remove(e, this);
    });
}

function remove(event, deleteButton)
{
    var stickyMaster = $(deleteButton).parent();
    $(stickyMaster).remove();
    //then call savead.php with delete parameter
}