kvAjax jQuery plugin

Editing data is usually done using forms but you'll somethimes find yourself in a situation where you need really just a simple edititation, where a form or perhaps another section in your admin just seems not right for the job. This plugin may help you with that.

What does kvAjax do ?


To make it simple, kvAjax just adds a simple edit icon where you want and lets you specify which values you want to edit. After edit icon click you can edit your values and send them via AJAX (all handled by kvAjax). Your job is just to process values in your server side script.

Documentation


Simple initialization may look like this:

$('selector').kvAjax({
    valuesSelector: 'span.value',
    scriptPath: 'kvak.php'
});


Which tells kvAjax that you want to search the selector for span.value items and make them editable. And the scriptPath param specifies path to your server side script.

Ok, now the full featured initialization example:

$('selector').kvAjax({
    verticalCenter: true,
    editIconLeft: 10,
    editIconTop: 0,
    valuesSelector: '',
    scriptPath: '',
    saveValues: true,
    focusFirst: true,
    defaultInputWidth: 0,
    useClassKeys: false,
    onBeforeShow: null,
    onEditClick: null,
    onSubmitClick: null,
    responseCallback: null
});


Values used here are the defaults ! So here you can see all the default settings of kvAjax. These will of course change if you choose to set them as your options ... So what do these options do:

verticalCenter - center the edit icon vertically ?
editIconLeft and editIconTop - use these params to adjust the edit icon position
valuesSelector - within your selector - HTML elements fitting this jQuery selector will be flagged as editable in kvAjax
scriptPath - path to your server side script which should process values sent by kvAjax
saveValues - after AJAX response should the values be set as new text for your valuesSelector items ? You can set this to false if you want to set other than raw values, i.e. if you want to set some kind of custom prepared stuff instead ...
focusFirst - tells just whether to focus the first input after edit icon click
defaultInputWidth - when you set this param all your inputs will have this width
useClassKeys - by default (with this param set to false) the valuesSelector items IDs are used as input names. But you can choose to use classes instead, in that case one of your classes added to your valuesSelector item must be kvAjaxName_INPUTNAME (example below).
onBeforeShow - event triggered before the edit icon is shown ... you can pass your own function here. It takes the $elem argument which is your main selector.
onEditClick - event triggered when the edit icon is clicked. Again, you can set your own handler for this event here. It too takes the $elem argument here (main selector).
onSubmitClick - event triggered when the submit button (the cute green arrow :D when editing is active) is clicked. It too takes the $elem argument here (main selector).
responseCallback - event triggered when the AJAX response is received. It takes the xml argument. Here you can set your custom response handler.

So that's the basic explanation of available options. Now for the promised exmaple of useClassKeys param.

First the example for useClassKeys - false:

The HTML:

<p class="ajaxEdit">
    And here we have some text with a value in a special container. This value is <span id="MyFieldById" class="value">45</span>
</p><!-- /ajaxEdit -->


And jQuery code to init kvAjax for this code will be:

$('p.ajaxEdit').kvAjax({
    valuesSelector: 'span.value',
    scriptPath: 'kvak.php'
});


Which will send your kvak.php script the following data:

kvAjaxName_MyFieldById = 'value'

And now the example for useClassKeys - true:

The HTML:

<p class="ajaxEdit">
    And here we have some text with a value in a special container. This value is <span class="kvAjaxName_myValueInput value">45</span>
</p><!-- /ajaxEdit -->


And jQuery code to init kvAjax for this code will be:

$('p.ajaxEdit').kvAjax({
    valuesSelector: 'span.value',
    scriptPath: 'kvak.php',
    useClassKeys: true
});



Which will send your kvak.php script the following data:

kvAjaxName_myValueInput = 'value'

So, that's about everything, in case of any other questions feel free to contact me and i'll try to help :) Check out the demo to see the kvAjax in action. You can download the code too, from the index.html file you'll see that there's a kvAjax.css styles file you need too and a few images this CSS file uses. In the JS directory there are both packed and full versions of kvAjax :)

Final statement


Feel free to do whatever you want with this plugin and its contents. You can edit the code, implement it into your projects ... Enjoy :)
Zobraziť demo Stiahnuť