Change HTML during AJAX request

Asked

Viewed 192 times

-1

Hello, I am trying to change a text on my web page to follow in real time some insertion in the database, I am using synchronous AJAX to make the requests, but HTML does not change.

Javascript:

result.forEach(function (value) {
    $.ajax({
        url: Config.path+"/admin/sensor/?machineId=" + machineId,
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        async: false,
        data: JSON.stringify({name:value.name, collectType:value.collectType, nameAddress:value.nameAddress, ihmOperator:value.ihmOperator, dataType: value.dataType,
                                monitoring: value.monitoring, analytics: value.analytics, setpoint: value.setpoint, notification: value.notification,
                                class_type:value.class_type, range:value.range, charbehauvior:value.charbehauvior, observations:value.observations, showSensor:value.showSensor}),
        success : function(data, success, response){
            switch(response.status){
                case 200:
                    $('#sensorName').text(value.name);
                    console.log(data);
            }
        }
    });
});

HTML:

<div class="modal-footer">
     <p id="sensorName" style="text-align: left;" class="hidden"></p>
</div>

"console.log(data)", just below the command to change the HTML, works, prints what I want on the console. Can anyone help me? Thanks.

javascript html jquery ajax

  • Then use $('#sensorName'). text(data), just be careful because the callback Success "date" parameter is usually an Array. If a password is an array with its date variable of the callback.

  • But if I put console.log(value.name), it prints on the console as expected, I think this problem has something to do with AJAX being synchronous, because it only prints the last record being inserted, but I need it to be synchronous.

  • The "date" variable when you give a console.log(data), does it have the values you want ? Do you want to put only 1 value in the variable or put all values that come from the date variable on the screen? try to be clearer so I can help you.

  • I’m just trying to put the date name variable, which is the same thing as value.name. When I give the console.log(data) it prints the correct values, and when I print console.log(value.name) as well. 'data' and 'value' are equal.

  • Put an image of your.log(data) console to see what’s on it. So you have to put all the values of the Array data in a string and show in the variable "sensorName" is this ?

  • No, inside the data array, it has the name variable, it’s what I’m trying to put. The data.name. The value I put there is equal to date, data = value and data.name = value.name

  • I think your value may be being overwritten after all you are inside a foreach, and the answers given should help, can you put a photo of the log ? or something like that to see if you can help .

Show 2 more comments

2 answers

0

You can use the append instead of text, so it will include in html that has the desired id.

example:

$('#sensorName').append('AQUI ENTRA O HTML QUE DESEJA');

This html can be a <label>COM_SEU_TEXTO</label> or anything else, up to a <div> inteitra.

  • It did not work, it gave the same problem that I commented there above, it changes the text only in the last element that was inserted.

  • Strange, because the append should not change anything, just include, you can show me how the function with the append ?

-1

Try to take out the Hidden class 

 <div class="modal-footer">
 <p id="sensorName" style="text-align: left;"></p>
 </div>

  • That’s not the problem, I remove this class when I press the button to start inserting. $('#sensorName'). removeClass('Hidden');

  • the field is in a modal?

  • It’s in a modal yes

  • tries to add out of modal to see if it will work, because the code to change the text is right, must have something cluttering

Browser other questions tagged javascript html jquery ajax

You are not signed in. Login or sign up in order to post.