Easiest way to update mysql table via html form - javascript

I need to update values in a mysql table. This has to be checked by hand and I cannot give the person permission to phpmyadmin.
So I want to create a html table which displays the mysql table. It has more columns but for simplicity let's say we have:
name age gender
jake 23 M
jenny 45 M
bob 12 M
Now I want to display this on an html page in a table or something so this aligns nicely and we can go through the data and i.e. change the gender of Jenny from M to F.
I either want one of 2 things:
1) whenever a value in a row is changed make an Ajax request to the server with all variables of that row so a mysql update can be done.
2) the entire table will be put in a form and at the bottom of the page is a submit button which sends all the data in a way that it can be put in a dictionary or dataframe in Python to loop over all the rows so the mysql table can be updated. (I asked this here but didn't receive any answers)
I now tried this but it doesn't call the function:
In the header of html:
$('.formclass').change(function() {
console.log("testing");
});
I then do a request to the server to fill the table the python code is:
table1 = {mysql query data}
data = """
<table border = 5 bordercolor = red align = center>
"""
for i,row in table1.iterrows():
sstr = """
<tr>
<form action="/test.py" class='formclass'>
<td><input type="text" name="id" value="{0}" readonly/></td>
<td>name: {1} </td>
<td colspan = 4><input type="radio" name="gender" value="M" checked>Male<input type="radio" name="gender" value="F">Female</td>
</form>
</tr>
""".format(row['id'],row['name'])
data = data + sstr
data = data + """</table>"""
print(data)
However it doesn't even log in the console. And then I also need the data from the row still.
What I see in the html is that the form elements are put in another place so the table cells are not in the form anymore.

You can use Views as a best practice for SELECT.

Related

How to add a manual cell in each table row after an ng-repeat?

I'm building a table that is populated by ng-repeat going through a list that comes from the database. This part works fine, but I want to have a checkbox that lets the user select which rows are deleted. I'd also like to have a checkbox on the table header that works as a select all button.
The problem is that, as I understand it, the ng-repeat loop includes everything inside the row in question leaving me unable to insert a manual cell between the loop and the end of the row.
Is there a way to add an additional cell between the loop and the end of the row, for example by using ng-repeat-start and ng-repeat end?
Here is an example of my attempts. This one did not work, obviously.
<table>
<tr><th ng-repeat=" e in poistoavaimet">{{e}}</th></tr>
<tr ng-repeat="i in poistolista | filter:sukunimiVal | filter:etunimiVal">
<td ng-repeat-start=" key in poistoavaimet">{{i[key]}}</td>
<td ng-repeat-end>
<input type="checkbox" ng-model="poistovalinta.{{$index}}">
{{$index}}</input>
</td>
</tr>
</table>
poistoavaimet contains the extracted keys from the array. Poistolista is the array itself from which the keys are extracted and it contains the data from the database. Poistovalinta is a variable for the values of the checkboxes. poistovalinta.{{$index}} was an attempt to create an entry in poistovalinta -array that has the key of the index of the row.
I'll add a snippet of the code responssible for handling these variables from the controller:
$scope.haePoistettavat = function(){
$http.get('/opiskelijahaku', {params: {'optio':2}})
.then(function(res){
$scope.poistolista = res.data.message;
$scope.poistoavaimet = Object.keys($scope.poistolista[0]);
$scope.adminLista = {};
$scope.adminLista['poisto'] = true;
}, function(error){
console.log(error)
});
}
This function sends a http get to the server with an option that tells the server to return the correct list. The response is stored in $scope.poistolista and the keys are extracted in to the array $scope.poistoavaimet. $scope.adminLista contains true/false values which link to ng-show in multiple objects. The idea is to only show one of them at the time. This is not directly linked to the question.
Thank you #RaphaMex for clearing up my misunderstanding about how ng-repeat works!
The solution is exactly what he said. Just add the cell after the repeat and it works.
Here is the fixed version:
<table>
<tr><th ng-repeat=" e in poistoavaimet">{{e}}</th><th><input id="kaikki" type="checkbox" ng-model="kaikkiVal"></th></tr>
<tr ng-repeat="i in poistolista | filter:sukunimiVal | filter:etunimiVal">
<td ng-repeat=" key in poistoavaimet">{{i[key]}}</td>
<td><input type="checkbox" ng-model="poistovalinta"></td>
</tr>
</table>

Get javascript calulations to post as form data and display in php page

I am somewhat familiar with JavaScript and php and very familiar with HTML but have limited experience in getting them to work together. I have looked at many examples and am either not understanding or other posts do not specifically address my situation. I am trying to accomplish two things at the time of form submission. One is to retrieve the information from a div populated by innerHTML to post with the form and the other is to generate a unique number for the transaction at form posting and then display.
I have an HTML form that displays a generated list, each of which has a check box beside it. When a check box is selected I am using onclick="calTotal()" to calculate and display the total of all boxes checked. Code listed below.
The display script works perfectly and displays a value such as Total $125.00. What I need to do is post that total value when I post the form. The only value being passed at this time is the last check box value. Should that total be assigned within the JavaScript or should it be assigned within an input field?
The second part of my question is with the value of my algorithm that creates a unique transaction number. I want to generate that number upon submission of the form but then need to have it display on the php page. I have tested my algorithm separately and know it works correctly when I hard code the values in. I need to take values from the form and use them to calculate the transaction number. Once calculated it needs to be passed to the php page. Again I am not completely sure where to assign the value so that it passes to the next page.
Anything that will get me pointed in the right direction is appreciated.
<script type="text/javascript">
function calTotal() {
var ch, i=0;
var total=0;
while(ch=document.getElementsByName("amt")[i++]) {
if (ch.checked)
{
total=total+Number(ch.value);
}
}
var div=document.getElementById('divTotal');
total="$"+total.toFixed(2);
div.innerHTML= "Total: " +total;
return total;
}
function calTrans(x,y,z)
{
do calculations here
// concatenate into Trans number
var transNum=rm.concat(em,tm,am);
return transNum;
}
</script>
<form id="frmcheckout" action="out.php" method="post" onsubmit=calTrans()>
<table cellspacing="25">
<tbody>
<tr>
<th>Selection</th>
<th>Title</th>
<th>Cost</th>
</tr>
<tr>
<td>
<input type="checkbox" name="amt" value="$cost" onclick="calTotal()"></td>
<td>$Title</td>
<td>$cost</td>
</tr>
#end
</tbody>
</table>
<table>
<tbody>
<tr>
<td colspan="2">
E-mail address:<input type="text" name="email" value="E-mail required">
</td>
</tr>
<tr>
<td>
<div id="divTotal"></div>
</td>
<td>
<input type="submit" value="Submit";>
</td>
</tr>
</tbody>
</table>
</form>
Have you tried using hidden fields? e.g.
<input type="hidden" name="total" id="total" value="" >
You can use the same method for your unique transaction id. Then you can populate the hidden fields when you populate your "divTotal" div. e.g
document.getElementById("total").value = total;
This way when the form is submitted, the value will be passed to the script as "total" (in my example above). You can get values in php like this:
<?php
$total = $_POST["total"];
$amount = $_POST["amount"];
$email = $_POST["email"];
$transactionId = generateTransId(<<someparams>>);//YOUR FUNCTION TO CREATE TRANS ID
?>
Then to display your transaction id or output it anywhere on your php page, this is one example:
<div id="transId"><?php echo $transactionId; ?></div>

Passing objects from template to view using Django

I am trying to figure out the architecture for the following app:
The user is presented with a table.
Each table cell has several fields the user will be filling in.
There is a general submit button: when clicked on all the input data (along with some calculated data per cell based on the input values) should pass to a Django view.
Here are the following questions:
Can I organize the data structure as a set of objects in a way that each object will correspond to a table cell, whereas the Master object, that will eventually be passed to the Django view, will be a set of those objects?
If so, how to pass the Master object from a template to view using Django?
Thanks.
1. Is it possible to create an object in HTML/JS whose members will contain data from the fields?
You can't create an object in html/JS, but you can build your code up to display or request data from an object in Django.
Say for example, you have a model Foo
class Foo(models.Model):
GENDER = (
('F', 'Female'),
('M', 'Male'),
)
name = models.CharField(max_length=150)
gender = models.CharField(max_length=1, choices=GENDER)
And your template looks like this
<body>
<form action="?" method="post">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="name" maxlength="150" /></td>
</tr>
<tr>
<td>Gender</td>
<td>
<select name="gender">
<option value="F">Female</option>
<option value="M">Male</option>
</select>
</td>
</tr>
</table>
<input type="submit">
</form>
</body>
If you fill in the fields and click submit, then you can handle the data in your view.
def add_foo(request):
if request.method == "POST": # Check if the form is submitted
foo = Foo() # instantiate a new object Foo, don't forget you need to import it first
foo.name = request.POST['name']
foo.gender = request.POST['gender']
foo.save() # You need to save the object, for it to be stored in the database
#Now you can redirect to another page
return HttpResponseRedirect('/success/')
else: #The form wasn't submitted, show the template above
return render(request, 'path/to/template.html')
That last bit also answered question 2, i think. Hope this helps.

How to create dynamic row of table using Struts 1.3 and javascript

I have a contact table, this table contains a first name, a last name, and multiple phone numbers. So my model is something like
Contact {
String firstName;
String lastName;
List phones;
}
Phone {
String category; //home, work, mobile, etc
String phoneNumber;
}
So it will have web page contains two input text for first name and last name, and an add phone button. When add button is clicked, it will generate two input text again for category and phone number, and an delete button to that row.
I have tried using indexed=true, it will generate an html like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
The problem is, i dont know how to write the javascript, because i dont know what is current index if user click add button, how about if user have clicked delete button and then add button, what index it will be? It is ok if i have missing index? Something like
<input type="text" name="phone[0].category" ... />
<input type="text" name="phone[0].phoneNumber" ... />
<input type="text" name="phone[3].category" ... />
<input type="text" name="phone[3].phoneNumber" ... />
Note: please consider for the edit scenario too.
The first thing here is to use well the indexed and logic:iterate tags to generate the code. If having doubts about this, check out this answer given by me, which explains in detail how to use indexed attributes in struts: indexed and logic:iterate
Then, you have to consider the scenario where an user wants to add or delete rows, and update indexes correctly so struts will be able to retrieve data as you submit the form. I encountered this problem once and what I did was:
on add: using javascript, find out what is the last line of the table and, by looking at the generated code of the page, generate a new table row with empty contents, the index inside the square brackets. Finally, add to table
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf</td></tr>
<tr><td name='whatever[1].something'>asdf</td></tr>
<tr><td name='whatever[2].something'>asdf</td></tr>
</table>
to add a row, create it in javascript like this:
var newRow = '<tr><td name='whatever[3].something'>asdf</td></tr>
and append it to the table.
on del:Using the same technique as above find out which line (or corresponding index) was deleted. Then, edit the indexes of the remaining rows so that it matches the order of elements for the subsequent rows.
EXAMPLE:
a table:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf1</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
let's say you delete asdf1 by removing it from the dom. then, the new table will look like this:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[2].something'>asdf2</td></tr>
</table>
now we have to update indexes so it matches the right order, by changing the name of the second td to have an index of 1, that way, the table is back to a struts indexed format:
<table><tr><td name='whatever[0].something'>asdf0</td></tr>
<tr><td name='whatever[1].something'>asdf2</td></tr>
</table>
I hope it's clear enough. I obviously can't write all the js functions, since they require some work, but with this information you can make it on your own.

How to delete a checkbox when it is ticked?

I have a template that displays the list of items. It has one checkbox to each item. I want to be able to remove an item from a checkbox when a checkbox is ticked. So I would need a button that deletes an item once a checkbox is selected. Here is my template.
{% for item in items %}
<tr>
<td><input type="checkbox" name="item" value="{{item.pk}}" checked="checked"></td>
<td>{{item.tiptop_id}}</td><td>{{item.alternative_id}}</td><td>{{item.title}}</td>
<td>{{item.type}}</td><td>{{item.format}}</td>
</tr>
{% endfor %}
I would need probably know what to write in my views as well I guess.
Edit:
Not sure why it is still not deleting. check out my views. My edit order form. It is quiet huge. I thought the delete function would do the trick. Anyway take a look.
def edit_order(request, order_no):
# Alot of code here
if request.method == 'POST':
form = forms.OrderForm(request.POST, instance = order)
if form.is_valid() and save_item is not None:
form.save(True)
request.user.message_set.create(message = "The order has been updated successfully.")
return HttpResponse("<script language=\"javascript\" type=\"text/javascript\">window.opener.location = window.opener.location; window.close();</script>")
if status is not None and contact is not None and save_status is not None and delete_item is not None:
try:
for id in status_items:
item = models.StorageItem.objects.get(pk = id)
delete_item = item
delete_item.delete()
current_status = models.ItemStatusHistory(item = item, contact = contact, status = status,
user = request.user)
current_status.save()
except:
pass
request.user.message_set.create(message = "Status successfully changed for {0} items".format(len(status_items)))
You need to write a view that gets the POST data, finds out which checkboxes have been checked, and then deletes the items from the database matched by id.
You probably also want to wrap the view in a decorator to make sure the user has permission to delete things, or check the logged-in user is the same as the owner of the item to be deleted, if that's how you want to do thing.
Or you could use Django's forms framework to handle some of the heavy work.
Deleting objects from the database is in the db model documentation.
These things aren't totally trivial so don't wait too long here for a full solution - get hacking!
[Edit]:
The real issue is being able to delete items from a database on a form submission, not removing rows from a HTML table. See "A Simple Form-Handling Example" on this pageTutorial for form submissions in Django.
[/Edit]
Here's an example you can copy into a .html file on your computer and open in a web browser. It's using simple JavaScript. For something like this, I prefer to use jQuery, but depending on your use, it may be more overhead than you prefer. However, if you need to do a multitude of client-side programming, I highly recommend using jQuery.
Note: I think it's a little messy using parentNode.parentNode.parentNode, but this example purposely uses a table/checkbox configuration as expressed in the original post.
Preferably, I'd assign Id's to the table's rows that correlate with each checkbox so they're easier to access.
I also included a <input type="button"> because it was asked for in the original post. You may want to consider assigning the onclick= event to each checkbox so the user can remove the items as soon as they're clicked. But that's a preference.
<html>
<head>
<script>
function hideCheckedRows() {
var checkboxes = document.getElementsByName("item");
var checkboxes_to_remove = new Array();
var count = 0;
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked == true) {
checkboxes_to_remove[count++] = checkboxes[i];
}
}
for (var i = 0; i < checkboxes_to_remove.length; i++) {
cbx = checkboxes_to_remove[i];
// parentNode.parentNode.parentNode is the <tr>
// parentNode.parentNode is the <td> containing the checkbox
cbx.parentNode.parentNode.parentNode.removeChild(
cbx.parentNode.parentNode);
}
}
</script>
</head>
<body>
<table>
<tr name="table_row">
<td><input type="checkbox" name="item" value="Check1"></td>
<td>Id1</td><td>Alt_Id1</td><td>Title1</td>
<td>Type1</td><td>Format1</td>
</tr>
<tr name="table_row">
<td><input type="checkbox" name="item" value="Check2"></td>
<td>Id2</td><td>Alt_Id2</td><td>Title2</td>
<td>Type2</td><td>Format2</td>
</tr>
<tr name="table_row">
<td><input type="checkbox" name="item" value="Check3"></td>
<td>Id3</td><td>Alt_Id3</td><td>Title3</td>
<td>Type3</td><td>Format3</td>
</tr>
</table>
<input type="button" value="Click to remove checkboxes!"
onclick="hideCheckedRows();"/>
</body>
</html>
Edit:
If you want the item deleted from the database, we need more information. We need to know what kind of database being used and what the server-side code that handles the submit button's "POST" looks like. This example will delete the checkbox from the table in the user's web browser, but it will have no effect on whatever on the database.
You're doing it wrong :) Create a view only for deleting. Send in POST or GET id of the element (or in url), remove the element from db and then as response send your list without the deleted element.
Something like this :
def delete_element(request, id):
el = get_object_or_404(Element, id=id)
if el:
el.delete()
html = render_list(request)
if request.is_ajax():
result = simplejson.dumps({
"html": "html",
}, cls=LazyEncoder)
return HttpResponse(result, mimetype='application/javascript')
def render_list(request):
elements = Element.objects.all()
return render_to_string(template_name, RequestContext(request, {
"element" : elements, })
And then in your template you first call url of delete function with javascript and then on success you update your template with data['html'].
You can ask this guy : http://twitter.com/sasklacz as he's writing some tutorials on ajax in django to give you the exact code needed.

Categories

Resources