Select all Forms in a div and prevent the default action - javascript

I want to Display part of my website in a layover. If the user has no javascript, the layover is displayed as a normal website.
I'm getting the Website with getController and my problem occures in handleLinksAndForm.
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
This works as intended. Whenever a click on a Anchor element in Popover div happens, the default action is prevented and the new website is loaded in the popover.
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
However, this part does not work. Neither the foreach part nor the .submit().
So my Question is: Whats my mistake? If I use $("form").each(function() {... all forms are recognized, but if I add the extra selector #Popup none is recognized.
Complete Code:
function getController(ctrl,element)
{
$.get('/service/controller/' + ctrl, function(data){
handleLinksAndForm(data,element)
})
}
function getPostController(ctrl,args,element)
{
$.post('/service/controller/' + ctrl,args, function(data) {
handleLinksAndForm(data,element)
});
}
function handleLinksAndForm(data,element)
{
element.html(data);
element.prepend("<div id=\"popupClose\">x</a>");
centerPopup();
$("#popupClose").click(function(){
disablePopup();
});
$("#Popup > a").click(function(e){
e.preventDefault();
getController($(this).attr("href").substr(1),element);
});
$("#Popup > form").each(function() {
alert(this.name);
});
$("#Popup > form").submit(function(e) {
alert("form");
e.preventDefault();
getPostController($(this).attr("action"),$(this).serialize(),element);
return false;
});
}

You didn't provided any html code. So hard to say if isn't here more problems for example if is really element form a child of #popup.
But first try to use:
return false;
instead:
e.preventDefault();
Also you can use:
$("#Popup form") instead $("#Popup > form") it is safer way.

I just tested with the code below and I was able to locate the child element.
$("form", "#Popup").submit(function(e) {
alert("form");
...
});
N.B. This syntax also calls .find() but is slightly easier on the eyes.

Found my mistake:
I got:
<table>
<form>
<tr><td>...</td></tr>
</form>
</table>
The right way is:
<form>
<table>
...
</table>
</form>

Related

Appended li disappears after submit form

I am making a todo list using jquery. I have problem when submit the form the appended li appears and disappears immediately. Can anyone help me Please?
Here's my Jquery code so far:
$(function(){
$('input:checkbox').click(function(){
if ($(this).is(':checked')) {
$(this).parent().addClass('completed');
}
else {
$(this).parent().removeClass('completed');
}
});
$('#clearComp').click(function(){
$('.completed').fadeOut();
});
$('#todo_from').submit( function(e) {
e.preventDefault();
return false;
});
});
function addTodo(){
var itemToAdd = $('#txtBox').val();
if ( itemToAdd ) {
$('#todoList').append('<li class="todoBlk"><input type="checkbox" class"checkbox">'+itemToAdd+'</li>');
}
$('#txtBox').val('').focus();
}
JS Bin
That is because upon pressing the Enter key, the form is submitting itself and forcing the page to refresh. So you should use .preventDefault() from preventing this from happening:
$('form').on('submit', function(e) {
var itemToAdd = $('#txtBox').val();
if ( itemToAdd ) {
$('#todoList').append('<li class="todoBlk"><input type="checkbox" class"checkbox">'+itemToAdd+'</li>');
}
$('#txtBox').val('').focus();
e.preventDefault();
});
This code also allows you to remove the inline JS for the onsubmit attribute.
Update: I also noticed a problem with your example is that your button fails to clear checked items that are dynamically added. This is because when jQuery is first executed on the page, the click listener is only bound to pre-existing elements. Do consider using .on() to bind the click event to dynamically added list items. Here's the fixed version: http://jsbin.com/hiyuqikura/1/edit?html,js,output
$(function(){
// On submit, prevent default form action and add item if input is not empty
$('form').on('submit', function(e) {
var itemToAdd = $('#txtBox').val();
if ( itemToAdd ) {
$('#todoList').append('<li class="todoBlk"><input type="checkbox" class="checkbox">'+itemToAdd+'</li>');
}
$('#txtBox').val('').focus();
e.preventDefault();
});
// Listen to click event on dynamically added elements
$(document).on('click', 'input.checkbox', function(){
if ($(this).is(':checked')) {
$(this).parent().addClass('completed');
}
else {
$(this).parent().removeClass('completed');
}
});
$('#clearComp').click(function(){
$('.completed').fadeOut();
});
});
comment out the $('#todo_from').submit() function and change the form tag to this
<form id="todo_form" onsubmit="addTodo(); return false;">
You've got the wrong id here $('#todo_from').submit. Should be #todo_form

Delaying a jQuery .click function

Ok so I have a little issue here,
$("#WhoAreWe").click(function(){
$("#Image").hide();
$("#Two").slideUp(1000);
$("#Third").slideUp(1000);
$("#Fourth").slideUp(1000);
$("#WhoAreWe").hide();
$("#WhoAreWe2").slideToggle(3000);
$("#IDs").slideDown(3000);
$("#main").click(function(){
alert("Pressed Back");
});
(The alert is just a place holder)
Basically the #main is the entire page, and when any point on the site is pressed. It works fine but the problem is that when I first press #WhoAreWe it also runs the $("#main") function. My problem is that whenever WhoAreWe is pressed, main also runs. I don't want this, I just want it to run when the user clicks anywhere on the page AFTER clicking on WhoAreWe.
Edit:
Just to make it clear, #WhoAreWe is a Div (Text).
main is the ENTIRE PAGE
Try this example:
script
$(function(){
$("#main").on('click', function(e) {
if($(this).hasClass('disabled')) {
return;
}
alert('Its main ....');
});
$("#whoAreWe").on('click', function(e) {
alert('Its Who Are We ....');
$("#main").removeClass('disabled');
});
});
html
<input type="button" value="Who are we ?" id="whoAreWe" />
<input type="button" value="Main" id="main" class="disabled"/>
EDIT
script
$(function () {
$("#main").on('click', function (e) {
if ($(this).hasClass('disabled')) {
return;
}
alert('Its main ....');
});
$("#whoAreWe").on('click', function (e) {
e.stopPropagation();
$("#main").removeClass('disabled');
alert('Its Who Are We ....');
});
});
html
<div id="main" class="disabled">
<div id="whoAreWe">Who Are We ?</div>
</div>
Updated: Previously the "clicked" variable wasn't defined globally... now I've changed it to a global variable...
$(document).ready(function (){
var window.clicked=false;
$("#WhoAreWe").click(function(){
$("#Image").hide();
$("#Two").slideUp(1000);
$("#Third").slideUp(1000);
$("#Fourth").slideUp(1000);
$("#WhoAreWe").hide();
$("#WhoAreWe2").slideToggle(3000);
$("#IDs").slideDown(3000);
window.clicked=true;
});
$("#main").click(function(){
if(!window.clicked){
alert("Pressed Back");
}
});
});
guess this should work fine too
$(document).ready(function(){
$('#whoAreWe').on('click', function(){
$(':not(#whoAreWe)').on('click', function(){
$('#main').unbind('click').on('click', function(){
//unbind and bin click to prevent multi bindings
alert('Pressed Back');
});
});
});
});
and take care you have it wrapped in $(document).ready();. You should put all you actions in there.
FIDDLE
DIV-FIDDLE
DIV-FIDDLE waiting
FIDDLE WITH YOUR HTML AS SAMPLE

jQuery UI Dialog Button Won't Click

The alert is working, but the button just won't click...
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').click();
return false;
}
});
I have tried many different things, including reinitializing the method when the dialog gets opened, but nothing seems to work...
Html:
<div id="loginDialog" title="Please Login">
<div class="label">Password:</div>
<div class="field"><input type="password" /></div>
</div>
the ui-button is generated by jquery ui
I'm assuming from your comment that the button is generated dynamically and that any click event you have bound to is will have to be bound using event delegation, similar to:
$('body').on('click', '.ui-button', function(){...)
Instead of body, using the closest static element will work as well and would be preferred.
Please, try this:
$(function() {
$('#loginDialog .field input').keyup(function (e) {
if (e.keyCode == 13) {
alert('it is working!');
$('.ui-button').trigger('click');
return false;
}
});
$('.ui-button').click(function() {
alert('hello world');
});
};
Here there is an example: http://jsfiddle.net/netme/YZH3B/
This should trigger the event ...
$('.ui-button').trigger('click');

Prevent onclick execution with jquery

UPDATED
Html Code:
<input type="textbox" id="textbox" value="">
<input type="button" id="btn" value="Validate" onclick="document.write('VALIDATION PASSED')" />​
JS Code:
$(document).ready(function() {
$("#btn").click(function() {
if ($("#textbox").val().length == 0) {
alert("Validation error");
return false;
}
}).prop("onclick", null );
})​
I have updated my code. So the issue is that after first click my onclick event stopped working. How I could fix it?
P.S. Please DO NOT change html code. I have some reasons to ask about it, but please could you please do it only with javascript? I realize that probably this is not the most easy way but I have some technical limitations in my application.
Thanks!
JSFiddle http://jsfiddle.net/B5GWx/12/
$(document).ready(function() {
$("#btn").click(function() {
alert("Want to show only this message");
return false;
}).prop("onclick", null );
})​
http://jsfiddle.net/B5GWx/5/
You can't reliably, cross-browser, use a DOM2 handler to prevent a DOM0 handler from running.
What you can do, though, is remove the DOM0 handler entirely:
$(document).ready(function() {
var btn = $("#btn");
btn.click(function() {
alert("Want to show only this message");
return false;
});
btn[0].onclick = null; // <==== Here
})​;
Just removing the DOM handler will do the job. No need to return false; or e.preventDefault();
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
}).prop("onclick", null );
})​
DEMO
You are looking for preventDefault
Description: If this method is called, the default action of the event will not be triggered.
$(document).ready(function() {
$("#btn").click(function(e) {
alert("Want to show only this message");
e.preventDefault();
})
})​

