Jquery inline editing


#1

Hi,

I have been trying to get my ahead around this JQuery issue what i have is a dynamic field which is coming from database.which i want to retrieve the data from database upon entering enter it submits that row to the database.

this is my JQuery code i have atm

   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
            <script type="text/javascript">
			 $(document).ready(function(){  
				$('#editable').click(function () {
					var dtext = $(this).text();
					var $edBox = '<input type="text" id="editBox">' + dtext + '/>';
					$(this).html($edBox);
				});
				$('#editable').on("keypress", function (event) {
					if (event.which == 13) {
						var $text = $("#editBox").val();
						$(this).html($text);
					}
				});   
			 });
			 </script>

my php code for displaying the form

<?php
$uQuery="SELECT * FROM CustomUserInfoLayout WHERE display='1'";
						$rs=mysqli_query($con,$uQuery);
						if(!$rs)
						{
							echo "Error:".mysqli_error($con);
						}
						else
						{
							$count=$rs->num_rows;
							if($count>=1)
							{
							   while($data=$rs->fetch_assoc())
								{
									$id =  Grab_CUSID($data['CUID'],$un);
									echo '<div class="section">
                                        <div class="sectionHeadingProfile"><p class="sectionHeadingTitle"'.$data['Name'].'</p></div>
                                        <div class="sectionInput-Edit">'.Grab_Custom_Info_Entry_Value($data['CUID'],$un).'</div>
                                    </div>';
								}
							}
						}
?>

Code for grabb_custom info function

<?php
 Grab_Custom_Info_Entry_Value($statID,$user)
{
	//
	include("dbconnect.php");
                $uQuery="SELECT * FROM CustomUserInfoSaved WHERE id='$statID' AND user='$user'";
                $rs=mysqli_query($con,$uQuery);
                if(!$rs)
                {
                    echo "Error:".mysqli_error($con);
                }
                else
                {
                    $count=$rs->num_rows;
                    if($count>=1)
                    {
					   while($data=$rs->fetch_assoc())
                        {
							?>
                            <div id="editable">
                            <? echo $data['Value']; ?>
							</div>
							<?
                        }
                    }
				}
?>

Not sure if there is somthing missing i see when i click on it the alert it showing with data but how can i change the div edittable from a div into a div with a text input field.so the data can be updated to database upon save?

not sure on how i can achieve that?


#2

The $edBox value is malformed in your code example. More correctly the existing content should be added to the value attribute.

    var $edBox = '<input type="text" id="editBox" value="' + dtext + '"/>';

The dollar symbol shouldn't be there either, because it's not a jquery object and instead is a string. An improvement is to use the jQuery object so that it really is a jQuery object:

    var $edBox = $('<input type="text" id="editBox" value="' + dtext + '"/>');

And as we are using the jQuery object, we can now use a more appropriate jQuery constructor:

    var $edBox = $("<input>", {
      type: "text",
      id: "editBox",
      value: dtext
    });

closed #3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.