Develop Reference

JQuery & PHP - How to save reordered group of divs within a form?

I know there are similar questions out there, but I can't seem to find one that answers my particular problem. I have a form that contains a group of divs that are generated based on a JSON array (that is saved in a separate JSON file).
I'm using Bootstrap for the design foundation (I'll spare you the lengthy HTML markups) & the "sortable" function of JQueryUI to reorder the list. The problem I can't seem to solve is how to save that order when I update the JSON.
This is my current setup:
<script>
var wrapper=$('#eventWrapper');
$(wrapper).sortable();
$(wrapper).disableSelection();
var add_button=$('#addEventButton');
$.getJSON('events.json',function(events){
var count=Object.keys(events).length;
if(count>0){
for(var i=1;i<=count;i++){
//Load the input values
var name=events[i].name;
var date=events[i].date;
//Build the event card
var currentEvent='<div class="ui-state-default">...<input type="text" name="event'+i+'[name]" value="'+name+'">...<input type="text" name="event'+i+'[date]" value="'+date+'">...<button class="remove_event">Remove event</button></div>';
//Newest event on top, plz!
$(wrapper).prepend(currentEvent);
}
};
var x=count;
$(add_button).click(function(e){
e.preventDefault();
x++;
var newEvent='<div class="ui-state-default">...<input type="text" name="event'+x+'[name]">...<input type="text" name="event'+x+'[date]">...<button class="remove_event">Remove event</button></div>';
$(wrapper).prepend(newEvent);
});
$(wrapper).on("click",".remove_event",function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
});
});
$('#updateBtn').click(function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'updateList.php',
data:$('#eventForm').serialize(),
success:...
});
});
And for the updateList.php:
<?php
$json=json_encode($_POST);
$file='events.json';
file_put_contents($file, $json);
if(file_exists($file)){
echo json_encode(array('success'=>1));
}else{
echo json_encode(array('success'=>0));
}
?>
The #eventForm encapsulates the series of events first built by the JSON then added/deleted/reordered by the user (click/drag using sortable(), remove button, and add event button). How would I update the x value of the input array to reflect the reordered list before or when the form is submitted?

Looks like I solved my own problem! Here's what I did if anyone else comes across a similar problem in their project:
I changed this bit of code:
for(var i=1;i<=count;i++){
//Load the input values
var name=events[i].name;
var date=events[i].date;
to this:
for(i in events){
var name=events[i].name;
var date=events[i].date;
Simple change in the "for" loop makes a world of difference!
I wasn't saving incorrectly, but rather reading the content from the JSON file incorrectly. If the user reorders the cards [1,2,3,4] as [3,2,4,1], I previously read the JSON file as [3,2,4,1] based on the given input "names".
Now on reload, the old [3,2,4,1] is now read sequentially as [1,2,3,4], ignoring whatever the input "names" may be.

Move up and move down row of a HTML table

There is a one table where user can select multiple rows, and below to the table there is two buttons moveup and move down. when user will click on movebutton, rows should go move up, similar to movedown.
Below is my Jquery code
$(".moveUp").live("click", function(){
var row = $(".selectRow")
$(row).each(function() {
row.insertBefore(row.prev());
});
});
But it is behaving very wrong. Please help me. I am new in jquery.
Thanks!

You need to try like this
$(".moveUp").on("click", function() {
var row = $(".selectRow");
row.each(function() {
var $this=$(this);
$this.insertBefore($this.prev());
});
});
there is no need to wrap row using $( ) again

An alternate approach is to manipulate an array of pure data (store row and selected state), then trigger a 'render' function on the data after it is changed. IOW, redraw the entire table on each operation. Typically this is fast, and an advantage is you can separate the logic/data from the visual interface (like MVC style).

Where and how to store data locally using $.post

I am using this code to edit data on table ,this is allowing me to edit data ,but I am not able to find that where and how should I store data locally on that form itself ,if i don't want to store it in database, I want to know what this "/somewhere" should be(url or some file or what).
<table id="mylist_remark"><tr>
<td class="editable" contenteditable="true">Something</td>
</tr></table>
$("#mylist_remark .editable").bind("blur", function(e) {
console.log($(e.target).text());
$.post("/somewhere", {remark: $(e.target).text(), candidate_id: $(e.target).nearest("tr").attr("id")}, function() { console.log("success"); });
});

... how should I store data locally on that form itself ,if i don't want to store it in database...
One solution would be to use localStorage to save the form elements locally.
If you felt like using jQuery, you could make the problem simple:
$("input").change(function(){
var input = $(this).val();
localStorage.setItem("input",input);
}
Then when the page loads, you set the val to the localStorage item:
var input = localStorage.getItem("input");
$("input").val(input)
More on localStorage, and even more on localStorage.

getting data from a yui datatable

I have the following jsfiddle that generates a YUI Datatable with checkboxes, but i have a problem getting the data of ids from the table after i click the Get Records button.
anyway to call the table from the javascript?
P.S : I am using YUI2 library as my project is using that

Using Checkbox Listeners
I hope this codes show what you need http://yuilibrary.com/yui/docs/datatable/datatable-chkboxselect.html
Edit:
I update your code for adding checkboxClickEvent for handling checkbox event in each of data row and use an array to keep all of the checked record id.
var selectedID = [];
myDataTable.subscribe("checkboxClickEvent", function(oArgs){
alert("check box clicked");
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
if (elCheckbox.checked) {
selectedID.push(oRecord.getData("id"));
}
else {
selectedID.pop(oRecord.getData("id"));
}
oRecord.setData("check",elCheckbox.checked);
});
Detail of working code is here.

Delete one row from DOM built table

I have a table that is dynamically built using DOM. It has 10 cols, and on each row i have some data that i get from a websocket, text boxes and a submit button to add each row to the database.
How can i remove a row after i submitted it?
Someone mentioned jQuery but can't figure it out how to do that.
EDIT
I'm using Chrome and had problems with all the scripts below. this is how i resolved it:
instead of $('input') I used jQuery('input') all the scripts are working fine.
thank you for your help.

Try something like this...
$('input').click(function() {
$(this).closest('td').remove();
});
Demo: http://jsfiddle.net/wdm954/32W63/
EDIT:
Here is another way to do this...
$('table form').submit(function() {
// run some ajax here to do your database work
$(this).closest('td').remove();
});

You can do like this:
$(document).ready(function(){
//Assuming all your submit buttons have the same class
$(".submit").live("click", function(e){
var buttonHnd = $(this);
$.post("your-php-file.php",
{/* the data you want to post e.g. */ name: $("#name").val()},
function(data){
buttonHnd.parent().parent().remove();
}
);
});
});

var myTableRow = ... // Find the row however you like
myTableRow.parentNode.removeChild(myTableRow);
You might also be interested in my AJAXFetch jQuery plug-in. Among other things, it lets you treat a row of a table as a form and submit all the form elements in it using AJAX, swapping it out the row with the result from the server (usually the non-form version). I use it in many of my internal applications for in-place editing of data.

You could try something like:
// Simple bottom row removal
$('#myTable tr:last').remove();
// Removing n'th (ex. 3rd) row from the table
$('#myTable tr:eq(2)').remove();
Source: JQuery HowTo

you can use jquery' remove to remove it from dom...
http://api.jquery.com/remove/