SimpleEdit is a jQuery plugin for in-place editing.

Overview

jQuery SimpleEdit

!!! Outdated, use modern tools like Svelte, Vue, React or Angular !!!

Donate

SimpleEdit is a jQuery plugin for in-place editing.

Dependencies

  • jQuery >= 1.7

Usage

1. Include it in your page.

<link href="https://min.gitcdn.link/repo/WalterWoshid/jQuery-SimpleEdit/master/dist/jquery-simpleedit/css/jquery-simpleedit.min.css" rel="stylesheet">
<script src="https://min.gitcdn.link/repo/WalterWoshid/jQuery-SimpleEdit/master/dist/jquery-simpleedit/js/jquery-simpleedit.min.js"></script>

Note to include jquery-simpleedit after core library (jquery)!

2. Markup elements that should be editable. Usually it is an <a> element with additional data-* attributes.

<a href="#" id="address" data-name="address" data-pk="1" data-url="/post">World Street 42</a>
Main attributes you should define are:
id or name Name of field to be updated (column in db). Taken from id or data-name attribute.
pk Primary key of record to be updated (ID in db)
url Url to server-side script to process submitted value

3. Apply simpleedit() method to your elements:

$(document).ready(function () {
    $('#address').simpleedit()
})

You can also set the options via javascript like this:

<a href="#" id="address">World Street 42</a>
$('#address').simpleedit({
    pk: 1,
    url: '/post',
    name: 'address'
})

Callback functions are also supported:

$('#address').simpleedit(function (changedText) {
    console.log(changedText)
})

Use methods in any order. The plugin will know what to use (error in console if not):

$('#adress').simpleedit('/post', callback1, 'cancel', callback2)

4. Frontend ready!

Open your page and click on the element. Enter new value and submit form (Enter key or submit button). It will send ajax request with new value to /post (if url specified). Request contains name, value and pk of record to be updated:

POST /post
{
  name: 'address',    // Name of field (column in db)
  pk: 1,              // Primary key (record id)
  value: 'New adress' // New value
}

5. Write backend part:

If you want to validate submitted value on server:

  • If value is valid, you should return HTTP status 200 OK. Dom element will be updated automatically.
  • If value is not valid, you should return HTTP status != 200 or HTTP status 200 with response status: 'error'. Dom element will not be updated.

Default request method is POST, you can change it via defaults config:

$.fn.simpleedit.defaults.ajaxOptions = { 
    type: 'PUT',
    // Additional jQuery ajax options
}

JSON response:

If your server returns JSON, you can send HTTP status 200 with error flag (status: 'error') in response body. To process it use success handler:

// Example server reponse: 200 OK {status: 'error', msg: 'Field cannot be empty!'}
$('#address').simpleedit({
  // ...
  error: function(response) {
      console.log(response.msg)
  }
})

Future plans:

Donation

If you like this project, you can give me a cup of coffee :) paypal

You might also like...

A compact JavaScript animation library with a GUI timeline for fast editing.

Timeline.js A compact JavaScript animation library with a GUI timeline for fast editing. Check it out in this example: http://vorg.github.io/timeline.

Nov 26, 2022

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

Project Name To Do List Built With HTML CSS JS Live Demo To Do List Getting Started To get a local copy up and running: Clone this repository or downl

Aug 25, 2022

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

Project Name To Do List Built With HTML CSS JS Live Demo To Do List Getting Started To get a local copy up and running: Clone this repository or downl

Jul 30, 2022

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

A simple To-Do list with webpack including the functions of adding, removing, editing and selecting the completed tasks.

To Do List To Do List provides you with functionalities such as: adding a Todo to the list removing a Todo from the list editing a Todo in the list ch

Aug 25, 2022

Use this project as a tool for remembering your daily tasks, confirming, editing, remove are actions you can do to tasks, your data is saved in the LocalStorage so every time you open or refresh the page all changes will be present.

To-do-list The porpuse for this project is show You, the way how to implement webpack in a project creating a To-Do list in for add a template to crea

Nov 18, 2022

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

Logseq Column-Layout Plugin Journals, linked references, and journal queries can be placed side by side if the minimum screen width is "1850px" or mor

Dec 14, 2022

JQuery charCounter - jQuery Character Counter Plugin

JQuery charCounter - jQuery Character Counter Plugin

jQuery Character Counter A jQuery based character counter for input and textarea HTML tags. What is this? This simple plugin allows you to add a c

Aug 10, 2022

jQuery quick notification plugin. jQuery плагин быстрых уведомлений

Note: English translation by Google Translate Notific About Description: this is a jQuery plugin that helps you display notifications on your site. Li

Nov 7, 2021

A place for all of my cheat sheets.

Who doesn't love cheat sheets? This repository will behold all of my cheat sheets in the future! At the moment, you will find: Languages Prolog Data S

Jun 9, 2022
Owner
Walter Woshid
Walter Woshid
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Reddit Place Tracer is a browser based userscript for the 2022 Reddit /r/Place project

Reddit Place Tracer is a browser based userscript for the 2022 Reddit /r/Place project which adds a transparent image on top of the canvas to aid communities with drawing the same image. It shows how the canvas should look, where each pixel goes, and what color. The user must manually click on these spots. It is not an automated bot and does not break any rules.

null 3 Apr 3, 2022
OnePiece /r/place repo to store the template and script for outlining the place to put titles

onepiece-place OnePiece /r/place repo to store the template and script for outlining the place to put titles This script & repo are cloned from Antice

Lopeh 11 Apr 9, 2022
The /r/place Atlas is a project aiming to catalog all the artworks created during Reddit's 2022 /r/place event.

The 2022 Place Atlas The /r/place Atlas is a project aiming to catalog all the artworks created during Reddit's 2022 /r/place event. This project was

Place Atlas 397 Dec 28, 2022
simple jquery Plugin that utilizes Google API to get data from a Place on Google Maps

jQuery Plugin to display Google Reviews of a Place on Google Maps this will get the 5 reviews, google offers you. But I need more than 5 reviews! if y

Simon Neutert 32 Dec 14, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
Bootstrap plugin for markdown editing

Bootstrap Markdown Markdown editing meets Bootstrap. Demo and documentation available at http://toopay.github.io/bootstrap-markdown/ Compatibility Ver

Refactory 2k Dec 27, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Enables creating databases based on files in Obsidian - like Dataview, but with editing!

Obsidian Database Plugin Do you like Dataview plugin for Obsidian? This one is taking Dataview to next level, but not only allowing you to view the da

Łukasz Tomaszkiewicz 115 Jan 4, 2023