I am having an issue with adding data and displaying it on a list. The problem arises when I add data through AJAX. In the success function, after showing the alert "successfully added", I used location.reload(), which takes me to the homepage (div tag data-role="page") instead of staying on the current page. When I replace the reload function with window.location.hash='#id_of_myDiv_page', the data displays correctly but the CSS and CDN minified JavaScript are not working, causing the list tags to appear very large. This is a major problem for me.
Here's my code:
$("#b4").click(function (){
$.ajax({
type:"POST",
url:"http://manoj/adddoc.php",
data: $("#frm1").serialize(),
success:function(response)
{
if(response == 1)
{
alert("Record Added Successfully");
managedoctor(); // calling function
window.location.hash = '#managedoctor';
}
else
{
alert("Error while adding the data");
}
}
});
});
function managedoctor()
{
$.ajax({
async: true,
type: "GET",
url: "http://manoj/doctor_details.php",
dataType: 'JSON',
success:function(response)
{
var list = "";
if(response.length != 0)
{
for (var i = 0; i < response.length; i++)
{
list += '<li doc_id="' + response[i].id + '"><img src="doctor.png"/><p><h3><a href="#adddoc" data-rel="dialog" data-transition="flip" id="' + response[i].id + '">' + response[i].docname + '</a></h3></p></li>';
}
}
if(list != "")
{
$("#myListView").html(list);
}
}
});
}
**HTML Page:**
<div data-role="page" id="managedoctor" data-theme="b" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<a id="refreshdoctor" href="#adddoc" data-rel="dialog" data-transition="flip">Add Doctor</a>
</div>
<div id="doctorlist">
<ul id="myListView" data-inset="true" data-role="listview" data-theme="c" data-filter="true" data-filter-placeholder="Search doctors..." style="margin-top:30px!important;"></ul>
</div>
</div>