Ajax update

Hello,

Trying to make an input to update a quantity of products without save buttons.

But whatever I have tried, nothing worked... information is not saved in DB.



This is my input in view:

Code:

<input id="qty" class="inline-textfield" type="number" min="0" max="99" size="2" name="qty" value="<?=$value->qty;?>">

This is Ajax script in same view file:

Code:

  $('#qty').on('change', function(e) {

      $.ajax({
          url: '<?=base_url()?>projects/qty_change_attribute/<?= $value->id; ?>/' + ("#qty").val($('#qty').val()),
          success: function (savingStatus) {
              $("#qty").val($('#qty').val());
          },
      });
  });

Controller:

Code:

    public function qty_change_attribute($taskId, $qty)
    {
            $task = ProjectHasTask::find_by_id($taskId);
            $task->qty = $qty;
            $task->save();
        $this->theme_view = 'blank';
    }

I know that there must be issues in my code, as I don't have experience at coding, but maybe anybody can help me? I really need to have qty update without buttons and with arrows up down which increases qty in steps.


For example this code works without any troubles, it updates information instantly. But what I don't like, that in order to open text field, you have to press on number and then after entering number I would have to press Enter in order to save value..

Code:

<span data-name="qty" class="editable synced-edit" data-inputclass="inline__edit__title" data-showbuttons="false" data-type="number" data-pk="<?=$value->id;?>" data-url="<?=base_url()?>projects/task_change_attribute">
                                      <?=$value->qty;?>
                                  </span>

Controller:

Code:

public function task_change_attribute()
    {
        if ($_POST) {
            $name = $_POST["name"];
            $taskId = $_POST["pk"];
            $value = $_POST["value"];
            $task = ProjectHasTask::find_by_id($taskId);
            $task->{$name} = $value;
            $task->save();
        }
        $this->theme_view = 'blank';
    }

You will need to utilize console.log in your ajax to see that you have getting the right values. This are your browsers Console view.

Code:

$('#qty').on('change', function(e) {
      console.log($('#qty').val());
      $.ajax({
          url: '<?=base_url()?>projects/qty_change_attribute/<?= $value->id; ?>/' + ("#qty").val(),
          success: function (savingStatus) {
              
          },
      });
  });

Part of your problem is in this line of code.

PHP Code:

url: '<?=base_url()?>projects/qty_change_attribute/<?= $value->id; ?>/' + ("#qty").val($('#qty').val()), 


Look at it you have two opening php tags without closing the first one.

I think it should be like this but I did not have time to test it.

PHP Code:

url: '<?=base_url("projects/qty_change_attribute/")?>' + $value->id + '/' + ("#qty").val($('#qty').val()), 


What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )

if you want keep it easy to debug may be you can try this.

use input hidden for your id

Code:

<input id="i_value" type="hidden" name="value" value="<?php echo $value->id ?>"/>
<input id="qty" class="inline-textfield" type="number" min="0" max="99" size="2" name="qty" value="<?=$value->qty;?>">

// change js to this

Code:

let baseUrl  = window.location.origin;

$('#qty').on('change', function(e) {

      let ID = $('#i_value').val();
      let qty = $('#qty').val();

      let url = baseUrl + '/projects/qty_change_attribute/' + ID + '/' + qty
      
      // log current ID, qty and url
      console.log('log', ID, qty, url)

      $.ajax({
          url: url,
          success: function (savingStatus) {
          },
      });
  });