I've created a JSFiddle Here
What I'm trying to do is save table data from the following code:
$('#save').click(function () {
$("#dataTable").find('tbody')
.append($('<tr>')
.append($('<td>')
.text($('#fname').val()))
.append($('<td>')
.text($('#lName').val()))
.append($('<td>')
.text($('#mId').val()))
);
$('#fname').val('');
$('#lName').val('');
$('#mId').val('');
})
I would like to save the <tr> data, but I'm having trouble finding where to start on parsing that into a savable format.
I have written little bit code to help you.
First create a class for the record which you want to store in grid
function MemberInfo(fName,lName,memberId){
this.FirstName=fname;
this.LastName=lName;
this.MemberId=memberId;
}
the create a function which will loop through all the tr and tds to populate that array, and finally save the JSON data in localStorage
var arr=[];
$("#dataTable").find('tbody tr').each(function(index,item){
var fName=$(item).find('td').eq(0).text();
var lName=$(item).find('td').eq(1).text();
var memberId=$(item).find('td').eq(2).text();
arr.push(new MemberInfo(fName,lName,memberId))
});
localStorage.setItem("memberData",arr);
Fiddle
Maybe you can save it as a JSON string
var data = {
name : $('#fname').val(),
lastname : $('#lName').val(),
memberId : $('#mId').val()
};
localStorage.setItem('member-data', JSON.stringify(data))
then later:
var data = JSON.parse(localStorage.getItem('member-data') || {})
$('#fname').val(data.name);
$('#lName').val(data.lastName);
$('#mId').val(data.memberId);
Related
I've got a problem using dncalendar, hope someone will help me!
I need a simple calendar in which being able to save and recover data from a db. dncalendar seemed good, but I have now problem in dynamically insert data into it.
I post some code for clarification. I recover the dates from some input fields called .date-smart and build an array (data_note). Problem is when I want to dynamically insert this dates into object notes, without knowing how many dates I have. If I do it like in below code, everything works fine, but I do not know how to do it with a for cycle or similar. Can someone help me?
var data_note =[];
var note = [];
$(".date-smart").each(function(){
data_note.push($(this).val())
note.push("SW");
})
var my_calendar = $("#dncalendar-container").dnCalendar({
dataTitles: { defaultDate: 'default', today : 'Today' },
startWeek:'monday',
});
my_calendar.build();
my_calendar.update({
notes: [{'date': data_note[0], 'note':note[0]}, {'date': data_note[1], 'note':note[1]}];
})
Why don't just make a variable feed all data in it and then pass it to notes
Like
var data_note =[];
var note = [];
var notesArr = [];
$(".date-smart").each(function(){
data_note.push($(this).val())
note.push("SW");
notesArr.push({'date': $(this).val(), 'note': 'SW'});
})
var my_calendar = $("#dncalendar-container").dnCalendar({
dataTitles: { defaultDate: 'default', today : 'Today' },
startWeek:'monday',
});
my_calendar.build();
my_calendar.update({
notes: notesArr
})
i"m with basic knollage in javascript,
i"m trying to get data from user and use it as json properties as following
<th colspan="2"><input id="dc_name" name='dc[name]'></input></th>
$(".save_asJSON").click(function(){
var dcname = {};document.getElementById("dc_name").value
var jsonobj = {
DCes: {
dcname: {
name : dcname,
.....
}
}
};
console.log(jsonobj);
});
the fist dcname use (and here is my problem) - displayed as string dcname
the second dcname use give the value as it should.
i need the json file this way, any idea how can I achieve this
thanks
You can initialise your json with empty values and then set its value with the input like
var jsonobj = {
DCes: {}
};
$(".save_asJSON").click(function(){
var dcname = document.getElementById("dc_name").value
jsonobj.DCes[dcname] = {name: dcname}
console.log(jsonobj);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<th colspan="2"><input id="dc_name" name='dc[name]'></input></th>
<button class="save_asJSON">Click</button>
I struggling with datatables to fill my table.
The problem i have is that when i get my google calendars in this format
{"23gjsd91su3guu509o1bchhqms#group.calendar.google.com":{"calendar_id":"23gjsd91su3guu509o1bchhqms#group.calendar.google.com","calendar_title":"#1612 White Quartz Apartment"},"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com":{"calendar_id":"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com","calendar_title":"#994 Cisco Amber (T2)"},"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com":{"calendar_id":"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com","calendar_title":"#1443. Marley Blue"}}
Need help on put datatables to work with this.
Thanks
You must sanitize the JSON so it is ordered on the form [{item}, {item}, ..] :
function sanitizeData() {
result = [];
Object.keys(data).forEach(function(key) {
result.push(data[key]);
})
return result;
}
Then, if you have table like this
<table id="example"></table>
You can now populate a dataTable with the content of the JSON this way :
var table = $('#example').DataTable({
data : sanitizeData(),
columns : [
{ title : 'id', data : 'calendar_id' },
{ title : 'title', data : 'calendar_title' }
]
})
demo -> http://jsfiddle.net/zbuudydv/1/
I have created a dynamic table. DEMO to my project.
I have placed this dynamic table in the form under a div named 'box'
<div id="box">
</div>.
I am creating dynamic hidden variables table using Jquery which I need to store in DB. This is how I am creating the hash to submit to server.
criteria = $('form_name').serialize(true);
criteria = Object.toJSON(criteria);
// Build the object to store the parameters for the AJAX post request
parameters = {
title : $('report_title').value,
description : $('report_description').value,
criteria : criteria
}
// Make the AJAX post request
new Ajax.Request( URL, {
method: 'post',
parameters: parameters,
onSuccess: function( response ) {
$('messageSpan').innerHTML = response.responseText;
$('spinner').style.display='none';
}
});
I am not able to capture the dynamically created values in the criteria.
How to solve this?
In the dynamically created section, I tried adding a submit button and see if the values can be fetched. I am able to fetch and iterate all the hidden variables.
$('#jquerysaveButton').click(function(){
jsonObj = [];
$("input[id=rubric_cell]").each(function () {
var id = "cell_" + row + "_" + col;
item = {}
item["id"] = id;
item["selected_rubric"] = $(this).val();
jsonObj.push(item);
});
console.log(jsonObj); //I am getting the required values here
});
How to get these values in the criteria = $('form_name').serialize(true);. Am I doing some thing wrong? Please help me. thanks in advance.
DEMO to my project
You need to make sure that your hidden input fields have a name attribute set otherwise $.serialize will not process them.
I have this output from ajax call:
"total":"3",
"data":[{ "id":"4242",
"title":"Yeah Lets Go!",
"created":"1274700584",
"created_formated":"2010-07-24 13:19:24",
"path":"http:\/\/domain.com\/yeah"
}]
So there is three that kind of items in that array and I would need to go that through and print actual html out of it. So on page it would be:
Yeah Lets Go! (which is a link to http:www.domain.com/yeah)
Created: 2010-07-24 13:19:24
I'm clueles with this one.
Edit 1:
Also atm I get that raw output after clicking link. How can I get it to show on page load? Or it does that ajax call when I click link atm.
Edit 2:
I got it to output everything at once. But still I have a prolem with putting it actual html. The output atm is:
"total":"3",
"data":[{
"id":"4242",
"title":"Yeah Lets Go!",
"created":"1274700584",
"created_formated":"2010-07-24 13:19:24",
"path":"http:\/\/domain.com\/yeah"
}
{
"id":"4242",
"title":"Yeah Lets Go!222",
"created":"1274700584",
"created_formated":"2010-07-24 13:19:24",
"path":"http:\/\/domain.com\/yeah222"
}
{
"id":"4242",
"title":"Yeah Lets Go!333",
"created":"1274700584",
"created_formated":"2010-07-24 13:19:24",
"path":"http:\/\/domain.com\/yeah333"
}
]}
I would like to get that into list with title and link and creation day.
Edit 3 after answer from Luca Matteis:
Hmm, now im even more confused.
That JSON string comes out of this:
$('a.link').click(function() {
var item_id = $(this).attr("href").split('#')[1];
$.get(base_url+'/ajax/get_itema/'+item_id+'/0/3/true',
null,
function(data, status, xhr) {
$('#contentCell').html(data);
}
);
So I would need to do for that is something like:
var html = eval(data);
and then I would do what Luca Matteis suggest?
First off, that's a JSON string, you need to un-serialize the string into a real JavaScript object (look at json.org for this).
Once you have the native JavaScript data, something like this should work:
var html = '';
for(var i=0; i < obj.data.length; i++) {
html += ''+obj.data[i].title+'<br>';
html += 'Created: '+ obj.data[i].created;
}
Hmm, now im even more confused.
That JSON string comes out of this:
$('a.link').click(function() {
var item_id = $(this).attr("href").split('#')[1];
$.get(base_url+'/ajax/get_itema/'+item_id+'/0/3/true', null, function(data, status, xhr) {
$('#contentCell').html(data);
});
So I would need to do for that is something like:
var html = eval(data);
and then I would do what Luca Matteis suggest?