We Keep Coding

How to do update in listing for web by using firebase

I am creating admin panel in website and I am using firebase as a database in backend.I am able to display listing but when I click on the particular listing there status should change from 'pending' to 'accept' but it doesnt.I dont know where I did mistake.Please give suggestion and I attach js file and database screenshot
pl.js
var firebaseheadingRef = firebase.database().ref().child("user");
firebaseheadingRef.on('child_added',datasnapshot=>{
var title= datasnapshot.child("listing").child("title").val();
var userid= datasnapshot.child("username").val();
var type= datasnapshot.child("listing").child("title").val();
var publisheddate= datasnapshot.child("listing").child("publish").val();
var expirydate= datasnapshot.child("listing").child("expire").val();
$("#tablebody").append("<tr><td>"+title+"</td><td>"+userid+"</td><td>"+type+"</td><td>"+publisheddate+"</td><td><button type=button id=accept onclick=accept()>Accept</button><button type=button>Reject</button></td></tr>");
});
function accept()
{
firebaseheadingRef.on('child_changed',datasnapshot=>{
datasnapshot.child("listing").child("status").update({"status":"accept"});
setCommentValues(postElement, data.key, data.val().text, data.val().author);
});
}
database
listing display picture where I click on accept button then update of status should done

There are two places where you need to change your code:
First, in the code that generates the table, you have to pass the id of the node to the function call, as follows. You get the node id with the key property of the DataSnapshot.
.....
$("#tablebody").append("<tr><td>"+title+"</td><td>"+userid+"</td><td>"+type+"</td><td>"+publisheddate+"</td><td><button type=button id=accept onclick=accept('" + datasnapshot.key + "')>Accept</button><button type=button>Reject</button></td></tr>");
...
And secondly you have to write your accept() function in such a way it updates the database value, with the set() method. Like the following
function accept(userId) {
var nodeRef = firebase.database().ref("/user/" + userId + "/listing/status");
return nodeRef.set('accept');
}

How to get all data-id and amount from html page using jQuery and post it via ajax with data

How can i get all data-id and amount from this HTML page using jquery. After getting those value... I want to push it to array then post via ajax. This is a laravel project. I am not using Form here.
This is that image, from where I want to get value
//Here is the Html code
<?php $i=1 ?>
#foreach($expanse as $expanse)
<tr>
<td class="text-center">{{$i}}</td>
<td>
<h4 class="expVal" data-id="{{$expanse->id}}">{{$expanse->name}}</h4>
</td>
<td class="text-right">
{{$expanse->rent}}
</td>
</tr>
<?php $i++ ?>
#endforeach

You can get all the data Ids and amount like this
var ids = [],amounts = [];
$(".expVal").each(function(){
ids.push($(this).data('id'));
var b = $(this).parent().next().find('a.expanseRent').text();
amounts.push(b);
})
Another method would be
var datas=[];
$(".expVal").each(function(){
var a = $(this).data('id');
var b = $(this).parent().next().find('a.expanseRent').text();
datas.push(a+":"+b);
})

You can loop through the each .expVal elements in jquery and then you can get the data-id attribute using jquery.
After that, you can push this values into some array.
var data_id_array=[];
$( ".expVal" ).each(function( index ) {
data_id_array.push($(this).attr('data-id'));
});
For rent, add rent in data-rent attribute like this.
{{$expanse->rent}}
then, do same process like this to get rent.
var rent_array=[];
$( ".expanseRent" ).each(function( index ) {
rent_array.push($(this).attr('data-rent'));
});
So, for your output,as you mentioned in comment,loop through the data_id_array array and create json item like you want and push it into the finalArray like this.
var finalArray = [];
var i;
for (i = 0; i < data_id_array.length; ++i) {
var itemArr={};
itemArr[data_id_array[i]] = rent_array[i];
finalArray.push(itemArr);
}
So at the end, finalArray will contain all the items like [{1:1200},{2:3000}] like this.

You can get data-* using jquery's data() like this
$(".expVal").data("id")
*assuming you have .expVal class in each <td>.
var attrs = [];
var vals = [];
$(".expVal").each(function(){
attrs.push($(this).attributes.nodeName);
vals.push($(this).data("id")+":"+$(this).data("rent"));
})
Then pass it into your ajax POST call like this
$.ajax({
type: 'POST',
url: "url",
data: dataIDs
});

You can do a query like, which will return you an object indexed in the order of occurrence of the element in the DOM.
$("[data-id]")
Additionally i would also include the amount as a data attribute in the same element, something like
<h4 class="expVal" data-id="{{$expanse->id}}" data-amount="{{$expanse->rent}}">{{$expanse->name}}</h4>
and now through dataset property you will be able to access,
$("[data-id]")[0].dataset.amount
here is the documentation on the data attribute
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

How to submit dynamically created hidden variables using Jquery

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.

Get Django Item ID In Ajax URL

