jQuery Mobile popups/notifications

jQuery Mobile popups/notifications

I want to create a small popup/notification that will occur when values
change in my database. the logic is being passed correctly. However, I'm
not sure how to make the popups occur properly and at all as well.
I have two buttons:
<a href="#" data-icon="GhCsStatus-Red" data-rel="popup"
data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_CS"
style="pointer-events: none;">CS</a>
<a href="#" data-icon="GhCsStatus-Red" data-rel="popup"
data-inline="true" data-mini="true" data-role="button" id="GhCsStatus_GH"
style="pointer-events: none;">GH</a>
I would like to have the notifications pop up a little bit above these
buttons. This is what I have created but I just haven't positioned them
yet:
<div id="GH_popup" data-role="popup">
<p> GH is OFF! </p>
</div>
<div id="CS_popup" data-role="popup">
<p> CS is OFF! </p>
</div>
I also have some Javascript that determines when these notifications will
pop up:
<script type="text/javascript" >
$(document).ready(function () { GrabGhCsStatus(); });
function GrabGhCsStatus() {
var url = '@Html.Raw(Url.Action("index","GhCsStatus"))';
$.get(url, function (data) {
if (data.CheckIfCsIsRunning == 1 && data.CheckIfGhIsRunning == 0) {
$("#GH_popup").popup();
$("#GhCsStatus_GH").remove();
if (data.CsStatus == 0) {
$('#GhCsStatus_CS').buttonMarkup({ icon: 'GhCsStatus-Red' });
} else {
$('#GhCsStatus_CS').buttonMarkup({ icon:
'GhCsStatus-Green' });
}
}
}
...
...
...
</script>
I feel as though I am putting the jQuery popup attributes in the wrong
areas and that I am not using them properly =/