Develop Reference

dojo TabContainer does not return a selected TabPanel from a failed Submit

I have a djTabContainer that contains several tabPanels:
Works fine however, when I click the submit button I do some processing in a QuerySave and return false I get this view:
If I click on the Customer Tab it displays the customer info correctly and if I then click the Header tab it also displays correctly:
I'm assuming it is because on the return there is no tab selected, but not sure how to force it to display the Header tab on the return from the failed QuerySave.

This is because you have a form tag inside that Tab. It will redirect once the form is submitted. You have to handle it your way to prevent it.
Lets say, if "myForm" is your form id,
dijit.byId('#myForm').on("submit", function () {
sendFormToBackEnd(); // this will handle the POST functionality in js
return false; //return false so it wont redirect now
});
Or the simplest one is append false in the call itself.
<form ... action="callSubmit();return false;" >
...
</form>

I don't like to use form submit buttons. Instead, use a regular button with Dojo's iframe request:
<div data-dojo-type="dijit/form/From" data-dojo-id="myForm">
<!-- other form fields here -->
<div data-dojo-type="dijit/form/Button">
<script type="dojo/method" data-dojo-event="onClick">
// manually activate validation
if (!myForm.validate()) {
return;
}
require(["dojo/request/iframe"], function(iframe) {
iframe("yourUrl", {
// not sure if you can use the From widget directly
form: myForm.domNode
}).then(function(data) {
// ...
}, function(err) {
// ...
});
});
</script>
Submit
</div><!-- Button -->
</div><!-- Form -->
You obviously don't have to use the markup data-dojo-event, and can simply put it all in a function to be called onClick.

The problem was that I had two panels in the Header tab. The first one contained the error message and the panel is rendered if viewScope.vsError != null, and the second one has no rendered property. What I did was moved the error panel inside the header panel and that seems to have fixed it. I guess the tab did not like the rendered on the panelError.
In anycase it is working the way I want it to now.
Thanks to Per it was a rendering issue, but not where I thought it would be.

How to hide labels until the submit button is clicked?

I am working with Spring Controller and JSP project. I have a jsp page in which I have one button which is Process and once I click that button, it shows me two radio button just below it and a Submit button as well.
And after clicking Submit button, if everything went fine, then I show - as this data will come from controller -
Success= true
Error= none
But as you can see in my jsfiddle. When my form gets loaded after I hit the jsp url it comes like this on the browser -
Process
Success=
Error=
Meaning, it has Process button at the top and just below Success and Error label with no values in it as we haven't passed any values yet from the controller. But it looks pretty weird for the users.
So what I am trying to do is, once my page gets loaded or I click Process button - I don't want to show Success and Error labels at all. It should be shown only after the submit button is clicked with its appropriate value in Success and Error depending on what is passed from the controller.
Is this possible to do in jquery? If I am right, basically I want to hide it until submit button is clicked...
Or is there any better design to show the Success and Error label with what I am trying to do?

It seems to me that you wouldn't need JavaScript to do this since as far as I can tell the form submission goes to the backend. In JSP itself you could just do a check like:
<% if (success.length > 0 || error.length > 0) { %>
<!-- success / error labels go here -->
<% } %>
If you actually wanted to do this via JavaScript, you could use something like:
if (!$("#success-value").text().length && !$("#error-value").text().length) {
// hide the labels
}
http://jsfiddle.net/4Nmqk/25/

have a look on my fiddle if it meet your idea.
jsfiddle.net/4Nmqk/26

Div removed with jQuery still exists?

I've got an old application in ASP.NET. In a form with a Submit button, I put this div at the top of the page:
<div id="submitIndication" class="saveIndication" runat="server" visible="false">
Your request has been submitted.
</div>
On btnSubmit_Click in the code-behind, I put this line:
submitIndication.visible = true
This code then handles a fading out of the div:
jQuery(document).ready(function () {
setTimeout(fadeOut, 4000);
});
function fadeOut() {
jQuery("#submitIndication").slideUp(400);
};
That all works fine. However, there are two other buttons on the page, "Prefill Form" and "Opt Out". These call their own methods (btnOptOut_Click and btnPrefillFormInfo_Click), neither of which touches the submitIndication div in any way.
But, after I submit the form the first time, when I click Prefill Form or Opt Out, the page refreshes, and the submit div appears at the top again. If I click them before submitting, this doesn't happen.
It seems the div is still on the page at this point, and just displaying until the JavaScript fades it out. I've tried all manner of things (setting CSS visible to false and display to none, remove(), hide(), attr(), etc.), and nothing seems to get rid of this div.
This feels like it should be so simple. How can I get this div to not show up after a submit and clicking other buttons?

Try this:
Declare DIV as:
<div id="submitIndication" class="saveIndication" runat="server" style="display:none">
Your request has been submitted.
</div>
And on btnSubmit_Click in the code-behind put this line (assuming u're using C#):
submitIndication.Style["display"] = "block";
And use your current fadeout code.
Update Come to think of it even simpler approach should work. Keep everything as it is in your setup, just add EnableViewState = "false" to your DIV's HTML definition.

How to disable page content using javascript when the form is submitted

In my application when i click form submit, service call happens. When the service call happens I need to I need to disable the page conetent til the next page loads.
As i have given cursor:wait the mouse pointer changes to loading symbol and does not allow to click on the page. But still i could use tab and enter or change the values in the page.
Can anyone tell the code to disable page content using transparent image?

You could do that easier than with a transparent image :
$('body.waiting > *').on('click', function(e) {
e.preventDefault();
});
I think that you should only disable the submit input for example :
$('input').attr('disabled', 'disabled');
With a "overlay", add an absolute div at the top of your page :
<div id="overlay" style="position:absolute;background:url('trans.png');left:0;top:0;width:100%;height:100%;display:none;"></div>
And than simply show it when your form is submitted :
$('#overlay').show();

Show progess bar dialog when submit

I'd like to show a popup jquery styled if possible on every postback, for example saying Loading... I don't know how to accomplish that nor which tecnologyes use. I want to put the code on a super class so that I need to code only once. In principle I'd like that when I press the submit button, the page hides itself.
Hope you help me.
Edited:
It should be something like that. I have a page, I open a jquery dialog with an iframe on it and with a submit button. When I submit the form the dialog with the form must hide and a new dialog saying loading... have to appear; when the operations finishes this dialog must hides.

You can do that using the onsubmit trigger on the form of you page as:
<form id="form1" runat="server" onsubmit="return disableForm(this);">
...
</form>
an on javascript what I do is that on the first submit click I let the submit, and close/open the dialogs that I like. If the user clicks two times the submit I show him a message and stop the second submit.
var submitted = false;
function disableForm(theform) {
if (true == submitted) {
alert("form already submitted... please wait...");
return false;
}
else {
// here you close the dialog, open an other
submitted = true;
return true;
}
}
I can not write how to close the dialog that you open since you do not have give any clue/code about it, but I think it will be easy.

Assuming you are using updatepanels. You will need handlers like this one and an image "LoadingImage"
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandle);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandle);
function beginRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "visible";
//Do something when call begins.
}
function endRequestHandle(sender, Args) {
document.getElementById("LoadingImage").style.visibility = "hidden";
}
</script>
What it does is it shows an image when ajax call starts and hide it when it completes. You can use an animated gif for your purpose.