Searched for almost 2 days and cant able to find a suitable answer.
I am developing a Jquery Mobile page. Currently I have 2 JQuery Mobile pages. When the page is launched it will show a button. Hitting the button will send a SOAP request to the server to get a response. After receiving the response the second page will be displayed.
The SOAP request might take a minimum of 3 to 5 seconds. During that time I would like to show a loader/spinner on the centre of the page till I get the response from the server. How to do that? Following is the code I use.
HTML File containing 2 pages
<form name="frm_login" action="" method="post">
<div id='pg_login' data-role="page">
<div data-role="content">
<input type="submit" name="btn_login_submit" id="btn_login_submit" value="Login" />
</div>
</div>
<div id='pg_menu' data-role="page">
<div data-role="header" data-position="fixed">
<h1>Welcome</h1>
</div>
</div>
</form>
Javascript code as below
$(document).ready(function() {
$('form').submit(function(e){
e.preventDefault();
var xmlRequest = getXmlRequest();
loadingStart();
$.soap({
url: 'full wsdl url',
method: 'getUserName',
data: xmlRequest,
success: function(xmlResponse) {
loadingEnd();
$.mobile.changePage('#pg_menu');
},
error: function(xmlResponse) {
}
});
return false;
});
});
function loadingStart(){
$.mobile.loading( 'show', {
text: "loading",
textVisible: true
});
}
function loadingEnd(){
$.mobile.loading( "hide" );
}
I also keep a 5 second sleep time in the WSDL function for testing purposes.
The loader is not displaying. Please let me know what is going wrong here.
Regards
Malai
The problem is because of the jQuery SOAP plugin (http://plugins.jquery.com/soap/)
After I change to native AJAX things started working fine with the below code.
$(document).ajaxStart(function() {
$.mobile.loading( 'show', {
text: "loading...",
textonly: false,
textVisible: true,
theme: 'a',
html: ""
});
});
$(document).ajaxStop(function() {
$.mobile.loading('hide');
});
Related
I've got a div element which I am using as a popup which does not update itself. I'll use the picture below to explain:
When I click on each row in the grid, the right hand side updates to show the details, part of which is a potentially lengthy Note field. The button View Note triggers a popup with the full text inside. Here, I have previously selected Donor 2000000, which displayed the correct note. However, when I select another Donor(2000002 as highlighted) the information in the popup retains the info for the first selected Donor. So, essentially it sets it once and then does not update.
The (partial) code for the main View is:
<div class="col-md-4 col-md-push-8">
<h4>
Donor Details
</h4>
<div id="donor-details">
<p class="muted">
Select donor to display detailed infomation
</p>
</div>
</div>
<div class="col-md-8 col-md-pull-4">
#Html.Action("DonorSummaryGrid") #* configure grid in a partial view *#
</div>
</div>
<script>
$(function () {
pageGrids.donorSummaryGrid.onRowSelect(function (e) {
$.post("/Donor/GetDonorDetails?donorId=" + e.row.DonorId, function (data) {
if (data.Status <= 0) {
alert(data.Message);
return;
}
$("#donor-details").html(data.Content);
});
});
});
</script>
The code for the partial view - which contains the details - is:
#if (!String.IsNullOrWhiteSpace(Model.CurrentNoteText)) {
<div id="note-dialog" title="Note for Donor #Model.DonorId">
<p>#Html.DisplayTextFor(model => model.CurrentNoteText)</p>
</div>
<br />
}
#Scripts.Render("~/Scripts/NoteDialogue.js")
When I debug, the value of Model.CurrentNoteText and #Model.DonorId do reflect the correct data.
NoteDialogue.js is:
$(function() {
$("#note-dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 500
},
hide: {
effect: "blind",
duration: 200
}
});
$("#opener").click(function() {
$("#note-dialog").dialog("open");
});
});
I hope this is clear :)
Oh, there are no errors shown in the browser, and everthing functions as expected, except for updating the info in the popup.
I have tried
<script>
$("#note-dialog").html("#Model.CurrentNoteText");
</script>
with no success.
Got there in the end :)
Looking at the generated source, I noticed that the code for
<div id="note-dialog" title="Note for Donor #Model.DonorId">
<p>#Html.DisplayTextFor(model => model.CurrentNoteText)</p>
</div>
<br />
was being generated right at the bottom, outside all the other divs containing the grid and details. Looked something like this:
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" role="dialog" aria-describedby="note-dialog" aria-labelledby="ui-id-1"....>
As I clicked each row with a note in, an extra div was being generated, with the aria-labelledby attribute incrementing, e.g. "ui-id-2", "ui-id-3"...
The first generated div was being selected for the dialogue opening.
The solution was to remove the div on the row click event. Code now is:
$(function() {
pageGrids.donorSummaryGrid.onRowSelect(function (e) {
$("#note-dialog").remove();
$.post("/Donor/GetDonorDetails?donorId=" + e.row.DonorId, function(data) {
if (data.Status <= 0) {
alert(data.Message);
return;
}
$("#donor-details").html(data.Content);
});
});
});
I have issue loading partialview to div second time. I have checked previous posts in SO but non of them really helped me. So I am posting my issue here.
index.cshtml
<div id="DivEmailContainer" style="display:block" class="row">
</div>
_EditEmail.cshtml
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-2 ">
<input type="submit" value="Save" class="btn btn-success width100per" />
</div>
script type="text/javascript">
$(function () {
$("#frmEmail").validate({
rules: {
...
submitHandler: function (form) {
$.ajax({
url: 'PostEditEmail',
type: 'Post',
data: $(form).serialize(),
success: function (result) {
alert("In success");
$('#DivEmailContainer').html(result);
},
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.responseText);
alert(thrownError);
},
complete: function (xhr, textStatus) {
alert(xhr.responseText);
alert(textStatus);
}
});
}
});
controller
public PartialViewResult PostEditEmail(string actiontype, FormCollection col)
{
var communicationLocation = string.Empty;
....
return PartialView("_EditEmail", memberemail);
}
First time partialview loading into DivEmailContainer to error. If submit again partialview loading full post back. not even it is calling submitHandler.
Only thing I observed is 1st time submit <form post was /ContactInformation/GetEditEmailbut when I submit second time <form post was /ContactInformation/PostEditEmail.
What could be wrong?
update
second time Forloop scriptblock loading. May be it is issue with Forloop?
#using (Html.BeginScriptContext())
{
Html.AddScriptBlock(
update
issue with forloop htmlhelper, not with ajax. secondtime script is not loading. #Russ Cam can help on this.
from my experience putting script in a partial leads to very inconsistent results. expecially with the script being inserted into the middle of the page. I would highly recommend that you pull your script from the partial and put it on the main page. Since the partial is loaded after the page load you will need to tie the script to the partial one of 2 ways.
1. tie the events to the document
$(document).on('click', '.targetClass', function(){
//do stuff
});
for example to put an id on your input and change it to a button
<input type="button" value="Save" id="btnSave" class="btn btn-success width100per" />
your click event would then be
$(document).on('click', '#btnSave', function(){
//your ajax call here
});
being tied to the document this click event would fire even though the input is inserted into the document after load
put the script in a function that is called after the partial is loaded
change your
$(function () {
to
function partialScript(){
and call this function after the partial is loaded
$('#DivEmailContainer').html(result);
partialScript();
Try to load partial view like this
$("#DivEmailContainer").load('#Url.Action('ActionName', 'ControllerName')', function () {
//Perform some operation if you want after load.
});
I have form on a jQuery ui-tab, which loads data onto a list displayed on the same ui-tab. I have managed to get the data loaded, and the display to return to same tab for a further item to be entered. However depending on the sort order of the list the new item is not always visually obvious, I want to fade in a message, but I can't get it to work along with returning to the same tab without a manual page refresh.
I have attached both the scripts I am trying to use.
Script A
<script> // this one loads data perfectly but no success message appears
$(document).ready(function() {
$("#addtodoitem").live( 'submit' , function(evt) {
evt.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('.ui-tabs-panel:visible').html(data);
$('.itemadded').fadeIn(1000).delay(4000).fadeOut(1000);
};
});
});
});
Script B
<script> //this one shows the message and loads the data, but it also loads another
//copy of ui-tabs overlapping the original
$(document).ready(function() {
$('#addtodoitem').ajaxForm(function(data) {
$('.ui-tabs-panel:visible').html(data);
$(".itemadded").fadeIn(1000).delay(4000).fadeOut(1000);
}); return false;
});
HTML
<div id="tabs_5" class="tabs">
<h2 id="todo5" class="tablecaption">Add To-do</h2>
<p>To raise a new issue please enter the description of the issue below.</p>
<form id="addtodoitem" class="todo" method="post" action="todo_do.php?do=<?=$todo_do != '' ? "edit&to_id={$_GET['to_id']}" : 'add'?>&pub=1&site_ref=NA">
<input type="hidden" value="0" name="status" id="status">
<textarea name="todo" id="todo" placeholder="To raise a new issue, please type the details of the issue here"><?=$todo_free_text?></textarea> <br />
<input type="submit" value="Submit" class="button" />
</form>
<h2 class="tablecaption itemadded">Thank you, your item has been added to the list.</h2>
I got to a satisfactory solution by using a separate refresh link button and php page to cause the refresh after posting so the script is so:
<script type="text/javascript">
$(document).ready(function(){
$('#addtodo').click(function(e){
e.preventDefault();
if($('#todo').val()!="")
{
$.ajax({
type: 'POST',
url: 'todo_do.php',
data: { 'status': $('#status').val(),
'todo': $('#todo').val()
},
success: function(data){
$('.itemadded').slideDown(500).delay(2000).fadeOut(500);
$('.refreshtodo').slideDown(500);
$('#addtodoitem')[0].reset();
$('#tabs > ul').tabs({selected: 5 });
}
});
}
else{$('.nothing').slideDown(500).delay(1000).fadeOut(500)}
});
});
and the extra php page just contains
<?
header("Location: resident.php#tabs_5");
?>
I should see: "Hello" after hitting submit, but I don't. Why?
http://jsfiddle.net/GbfLG/1/
<div data-role="page" id="create">
<script type="text/javascript">
alert("HERE");
$('#form').submit(function() {
$.post("/").success(function(resp) {
alert("RET");
$.mobile.changePage($("#final"));
});
return false;
});
</script>
<div data-role="content">
<form id="form">
<input type="submit" name="g" value="Submit" id="g"/>
</form>
</div>
</div>
<div data-role="page" id="final">
Hello
</div>
jQM has a different set of rules then the normal web page. You have used your java script in the wrong place. With jQM, if possible write all you js code in separate file/files.
This is a fix made to your jsFiddle code, it is working now, I have just put it in right context. Your js code was not changed a bit.
Example:
$('#create').live('pagebeforeshow',function(e,data){
$('#form').submit(function() {
$.post("/").success(function(resp) {
$.mobile.changePage($("#final"));
});
return false;
});
});
Your form is submiting - the return false; isn't working as it should.
Try..
$('#form').submit(function(e) {
e.preventDefault();
e.stopPropagation();
... stuff ...
});
Also in your fiddle you haven't defined $.changePage so it comes out as 'undefined'.
I'm using the jquery tab plugin with the same results that are on jquery ui site (link text).
The problem is that I want to change the tab label to something like "Loading" when the Ajax request is waiting for a response. How shall I achieve that?
Edit:
What I have now:
<div id="tabs">
<ul>
<li>User Profile</li>
<li>Edit</li>
<li>Delete AccountT</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("UserProfile", Model); %>
</div>
</div>
and on javascript I just have the following code:
<script type="text/javascript">
$(function () {
$("#tabs").tabs({
});
});
</script>
What i want is to show a loading message inside the div of the active tab.
According to the widget doc, ajax should work outside the box if your href is an actual link :
To customize loading message, you can use the spinner option :
Fetch external content via Ajax for
the tabs by setting an href value in
the tab links. While the Ajax request
is waiting for a response, the tab
label changes to say "Loading...",
then returns to the normal label once
loaded.
<script>
$(function() {
$( "#tabs" ).tabs({
spinner: "<em>My Loading Msg</em>",
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this tab. We'll try to fix this as soon as possible. " +
"If this wouldn't be a demo." );
}
}
});
});
</script>
Why don't you just set the tab label to "loading" onclick and change it to whatever you want once you get a response back from your AJAX?
$(function () {
$("#tabs").tabs();
$("#tab1").click(function() {
$(this).val("Loading...");
$.ajax({
blablabla...
success: function() {
$("#tab1").val("Tab 1");
}
});
});
This should give you an idea, obviously the function could be written better to act on each tab.
I think what you are after already exists in the jquery ui for Tabs.
The HTML content of this string is
shown in a tab title while remote
content is loading.
http://jqueryui.com/demos/tabs/#option-spinner
Hope this helps!
From your example am I correct in assuming that you want to navigate to another page when the user clicks on either of the second two tabs, but you want a loading message to be displayed while you are waiting for the next tab to load?
If so, you could do it by keeping a loading message in the other tabs like so:
<input type="hidden" id="modelId" value="<%=Model.Id%>" />
<div id="tabs">
<ul>
<li>
User Profile
</li>
<li>
Edit
</li>
<li>
Delete AccountT
</li>
</ul>
<div id="tabs-1">
<% Html.RenderPartial("UserProfile", Model); %>
</div>
<div id="tabs-2">
<p>Loading, please wait...</p>
</div>
<div id="tabs-3">
<p>Loading, please wait...</p>
</div>
</div>
And doing the redirection to your other pages in your javascript, doing it something like this:
$(document).ready(document_ready);
function document_ready()
{
$("tabs").bind("tabsselect", onTabSelected);
}
function onTabSelected(event, ui)
{
var modelId = $("#modelId").val();
switch (ui.panel.id)
{
case "tabs-2":
window.location.href = "/User/EditUser/" + modelId;
break;
case "tabs-3":
window.location.href = "/User/Delete/" + modelId;
break;
}
}