I have a select box in an item edit page, which i would like to be populated via an Ajax call with the saved values.
<script type="text/javascript">
$(document).ready(function() {
$('#editPrefabLineclassBox').on('change', function() {
var selected = this.value;
$.ajax({
url: '/edit-prefab/,
type: 'POST',
data: {
csrfmiddlewaretoken: '{{ csrf_token }}',
lineclassSelected: selected
},
success: function(data) {
var name, select, option;
select = document.getElementById('editPrefabNameBox');
select.options.length = 0;
for (name in data) {
if (data.hasOwnProperty(name)) {
select.options.add(new Option(data[name], name));
}
}
}
});
});
})
</script>
The url i am using in the call is /edit-prefab/. The problem i am having is, the url of the page in Django is actually /edit-prefab/{{ material_item.id }}, only i am not sure how to pass this id to javascript to use in the Ajax call. With just the /edit-prefab/, the page is not found.
After populating the select with the list of items, i would like to have preselected the saved values of the item being edited. I am sure i could populate everything as needed. Its just the setting up of the url that has me a little confused
I have tried passing the id of the item through the view to the template with JSON.dumps, and then parse the variable in JS to use in the url, but i keep getting an unexpected column error when parsing, as from what i know only a dict can be parsed correctly with JSON.
Is there anyone who could please help with this?
EDIT:
def editprefabitem(request, materialitem_id):
context = dict()
mat_item = MaterialItem.objects.get(id=materialitem_id)
context['itemid'] = json.dumps(mat_item.id)
context['lineclass'] = json.dumps(mat_item.lineclass)
context['itemname'] = json.dumps(mat_item.name)
context['diameter'] = json.dumps(mat_item.diameter)
context['quantity'] = json.dumps(mat_item.quantity)
if request.method == 'POST':
if 'lineclassSelected' in request.POST:
lclass = Lineclass.objects.filter(lineclassname=request.POST['lineclassSelected'])\
.values_list('itemname', flat=True).distinct()
request.session['lineclassselected'] = request.POST['lineclassSelected']
lineclass = valuesquerysettodict(lclass)
return HttpResponse(json.dumps(lineclass), content_type='application/json')
if 'itemSelected' in request.POST:
item = Lineclass.objects.filter(itemname=request.POST['itemSelected'])[0]
diams = Lineclass.objects.filter(itemname=item.itemname).values_list('dn1', flat=True).distinct()
request.session['itemselected'] = request.POST['itemSelected']
diameters = valuesquerysettodict(diams)
return HttpResponse(json.dumps(diameters), content_type='application/json')
if 'diamSelected' in request.POST:
request.session['diameterselected'] = request.POST['diamSelected']
if 'editPrefabQuantityBox' in request.POST:
code = Lineclass.objects.filter(lineclassname=request.session['lineclassselected'])\
.filter(itemname=request.session['itemselected']).filter(dn1=request.session['diameterselected'])[0]\
.code
mat_item.name = request.session['itemselected'],
mat_item.type = 'Prefabrication',
mat_item.lineclass = request.session['lineclassselected'],
mat_item.diameter = request.session['diameterselected'],
mat_item.quantity = request.POST['editPrefabQuantityBox'],
mat_item.workpack = Workpack.objects.get(id=request.session['workpackselected']),
mat_item.code = code,
mat_item.datecreated = datetime.datetime.today(),
mat_item.createdby = request.user.username
mat_item.save()
return HttpResponseRedirect('/prefabs/')
return render_to_response('editprefab.html', context, context_instance=RequestContext(request))
The context['itemid'], context['lineclass'] etc, is where i am grabbing the current values of the item and trying to send them through to the template to be parsed by javascript to set the default values for editing in the select boxes, and provide the items id in the url.
The valuesquerysettodict() function, is a small snippet i found, to convert a Models, values_list into a JSON serializable dict to populate the select based on the parameter that was sent through from Ajax. The reason i am using it, is if i return Lineclass.objects.all(), there are a lot of items in the queryset, with the same name, but different itemcode, so i am using a values_list to try and get unique item names to use with the select.
I am sure i am going wrong somewhere i am just not sure where.
thank you for any help you could give.

So I assume you're making your AJAX call at the click of a submit button. Either way, you can supply the Django variable in the value attribute of any tag and retrieve it like this.
In the value attribute of your submit button, pass the Django ID as such:
<button type="submit" value="{{ material_item.id }}" id="submit-button"></button>
Now, in your AJAX request, you can retrieve the ID and send it with your AJAX request like this:
$(document).ready(function(event){
$(document).on('click', '#submit-button' , function(event){
event.preventDefault();
var pk = $(this).attr('value');
data:{
'id': pk,
}
....
});
});

Showing dynamic links inside a table

In jquery, how can I show a link that is generated on the fly inside a table?
I will have the link stored in my database, but I want it to be shown by a name and then take me to the correct link accordingly.
I have an array of strings like [ {Name1:Link1} ] stored, and I want it to be shown inside the table as Name1 linking to Link1.
Please tell me how to do so.

You need to store them in a (object) map instead of an array.
var linksMap = {
'google': 'http://google.com',
'stackoverflow': 'http://stackoverflow.com',
'jquery': 'http://jquery.com'
};
Then, assuming that you've the following table,
<table id="links">
<tr><td>google</td></tr>
<tr><td>stackoverflow</td></tr>
<tr><td>jquery</td></tr>
</table>
you can use the following jQuery script to create links and put them in the cells:
$('#links>tbody td:nth-child(1)').each(function() {
var $td = $(this);
var name = $td.text();
var link = linksMap[name];
var $a = $('<a>').attr('href', link).text(name);
$td.html($a);
});