Using Ajax.begin form in MVC application - javascript

I am working on MVC framework and posting my form by Ajax.BeginForm. No Doubt everything works very well but I have applied a ajax loader/Processing that starts work OnBegin and stops on this event OnComplete. So, when this function works after getting success from server:::
function MessageConfirmation(Json) {
if ($("#Id").val() > 0 && $("#Id").val() != '') {
}
else {
$("#Id").val(Json.Inserted_ID);
}
alert(Json.Message);
}
So, this message called after success but the problem arises when I am updating the page and clicking the submit again and again . So the Above function also works again and again and it brings a pop up alert that shows message. In that pop up if I click on "Prevent this page from creating addtional dialogs",
then it shows this error and no alert works
NS_ERROR_NOT_AVAILABLE: Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMWindow.alert] and ajax loader also keep on processing which is not user friendly at all and it shows if the record is not updated

If i get your question right you mean to say that after submit is clicked the success confirmation message is shown and then after subsequent click alert is generated and you want to prevent subsequent click.

Related

JSP/Servlet keeps old session values on back button (browser)

So the problem is that i have a InitialPage.jsp page, that does the next thing when load:
if (<%=(Boolean) session.getAttribute("error")%>) {
showPopupWithError();
}
Login.jsp submits a form that calls ValidationServlet.java, that manages the validations for InitialPage.jsp, so, at the beginning of doPost(...) i set session.setAttribute("error", false), and start doing the validations.
If any input is wrong, the servlet will do session.setAttribute("error", true), and redirect to InitialPage.jsp, continuing with the cycle. As the scriptlets load, the .jsp will get the following code:
if (true) {
showPopupWithError();
}
And show the message.
So i continue loading data to inputs, and when everything is ok, i submit the form again.
The servlet validates correctly (so, the attribute "error" keeps set to false, as i had done at the beginning of the doPost(...)).
The problem comes as, when the next page shows (MainPage.jsp), the user should be able to press the back button of the browser and go back to InitialPage.jsp.
When it goes back to InitialPage.jsp, the attribute "error" is set to true, ignoring the last call to the servlet (when it validated correctly, set it to false, and redirected to the next page), and it automatically shows up the error message popup.
So basically the idea is to find a way to conserve session values after pressing the back button of the browser, and i couldn't manage to do that.
Thanks!

AJAX response caching / onclick-event inside of a function

I´m using AJAX to execute some server-side actions and refresh a table inside the page without reloading the page itself. All works fine at first view. But I wrote a function in PHP to send an email and execute it via AJAX. When I´m starting this action for a second time old responses gets triggered.
What exactly happens:
I´m clicking a Button to execute the "Sendmail-Action"
a Modal asks me if I want to execute the action and I´m clicking yes
a PHP-Script gets executed and sends the email
the Modal gets closed after the PHP-Script finishes (~2s)
the table (with emails and so on) gets refreshed and the status updated
What happens next:
I´m clicking a Button to execute the "Sendmail-Action" for the same
or another entry in my table
a Modal asks me if I want to execute the action and I´m clicking yes
the Event triggers twice / 4xAjax-Request instead of 2 (I can see it in my Chrome-Console)
the Modal closes and 2 Mails sended
What I´ve tried to get rid of this behaviour:
checked my JS with JSHint
checked my PHP-Code (no errors in apache error.log)
redesigned the PHP-Script (Sendmail), now the AJAX executes a function
tried different browsers
deactivated AJAX-Caching
completely deactivated Caching with Apache (correct Headers)
deactivated Session-Caching in my php.ini (I don´t use sessions)
unset all variables in PHP
cleared the cache for all of my browsers
checked all headers
searched several hours for solutions
More information about my setup:
jQuery 2.1.4
php 5.4
Apache 2.2
I can´t find a solution to my problem and maybe this is caused because I´m adding the content dynamically to the table. I had the same problem in the past and I´m thinking the Modal (which is also dynamic) triggers the click on the "Yes-Button" twice.
You can put your ajax click handler outside of that function:
$(document).on('click', '.email-resend, .email-send, .show-doc, .show-acc, .more-acc, .no, .yes, .termin', function(){
$.fn.doAction(classname, comEntry);
});
As you mentioned that you have placed this in the function. Instead you should put this outside of it:
$(document).on('click', '.bt-ok', function(){
$.ajax({
....
});
});
Edit by #pandora: Or just use a second function (in my case) like this:
$(document).on('click', '.bt-ok', function(){
$.fn.sendRequest($('#modal').attr('data-1'), $('#modal').attr('data-2'));
});
Then I can call the function like this and execute the AJAX:
$.fn.sendRequest = function(data1, data2) {
$.ajax({
url: 'target.php',
cache: false,
data: { gimme1 : data1, gimme2 : data2 },
success: function(response) {
// Show Error
if(response.length > 0){
alert(response);
}
// Reload Content
$.fn.Reload('','');
// Close Modal
$('#modal').css({'display' : 'none'});
}
});
};

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

Twice refreshed in p:commandButton, race condtition with oncomplete

I'm executing the server action with p:commandButton. After those action is completed, I'm refreshing the form (to show hidden fields) and I show dialog. I've tried also to refresh only the panels with hidden buttons, but the effect was the same:
There is second refresh launched, after I call dialog.show(). The problem is, that the widgets defined inside the dialog and the dialog itself is not existing in the moment! So, when my JavaScript code runs too fast, before the post with update of the dialog finishes, I'm getting an exception, because the object I want to modify doesn't exist in DOM tree.
So my first question, is it possible to avoid such situation and second refresh, can't the dialog be refreshed along with page?
And second, if the first can't be answered, how can I launch my code after those second post finishes? I need simply a callback when refreshing of the dialog component will be completed, and than run my operations.
<p:commandButton id="doTask" value="Do task" widgetVar="doTaskButton"
action="#{service.doTask}" update="#form"
onclick="disableMainButtons()"
oncomplete="async.showAsyncDialog()" />
The HTTP sequence:
// button click
POST http://localhost:9080/myapp/order.xhtml 200 OK
// oncomplete launches dialog.show()
// I receive answer from COMET before the dialog to display it is shown
POST http://localhost:9080/myapp/channel/async 200 OK
// refresh triggered by dialog.show(), only now the dialog is shown and it's widgets are rendered
POST http://localhost:9080/myapp/order.xhtml 200 OK
The workaround, that isn't beautiful from programming point of view is to check if the dialog is rendered and if not, delay my procedure. In case the dialog is still not rendered, delay once again etc.
waitForDialogRendered: function() {
var visible = asyncDialog.jq.css('visibility') == 'visible';
if (!visible) {
setTimeout(waitForDialogRendered, 250);
return;
}
runComet();
}
Not that asyncDialog.jq.is(':visible') returns true even if dialog is not visible for user!
Still, I'd be happier without the need to write such code.

How to do form validation first and then a confirmation popup call in wicket

I am using ajax button and overridding the IAjaxCallDecorator getAjaxCallDecorator for javascript confirmation popup . when i click on button it calls this confirmation popup first then it does the form validation
Do we have any way to first do the validation and then confirmation popup to save action ?
Thanks in advance
You could try to validate after those input fields have been changed. So this means you could add jQuery and simply do this for example:
$('input#name').change(function(){
//validate the name and display error messages
});
with the code it'd be simpler to catch the issue
general recommendations: try to use async: false in ajax call;
form validation - inside ajax function call, show popup - outside that ajax function. Your popup probably will show different messages depending whether validation came through or not (your ajax function has some kind of validation status return)

Categories

Resources