Removing data attribute and adding it dynamically with jquery but still in the sun?

Question

Removing data attribute and adding it dynamically with jquery but still in the sun?

Navigation

#1 by (4 votes)

2

I'm trying to check errors on the server side and this will bring me a number depending on the type of error, the problem is that when editing remove and put a data attribute to then check with the focus, I've already tried what is commented, but I can not make it work, when I use the data

 $(document).on('keyup', '.albaran', function () {
            var albaran = $(this).val();
            var input = $(this, '.albaran');


                $.ajax({
                    type: "POST",
                    url: '@Url.Action("AlbaranValidar", "Inicio")',
                    data: { 'Albaran': albaran },
                    success: function (data) {
                        //input.removeAttr('data-error');
                        //input.removeData('error', null)
                        //input.data('error', data);
                        //input.attr('data-error', data);
                        //input.removeData('error', null)
                        //input.data('error', data);
                        input.removeAttr('data-error');
                        input.attr('data-error', data);
                    },
                    error: function (r) {
                        alert("Error");
                    }
                });
        });



        $(document).on('focus', '.albaran', function () {
            console.log($(this).data('error'));
            if ($(this).data('error') == 1) {
               $(this).tooltip({ 'trigger': 'focus', 'title': 'El campo no puede estar vacio' });
            }

        });

the controller

    public int ValidarAlbaran(string Albaran)
    {
        int AlbaranError = 0;

        if (Albaran == "" || Albaran == null)
        {
            AlbaranError = 1;
        }
        else if (Albaran.Length > 10)
        {
            AlbaranError = 3;
        }
        else
        {
            try
            {
                Convert.ToInt64(Albaran);
                AlbaranError = 0;
            }
            catch
            {
                AlbaranError = 2;
            }
        }
        return AlbaranError;
    }

I do a console.log but I'm still bringing the first data that I already have.

If the field has no error, it brings the data to 0 but if I edit it and the error is greater than accepted characters it brings 1 but I write and it changes in the sun but in the console.log it is still 0

Edition In response to Alvaro Montoro

        $(document).on('focus', '.albaran', function () {

            console.log($(this).attr('data-error').toString()); //con este me imprimo el numero
            console.log($(this).attr('data-error')) // con este no;

            if ($(this).attr('data-error').toString() == "1") {
                console.log('entro al if del focus')
                $(this).tooltip({ 'trigger': 'focus', 'title': 'El campo no puede estar vacio' });
            }
        });

does not enter the condition of the focus

jquery

asked by Acd 17.06.2017 в 04:34

source

1 answer

Change date format ymd_hms to ymd PHP form when attaching file turns it into .dat

score 4 · Accepted Answer

This is more a problem of concept. The value of the data-attribute data-error is updated with the code you have here:

input.removeAttr('data-error');
input.attr('data-error', data);

The problem is that later, in the event handler focus , you are trying to read it with the .data() method of jQuery:

$(this).data('error')

The .data() documentation specifies that the data-attributes are only accessed / read once and then their values are saved and are not accessed or mutated again (jQuery saves the values internally). And that's where the problem lies: with .data() you're accessing an "internal cache" of jQuery and not the value of the data-attribute itself (in the DOM). To access this value, you will have to use .attr() .

So for you to work what you already have, you just have to change the code of focus to make .attr("data-error") instead of .data("error") (and remember that it will be read as a string):

        ...
        console.log($(this).attr('data-error'));
        if ($(this).attr('data-error') == "1") {
        ...

In this demo you can see how the value is updated and read correctly:

$(document).on('keyup', '.albaran', function() {
  var albaran = $(this).val();
  var input = $(this, '.albaran');


  $.ajax({
    type: "POST",
    url: '@Url.Action("AlbaranValidar", "Inicio")',
    data: {
      'Albaran': albaran
    },
    success: function(data) {
      //input.removeAttr('data-error');
      //input.removeData('error', null)
      //input.data('error', data);
      //input.attr('data-error', data);
      //input.removeData('error', null)
      //input.data('error', data);
      input.removeAttr('data-error');
      input.attr('data-error', data);
    },
    error: function(r) {
      alert("Error");
      // si falla, cambiamos el valor a 1
      input.removeAttr('data-error');
      input.attr('data-error', 1);
    }
  });
});



$(document).on('focus', '.albaran', function() {
  console.log($(this).attr('data-error').toString()); //con este me imprimo el numero
  console.log($(this).attr('data-error')) // con este no;

  if ($(this).attr('data-error').toString() == "1") {
    console.log('entro al if del focus')
    $(this).tooltip({
      'trigger': 'focus',
      'title': 'El campo no puede estar vacio'
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<input type="text" class="albaran" data-error="0" />