ajax call with jQuery Mobile to PHP
Question
I have a problem in my code, I call the php by an ajax call, I have the right answere (I tested the json answere by some alerts), my problem is when I append the data to my list-view, I have no data in my list even using the "refresh". Can you help me to find the bug please.
He gives me this error: Uncaught Error: cannot call methods on listview prior to initialization; attempted to call method 'refresh'
Here the code in HTML and jQuery
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$.ajax({url: "SubCategory.php",
dataType: "json",
jsonpCallback: 'successCallback',
async: true,
success: function (result) {
ajax.parseJSONP(result);
},
error: function (request,error) {
alert('Network error has occurred please try again!');
}
});
var ajax = {
parseJSONP:function(result){
$.each(result, function(i, row) {
$('#select-subCategory').append('<option value="'+row.id+'">Annuncio: '+row.name+'</option>');
});
$('#select-subCategory').listview('refresh');
}
}
});
</script>
<body>
<form method="post" action="SubCategory.php">
<select id="select-subCategory" data-native-menu="false">
</select>
</form>
</body>
And this is my php file
class SCategory
{
public $id;
public $name;
}
$SubCategories = array();
$SubCategories[0] = new SCategory;
$SubCategories[0]->id = 0;
$SubCategories[0]->name = 'first';
$SubCategories[1] = new SCategory;
$SubCategories[1]->id = 1;
$SubCategories[1]->name = 'second';
$SubCategories[2] = new SCategory;
$SubCategories[2]->id = 2;
$SubCategories[2]->name = 'third';
$SubCategories[3] = new SCategory;
$SubCategories[3]->id = 3;
$SubCategories[3]->name = 'fourth';
echo json_encode($SubCategories);
SOLUTION
Delete 'data-native-menu="false"' from HTML, (maybe is true by default), so the select in HTML become simply
<select id="select-subCategory" ></select>
then the listview will refresh and appear!! :)
3 answers
solution1
0 2014-02-16 18:22:50
You are using $('#select-subCategory').append(
and id is selectsubCategory
but should be used
$('#selectsubCategory').append(
solution2
0 2014-02-16 18:26:43
this should work fine
$.each(result, function(key, row) {
$.each(row, function(id, name) {
$("<option>").val(id).text(name).appendTo($('#selectsubCategory'));
});
});
$('#select-subCategory').listview();
if you are loading the entire list you will need to initialize it not to refresh it
solution3
0 ACCPTED 2014-02-18 07:35:42
I fixed the problem :
Delete 'data-native-menu="false"' from HTML, (maybe is true by default), so the select in HTML become simply
<select id="select-subCategory" ></select>
then the listview will refresh and appear!! :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.