popup screen won't show after submitting a form - javascript

I am building a web app with jquery mobile. On one page I have a little form to make a room reservation. I have two input boxes. In these boxes comes the start DateTime and in the other one the end DateTime.
Now what I do is the following, when I click on the input box there comes an popup box where you can insert a DateTime. The plugin is called mobiscroll.
I am opening it like this in my JS.
$('[data-role=page]').live('pageinit', function(event){
$("#DATUM_BEGIN").scroller({ preset: 'datetime',theme: 'jqm', mode: 'mixed',display:'modal'});
$("#DATUM_EINDE").scroller({ preset: 'datetime',theme: 'jqm', mode: 'mixed',display:'modal'});
});
The first time it does is correctly. But If I for example forget to enter the end date and submit my form with the submit button. It shows the error messages on the screen. But whenI then want to enter a date. The popup box won't show.
Does anybody know how I can solve this on a correct way?
EDIT: SOLUTION
Ok I found the solution, you just need to disable the ajax with and it will work.
You can disable your ajax on a form by using the attribute data-ajax=false

You should use
$(page).live('pageinit', function(event){
// Your code
// 'page' is a selector for the jquery mobile page you want to work on
});
instead of:
$(document).ready(function(){});
You can see why here http://jquerymobile.com/demos/1.1.0/docs/api/events.html
I think it might be this problem, but even if it's not, I would work that way, it will avoid several headaches.

Related

Update Button Randomly Stops Working on WooCommerce Orders Page

The "Update" button in WooCommerce Order page randomly stops working and throws the following error in console everytime I click on the button:
An invalid form control with name='' is not focusable.
I read online that it has to do with some hidden but required input fields and HTML5 validation rules. But I went through all the input tags in the source code of the page when the button was not working and didn't find any such "hidden but required" input field.
I am looking for a quickfix right now, so is there anyway I can disable the browser from validating the form inputs, and allow the submit (Update) button to work always?
Any help would be highly appreciated.
Yes, I have also come around this bug while exploring the orders page on woocommerce. So, the workaround would be to loop all the form tags and add novalidate to them.
Fixed it using this script:
var badForms=document.querySelectorAll("form");
for(var i=0;i<badForms.length;i++){
badForms[i].setAttribute("novalidate","novalidate");
}

Replace text on page on form submit

I have a form to let people submit news articles to my site (a company intranet). Sometimes the form submission takes a few seconds to resolve due to some actions I have in place on the relevant model save method. I wanted to replace the text on the form page with a message saying "Sending your article. This may take a few seconds, please do not refresh the page." as soon as someone hits submit. I've seen these on a number of websites when buying things online.
My first attempt at doing this was to add an onClick event to the form button. Submitting then successfully replaced the text but did not submit the form. I had a look at this answer on binding two events to one submit button but it doesn't seem to address my need as it looks PHP-specific. I'm certain javascript is the right tool for the job but I can't think of how to do this other that binding to clicking the submit button. Does anyone know the correct way to do this?
JavaScript is indeed the right way to do so. If you are using jQuery you can go ahead and use something like:
$('form#your-form-id').submit(function(){
$(this).hide().after('Loading, please wait...');
});
Where #your-form-id would be the id of the form. This function is hiding the form content and showing that text, you could do anything instead actually.

Ignoring Validators

I have a page where I use Javascript and a <input> button to hide the ability to add a new user to my database. To ensure that people enter in accurate info, I have added validators which works great. The issue, is that I also have a GridView and a search facility on this page and because I use Javascript to hide it, no click events will trigger because those textboxes attached to the validators don't have correct data in them. Is there a way to get it to ignore the validation unless the above button has been clicked?
I wrote this and had another crack at Google. My issue was that I could add CausesValidation="False" to the ASP:BUTTON control which worked, but I was using HTML to generate the Add User button instead of ASP.NET. Since I was using JQueryUI, I found it easier to search how to change from <input> to <asp:button> controls which I did by changing the javascript from:
$("#button").click(function () {
to:
$("input[id$='AddButton']").click(function () {
If I understand it correctly, <asp:button> is rendered into HTML as input[id=... etc. Adding in $ meant that that the script applied to any <asp:button> that ended in AddButton. I needed this since I had a few Search buttons on this page hidden in other Views and still wanted a consistent naming structure on the page. The alternative was to use the ^ symbol instead which would apply the script where AddButton is at the start of the ID.
Try setting validation group on that set of fields you want to validate. This should make the validators work only on that set of controls and no other.
Set the validation group on all input controls, validation controls and submit button.

Selectively POST to new browser window

I've got a form that has three submit buttons for posting back data for different scenarios.
Each one POSTs to different actions on a controller, however for one of them I need to POST back to a new browser window.
Is this possible? I know I can add a target="_blank" to the form, but that will open a new window for all of the submit buttons...
UPDATE:
Currently, I've tried several methods to get this working and I've completely failed, my current non-working code looks like this:
$("input[type=submit]").click(function (e) {
var form = $("form.filter-execution-form");
if ($(this).hasClass("run-report"))
$("form.filter-execution-form").attr("target", "_blank");
else
$("form.filter-execution-form").removeAttr("target");
});
Does anyone have any ideas to get this working?
Thanks,
Kieron
See this post - use the same method to dynamically add the attribute for the submit button you want it for (ie add it to the onclick event of your submit button you want to add this support to)
How do I add target="_blank" to a link within a specified div?
There are probably a number of different ways to do this. The easiest I can imagine is when the submit button is pressed in the first window, you open a new window with a URL (on the same domain) that has the desired form in it (may have to watch out for pop-up blockers). Then, transfer the data that has been entered from your existing form to the form in the new window. Call a javascript function in the new page that tells it to submit the form.
In the form set target="postWindow" or any other name that is the same throughout, and it will always post to that popup (if it was not closed).
The best way I can think of doing this (and it might not be the best way of doing it) would be using JavaScript.
When you click the button, prevent it doing anything but run some javascript instead, open a new window on a blank page, with a hidden form in it, use javascript to transfer values from your form to the new pop-up form, submit the pop-up form & do something with original page to show an action was taken.

jQuery validation of controls

I am looking at validation of some text boxes for things like required,
minlength, max length, email etc... I am able to get examples that work fine on submit button on page. I want to do this validation on a button click which will only raise a Ajax request and not submit of page.
On the Internet all the samples found was with a submit button. Is there an
easy way to change this code a little bit to make it work for non submit button click or any
new jQuery or Java plugin to do the same?
I am using the jquery.validation.js for now. This works with submit buttons.
Any kind of help with suggestion or help is appreciated.
The jQuery validator plugin already handles this. Just tweak some of the options in the validate method.
As quoted in the documentation for the onfocusout option:
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid.
Code Example:
$("#form").validate({
onfocusout: false
});
That's just one of a few dozen options you can configure. You can see the full list of options for the validate method here:
http://docs.jquery.com/Plugins/Validation/validate#options

Categories

Resources