1
Hello, I’m trying to display some data that caught by ajax and put them in a responsive table using the Jquery Mobile framework.
The problem is that, the first time I do the operation, it works normally, but the second time, some elements appear different. Detail: on large screens works, but the development is geared to mobile.
(names of merely illustrative fields)
Following is html table:
<table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
<thead>
<tr>
<th>Q#BR</th>
<th data-priority="1">campo1</th>
<th data-priority="1">campo2</th>
<th data-priority="1">campo3</th>
<th data-priority="1">campo4</th>
<th data-priority="2">campo5</th>
<th data-priority="2">campo6</th>
<th data-priority="2">campo7</th>
<th data-priority="2">campo8</th>
</tr>
</thead>
<tbody id="tb_detail">
</tbody>
</table>
Follows code js:
function buildTableDetail(p_sts,p_ar){
$.ajax({
type:'GET',
crossDomain:true,
url:'http://localhost/arquivos/meu_arquivo.php?callback=?',
dataType:'jsonp',
data: {p1:p_ar,
p2:p_sts},
beforeSend: function(){
}
}).done(function(data){
$('#tb_detail').empty();
for (i = 0; i < data.dados.length; i++) {
$('#tb_detail').append('<tr> <td>'+data.dados[i].campo1+
'</td><td>'+data.dados[i].campo2+
'</td><td>'+data.dados[i].campo3+
'</td><td>'+data.dados[i].campo4+
'</td><td>'+data.dados[i].campo5+
'</td><td>'+data.dados[i].campo6+
'</td><td>'+data.dados[i].campo7+
'</td><td>'+data.dados[i].campo8+'</td></tr>');
}
$('#link').attr('href','#pg_alvo');
$('#link').click();
$('#pg_alvo').bind('pageinit', function () {
$('#tb_detail').table('refresh');
});
})
.fail(function(data, textStatus, errorThrown){
alert("Erro na operação.");
console.log(data);
console.log(textStatus);
console.log(errorThrown);
})
}
First and second time print:
**Note that in the second it is already showing the other fields without my asking, and also shows a black block instead of the column title
How could I fix this to always appear correctly? (as in the first screen)
EDIT:
Just to explain it better, the problem is not in pulling and showing the data. I can do this. The problem is that the table works wrong with columntoggle, which does not hide the columns and data it should hide, even though the ui-table-Cell-Hidden class is enabled.
The problem is this: I set 5 fields with priority 1(image 1) that are displayed correctly the first time when I take the dice by ajax and play in the form, and, because it is a table of type "columntoggle", I also receive the others, but they are hidden, until I want to see them by clicking on the "Columns" button. However, from the second time, these fields that were "hidden" are shown direct, and their title(<th>) is not shown, showing the black block(image 2) in place.
– Léo
You can ride a fiddle where you play the error?
– Tiago Bértolo
The fiddle is exactly the same as yours, but with the Jquery mobile css and js. Mine acts like yours, pulling and showing the data, but due to Jquery Mobile’s css, some columns should be hidden, which does not happen
– Léo
So do Fork and put in that column-hiding mechanics
– Tiago Bértolo
I tried to put it on, but when I update it, it doesn’t pick up the styles. All you have to do is add <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> and also <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
– Léo
Punch in the code and send me the link
– Tiago Bértolo
Fiddle: https://jsfiddle.net/mokvojbe/ .
– Léo
I took care of this: https://jsfiddle.net/bertolo/0s18tzoe/ and noticed a very important detail. The functionality of disabling columns did not work with jQuery 2.2 and worked with 1.12.2. I just noticed on the site that for version 1.4.5 you should use jQuery from 1.8 to 1.11 or 2.1, so your problem may come from here. Confirms if it works for me to edit my reply!
– Tiago Bértolo
I understand, tested and it seems that worked, but I will not be able to use because changing the version all my layout is disfigured. But thanks anyway.
– Léo