I have the following jQuery Tools overlay:
<div id='editDescriptiontOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
Background info: The HTML for this overlay is static. I have a list of items each having their own Edit link. When a given Edit link is clicked, the overlay is generated by calling: $('a[rel=#editDescriptionOverlay]').overlay( { ... } ); and the input is populated with the respective text.
The Save button needs to validate the text in the input element and close the overlay if and only if the validation is successful. Otherwise, the overlay must remain open. The Cancel button simply closes the overlay without validation.
The validation logic has been independently verified to work.
I've tried setting the onBeforeClose event during overlay generation as a means of validation. Taking this approach, both the Save and Cancel buttons needed the same class .close. Unfortunately, the condition applies to all .close elements in the overlay so even the Cancel button was validating.
I've also tried binding a click event to the Save button immediately after generating the overlay, like so:
$('.save', $('#editDescriptionOverlay'))
.unbind('click')
.bind('click', function() {
if (validateText) {
console.log("Validation passed.");
$('a[rel=#editDescriptionOverlay]').overlay().close();
}
else {
console.log("Validation failed.");
}
});
The console.log's confirm that the validation is working, but the overlay doesn't close.
Any insight is appreciated, thanks.
For jquery widgets, public methods should be called as follows:
$('a[rel=#editDescriptionOverlay]').overlay("close");
wherein close is the method name that you wish to call.
If a method accepts parameters, then, these should be added as parameters right after the method name.
Updated:
I am sorry. I just had time to check what jQuery Overlay Tools is and I am mistaken. This is not similar to any jQuery widget, hence, my comment above will also not work for this case. I tried your code above and it worked. The overlay was closed. But, when I tried it with multiple <a rel="#editDescriptionOverlay">, which I think is what you did. It did not work. My suggestion would be to use just one <a rel="#editDescriptionOverlay"> and use a dummy anchor element for the Edit link, which when clicked would trigger a click to <a rel="#editDescriptionOverlay">. You can do something like this:
<script type="text/javascript">
$(document).bind("ready", function(e){
$("a[rel]").overlay();
$('.save', $('#editDescriptionOverlay')).unbind("click").bind("click", function(){
if (validationValue){
$("a[rel=#editDescriptionOverlay]").overlay().close();
}
});
});
function clickThis(){
$("a[rel=#editDescriptionOverlay]").trigger('click');
return false;
}
</script>
Edit1
Edit2
<a rel="#editDescriptionOverlay">Dummy</a>
<div id='editDescriptionOverlay' class='overlay'>
<input type='text' class='description'/>
<button class='save'>Save</button>
<button class='close'>Cancel</button>
</div>
I'd prefer binding an event to the save button (the second one you mentioned). Actually your code looks fine, except that you probably don't need to bind the event to $('#editDescriptionOverlay') and you have typo in your html markup above (<div id='editDescriptiontOverlay' should be <div id='editDescriptionOverlay').
See here for an example.
Related
I've seen similar questions and if there is one that addresses this question please close this as a duplicate.
Here's what I've got so far:
$("#findOffice").click(function() {
$('.register-location').attr('href', function(i, href) {
$(this)[0].click();
});
});
The idea here being they fill in the input and the submit button is #findOffice. After clicking the submit button a dynamic link is created and attached to a button called .register-location, this is then inserted into the DOM. I've used the $(this).[0].click(); successfully before for this purpose but it's not doing anything this time.
My question is, how upon creation of this dynamic link, can I automatically click this new button and move the user along without them having to do so themselves. Open to other ideas if a better solution exists.
Perhaps the link being dynamically inserted into the DOM is the issue?
This will work with JavaScript, but the Snippets editor here does not allow the window.open method. I'd recommend testing it elsewhere, and it will work there.
var href1 = "https://www.w3schools.com/jsref/met_win_open.asp";
document.getElementById('button').addEventListener('click', function() {
window.open(href1);
});
<button id="button">Click Me!</button>
I've seen a lot of posts on this issue but none of the solutions worked. The following..
<script type="text/javascript">
$(document).ready(function() {
$("a.login_linkedinbutton").click(function(){
$("#signup-form").submit();
return false;
});
});
</script>
is what I have in the body tag of a page. Also in the body is the form, the html of which in IE shows up like this..
<form accept-charset="UTF-8" action="/auth/linkedin" class="well form-inline" id="signup-form" method="post">
<a class="login_linkedinbutton" href="#">Login using Linkedin</a>
</form>
in IE8, when the link within the form is clicked, the jquery is not getting triggered. It's working in Chrome and Firefox. I've tried:
1) Using the live event to bind the click action
2) Moved the jquery out of the page and into rails assets
Any ideas what else to try?
Use <input type="submit" value="Login using Linkedin">
Why create problems by using a non-standard element and then trying to recover from it?
If you want it to LOOK like a link, just style the button. But why do it? It's poor user experience to suggest the user to go to another page while they're submitting a form. Most users avoid clicking links when they have a form filled because they're afraid of loosing what they just typed.
If you insist using the link, you could try this:
var onLinkedInLogin = function(e){
e.preventDefault(); // stops the link processing
$("#signup-form").submit();
// add return false; if you want to stop event propagation also
// equivalent to calling both, e.preventDefault() and e.stopPropagation().
};
$(document).on('click', 'a.login_linkedinbutton', onLinkedInLogin);
The reason I'm suggesting using .on() instead on .click() is that I guess that on IE, the a.login_linkedinbutton is not present in the DOM when you call the .click().
I made the following small Javascript script to enable some form elements on my page:
function unHide()
{
if($('#UserName').val() == "")
{
alert('Please Enter a User Name first');
}
else
{
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
}
The problem is, this isn't being called when the correct button is clicked. Even the alert doesn't show up. Here is the HTML:
<label for="UserName" style="vertical-align: top;">User Name:</label>
<input type="text" name="UserName" id="UserName" placeholder="Ex: LesniakBjEVS101" />
...
<a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
style="float:right;" onclick="javascript:unHide(); return false;">Continue...</a>
...
<section id="nextButton" hidden>
<a href="salamanderSelect.html" data-role="button" data-icon="forward"
data-mini="true" style="float:right;">Next</a>
</section>
The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything.
Any help would be greatly appreciated!
Thanks!
Edit:
After trying out suggestions, I still am unable to get the javascript to do anything. I have tried multiple browsers, but still nothing.
And I just had this working yesterday too...without any changes to the code too
Edit 2:
Apparently it works if my script is the last thing in the HTML file, even outside of the tags.
While onclick doesn't need javascript:, it should still work in many browsers. Here is a jsfiddle of your example: http://jsfiddle.net/ukWcp/2/
Only use javascript: in an href.
While i suggest debugging using the javascript console and debugger in firebug or chrome, others have mentioned using an all javascript solution for your bindings. That is preferrable.
As you're using jQuery already, why not use it to attach your events, rather than using the clunky onclick attribute.
<a data-role="button" data-icon="check" data-mini="true" id="UserContinue"
style="float:right;">Continue...</a>
$("#UserContinue").click(function(e) {
if($('#UserName').val() == "") {
alert('Please Enter a User Name first');
}
else {
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
e.preventDefault();
});
$(document).ready(function() {
$("#UserContinue").click(function() {
if($('#UserName').val() == "")
{
alert('Please Enter a User Name first');
}
else
{
$('#radio-choice-1').checkboxradio('enable');
$('#radio-choice-2').checkboxradio('enable');
$('#radio-choice-1-board').checkboxradio('enable');
$('#radio-choice-2-board').checkboxradio('enable');
$('#TransNum').textinput('enable');
$('#UserContinue').remove();
$('#nextButton').show();
}
return false;
);
});
If you're using jQuery, why not fully use it? The return false at the end stops the click event from continuing if that was what you desired.
Edit:
You say in your original post "The problem I am encountering is when I click on the submit button, absolutely nothing happens. I am not getting any feeback from the Javascript, nor anything."
Yet you have attached a click event to your incomplete anchor tag (it's missing the href). So are you expecting the behavior to trigger on clicking the submit button or clicking the anchor tag? If you are expecting the trigger to fire on clicking the submit button, then you need to change $("#UserContinue") to reference the submit button and not the anchor tag. Or use the .submit() event handler instead of .click(), http://api.jquery.com/submit/.
If this is not the issue, then I suggest editing your post to include all of your code and saying what behavior you expect after clicking which elements.
Edit 2:
I believe you are not wrapping your jQuery around the .ready() function, please see the revised code snippet that now includes .ready(). .ready() ensures the DOM is fully loaded before working with your jQuery.
Keep your function and add the event handler to your javacript and NOT in markup:
$(document).ready(function() {
$('#UserContinue').click(function() {
unHide();
});
});
short version:
$(document).ready(function() {
$('#UserContinue').click(unHide);
});
I have a html code and its.
<input type="submit" class="sub" /><div class="img"></div>
Now the CSS code is
.img{backgound: url(image.png);height:10px;width:10px;}
img class position (located) on the submit. now when i try to click the submit (the img class is over it). it not clicked because of the img class.
now i want to make the div class is visible but at the same time it not blocks when i click the submit.
I dont want to use background for the submit, because im already using it on the submit with another image.
i wish that you understand me.
and im sorry for my english ...
Thanks,
assuming ur code looks like
<form id="myform" action="myaction.php">
...
<input type="submit" class="sub" /><div class="img"></div>
...
</form>
Jquery:
$('#myform .img').click(function(){
$('#myform').trigger('submit');
})
Try :
$('.img').click(function(){$(this.parentNode).click();});
So what you want is to have an img on top of a submit, and make it so that when you click that img, the form is still submitted? If so, then you're probably better off using JavaScript. Here's a sample of what it'd look like with jQuery:
$('.img').click(function() {
$('.img').siblings('[type=submit]').click();
});
This makes it so that when you click the image, it will act as if you clicked the submit button too.
On that note, there must be a better way to do this (i.e. without JavaScript and extra divs), but since I don't know much about your problem, I can't think of anything.
if you have a button with already a background image on it ,
and you want that when you press the div above - the button will also be pressed youll need to do this :
on the div element you put:
onclick='simulateButtonPress();'
and in js : (via Jquery)
function simulateButtonPress()
{
$("#btnId").trigger('click');
}
$('.img').click(function() {
$(this).prev('input.sub:submit').trigger('click');
});
// click event for submit
$('input.sub:submit').click(function() {
// here goes you submit actions
alert('submit');
});
$('.img').click(function() {
return true;
});
I want my (ExtJS) toolbar buttons not to grab the focus on the web page when they are clicked, but to do their "thing" while leaving the focus unchanged by the click. How do I do that?
Cancelling the default behavior of onmousedown prevents an element from getting the focus:
// Prevent capturing focus by the button.
$('button').on('mousedown',
/** #param {!jQuery.Event} event */
function(event) {
event.preventDefault();
}
);
document.activeElement stores the currently focussed element.
So on your toolbar, you can add a "mousedown" handler to this function :
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
Try this example :
<html>
<head>
<script>
function preventFocus() {
var ae = document.activeElement;
setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert('clicked')" value="Toolbar" />
</body>
</html>
This usually does the trick for me:
<button
tabindex="-1"
onclick="javascript:console.log('do your thing')"
>My Button</button>
From https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex:
A negative value (usually tabindex="-1") means that the element should be focusable, but should not be reachable via sequential keyboard navigation. It's mostly useful to create accessible widgets with JavaScript.
I don't think there's an easy way to do what you want to do because it's the browser's default behaviour.
You could of course blur() the button as soon as it is clicked, but that would simply unselect everything. To have the previously active object regain focus, you'd have to create a "memory" of sorts by adding a blur handler for every element to keep track of which element had/lost focus last (store the id of the element in a global and update it when an element loses focus).
The top-voted answer is technically correct, but depends on jQuery...
Here's a simpler example:
<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();"></span>
My solution is to replace <button /> with <div /> and style it as a button.
Looks like Div doesn't take a focus on it when you click it.
Because the toolbar buttons are just styled ordinary HTML button elements then this is an actual browser behavior, and you should think twice before changing it. But nevertheless...
You should be able to prevent the botton from receiving focus by just returning false from its onclick handler.
Maybe you should try to use stateful and state change properties for form fields or whatever to get focus back?
I would attach one blur event listener to all fields. This listener should save the field, that lost the focus, in a global variable.
Then all the toolbar button should get one focus event listener. This listener should focus the field, that was saved as described above.
This code should work, although it didn't test it
<script>
function focusor(){
document.getElementById('focus').focus;
}
document.onkeydown = focusor;
document.onclick = focusor;
</script>
<div style="width: 0px; height: 0px; overflow: hiddden;">
<button id="focus"></button>
</div>
What I have found, is you will have to make a dummy element, I found buttons to work best in this situation. put the button in a div and make the div 0px.
[do not make the div display none, some browsers will just ignore it]
Basically any click or button presses, it will focus on this dummy button.
I had a project very similar and whenever they pressed the down key it selected the first button on the page, this just focuses on the button over and over again.
Sort of jacked up, but it works.
All these answers are wack. Here's a very excellent trick that only uses CSS
<button type="submit" disabled>
<span>Submit</span> <!-- the <span> is the secret -->
</button>
Now in your css:
button[disabled] > * {
pointer-events: none;
}
The trick is the inner span has to be used, otherwise the button will still steal focus away from inputs.