Styles do not apply to elements coming via AJAX

Question

Styles do not apply to elements coming via AJAX

Navigation

#1 by (2 votes)

0

I am assembling a page that is inserted 2 values. These values go to a page .php via AJAX and then the page returns all records in the database.

Role that records the data:

function adiciona(){

                    var os = $('#icon_telephone').val();;
                    var descricao = $('#icon_prefix').val();;


                    $.ajax({
                        type: 'POST',
                        url: 'adiciona.php',
            dataType : 'html',
                        data: {descricao: descricao, os:os},
                        success: function(data) {
                            $("#carrega").show();
                            $("#carrega").hide();
                            console.log(data);
              exibe();
                        },
                        error: function(xhr, desc, err){
                             console.log(xhr);
                             console.log(desc);
                             console.log(err);
                        $('#notification-bar').text("Details: " + desc + "\nError:" + err);
                        }
                    });
                }

Function that retrieves data:

  function exibe(){
    $.ajax({
      type:'POST',
      dataType : 'html',
      url: 'exibe.php',
      success: function(data2){
         console.log("dados fun 2"+data2);
         $('#tabeladados').text(data2);
    //     $('#tabeladados').off();
          //     $('#tabeladados').text(data2);
        //  $("#tabeladados").on('load', 'button.actionButton', exibe());
      },
      error: function(xhr, desc, err){
         console.log(xhr);
         console.log(desc);
         console.log(err);
          $('#notification-bar').text("Details: " + desc + "\nError:" + err);
      }
    });


  }

Problem:

The output is normal. All the data I need is returned, but the css style of the page is not applied to those returned elements, like the example below:

php jquery css ajax

asked by anonymous 29.09.2016 / 20:15

1 answer

Linking problem in project with more than one source file How to put button next to two text fields

score 2 · Accepted Answer

Switch:

$('#tabeladados').text(data2);

By:

$('#tabeladados').html(data2);

When using the text() method, it means that the text of the element will be exactly the one passed by the parameter, even if it is a language like HTML.

While html() is suitable for receiving a string parameter in html, it will be read as code and will be implemented on the page, as well as include or require of php.

And check that the page that receives this data has the same style files for the table classes to read.