Update database attribute from Javascript - javascript

In my ruby on rails app, I am trying to allow a user to change a field on the screen and as a result, update the database.
A user is promoted with the following screen:
<td id="sb_user-<%=server.id%>" ondblclick="changeUser(<%= server.id %>);"><%= server.sb_user %></td>
When they double click on the sb_user field, a javascript function is called and changes the field to a textbox with a simple go button:
<script type="text/javascript">
function changeUser(id) {
//Stop the auto refresh until user hits enter
clearInterval(refreshInterval);
$("#sb_user-"+id).html("<form name='user'><div class='input-append'><input name='user_input' class='span1' id='appendedInputButton' size='16' type='text'/><button class='btn' type='button'>Go!</button></form></div>");
}
</script>
When a user enters text into the textbox and clicks go, I need it so that the database field server.sb_user is updated to whatever the user entered in that field.
Anyone have suggestions on how to do this?

What you are searching for is in place editing. Theres a railscast for that:
http://railscasts.com/episodes/302-in-place-editing

Related

make button disapear when clicked even when visited next time

I have a problem i am making a website with a button on it.
The problem is that i only want this pressed once by the user who visits the site.
So when ever the user refreshes or comes back it isn't possible to press it again.
I think i should use a combination of PHP with AJAX but unfortunally i am not good enough to get it together. In the hope somebody here can push me in the right direction :)
the html code:
<form action="" method="POST">
<input id="banana_button" type="submit" name="button_press" value="Add banana's!">
</form>
the javascript:
$('input[name="button_press"').click(function(){
$('#banana_counter_text').append($banana+1);
$(this).attr('disabled',true).css('width','180px').attr('value','thanks for adding a banana');
});
What i want to get is that when they pressed the button next time they visit they won't see the button.
Is it possible and how could i best do this. I hope you guys can help me
Update:
Well i was trying the last few days to resolve this problem and i got it working.
I am using a session_cookie with a custom name. Everytime the site is loaded it checks if that cookie is available if not than it wil show the button. Else it will delete the whole button.
the code looks like this:
PHP
//this is what checks everytime if the cookie is set
if (isset($_COOKIE['banana_added'])) {
//code for disabling the button
}
//this is what makes the cookie and checks if the submit button is pressed.
//because people where wondering how the data is stored. It is just a simple XML file
if(isset($_POST['buttonsubmit'])){
/*when submit is pressed */
session_name("banana_added");
session_start();
$xml = simplexml_load_file('../banana.xml');
$prev_count = $xml->banana_count;
$new_count = $prev_count +$_POST['buttonsubmit'];
echo $prev_count;
echo $new_count;
$xml->banana_count = $new_count;
file_put_contents('../banana.xml', $xml->asXML());
header("location:../landing.php");
Thank you all for your help. I don't know how i can close this thread ?
This is the solution for this particular problem
In order to remember that change you should either put that value in COOKIE/SESSION or in DATABASE. The second variant ofcourse is preferd.
So lets say in example you have table called buttons and in it you have a column 'checked' with type tinyint (accepting values 0 and 1) and default value of 0.
In your html you should do this:
<button <?php ($thisButtonQuery->checked == 'checked')? 'disabled' : '';?>>button text </button>
Regards and i hope i resolved your roblem! :)
Well i was trying the last few days to resolve this problem and i got it working. I am using a session_cookie with a custom name. Everytime the site is loaded it checks if that cookie is available if not than it wil show the button. Else it will delete the whole button.
the code looks like this:
PHP
//this is what checks everytime if the cookie is set
if (isset($_COOKIE['banana_added'])) {
//code for disabling the button
}
//this is what makes the cookie and checks if the submit button is pressed.
//because people where wondering how the data is stored. It is just a simple XML file
if(isset($_POST['buttonsubmit'])){
/*when submit is pressed */
session_name("banana_added");
session_start();
$xml = simplexml_load_file('../banana.xml');
$prev_count = $xml->banana_count;
$new_count = $prev_count +$_POST['buttonsubmit'];
echo $prev_count;
echo $new_count;
$xml->banana_count = $new_count;
file_put_contents('../banana.xml', $xml->asXML());
header("location:../landing.php");
Thank you all for your help.
This is the solution for this particular problem

How to get the values from jQuery and assign it for hidden field and save it into the DB?

How to get the values from jQuery and assign it for hidden field and save it into the DB?
Actually I am developing a project, where there is some jQuery code for a button:
$(document).ready(function () {
$("#btnYes").click(function () {
$("#btnYes").html("Counted");
$("#<%= hdnYesNoAnswer.ClientID %>").val("Yes");
$('#txtComment').focus();
});
});
When I clicked the #btnYes, it changes to "Clicked". In that page I added one hidden field called #hdnYesNoAnswer. So now what I want is to get the value ("Yes") from that jQuery function and assign it to hidden field #hdnYesNoAnswer and save that hidden field value to the SQL Server database.
#Maris is right. Ajax is a defacto technic for these actions. Here are some links. I hope they help
http://api.jquery.com/jquery.ajax/
http://en.wikipedia.org/wiki/Ajax_(programming)
https://developer.mozilla.org/en/docs/AJAX

Disable HTML5 input using php

I gt a php form script that allow user to input data into database but then there is another script that allow the user to edit the data in database using the same form script. My problem is when i want to edit the data, i want to disable certain input field from the form script that don't allow user to make changes. Can anyone teach me how?
There are many solutions.
You can set a flag by start the EDIT and check of this flag by START-EDIT. Quick'n dirty.
But you can lock the TUPLES for everyone - when not remove the flag
In your database (setting table) make new column named "editmode".
And in your editor page you can define "editmode" value.
For users check "editmode" value from database:
while($row = mysqli_fetch_assoc($editmode_check))
{
$editmode= $row['editmode'];
}
if ($editmode==1) {
echo "Admin on Edit or ...";
} else {
... the page ...
}

Populate form fields with selected value of previously selected form fields

I am doing a holiday booking form using RS Form with Joomla whereby I want answers from previous questions to automatically populate the answer for other questions so that, for example, the answer to 'what airline is person 1 travelling on?' automatically populates the answer to 'what airline is person 2 travelling on?'.
I am able to do this for simple text fields when a check box (id=samedetails20 in code below) is checked. When checked, the following works:
<script type="text/javascript">
function repeat(f) {
if(f.samedetails20.checked == true) {
f.airline2.value = f.airline1.value;
f.Airport2.value = f.Airport1.value;
f.flightno2.value = f.flightno1.value;
f.airlinereturn2.value = f.airlinereturn1.value;
}
}
</script>
HTML
<input type="text" value="" size="20" name="form[airline2]" id="airline2" class="rsform-input-box">`
However, the form also includes a drop down list to select arrival/departure times and a pop up calendar for arrival/departure dates. I do not know how to get the values from these to automatically populate the other fields.
I have tried to use selectedIndex and options but this does not work or I am doing something wrong e.g.
f.DepartureTime2.value = f.DepartureTime1.options[f.DepartureTime1.selectedIndex].value;
Sample HTML
<select name="form[DepartureTime2][]" id="DepartureTime2" class="rsform-select-box"><option value="00">00</option><option value="01">01</option>
<option value="02">02</option><option value="03">03</option>
etc.
I also have no idea how to do this for the pop-up calendar:
Sample HTML:
<input id="txtcal9_1" name="form[dateofdeparture1]" type="text" class="txtCal rsform-calendar-box" value="Departure date"> (Departure Date is a default value until date is selected)
Any help much appreciated.
Javascript is client-side only. No values are sent to the server, and JS must work with only what it's got on the client machine (that is, what it's received from the server).
This means that when the new page is sent after a page reload (like a refresh or form submit or new window), Javascript is sent fresh values. The old ones are gone, unless your browser ( = client side) remembers what you typed in an <input> box for some reason.
So, no, you can't do this in just Javascript. You'll need something server-side like PHP or ASP or JSP to receive your values server-side, process them, and send them back to the client for Javascript to use.

JavaScript - confirmation box. | Yes? > delete data from MySQL / No - do nothing

I don't have much experience with JavaScript. However I wanted to do a small thing with JavaScript and MySQL. And I could use some help.
I have a page in PHP which search for something and it's gives the results based on the search query.
For each result it adds 3 images, one which as a URL where you can view the content. Other where you can edit that content.
And the third one you can delete.
For that I wanted to do something nice.
Like, the user clicks the image, a confirmation dialog appears. In that box it asks if you sure you want to delete the data.
If yes, it would delete the data. where ID =
The ID is printed in the onclick action, inside the JavaScript function in the image using PHP echo.
If not, we would close the dialog and continue.
OK, so let's assume the following (forgive me for re-clarifying the question):
You have a number of rows of some form, with delete links, and you want to confirm that the user actually wants to delete it?
Let's assume the following HTML:
<tr>
<td>Some Item 1</td>
<td>Delete</td>
</tr>
<tr>
<td>Some Item 2</td>
<td>Delete</td>
</tr>
<tr>
<td>Some Item 3</td>
<td>Delete</td>
</tr>
So I'm assuming the same PHP script can run the delete, picking up on the mode parameter:
<?php
if($_GET['mode'] == 'delete') {
//Check if there is something in $_GET['id'].
if($_GET['id']) {
//Prevent SQL injection, just to be safe.
$query = "DELETE FROM sometable WHERE id='" . mysql_real_escape_string($_GET['id']) . "'";
mysql_query($query);
}
}
I'm going to give two solutions to this on the JavaScript side - the first with an inline, slightly ugly solution, the second using jQuery (http://jquery.com/), and unobtrusive JavaScript.
Ok, so for the first, I would bind on the onclick event of each link.
<tr>
<td>Some Item 3</td>
<td>Delete</td>
</tr>
Then create a JavaScript function:
//This will get called when the link is clicked.
function checkDeleteItem() {
//show the confirmation box
return confirm('Are you sure you want to delete this?');
}
As I said, I don't like that solution, because it is horribly obtrusive, and also not particularly robust.
Now, the jQuery solution:
//Do all this when the DOM is loaded
$(function() {
//get all delete links (Note the class I gave them in the HTML)
$("a.delete-link").click(function() {
//Basically, if confirm is true (OK button is pressed), then
//the click event is permitted to continue, and the link will
//be followed - however, if the cancel is pressed, the click event will be stopped here.
return confirm("Are you sure you want to delete this?");
});
});
I heartily recommend this solution over the previous one, since it is much more elegant and nice, and is generally best practice.
Can't help you with the php part, but you can use JavaScript's Confirm:
var ok = confirm('Are you sure you want to delete this row');
//ok is true or false
You can bind a function to the click event on your delete buttons. Returning false will cause them to ignore the click.
If you have a button that deletes the row you want, then call the function below to confirm user if he wants to delete :
function confirmDelete()
{
if (confirm('Do you want to delete ?'))
{
return true;
}
else
{
return false;
}
}
call it like that :
<input type="button" value="Delete Record" onclick="confirmDelete()" />
What you need is a basic HTML form that will submit and do the deletion. Get the HTML right for this first - I would suggest each image has its own form with a hidden field for the ID value and the image uses an image button: <input type="image" />
Once you have this working you can add the JavaScript warning dialogue. You will need to replace the form's submit event with your own function that prevents the form from submitting (by returning false) and then show your dialogue. If the user clicks yes, then you'll need to trigger the forms onsubmit() event with JavaScript and if the user clicks no then just hide the dialogue.
Also, have a read about unobtrusive JavaScript - DOM Scripting by Jeremy Keith is a fanastic book that will simply explain how to do this stuff.

Categories

Resources