Why this code don't work
|
View:
New views
15 Messages
—
Rating Filter:
Alert me
|
 |
Why this code don't work
by ReynierPM-3
::
Rate this Message:
Hi every:
I need to add some fields when a user clic a link. For this purpose I build this piece of code: [jQuery/JS Code] $('#another').click(function(){ $('#word').append('<label for="word2"></label><input type="text" name="word2" id="word2" value="" size="50" />'); }); [HTML Code] <label for="word">Texto:</label> <input type="text" name="word" id="word" value="" size="50" /> <a href="#" id="another">Adicionar criterio</a> But for some reason when I click the link it doesn't work. Can any help me to fix this? -- Cheers ReynierPM |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
You should be doing $('#word').after('<label for="word2"></label><input type="text" name="word2" id="word2" value="" size="50" />');
append() would add your HTML code as a child of that input, hence you will not get the desired results. Thanks & Regards, Dhruva Sagar. Pablo Picasso - "Computers are useless. They can only give you answers." On Tue, Nov 3, 2009 at 8:44 AM, ReynierPM <rperezm@...> wrote: Hi every: |
|
|
Re: Why this code don't work
by ReynierPM-3
::
Rate this Message:
Dhruva Sagar wrote:
> You should be doing $('#word').after('<label for="word2"></label><input > type="text" name="word2" id="word2" value="" size="50" />'); This doesn't work too. I try and get none HTML input added after input#word. Why? -- Saludos ReynierPM |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
Where have you added the $('#another').click() ?
Is it even in $(document).ready() or not ? Are you sure that the click handler is even being called ?
I have created a test.html and tested what you want, it works perfectly for me.
<html> <head> <title></title> <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ $(document).ready(function() { $('#another').click(function() {
$('#word').after('<label for="word2"></label><input type="text" name="word2" id="word2" value="" size="50" />');
}); }); // ]]> </script> </head> <body> <label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" /> <a href="#" id="another">Adicionar criterio</a>
</body> </html> Thanks & Regards, Dhruva Sagar. Jonathan Swift - "May you live every day of your life." On Tue, Nov 3, 2009 at 8:53 AM, ReynierPM <rperezm@...> wrote:
|
|
|
Re: Why this code don't work
by ReynierPM-3
::
Rate this Message:
Dhruva Sagar wrote:
> Where have you added the $('#another').click() ? > Is it even in $(document).ready() or not ? Are you sure that the click > handler is even being called ? > > I have created a test.html and tested what you want, it works perfectly for > me. > > <html> > <head> > <title></title> > <script src="http://code.jquery.com/jquery-latest.pack.js" > type="text/javascript" language="javascript" charset="utf-8"></script> > <script type="text/javascript" language="javascript" charset="utf-8"> > // <![CDATA[ > $(document).ready(function() { > $('#another').click(function() { > $('#word').after('<label for="word2"></label><input > type="text" name="word2" id="word2" value="" size="50" />'); > }); > }); > // ]]> > </script> > </head> > <body> > <label for="word">Texto:</label> > <input type="text" name="word" id="word" value="" size="50" /> > <a href="#" id="another">Adicionar criterio</a> > </body> > </html> > > Thanks & Regards, > Dhruva Sagar. > Ohh I see my mistake now I forget to write this code inside $().ready() for that it wont work. Now I have a second question: how I can generate dinamically the number for element input id? I mean every time I click the link the id will be incremented in one so will be: word1, word2, wordn Thanks -- Saludos ReynierPM |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
Well I have made some changes to the test.html to achieve the desired results :
<html> <head> <title></title> <script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" language="javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript" charset="utf-8"> // <![CDATA[ $(document).ready(function() { $('#another').click(function() {
var id = "word" + $('input').length $('input:last').after('<label for="' + id + '"></label><input type="text" name="' + id + '" id="' + id + '" value="" size="50" />');
return false; }); }); // ]]> </script> </head> <body> <label for="word">Texto:</label>
<input type="text" name="word" id="word" value="" size="50" /> <a href="" id="another">Adicionar criterio</a>
</body> </html> This will achieve what you want. Thanks & Regards,Dhruva Sagar. Joan Crawford - "I, Joan Crawford, I believe in the dollar. Everything I earn, I spend." On Tue, Nov 3, 2009 at 9:08 AM, ReynierPM <rperezm@...> wrote:
|
|
|
Re: Why this code don't work
by ReynierPM-3
::
Rate this Message:
Dhruva Sagar wrote:
> Well I have made some changes to the test.html to achieve the desired > results : > > <html> > <head> > <title></title> > <script src="http://code.jquery.com/jquery-latest.pack.js" > type="text/javascript" language="javascript" charset="utf-8"></script> > <script type="text/javascript" language="javascript" charset="utf-8"> > // <![CDATA[ > $(document).ready(function() { > $('#another').click(function() { > var id = "word" + $('input').length > $('input:last').after('<label for="' + id + '"></label><input > type="text" name="' + id + '" id="' + id + '" value="" size="50" />'); > return false; > }); > }); > // ]]> > </script> > </head> > <body> > <label for="word">Texto:</label> > <input type="text" name="word" id="word" value="" size="50" /> > <a href="" id="another">Adicionar criterio</a> > </body> > </html> > > This will achieve what you want. > Thanks & Regards, > Dhruva Sagar. > > > Joan Crawford<http://www.brainyquote.com/quotes/authors/j/joan_crawford.html> > - "I, Joan Crawford, I believe in the dollar. Everything I earn, I > spend." > > On Tue, Nov 3, 2009 at 9:08 AM, ReynierPM <rperezm@...> wrote: > > Thanks a lot, it works perfectly -- Saludos ReynierPM |
|
|
Re: Why this code don't work
by ReynierPM-3
::
Rate this Message:
Hi Dhruva:
I'm trying to build a simple search form. Would be nice if the user can add her/his own fields for make the search better. What I mean? If you take only one input then the search will be limited to this only field containing one or more words. By the contrary if the user could add some fields and specify criteria like "&&" or "||" the search will be better. For that purpose I made some changes to the code. See below: <script type="text/javascript"> $().ready(function(){ $('#clicy').click(function(){ var id = "word" + $('input').length; var hid = "hw" + $('input').length; $('input:last').after('<br/><label for="'+id+'">&&</label><input type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input type="hidden" name="'+hid+'" id="'+hid+'" value="&&"/>'); return false; }); $('#clico').click(function(){ var id = "word" + $('input').length; var hid = "hw" + $('input').length; $('input:last').after('<br/><label for="'+id+'">||</label><input type="text" name="'+id + '" id="'+id + '" value="" size="30" /> <input type="hidden" name="'+hid+'" id="'+hid+'" value="||"/>'); return false; }); }); </script> <form action="search/DoSearch" method="post"> <label for="word">Texto:</label> <input type="text" name="word" id="word" value="" size="50" /> <div><input type="submit" value="Buscar !!!" /></div> </form> <a href="#" id="clicy">Adicionar criterio de búsqueda (&&)</a> | <a href="#" id="clico">Adicionar criterio de búsqueda (||)</a> As you notice here when I clic the link#clicy two fields are added: one hidden with && as value and another with word+id as id with no value. The same happen with the link#clico but the value of hidden field goes to ||. This code works fine but two things happen here. 1) When you click for first time in a link (#clicy or #clico) the field is added but I need add a hidden field just behind the input#word. How? 2) The fields are added just behind the SUBMIT button, how I can add just between the first field and the submit button? Cheers and thanks in advance -- Saludos ReynierPM |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
Hi ReynierPM,
The following is the test.html i've written for you, i've tweaked it a bit to get the right id's & also to solve the 2 problems you listed.
Try it and see if it does what you wish to do :
Thanks & Regards, Dhruva Sagar. Ted Turner - "Sports is like a war without the killing." On Wed, Nov 4, 2009 at 8:31 AM, ReynierPM <rperezm@...> wrote: Hi Dhruva: |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
A minor mistake in the previous mail, please take this into consideration and neglect the previous mail :
Thanks & Regards, Dhruva Sagar. Stephen Leacock - "I detest life-insurance agents: they always argue that I shall some day die, which is not so." On Wed, Nov 4, 2009 at 8:46 AM, Dhruva Sagar <dhruva.sagar@...> wrote: Hi ReynierPM, |
|
|
Re: Why this code don't work
by ReynierPM-3
::
Rate this Message:
Dhruva Sagar wrote:
> A minor mistake in the previous mail, please take this into consideration > and neglect the previous mail : > > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> > <head> > <script src="http://code.jquery.com/jquery-latest.pack.js" > type="text/javascript" language="javascript" charset="utf-8"></script> > <script type="text/javascript"> > //<![CDATA[ > $().ready(function(){ > $('#clicy').click(function(){ > var id = "word" + $('input[type!=hidden]').length; > var hid = "hw" + $('input[type=hidden]').length; > $('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'" > id="'+hid+'" value="&&"/><label for="'+id+'">&&</label><input type="text" > name="'+id + '" id="'+id + '" value="" size="30" /><br/>'); > return false; > }); > $('#clico').click(function(){ > var id = "word" + $('input[type!=hidden]').length; > var hid = "hw" + $('input[type=hidden]').length; > $('input[type=submit]').before('<br/><input type="hidden" name="'+hid+'" > id="'+hid+'" value="||"/><label for="'+id+'">||</label><input type="text" > name="'+id + '" id="'+id + '" value="" size="30" /><br/>'); > return false; > }); > }); > //]]> > </script> > </head> > <body> > <form action="search/DoSearch" method="post"> > <label for="word">Texto:</label> > <input type="text" name="word" id="word" value="" size="50" /> > <div><input type="submit" value="Buscar !!!" /></div> > </form> > <a href="" id="clicy">Adicionar criterio de búsqueda (&&)</a> | <a href="" > id="clico">Adicionar criterio de búsqueda (||)</a> > </body> > </html> > > > Thanks & Regards, > Dhruva Sagar. > > > Stephen Leacock<http://www.brainyquote.com/quotes/authors/s/stephen_leacock.html> > - "I detest life-insurance agents: they always argue that I shall some > day > die, which is not so." > > On Wed, Nov 4, 2009 at 8:46 AM, Dhruva Sagar <dhruva.sagar@...> wrote: > > Thanks a lot, I made some improvements to your code because I'm using a table now but it works perfectly. -- Saludos ReynierPM |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
Great :)
Thanks & Regards, Dhruva Sagar. Marie von Ebner-Eschenbach - "Even a stopped clock is right twice a day." On Wed, Nov 4, 2009 at 9:09 AM, ReynierPM <rperezm@...> wrote: Dhruva Sagar wrote: |
|
|
Re: Why this code don't work
by ReynierPM-3
::
Rate this Message:
Dhruva Sagar wrote:
> Great :) > Hi again Dhruva: I have one more question regarding this topic. How I can delete all the newest elements created using the previous jQuery functions? Exists one method for all or I need to build a custom function and clic as many times as new elements I added? Cheers -- Saludos ReynierPM |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
Well I would suggest that you keep adding the generated id's of the inputs & hidden inputs in an array.
Write a reset function which then loops through the array and selects them using $() and call remove() for them to remove them from the DOM.
Other than that I don't think there is any way specifically that could allow you to identify the inputs created from jquery uniquely.
Thanks & Regards, Dhruva Sagar. On Thu, Nov 5, 2009 at 5:56 AM, ReynierPM <rperezm@...> wrote: Dhruva Sagar wrote: |
|
|
Re: Why this code don't work
by Dhruva Sagar
::
Rate this Message:
Actually to think of it now, I see there is of course a much simpler easier way to reset / remove all the newly added elements :).
In your javascript where you add the elements to the dom, you can assign them a particular css class say 'newly_added' . Then in the reset function you could simply select them and remove them in one single swift action ;).
function reset() { $('.newly_added').remove(); }
Thanks & Regards, Dhruva Sagar. On Thu, Nov 5, 2009 at 5:56 AM, ReynierPM <rperezm@...> wrote: Dhruva Sagar wrote: |
| Free embeddable forum powered by Nabble | Forum Help |
