[jQuery] Re: Problem with submit button of an inserted form
2009/10/2 Giovanni Battista Lenoci :
>>> Yes, fadeOut accept a callback function that is called after the effect
>>> end,
>>> take a look here:
>>>
>>> http://docs.jquery.com/Effects/fadeOut#speedcallback
>>>
>>
>> That I allready found. I tried the folowing:
>> $(placeInDOM).replaceWith(header + fields + footer);
>> $('.submit_' + formID).click(function() {
>> var fadeOutReady = false;
>> var fadeSpeed = 1500;
>> var form = $('#' + formID);
>>
>> form.fadeOut(fadeSpeed, function() {
>> fadeOutReady = true;
>> });
>> while( !fadeOutReady ) {
>> // wait untill fadeOut is ready
>> }
>> jQuery.post(cgiURL,
>> form.serialize(),
>> function(xml) {
>> alert($(xml).find('status').text() + '\n' +
>> $(xml).find('duration').text());
>> form.fadeIn(fadeSpeed);
>> },
>> "xml"
>> );
>> return false;
>> });
>>
>> But when I use this code, my processor is very busy and the fadeOut
>> does not happen.
>>
>
> Yes, because fadeOut is asinc, then after calling it you stop the javascript
> execution with the while, and the fadeOutReady will be always false, you
> have to do this (not tested, but should work):
>
> form.fadeOut(fadeSpeed, function() {
> jQuery.post(cgiURL,
> form.serialize(),
> function(xml) {
> alert($(xml).find('status').text() +
> '\n' +
> $(xml).find('duration').text());
> form.fadeIn(fadeSpeed);
> },
> "xml"
> );
> });
I should have thought about it myself. :-[
It work likes a charm. Thanks.
> You're right, the :submit selector is better... i did a fast copy and paste
> :-)
That is more as good enough. When you put me on the right track, I can
clean up the code myself. :-]
> "I now use", not "I know use"...
I was to fast again. I am just to impatient. I like to get things done.
> and please if you find any error on my
> posts please correct me, I have to learn a lot about english (and jquery
> too) :-)
Is a deal. :-D
--
Cecil Westerhof
[jQuery] Re: Problem with submit button of an inserted form
2009/10/2 Giovanni Battista Lenoci :
> first the easy thing:
>
>> Is there a way to let the fadeOut be finished before continuing?
>>
>
> Yes, fadeOut accept a callback function that is called after the effect end,
> take a look here:
>
> http://docs.jquery.com/Effects/fadeOut#speedcallback
That I allready found. I tried the folowing:
$(placeInDOM).replaceWith(header + fields + footer);
$('.submit_' + formID).click(function() {
var fadeOutReady = false;
var fadeSpeed= 1500;
var form = $('#' + formID);
form.fadeOut(fadeSpeed, function() {
fadeOutReady = true;
});
while( !fadeOutReady ) {
// wait untill fadeOut is ready
}
jQuery.post(cgiURL,
form.serialize(),
function(xml) {
alert($(xml).find('status').text() + '\n' +
$(xml).find('duration').text());
form.fadeIn(fadeSpeed);
},
"xml"
);
return false;
});
But when I use this code, my processor is very busy and the fadeOut
does not happen.
>
>>> A question, what placeInDOM contains? is an id? the html you're replacing
>>> contains the id?
>>>
>>
>> div#contact_form
>
> it is a string? the markup you've pasted shows a form that has an id
> "contact_form", not a div, maybe the problem is here?
My html contains:
Hier zou een contact formulier moeten staan!!!
So the div is replaced by a form. And this works without a problem.
And there is also my stupid mistake. The div is replaced, so I should
not search for it anymore. That happens when you want to make
something 'fast'.
I know use:
$(placeInDOM).replaceWith(header + fields + footer);
$thisForm = $('#' + formID);
$(':submit', $thisForm).click(function() {
I do not need a class anymore. I want to change the click event for
all the submit buttons of the form and no other submit buttons. The
above code does this.
> if you solve your first problem you don't need to do this, only for
> aknowledgment you can use your selector also in this way:
>
> $form = $('#' + formID);
> $('.submit_' + formID, $form).click(function() {
>
> $form is the context in which jquery looks for the element with class
> '.submit_' + formID, but if I haven't misunderstood, if you change
> "placeInDOM" from "div#contact_form" to "#contact_form" you solve your
> problem and you can use the first version of the code you've posted before.
I prefer the way I do it know. In this way the HTML-page or the
function can change the way the id's are made, without breaking
anything. In the above way the HTML and function has to be
synchronized. I prefer to minimize the possibilities to break things.
Thanks for the help.
--
Cecil Westerhof
[jQuery] Re: Problem with submit button of an inserted form
2009/10/2 Giovanni Battista Lenoci :
>> I have the following code:
>> $(placeInDOM).replaceWith(header + fields + footer);
>> $(placeInDOM).find(':submit').click(function() {
>> alert("clicked the submit button");
>> return false;
>> });
>> The first statement places a form with a submit button in my page.
>> This works as it should.
>> With the second I want to give an alert instead of a submit when
>> clicking on the submit button. But it does not work.
>>
>> When I after the first statement execute:
>> alert($(placeInDOM).find(':submit').html());
>> I get
>> null
>>
>
> This is right, cause a subimit button doesn't have html in it...
>>
>> If I execute:
>> alert($(placeInDOM).find(':submit'));
>> I get:
>> [object Object]
>>
>> What am I doing wrong?
>>
>
> Try using console.log of firebug to see if the returned object contains what
> you're expecting.
That is a good tip. I'll use that next time.
I solved my problem. I know use:
$(placeInDOM).replaceWith(header + fields + footer);
$('.submit_' + formID).click(function() {
form = $('#' + formID);
form.fadeOut('normal');
jQuery.post(cgiURL,
form.serialize(),
function(xml) {
alert($(xml).find('status').text());
form.fadeIn('normal');
},
"xml"
);
return false;
});
This does what it should do. The only 'problem' is that the whole DOM
is traversed instead of only placeInDOM. If someone knows how to
optimize this ...
Is there a way to let the fadeOut be finished before continuing?
> A question, what placeInDOM contains? is an id? the html you're replacing
> contains the id?
div#contact_form
What is inserted starts with:
Organisatie
Soort Organisatie
geen
Non Profit
ZZP
MKB
Anders
and ends with:
Omschrijving
--
Cecil Westerhof
[jQuery] Re: How to disable a form
2009/10/2 Nalum : > > If you look at the examples you can set it to block just a specified > element. I did not look good enough then. Thanks. At the moment I am working with hide and show. But when the functionality I want is 'ready' I'll implement it. -- Cecil Westerhof
[jQuery] Re: How to disable a form
2009/10/2 Nalum : > This is a nice plugin that I've come across that I think would be able > to do exactly what you want. > > http://malsup.com/jquery/block/ I think that that is what I need. The only 'problem' is that it blocks the whole page and not only the form. But I can live with that. -- Cecil Westerhof
[jQuery] Re: How to disable a form
2009/10/2 brian : > > On Fri, Oct 2, 2009 at 9:11 AM, Cecil Westerhof > wrote: >> >> 2009/10/2 brian : >>> >>> I like that idea but another might be to (after the form has >>> submitted) add a new submit handler for the form that simply returned >>> false. >> >> The problem with that is that the fields still can be changed. I >> prefer that this is not possible. A simple method would be to hide the >> form. But that is not very pleasing to the eyes I am afraid. >> > > I suppose it depends on the interface you're working with. Perhaps you > could fade the form out and display, in its place, a "thank you" (or > whatever) message. If "something goes wrong" you could re-display the > form. That was what I am thinking about for lack of something better. I would prefer to hide it only after a succesfull submit. But I expect it to be mostly succesfull. So it is acceptable. -- Cecil Westerhof
[jQuery] Re: How to disable a form
2009/10/2 brian : > > On Fri, Oct 2, 2009 at 8:32 AM, Giovanni Battista Lenoci > wrote: >> >> Cecil Westerhof ha scritto: >>> >>> I want to disable a form when I submit it. The first reason is because >>> I do not want the form submitted more as once. For this I could >>> disable the submit button(s). But I also want the values not be >>> changed during the submit. Is this possible? >>> >> >> On the beforesubmit event add the readonly attribute to every field. >> >> Should work.. :-) >> > > I like that idea but another might be to (after the form has > submitted) add a new submit handler for the form that simply returned > false. The problem with that is that the fields still can be changed. I prefer that this is not possible. A simple method would be to hide the form. But that is not very pleasing to the eyes I am afraid. -- Cecil Westerhof
[jQuery] Re: How to disable a form
2009/10/2 Giovanni Battista Lenoci : >> I want to disable a form when I submit it. The first reason is because >> I do not want the form submitted more as once. For this I could >> disable the submit button(s). But I also want the values not be >> changed during the submit. Is this possible? >> > > On the beforesubmit event add the readonly attribute to every field. > > Should work.. :-) There is not a better way? When something goes wrong, I want to enable the form again. When there allready are readonly fields, this could complicate matters. -- Cecil Westerhof
[jQuery] Problem with submit button of an inserted form
I have the following code:
$(placeInDOM).replaceWith(header + fields + footer);
$(placeInDOM).find(':submit').click(function() {
alert("clicked the submit button");
return false;
});
The first statement places a form with a submit button in my page.
This works as it should.
With the second I want to give an alert instead of a submit when
clicking on the submit button. But it does not work.
When I after the first statement execute:
alert($(placeInDOM).find(':submit').html());
I get
null
If I execute:
alert($(placeInDOM).find(':submit'));
I get:
[object Object]
What am I doing wrong?
I found a workaround by using:
$('.submit').click(function() {
But this only works when my form is the only form on the page. So it
is not very satisfactory.
--
Cecil Westerhof
[jQuery] How to disable a form
I want to disable a form when I submit it. The first reason is because I do not want the form submitted more as once. For this I could disable the submit button(s). But I also want the values not be changed during the submit. Is this possible? -- Cecil Westerhof
[jQuery] Re: Some homebrewn jQuery functionalities
2009/9/21 Giovanni Battista Lenoci : > > Cecil Westerhof ha scritto: >> >> 2009/9/21 Cecil Westerhof : >> >>> >>> - a way to automatically notify people that they should enable JavaScript >>> >> >> The way that I did this was that start the body with: >> >> For best results JavaScript must be enabled!!! >> >> > > There's the noscript tag for this, with your way search engines will > register this as the main heading of your page... I don't think this is > desiderable :-) I was to smart for my own good. I like DRY very much. That is way I used this solution. But when this will generate a problem in search engines, then I can better need to change the title on two places. -- Cecil Westerhof
[jQuery] Re: Some homebrewn jQuery functionalities
2009/9/21 Liam Potter :
> You'd be better off just removing the div entirely.
>
> $(document).ready(function()
> $("#needJavaScript").remove();
> );
That was what I did first. I wanted to be to smart I am afraid. But
the noscript suggestion of Giovanni is even better.
--
Cecil Westerhof
[jQuery] Re: Some homebrewn jQuery functionalities
2009/9/21 Cecil Westerhof : > - Increase/Decrease text (has a little problem in Firefox) False alarm. Is a problem of that particulair Firefox. Other Firefox does not have the problem. Is a bit strange. The problem was even bigger with MIE8, but maybe that is also only that instance. Need to test it with other MIE's. > - Show/Hide content (has a little problem in Opera and Konqueror) If the button is at the end of the screen, the text is shown 'out of sight'. Is there a way to get the shown text shown in the window? -- Cecil Westerhof
[jQuery] Re: Some homebrewn jQuery functionalities
2009/9/21 Cecil Westerhof :
> - a way to automatically notify people that they should enable JavaScript
The way that I did this was that start the body with:
For best results JavaScript must be enabled!!!
And in the $(document).ready(function() I had:
$("#needJavaScript").text($('title').text());
But that does not work with MIE8.
When using:
alert($('title').text());
I get an empty string. I know use:
$("#needJavaScript").text($('title').html());
This works. Does anybody knows why the first does not work in MIE8?
--
Cecil Westerhof
[jQuery] Some homebrewn jQuery functionalities
At http://www.decebal.nl/testing.html I have some functionalities I made with jQuery. Nothing world shocking, but maybe usefull for others. - a way to automatically notify people that they should enable JavaScript - Table of content (with 'Go back to top') - Increase/Decrease text (has a little problem in Firefox) - Show/Hide content (has a little problem in Opera and Konqueror) If someone has a solution for one of the problems or a comment: let me know. -- Cecil Westerhof
[jQuery] Re: Some problems with rounded corners
2009/9/20 Mike Alsup :
>> For the biggest part this works. There is a problem with the
>> displaying of the buttons. In Firefox and MIE it goes allright. But in
>> Opera and Konqueror (and possible Safari, because this uses the same
>> engine as Konqueror) the border is not displayed. That is not nice,
>> but not a very big problem. But at the moment I click on a 'button'
>> the rounded corners disappear. Is there something I can do about this?
>> I am now Using $(this).parent().find('.switchButton,
>> .hideButton').corner(); in the click function, but that does not work,
>> because that makes a mess of hideButton. Also this work is also done
>> in browser where it is not necessary.
>
>
> I changed your code a bit and posted the same page here:
>
> http://jquery.malsup.com/test/sep20.html
>
> Notice that I added a tag to the switchButton and update the
> text of the span instead of the button. This will prevent the loss of
> the button corners and will allow you to call "corner" just one time
> instead of on ever click.
I use now also a span. This works. I also changed the variable names.
Your names where better. It looks like it works now. (Not completly.
When you look carefully, you see that the round corners disappear for
a short period. But I can live with that.)
Thanks.
The only remaining problem is that Opera and Konqueror lose the
border. If someone knows what is happening ...
--
Cecil Westerhof
[jQuery] Some problems with rounded corners
For pages with a lot of text (and other content) I would like to have
the possibility to hide and show parts of the page with 'buttons'. I
have come a long way, but have some problems. I made a page to show
them:
http://www.decebal.nl/testing.html
I have come a long way and for the most part it works. I use div's
with class switch to define the blocks I want to show/hide. I then use
jQuery to make those div's switchable and start with them not
displayed. Look at the source to see how I have done this. I wanted
buttons with rounded courners. Because this is not possible (as far as
I know) without images, I use div's with class button and use
jquery.corner.js to make round corners.
For the biggest part this works. There is a problem with the
displaying of the buttons. In Firefox and MIE it goes allright. But in
Opera and Konqueror (and possible Safari, because this uses the same
engine as Konqueror) the border is not displayed. That is not nice,
but not a very big problem. But at the moment I click on a 'button'
the rounded corners disappear. Is there something I can do about this?
I am now Using $(this).parent().find('.switchButton,
.hideButton').corner(); in the click function, but that does not work,
because that makes a mess of hideButton. Also this work is also done
in browser where it is not necessary.
This is one of my first tries with jQuery. So if I do things
inefficient I would not mind corrections or improvements.
--
Cecil Westerhof
[jQuery] Re: Working with XML
2009/8/7 Decebal :
> I process it with the folowing code:
> $.post(cgiURL,
> {command: "getForm", form: cgiForm},
> function(xml){
> $(xml).find('field').each(function() {
> if( $(this).attr('type') == 'input' ) {
>
> Is there a better way to do this?
> There a severall 'problems'.
> There should be exactly one form.
> Only the field records that are immediate descendants of form should
> be used. When there comes another type which also has children with
> type field, this code will process those also.
I now use:
$(xml).find('doc > value > form > field').each(function() {
So the last problem is solved.
--
Cecil Westerhof
[jQuery] JQuery Effects order ??
I am trying to create something of a shuffle effect. I grab some data
consisting of firstname and lastname from an xml file. then i randomly
select one, assign it to a span, fade it in and fade it back out. I do
this for a few names to give the effect of shuffling through the list
of names.
it was working fine until i tried to explicitly set the span text to
a value. Below is an example of my code (yes i am not very well verse
with jquery at all)
$('input[name="btnGet"]').click(function(e) {
e.preventDefault();
var spanName = $('span#contestant_name');
for (var x = 0; x <= 15; x++) {
spanName.fadeIn('slow');
spanName.fadeOut('slow', setRandContestant);
if (x == 15) {
spanName.text('Cecil');
spanName.fadeIn('slow');
}
}
}
so what i expected this to do is shuffle through the names and when
the variable x is 15 just show whatever name i set. however whats
happening is that the name is set first and then the code in the for
loop is run ..
I noticed the same thing if i put an alert(' ') at the end of the
script; the alert fires first and then the fade animations are run.
Could someone please tell me what i am doing wrong ?
[jQuery] popup content
Hello ... i am fairly new to jquery. i was wondering if anyone knew of a way i could emulate the functionality of the popup control of the asp.net ajax control toolkit. i want to display a list of check box items when an input text field is in focus. thank you in advance http://www.asp.net/AJAX/AjaxControlToolkit/Samples/PopupControl/PopupControl.aspx
[jQuery] text input glow effect
Hello ... I'm really new to JQuery; today would be my first time using it actually. i'd like to reproduce the input highlight effect that safari applies. when the input is in focus, the border has somewhat of a glow effect to it. Does anyone know of technique that I could apply to allow this effect to happen in IE & FF ? Thank