focus() doesn't work inside colorbox pop-up

I tried to use focus for first input field on the form. but
it doesn't work. When I call attr("id") for that input it worked. When I call focus for the same input, I didn't see any
result. I also tried to use native Javascript. Does anyone know how to
fix that?
You are all misunderstanding the question. When Colorbox opens you can't focus an input field?
...unless you add your focus to the Colobox onComplete key e.g.
$('#mydiv a').colorbox({ onComplete:function(){ $('form input:first').focus(); }});
You could also bind the focus to an event hook:
$('#mydiv a').bind('cbox_complete', function(){
$('form input:first').focus();
});
That should be enough to get started.
use
$(document).ready(function() {
// focus on the first text input field in the first field on the page
$("input[type='text']:first", document.forms[0]).focus();
});
It may be happening that when your colorbox is opened its focus goes onto the highest element i.e. body of page. use document.activeElement to find that focus went to which element. Then find iframe or id of your colorbox and then set focus on it
Try the first selector,
$("form input:first").focus();
http://jsfiddle.net/erick/mMuFc/
I've just stumbled on this problem.
I think it's best to have a single $.colorbox opener like this:
function showActionForColorBox(
_url,
_forFocus
) {
$.colorbox(
{
scrolling: false,
href: _url,
onComplete: function () {
idColorboxAjaxIndect1.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect2.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect3.appendTo($('#cboxOverlay'));
idColorboxAjaxIndect4.appendTo($('#cboxOverlay'));
// --> Possible element's ID for focus
if (_forFocus) {
$('#' + _forFocus).focus();
}
return;
},
onCleanup: function () {
// TODO: ?
return;
},
onClosed: function () {
if (shouldReloadPageAfterColorBoxAction) {
// --> Should we reload whole page?
shouldReloadPageAfterColorBoxAction = false; // NOTE: To be sure: Reset.
window.location.reload(false);
}
else if (cbEBillsActionReloadPopup) {
// --> Should we reload colorbox
cbEBillsActionReloadPopup = false;
showActionForColorBox(_url);
}
else if (cbShouldLoadAnotherContentAfterClosed) {
// --> Should we reload colorbox with custom content?
cbShouldLoadAnotherContentAfterClosed = false;
$.colorbox({ html: setupContentForcbShouldLoadAnotherContentAfterClosed });
setupContentForcbShouldLoadAnotherContentAfterClosed = '';
}
return;
}
}
);
return;
}
You can also use
$.colorbox({
...,
trapFocus: false
});
to disable focus inside colorbox

Categories