This question already has an answer here:
jQuery validation custom error message display for radio button
(1 answer)
Closed 7 years ago.
I am developing an online survey form, and im using jquery mobile, i used the jquery validate plugin.
The problem is,the jquery validate error messages appear after the first radio button option.
How can I place the error message right before the first radio button option.
I tried using this code but seemingly it is not working.
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo(element.parent());
} else {
error.insertBefore(element);
}
}
I have found the answer,
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.prependTo(element.parent());
} else { // This is the default behavior of the script for all fields
error.insertAfter(element);
}
}
reference: Answer to the question I had
Related
My problem is exactly the same as found in this post:
TinyMCE 4 insert link form fields disabled
The only difference is that I am using tinyMCE version 5.1.1 and using jquery mobile.
Basically I have initialized tinyMCE in a jquery mobile popup (see image link) and when I click on the icon to insert a link, none of the fields except the target are available for editing.
I have tried the code found in the previous post (tweaking it a little bit to target the tinyMCE css classes): This is what I have already tried:
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-editor-container").length) {
console.log("e.stopImmediatePropagation()");
e.stopImmediatePropagation();
}
});
"e.stopImmediatePropagation()" is printed in the console but none of the fields except the target are available for editing.
If it is a problem linked to bootstrap, the solution is:
// Prevent Bootstrap dialog from blocking focusin
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox-tinymce, .tox-tinymce-aux, .moxman-window, .tam-assetmanager-root").length) {
e.stopImmediatePropagation();
}
});
From: https://www.tiny.cloud/docs/integrations/bootstrap/#usingtinymceinabootstrapdialog
I'm using Jquery Mobile to develop an web app for Android and iPhone. I want to handle the event when the users change their value in the input text field.
Initially, I use .on("keyup change") and everything seem to work ok. However, when the users paste some text on the text field (by holding and tap on the "Paste"), my event handler is not called.
Please help me if you know how to solve this problem.
Thank you all.
Works on all browsers but not on FireFox.
Demo
$('input').on('paste', function (e) {
if (e.originalEvent.clipboardData) {
var text = e.originalEvent.clipboardData.getData("text/plain");
$('p').empty();
$('p').append(text);
}
});
Credit goes to: jQuery Detect Paste Event Anywhere on Page and "Redirect" it to Textarea
For Android add a timeout as it is in this example http://ajax911.com/numbers-numeric-field-jquery/
For iPad add event 'change' together with paste, worked on iphone
Here is what worked for me on mobile Safari and Chrome.
if (document.getElementById('search_input')) {
document.querySelector('#search_input').addEventListener('paste', (e) => {
let pasteData = (e.clipboardData || window.clipboardData).getData('text');
pasteData = pasteData.replace(/[^\x20-\xFF]/gi, '');
window.setTimeout(() => {
//do stuff
});
});
}
http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text
jQuery UI 1.10 made it so that the dialog title can only be text (no html) to prevent scripting vulnerabilities. I'm not allowing user input to generate this title, so I would still like to use HTML, mainly to display an icon to the left of the title.
I'm going to post my solution to this problem because I haven't seen anyone else ask or answer this yet. Hopefully it will help someone else, or someone else may have a better approach.
More info as to why they did it: http://bugs.jqueryui.com/ticket/6016
This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML.
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
_title: function(title) {
if (!this.options.title ) {
title.html(" ");
} else {
title.html(this.options.title);
}
}
}));
If you hesitate to override jQuery's _title method, you can use the html, append, or similar methods on the title element at the jQuery dialog's open event, like so:
$("#element").dialog({
open: function() {
$(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
}
});
The above parses the HTML correctly while bypassing jQuery's title method. And since it happens at the open event, the user experience remains seamless. Just did this on a project, and it worked beautifully.
This will modify the title after init the dialog
$('#element').dialog(options);
var dialogTitle = $('#element').closest('.ui-dialog').find('.ui-dialog-title');
dialogTitle.html('<strong>hello world</strong>');
This question already has answers here:
How to prevent a click on a '#' link from jumping to top of page?
(24 answers)
Closed 5 years ago.
I have a page with some jQuery functions. The HTML on the page looks like so:
Open
When I click the Open button a hidden panel slides out. The jQuery itself works great however when I click the button it also takes me to the top of the page.
Is this the defualt behavior and how do I prevent every href="#" from taking me to the top of the page.
Note: I could add id's and tell the href to direct to that ID. I do not want to do that for various reasons (including adding unnecessary code).
Open
In your event handler, add e.preventDefault(); (assuming e is the name of the variable holding the event):
$('.service').click(function(e) {
e.preventDefault();
});
Open
OR
$(document).ready(function()
{
var a = $(".service");
a.click(function()
{
return false;
});
});
OR
$(document).ready(function()
{
var a = $(".service");
a.click(function(e)
{
e.preventDefault();
});
});
OR
Open
$('service').click(function() {
<your code>
return false;
});
return false overrides the standard behavior of the ‘a’ tag and stops the browser returning to the top of the page when clicked.
I am developing a jQuery Mobile website and am using the jQuery validation plugin to validate my forms. On some forms I have set data-ajax="false", but still wanted to show the loading spinner when the submit button is clicked.
To display the spinner I use the following code
// Display spinner
$(document).delegate('.ajaxSpinner', 'click', function () {
if($(".ajaxValidate").length == 0 || $(".ajaxValidate").valid()) { // Show spinner if no validation or form is valid
$.mobile.showPageLoadingMsg();
}
});
The form submit button has a class of 'ajaxSpinner', and the form itself has a class of 'ajaxValidate'.
On most forms this works great, if the form is invalid when submit is clicked you don't see the spinner, whereas if the form is valid, the spinner is displayed.
I have just one single form that isn't playing nice....the spinner shows regardless of whether the form is valid or not. The form is quite long, so I'm wondering if the validation hasn't completed before my manual display spinner code fires.
I'm not very proficient with jQuery so can anyone spot the flaw in my code?
Could it be a timing issue? If it is, is there a good way to make sure the validation has completed before the click function fires?
I think you need to call the spinner inside your validation function.
So, using the validation plugin, you may normally have something like this:
$(".ajaxValidate").validate({
submitHandler : function(form) {
// START YOUR SPINNER HERE
$.mobile.showPageLoadingMsg();
$(form).ajaxSubmit({
success: function() { // YOUR FORM WAS SUBMITTED SUCCESSFULLY
// DO SOMETHING WHEN THE FORM WAS SUBMITTED SCESSFULLY ...
// ...
// STOP THE SPINNER EVENTUALLY
//$.mobile.hidePageLoadingMsg()
}
});
}
});
Hope this helps. Let me know if this works for you.