dimanche 28 juin 2015

Simple AJAX Note Taking App to record same notes written through out every / any page

I want to use the Simple AJAX Note Taking App for my website but it looks like they have coded it for the user to create notes PER WEBPAGE (I'll explain how I worked this out later) which isn't exactly what I want.

I want users to be able to create their own notes using this script but for their entire session surfing my website. So in other words, it doesn't matter what webpage they are on, the notes they they've written down is recorded / saved 'globally' and they can refer to those SAME notes that they've written down regardless what page they're on.

***Just so you know, I intend to use this script in a global php include for all my pages. The PHP include looks like this: **

<?php include( $_SERVER['DOCUMENT_ROOT'] . '/test/inc/noteapp.php' ); ?>

(Please understand that I suck a php and javascript)

So to show you how their demo works (I've uploaded the demo onto my domain name): Click here PAGE 1 ... Now quickly write down some notes on that page and then go to my other page that also uses this script PAGE 2

You'll notice that the notes that you've written down on PAGE 1 aren't showing up on PAGE 2.

I want the notes that you've written down on PAGE 1 to show up on PAGE 2, PAGE 3, page 4 (doesn't matter what directories they're on) etc etc ...

Let me show you their code and explain to you how it works:

Here is their PHP code for the script:

<?php

$note_name = 'note.txt';
$uniqueNotePerIP = true;

if($uniqueNotePerIP){

// Use the user's IP as the name of the note.
// This is useful when you have many people
// using the app simultaneously.

if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
    $note_name = 'notes/'.md5($_SERVER['HTTP_X_FORWARDED_FOR']).'.txt';
}
else{
    $note_name = 'notes/'.md5($_SERVER['REMOTE_ADDR']).'.txt';
}
}


if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){
// This is an AJAX request

if(isset($_POST['note'])){
    // Write the file to disk
    file_put_contents($note_name, $_POST['note']);
    echo '{"saved":1}';
}

exit;
}

$note_content = '

            Write your note here.
';

if( file_exists($note_name) ){
$note_content = htmlspecialchars( file_get_contents($note_name) );
}

?>

In the PHP code above, notice the directory notes/ ... this is the directory where the users written notes will be saved (in a txt file). Now as mentioned above, I will be putting this php code into a php include which will be put on every page of my website. My website will have many directories / sub directories which means that this notes/ directory (which I want in the root of my domain) needs to be pathed correctly so that it always finds the notes/ directory in the root.

How would I path it?

That's my first problem ... now moving onto the second problem (not a crucial issue) - take a look at their javascript:

$(function(){

var note = $('#note');

var saveTimer,
    lineHeight = parseInt(note.css('line-height')),
    minHeight = parseInt(note.css('min-height')),
    lastHeight = minHeight,
    newHeight = 0,
    newLines = 0;

var countLinesRegex = new RegExp('\n','g');

// The input event is triggered on key press-es,
// cut/paste and even on undo/redo.

note.on('input',function(e){

    // Clearing the timeout prevents
    // saving on every key press
    clearTimeout(saveTimer);
    saveTimer = setTimeout(ajaxSaveNote, 2000);

    // Count the number of new lines
    newLines = note.val().match(countLinesRegex);

    if(!newLines){
        newLines = [];
    }

    // Increase the height of the note (if needed)
    newHeight = Math.max((newLines.length + 1)*lineHeight, minHeight);

    // This will increase/decrease the height only once per change
    if(newHeight != lastHeight){
        note.height(newHeight);
        lastHeight = newHeight;
    }
}).trigger('input');    // This line will resize the note on page load

function ajaxSaveNote(){

    // Trigger an AJAX POST request to save the note
    $.post('index.php', { 'note' : note.val() });
}

});

Notice at the bottom of this code index.php ... I'm guessing that's the webpage that the ajax must work on? Generally I like to put most (if not all) of my javacript into a combined js file which is included on every page. So if I do that with the javascript above, then I've got a problem with index.php being index.php because a lot of my web page won't all be called index.php (eg: about.php etc) ... so is their any way to change index.php to be something else to automatically refer to the page the user is on regardless what it's called?

If this cannot possibly be done, then I suppose I'd have to put this javascript on each page (and not in my combined javascript file) and amend index.php to whatever page it's on.

I'd appreciate your help and I hope I've explained well enough.

Aucun commentaire:

Enregistrer un commentaire