0

html

Once the data was typed inside it will call autosave2 function to save it via .php. If the new value not different then do nothing.

<tr>
<td><input type="text" class="autosave2" name="price1" data-oval="500" value="700" /></td>
<td><input type="text" class="autosave2" name="price2" data-oval="300" value="500" /></td>
<td><input type="text" class="autosave2" name="price3" data-oval="600" value="800" /></td>
</tr>

jquery

The value from input has sent to .php file and return the result updated if no errors. Over here, I check the response if it's = updated then addClass is-valid to the <input> itself. The problem is it's not update the input as expect. Despite the same code outside .done is working fine. (If I un-comment the other lines below). console.log(data) is working just fine as well.

        $(".autosave2").on('blur',function(){
            var i_name=$(this).attr('name');
            var i_val=$(this).val();
            var i_oval=$(this).data('oval');
            $.post( "settings_price_limit.php",{name:i_name,val:i_val,oval:i_oval,mode:'default'}, function( data ) {
              console.log(data);    
                  if(data=="update"){
                      $(this).closest('td').find('input.autosave2').addClass('is-valid');
                  }
            });
            //$(this).closest('td').find('input.autosave2').addClass('is-valid');
        });

settings_price_limit.php

echo "updated";
Wilf
  • 2,297
  • 5
  • 38
  • 82
  • You have to bind the callback to "this" explicitly: `$.post(..., function( data ) { ... }.bind(this));` – Đinh Carabus Jul 10 '21 at 16:57
  • I'm new to jquery, please explain more. – Wilf Jul 10 '21 at 16:58
  • This has nothing to do with jQuery. In JavaScript the value of `this` does not propagate to nested functions automatically (except for arrow functions). The `post`-callback uses a different `this` context as your `onblur`-callback by default, so you have to either bind the `this`-context explicitly to your callback function or save a reference beforehand like `let self = this;` and use that within the post-callback: `$(self).closest('td')...`. – Đinh Carabus Jul 10 '21 at 17:04
  • let self = this; $.post( "settings_price_limit.php",{name:i_name,val:i_val,oval:i_oval,mode:'default'}, function( data ) { console.log(data); if(data=="update"){ $(self).closest('td').find('input.autosave2').addClass('is-valid'); } }.bind(this)); – Wilf Jul 10 '21 at 17:10
  • I'm I right? nothing change :( – Wilf Jul 10 '21 at 17:10
  • Please create a jsFiddle https://jsfiddle.net/ so I can reproduce the problem on my end. – Đinh Carabus Jul 10 '21 at 17:14
  • https://jsfiddle.net/1a02fLuw/ – Wilf Jul 10 '21 at 17:17
  • I don't know how to return php back to .done(). – Wilf Jul 10 '21 at 17:18
  • You echo `"updated"` but in your JS you check for `"update"`. What does `console.log(data)` log to the console? – Đinh Carabus Jul 10 '21 at 17:21
  • After the process from php. It will echo "updated". console.log(data) also get this one from php as well. That's why I want to check if the response is "updated" then addClass to input. – Wilf Jul 10 '21 at 17:47
  • 1
    Yes but in your javascript you check for `if(data=="update")` ... "update", not "update**d**", so your code will never run. – Đinh Carabus Jul 10 '21 at 17:54
  • 1
    It's working!!! What an idiot me. Thank you it's working now :( – Wilf Jul 10 '21 at 17:56

0 Answers0