CodeIgniter Update database using ajax button

Question

I'm trying to update my data using an update button.

What I want to do is:

When I click my data it turns into an input field where I can modify the data and then when I click the update button the data should be updated.

enter image description here

I have the update button (the yellow button in picture) ready and the data input field is also ready where I used jQuery found on net.

I don't know much about Ajax and jQuery. Database field names I want to update are tname and time

I need Update Method in Controller, Update Method in Model and Codes in View

Onclick turns into Input field codes:

<script>
 var switchToInput = function () {
                     var $input = $("<input>", {
                     val: $(this).text(),
                     type: "text"
                 });

            $input.addClass("loadNum");
            $(this).replaceWith($input);
            $input.on("blur", switchToSpan);
            $input.select();
      };

    var switchToSpan = function () {
                       var $span = $("<span>", {
                       text: $(this).val()
                       });

            $span.addClass("loadNum");
            $(this).replaceWith($span);
            $span.on("click", switchToInput);
    }
      $(".loadNum").on("click", switchToInput);
</script>

victorkt · Accepted Answer · 2015-04-27 17:06:52Z

1

What you need to do is something like this on your switchToInput function

$.ajax({
  url: "update.php", //This is your PHP code that will update the table using the model
  data: {tname: $("#idOfTheTnNameInput").val() ,time:$("#idOfTheTimeInput").val()}
}).done(function() {    //This function will be executed when the AJAX request end
  alert("table updated");
});

edited Apr 27, 2015 at 17:06

victorkt

14.7k9 gold badges56 silver badges51 bronze badges

answered Apr 27, 2015 at 17:04

Sergio Vilchis

3222 gold badges4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sadman Hasan Over a year ago

Ok I put these inside switchToInput function :

$.ajax ({           url : "main/update_task",  // update method in controller           data: {             'tname' : $tname,             'time' : $time           }         });

But what should be those ID, Im confused. I viewed data using foreach loop $row->tname and $row->time.

Sergio Vilchis Over a year ago

Both input fields should have an id attribute in order to get the value of that input and send it to the AJAX request. And to access to this values (with jQuery) we use $('#InputID').value()

Sadman Hasan Over a year ago

@AkhileshBChandran I was taking about data: {tname: $("#idOfTheTnNameInput").val() ,time:$("#idOfTheTimeInput").val()}

Collectives™ on Stack Overflow

CodeIgniter Update database using ajax button

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related