[jQuery] Re: My first plugin ... need some help.
Thank you for your help and patience. It is working fine ... just a
last question:
I need to add an input with hidden value to each list item:
...input type=hidden name=myList value=values /
The name of the input should be the name of the list passed.
The following is what I have now, but I get an error on Firebug:
$('li/li').appendTo(opt.list)
.append(str)
.append(' a href=#Remove class=RemoveRemover/a')
.append(' input type=hidden name=' + opt.list.attr(name) +
' value = ' + str + ' /');
Shouldn't attr get the name of opt.list? How can I get the list name?
Thanks,
Miguel
On Oct 23, 4:38 am, ricardobeat [EMAIL PROTECTED] wrote:
Hi there,
The '@' for attributes has been deprecated, and you can choose that by
class also. Another try (hope google groups won't break it too much):
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form'); //get the parent form
element
var $fields = this; //save all inputs for later
$('.remove')
.livequery('click', function(event) {
$(this).parent().remove();
});
$(opt.button,origin).bind('click',function(){
var str = [],cstr = [];
$fields.not(':checkbox').each(function(){ //iterate over all
inputs except checkboxes
str.push($(this).val()); //add value to array 1
}).end().filter(':checkbox:checked').each(function(){ //
iterate over all checked checkboxes
cstr.push($(this).val()); //add value to array 2
});
str.push(cstr.join(', ')); // add commas to array 2 and push
the resulting string into array 1
str = str.join('. '); // make array 1 into string, dot
separated
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a'); // etc
return false;
});
}
$
('input.name,select.country,input.newsletter').createList({ list:'#MyList',
button: 'input.sendToList' })
});
On Oct 22, 10:24 pm, shapper [EMAIL PROTECTED] wrote:
Hi again,
I changed the join to a dot and added [EMAIL PROTECTED] as
a selector of my CheckBoxes group.
I am trying that the values of the selected checkboxes to be added in
a Comma Separated format.
This is not working?
Could someone, please, help me with this thing?
It is the last thing to finish it.
Thanks,
Miguel
On Oct 23, 1:05 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I solved problem 1 and updated my online example.
I still have problems with the checkboxes and the display format ...
any idea how to solve?
Thanks,
Miguel
On Oct 23, 12:23 am, shapper [EMAIL PROTECTED] wrote:
Hello,
I uploaded the updated
version:http://www.27lamps.com/Beta/List/List.html#remove
There is only two problems:
1. The value of the select is not being added.
2. If i have multiple chekboxes on the same group I would like to add
only the values of ones selected.
The ideal would be to have the following format:
Name. Country. 1st CheckBox selected, 2st CheckBox selected, ...
This way I can understand that each dot separates an input and a comma
separates the selected values of a check box group.
How can I do this?
Thanks,
Miguel
On Oct 22, 2:45 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I will try it. Sorry, but I am no expert with JQuery and I am just
trying to pull this off.
I understand that a plugin should have many more options but my
intention is to have this plugin so I can use across my projects and
with time improve it.
It would be easier to make this without being a plugin? I am not
really sure how the code would change ...
I was looking for such a plugin but I wasn't able to find any ... I
think this is really useful.
Just select the inputs, the button, the list and the format as the
inputs values would be displayed. Then use something like:
liBook Type. Book Name. Values of selected CheckBoxes separated by
commasinput type=hidden name=myList value=Book Type. Book Name.
Values of selected CheckBoxes separated by commas /a
href=#removeclass=removeRemove Item/a/li
Then I use the hidden inputs to read the info on the server after the
form is submitted, parse the info and insert it into the database
along with the other form info.
Does this makes any sense?
Yes, I could use Ajax but the form has a lot more information and
these list info should be only saved into the database if the user
submits the register form itself.
So if i send this info through ajax there will no where to save it
since the user didn't register yet.
Is this what you meant?
Thank You,
Miguel
On Oct 22, 1:45 am, ricardobeat [EMAIL PROTECTED] wrote:
Install the Firebug extension for Firefox so you can debug your code
[jQuery] Re: My first plugin ... need some help.
Hello,
I uploaded the updated version:
http://www.27lamps.com/Beta/List/List.html#remove
There is only two problems:
1. The value of the select is not being added.
2. If i have multiple chekboxes on the same group I would like to add
only the values of ones selected.
The ideal would be to have the following format:
Name. Country. 1st CheckBox selected, 2st CheckBox selected, ...
This way I can understand that each dot separates an input and a comma
separates the selected values of a check box group.
How can I do this?
Thanks,
Miguel
On Oct 22, 2:45 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I will try it. Sorry, but I am no expert with JQuery and I am just
trying to pull this off.
I understand that a plugin should have many more options but my
intention is to have this plugin so I can use across my projects and
with time improve it.
It would be easier to make this without being a plugin? I am not
really sure how the code would change ...
I was looking for such a plugin but I wasn't able to find any ... I
think this is really useful.
Just select the inputs, the button, the list and the format as the
inputs values would be displayed. Then use something like:
liBook Type. Book Name. Values of selected CheckBoxes separated by
commasinput type=hidden name=myList value=Book Type. Book Name.
Values of selected CheckBoxes separated by commas /a
href=#removeclass=removeRemove Item/a/li
Then I use the hidden inputs to read the info on the server after the
form is submitted, parse the info and insert it into the database
along with the other form info.
Does this makes any sense?
Yes, I could use Ajax but the form has a lot more information and
these list info should be only saved into the database if the user
submits the register form itself.
So if i send this info through ajax there will no where to save it
since the user didn't register yet.
Is this what you meant?
Thank You,
Miguel
On Oct 22, 1:45 am, ricardobeat [EMAIL PROTECTED] wrote:
Install the Firebug extension for Firefox so you can debug your code
easily:www.getfirebug.com
I don't mean it's not good for a plug-in, I mean it's a very specific
behaviour. To be useful to a large number of people it would need to
be very flexible and customizable.
On your test page, you forgot to close the function and you're not
using it the right way. As it is you should have used:
$('form').createList('#MyList') // form is the form from where you are
getting the values, you pass createList() the list ID
I changed it to act from the elements themselves, here is a new one:
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form');
var $fields = this;
$(opt.button,origin).bind('click',function(){
str = [];
$fields.each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a');
return false;
});
}
});
The way you use this is the following:
$('input.name,input.country,input.newsletter').createList({ list:
'#MyList', button: 'input.sendToList' })
First you select the form inputs that you want to get the values from,
then you call createList and pass an object specifying a selector for
the list and for the button you want to use, they can be any selector
(ID,class,etc). The code is quite self-explanatory.
You could also send this data directly to the server via Ajax, there
is no need to put it in a list just for that.
cheers,
Ricardo
On Oct 21, 9:07 pm, shapper [EMAIL PROTECTED] wrote:
Hi,
I tried to follow your tips but I might be doing something
wrong:http://www.27lamps.com/Beta/List/List.html
A few questions:
1. Why isn't this good for a plugin?
I fell this is really useful in forms for selecting multiple
items, add them to the a list and then read that list from server
side.
2. Can't I specify the ID's of the form inputs I want to take the info
from?
My form has 10 inputs and 2 buttons: One should submit the form.
The other should only add the contents of the 3 selected inputs to the
list.
Thank You,
Miguel
On Oct 16, 9:47 pm, ricardobeat [EMAIL PROTECTED] wrote:
This is quite specific to made into an actual plug-in, but here it
goes:
$.fn.createList = function(list){
var origin = this;
$(':submit',origin).bind('click',function(){
str = [];
console.log($('input,select,checkbox:checked',origin));
$('.name,.country,.newsletter:checked',origin).each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(list).append(str).append(' a
[jQuery] Re: My first plugin ... need some help.
Hi,
I solved problem 1 and updated my online example.
I still have problems with the checkboxes and the display format ...
any idea how to solve?
Thanks,
Miguel
On Oct 23, 12:23 am, shapper [EMAIL PROTECTED] wrote:
Hello,
I uploaded the updated
version:http://www.27lamps.com/Beta/List/List.html#remove
There is only two problems:
1. The value of the select is not being added.
2. If i have multiple chekboxes on the same group I would like to add
only the values of ones selected.
The ideal would be to have the following format:
Name. Country. 1st CheckBox selected, 2st CheckBox selected, ...
This way I can understand that each dot separates an input and a comma
separates the selected values of a check box group.
How can I do this?
Thanks,
Miguel
On Oct 22, 2:45 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I will try it. Sorry, but I am no expert with JQuery and I am just
trying to pull this off.
I understand that a plugin should have many more options but my
intention is to have this plugin so I can use across my projects and
with time improve it.
It would be easier to make this without being a plugin? I am not
really sure how the code would change ...
I was looking for such a plugin but I wasn't able to find any ... I
think this is really useful.
Just select the inputs, the button, the list and the format as the
inputs values would be displayed. Then use something like:
liBook Type. Book Name. Values of selected CheckBoxes separated by
commasinput type=hidden name=myList value=Book Type. Book Name.
Values of selected CheckBoxes separated by commas /a
href=#removeclass=removeRemove Item/a/li
Then I use the hidden inputs to read the info on the server after the
form is submitted, parse the info and insert it into the database
along with the other form info.
Does this makes any sense?
Yes, I could use Ajax but the form has a lot more information and
these list info should be only saved into the database if the user
submits the register form itself.
So if i send this info through ajax there will no where to save it
since the user didn't register yet.
Is this what you meant?
Thank You,
Miguel
On Oct 22, 1:45 am, ricardobeat [EMAIL PROTECTED] wrote:
Install the Firebug extension for Firefox so you can debug your code
easily:www.getfirebug.com
I don't mean it's not good for a plug-in, I mean it's a very specific
behaviour. To be useful to a large number of people it would need to
be very flexible and customizable.
On your test page, you forgot to close the function and you're not
using it the right way. As it is you should have used:
$('form').createList('#MyList') // form is the form from where you are
getting the values, you pass createList() the list ID
I changed it to act from the elements themselves, here is a new one:
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form');
var $fields = this;
$(opt.button,origin).bind('click',function(){
str = [];
$fields.each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a');
return false;
});
}
});
The way you use this is the following:
$('input.name,input.country,input.newsletter').createList({ list:
'#MyList', button: 'input.sendToList' })
First you select the form inputs that you want to get the values from,
then you call createList and pass an object specifying a selector for
the list and for the button you want to use, they can be any selector
(ID,class,etc). The code is quite self-explanatory.
You could also send this data directly to the server via Ajax, there
is no need to put it in a list just for that.
cheers,
Ricardo
On Oct 21, 9:07 pm, shapper [EMAIL PROTECTED] wrote:
Hi,
I tried to follow your tips but I might be doing something
wrong:http://www.27lamps.com/Beta/List/List.html
A few questions:
1. Why isn't this good for a plugin?
I fell this is really useful in forms for selecting multiple
items, add them to the a list and then read that list from server
side.
2. Can't I specify the ID's of the form inputs I want to take the info
from?
My form has 10 inputs and 2 buttons: One should submit the form.
The other should only add the contents of the 3 selected inputs to the
list.
Thank You,
Miguel
On Oct 16, 9:47 pm, ricardobeat [EMAIL PROTECTED] wrote:
This is quite specific to made into an actual plug-in, but here it
goes:
$.fn.createList = function(list){
var origin = this;
$(':submit',origin).bind('click',function(){
str = [];
[jQuery] Re: My first plugin ... need some help.
Hi again,
I changed the join to a dot and added [EMAIL PROTECTED] as
a selector of my CheckBoxes group.
I am trying that the values of the selected checkboxes to be added in
a Comma Separated format.
This is not working?
Could someone, please, help me with this thing?
It is the last thing to finish it.
Thanks,
Miguel
On Oct 23, 1:05 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I solved problem 1 and updated my online example.
I still have problems with the checkboxes and the display format ...
any idea how to solve?
Thanks,
Miguel
On Oct 23, 12:23 am, shapper [EMAIL PROTECTED] wrote:
Hello,
I uploaded the updated
version:http://www.27lamps.com/Beta/List/List.html#remove
There is only two problems:
1. The value of the select is not being added.
2. If i have multiple chekboxes on the same group I would like to add
only the values of ones selected.
The ideal would be to have the following format:
Name. Country. 1st CheckBox selected, 2st CheckBox selected, ...
This way I can understand that each dot separates an input and a comma
separates the selected values of a check box group.
How can I do this?
Thanks,
Miguel
On Oct 22, 2:45 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I will try it. Sorry, but I am no expert with JQuery and I am just
trying to pull this off.
I understand that a plugin should have many more options but my
intention is to have this plugin so I can use across my projects and
with time improve it.
It would be easier to make this without being a plugin? I am not
really sure how the code would change ...
I was looking for such a plugin but I wasn't able to find any ... I
think this is really useful.
Just select the inputs, the button, the list and the format as the
inputs values would be displayed. Then use something like:
liBook Type. Book Name. Values of selected CheckBoxes separated by
commasinput type=hidden name=myList value=Book Type. Book Name.
Values of selected CheckBoxes separated by commas /a
href=#removeclass=removeRemove Item/a/li
Then I use the hidden inputs to read the info on the server after the
form is submitted, parse the info and insert it into the database
along with the other form info.
Does this makes any sense?
Yes, I could use Ajax but the form has a lot more information and
these list info should be only saved into the database if the user
submits the register form itself.
So if i send this info through ajax there will no where to save it
since the user didn't register yet.
Is this what you meant?
Thank You,
Miguel
On Oct 22, 1:45 am, ricardobeat [EMAIL PROTECTED] wrote:
Install the Firebug extension for Firefox so you can debug your code
easily:www.getfirebug.com
I don't mean it's not good for a plug-in, I mean it's a very specific
behaviour. To be useful to a large number of people it would need to
be very flexible and customizable.
On your test page, you forgot to close the function and you're not
using it the right way. As it is you should have used:
$('form').createList('#MyList') // form is the form from where you are
getting the values, you pass createList() the list ID
I changed it to act from the elements themselves, here is a new one:
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form');
var $fields = this;
$(opt.button,origin).bind('click',function(){
str = [];
$fields.each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a');
return false;
});
}
});
The way you use this is the following:
$('input.name,input.country,input.newsletter').createList({ list:
'#MyList', button: 'input.sendToList' })
First you select the form inputs that you want to get the values from,
then you call createList and pass an object specifying a selector for
the list and for the button you want to use, they can be any selector
(ID,class,etc). The code is quite self-explanatory.
You could also send this data directly to the server via Ajax, there
is no need to put it in a list just for that.
cheers,
Ricardo
On Oct 21, 9:07 pm, shapper [EMAIL PROTECTED] wrote:
Hi,
I tried to follow your tips but I might be doing something
wrong:http://www.27lamps.com/Beta/List/List.html
A few questions:
1. Why isn't this good for a plugin?
I fell this is really useful in forms for selecting multiple
items, add them to the a list and then read that list from server
side.
2. Can't I specify the ID's of the form inputs I want to take the info
from?
My form has 10 inputs and 2 buttons: One should
[jQuery] Re: My first plugin ... need some help.
Hi there,
The '@' for attributes has been deprecated, and you can choose that by
class also. Another try (hope google groups won't break it too much):
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form'); //get the parent form
element
var $fields = this; //save all inputs for later
$('.remove')
.livequery('click', function(event) {
$(this).parent().remove();
});
$(opt.button,origin).bind('click',function(){
var str = [],cstr = [];
$fields.not(':checkbox').each(function(){ //iterate over all
inputs except checkboxes
str.push($(this).val()); //add value to array 1
}).end().filter(':checkbox:checked').each(function(){ //
iterate over all checked checkboxes
cstr.push($(this).val()); //add value to array 2
});
str.push(cstr.join(', ')); // add commas to array 2 and push
the resulting string into array 1
str = str.join('. '); // make array 1 into string, dot
separated
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a'); // etc
return false;
});
}
$
('input.name,select.country,input.newsletter').createList({ list:'#MyList',
button: 'input.sendToList' })
});
On Oct 22, 10:24 pm, shapper [EMAIL PROTECTED] wrote:
Hi again,
I changed the join to a dot and added [EMAIL PROTECTED] as
a selector of my CheckBoxes group.
I am trying that the values of the selected checkboxes to be added in
a Comma Separated format.
This is not working?
Could someone, please, help me with this thing?
It is the last thing to finish it.
Thanks,
Miguel
On Oct 23, 1:05 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I solved problem 1 and updated my online example.
I still have problems with the checkboxes and the display format ...
any idea how to solve?
Thanks,
Miguel
On Oct 23, 12:23 am, shapper [EMAIL PROTECTED] wrote:
Hello,
I uploaded the updated
version:http://www.27lamps.com/Beta/List/List.html#remove
There is only two problems:
1. The value of the select is not being added.
2. If i have multiple chekboxes on the same group I would like to add
only the values of ones selected.
The ideal would be to have the following format:
Name. Country. 1st CheckBox selected, 2st CheckBox selected, ...
This way I can understand that each dot separates an input and a comma
separates the selected values of a check box group.
How can I do this?
Thanks,
Miguel
On Oct 22, 2:45 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I will try it. Sorry, but I am no expert with JQuery and I am just
trying to pull this off.
I understand that a plugin should have many more options but my
intention is to have this plugin so I can use across my projects and
with time improve it.
It would be easier to make this without being a plugin? I am not
really sure how the code would change ...
I was looking for such a plugin but I wasn't able to find any ... I
think this is really useful.
Just select the inputs, the button, the list and the format as the
inputs values would be displayed. Then use something like:
liBook Type. Book Name. Values of selected CheckBoxes separated by
commasinput type=hidden name=myList value=Book Type. Book Name.
Values of selected CheckBoxes separated by commas /a
href=#removeclass=removeRemove Item/a/li
Then I use the hidden inputs to read the info on the server after the
form is submitted, parse the info and insert it into the database
along with the other form info.
Does this makes any sense?
Yes, I could use Ajax but the form has a lot more information and
these list info should be only saved into the database if the user
submits the register form itself.
So if i send this info through ajax there will no where to save it
since the user didn't register yet.
Is this what you meant?
Thank You,
Miguel
On Oct 22, 1:45 am, ricardobeat [EMAIL PROTECTED] wrote:
Install the Firebug extension for Firefox so you can debug your code
easily:www.getfirebug.com
I don't mean it's not good for a plug-in, I mean it's a very specific
behaviour. To be useful to a large number of people it would need to
be very flexible and customizable.
On your test page, you forgot to close the function and you're not
using it the right way. As it is you should have used:
$('form').createList('#MyList') // form is the form from where you are
getting the values, you pass createList() the list ID
I changed it to act from the elements themselves, here is a new one:
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form');
var $fields = this;
$(opt.button,origin).bind('click',function(){
[jQuery] Re: My first plugin ... need some help.
Hi,
I tried to follow your tips but I might be doing something wrong:
http://www.27lamps.com/Beta/List/List.html
A few questions:
1. Why isn't this good for a plugin?
I fell this is really useful in forms for selecting multiple
items, add them to the a list and then read that list from server
side.
2. Can't I specify the ID's of the form inputs I want to take the info
from?
My form has 10 inputs and 2 buttons: One should submit the form.
The other should only add the contents of the 3 selected inputs to the
list.
Thank You,
Miguel
On Oct 16, 9:47 pm, ricardobeat [EMAIL PROTECTED] wrote:
This is quite specific to made into an actual plug-in, but here it
goes:
$.fn.createList = function(list){
var origin = this;
$(':submit',origin).bind('click',function(){
str = [];
console.log($('input,select,checkbox:checked',origin));
$('.name,.country,.newsletter:checked',origin).each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(list).append(str).append(' a
href=#remove
class=removeRemove Item/a');
return false;
});
};
form
input class=name/
select class=country
option value=FranceFrance/option
option value=PortugalPortugal/option
option value=UKUK/option
option value=USUS/option
/select
input type=checkbox value=Newsletter class=newsletter
name=newsletter/
input type=submit value=Add to List/
/form
1. you were binding the 'remove buttons' everytime you ran the
function, keep the livequery call outside the function so it only runs
once
2. your HTML was missing IDs, I made them into classes so you don't
need to pass IDs everytime
3. 'this' inside your appendTo() was refering to the button, not the
form
only tested on FF3, works alright.
- ricardo
On Oct 16, 8:39 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I added a live example to:http://www.27lamps.com/Beta/List/List.html
It is not working. Could someone, please, help me with this?
I am trying to create something similar to what is used in wordpress
to add tags to a post but getting the values from multiple form
inputs.
Thanks,
Miguel
On Oct 16, 5:58 am, ricardobeat [EMAIL PROTECTED] wrote:
If the ids are supplied in '#id,#otherid,#otherid' format, you could
do:
var str = new String;
$(options.formids).each(function(){
str += $(this).val();
str += ',';});
$('li/').appendTo(options.listid).text(str);
- ricardo
On Oct 15, 9:49 pm, shapper [EMAIL PROTECTED] wrote:
Hello,
I am trying to create my first JQuery plugin that does the following:
On a form, when a button is pressed, a few form elements values are
used to create a string (CSV format).
This string is added to an ordered list and with a remove button to
remove it from the list.
Could someone, please, help me making this work. What I have is:
(function($) {
$.fn.AddToList = function(options) {
var defaults = {
formids: input1, select1, input2,
buttonId: submit,
listId: items
};
var options = $.extend(defaults, options);
return this.each(function() {
$('.Remove')
.livequery('click', function(event) {
$(this).parent().remove();
});
$(options.buttonId).bind('click', function() {
$(options.listID).append(li??/li);
});
});
};
})(jQuery);
I created three parameters:
formids: The ids of the form elements from where the content should
be taken
buttonId: The id of the button that triggers the adding of the form
element values to the list
listId: The listid where the items should be added.
I am using LiveQuery to add the remove action to the button adding a
class of Remove to all buttons.
Thanks,
Miguel
[jQuery] Re: My first plugin ... need some help.
Install the Firebug extension for Firefox so you can debug your code
easily: www.getfirebug.com
I don't mean it's not good for a plug-in, I mean it's a very specific
behaviour. To be useful to a large number of people it would need to
be very flexible and customizable.
On your test page, you forgot to close the function and you're not
using it the right way. As it is you should have used:
$('form').createList('#MyList') // form is the form from where you are
getting the values, you pass createList() the list ID
I changed it to act from the elements themselves, here is a new one:
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form');
var $fields = this;
$(opt.button,origin).bind('click',function(){
str = [];
$fields.each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a');
return false;
});
}
});
The way you use this is the following:
$('input.name,input.country,input.newsletter').createList({ list:
'#MyList', button: 'input.sendToList' })
First you select the form inputs that you want to get the values from,
then you call createList and pass an object specifying a selector for
the list and for the button you want to use, they can be any selector
(ID,class,etc). The code is quite self-explanatory.
You could also send this data directly to the server via Ajax, there
is no need to put it in a list just for that.
cheers,
Ricardo
On Oct 21, 9:07 pm, shapper [EMAIL PROTECTED] wrote:
Hi,
I tried to follow your tips but I might be doing something
wrong:http://www.27lamps.com/Beta/List/List.html
A few questions:
1. Why isn't this good for a plugin?
I fell this is really useful in forms for selecting multiple
items, add them to the a list and then read that list from server
side.
2. Can't I specify the ID's of the form inputs I want to take the info
from?
My form has 10 inputs and 2 buttons: One should submit the form.
The other should only add the contents of the 3 selected inputs to the
list.
Thank You,
Miguel
On Oct 16, 9:47 pm, ricardobeat [EMAIL PROTECTED] wrote:
This is quite specific to made into an actual plug-in, but here it
goes:
$.fn.createList = function(list){
var origin = this;
$(':submit',origin).bind('click',function(){
str = [];
console.log($('input,select,checkbox:checked',origin));
$('.name,.country,.newsletter:checked',origin).each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(list).append(str).append(' a
href=#remove
class=removeRemove Item/a');
return false;
});
};
form
input class=name/
select class=country
option value=FranceFrance/option
option value=PortugalPortugal/option
option value=UKUK/option
option value=USUS/option
/select
input type=checkbox value=Newsletter class=newsletter
name=newsletter/
input type=submit value=Add to List/
/form
1. you were binding the 'remove buttons' everytime you ran the
function, keep the livequery call outside the function so it only runs
once
2. your HTML was missing IDs, I made them into classes so you don't
need to pass IDs everytime
3. 'this' inside your appendTo() was refering to the button, not the
form
only tested on FF3, works alright.
- ricardo
On Oct 16, 8:39 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I added a live example to:http://www.27lamps.com/Beta/List/List.html
It is not working. Could someone, please, help me with this?
I am trying to create something similar to what is used in wordpress
to add tags to a post but getting the values from multiple form
inputs.
Thanks,
Miguel
On Oct 16, 5:58 am, ricardobeat [EMAIL PROTECTED] wrote:
If the ids are supplied in '#id,#otherid,#otherid' format, you could
do:
var str = new String;
$(options.formids).each(function(){
str += $(this).val();
str += ',';});
$('li/').appendTo(options.listid).text(str);
- ricardo
On Oct 15, 9:49 pm, shapper [EMAIL PROTECTED] wrote:
Hello,
I am trying to create my first JQuery plugin that does the following:
On a form, when a button is pressed, a few form elements values are
used to create a string (CSV format).
This string is added to an ordered list and with a remove button to
remove it from the list.
Could someone, please, help me making this work. What I have is:
(function($) {
$.fn.AddToList = function(options) {
var defaults = {
formids: input1, select1, input2,
buttonId: submit,
listId: items
};
[jQuery] Re: My first plugin ... need some help.
Hi,
I will try it. Sorry, but I am no expert with JQuery and I am just
trying to pull this off.
I understand that a plugin should have many more options but my
intention is to have this plugin so I can use across my projects and
with time improve it.
It would be easier to make this without being a plugin? I am not
really sure how the code would change ...
I was looking for such a plugin but I wasn't able to find any ... I
think this is really useful.
Just select the inputs, the button, the list and the format as the
inputs values would be displayed. Then use something like:
liBook Type. Book Name. Values of selected CheckBoxes separated by
commasinput type=hidden name=myList value=Book Type. Book Name.
Values of selected CheckBoxes separated by commas /a
href=#removeclass=removeRemove Item/a/li
Then I use the hidden inputs to read the info on the server after the
form is submitted, parse the info and insert it into the database
along with the other form info.
Does this makes any sense?
Yes, I could use Ajax but the form has a lot more information and
these list info should be only saved into the database if the user
submits the register form itself.
So if i send this info through ajax there will no where to save it
since the user didn't register yet.
Is this what you meant?
Thank You,
Miguel
On Oct 22, 1:45 am, ricardobeat [EMAIL PROTECTED] wrote:
Install the Firebug extension for Firefox so you can debug your code
easily:www.getfirebug.com
I don't mean it's not good for a plug-in, I mean it's a very specific
behaviour. To be useful to a large number of people it would need to
be very flexible and customizable.
On your test page, you forgot to close the function and you're not
using it the right way. As it is you should have used:
$('form').createList('#MyList') // form is the form from where you are
getting the values, you pass createList() the list ID
I changed it to act from the elements themselves, here is a new one:
$(document).ready(function() {
$.fn.createList = function(opt){
var origin = this.eq(0).parents('form');
var $fields = this;
$(opt.button,origin).bind('click',function(){
str = [];
$fields.each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(opt.list).append(str).append(' a
href=#remove class=removeRemove Item/a');
return false;
});
}
});
The way you use this is the following:
$('input.name,input.country,input.newsletter').createList({ list:
'#MyList', button: 'input.sendToList' })
First you select the form inputs that you want to get the values from,
then you call createList and pass an object specifying a selector for
the list and for the button you want to use, they can be any selector
(ID,class,etc). The code is quite self-explanatory.
You could also send this data directly to the server via Ajax, there
is no need to put it in a list just for that.
cheers,
Ricardo
On Oct 21, 9:07 pm, shapper [EMAIL PROTECTED] wrote:
Hi,
I tried to follow your tips but I might be doing something
wrong:http://www.27lamps.com/Beta/List/List.html
A few questions:
1. Why isn't this good for a plugin?
I fell this is really useful in forms for selecting multiple
items, add them to the a list and then read that list from server
side.
2. Can't I specify the ID's of the form inputs I want to take the info
from?
My form has 10 inputs and 2 buttons: One should submit the form.
The other should only add the contents of the 3 selected inputs to the
list.
Thank You,
Miguel
On Oct 16, 9:47 pm, ricardobeat [EMAIL PROTECTED] wrote:
This is quite specific to made into an actual plug-in, but here it
goes:
$.fn.createList = function(list){
var origin = this;
$(':submit',origin).bind('click',function(){
str = [];
console.log($('input,select,checkbox:checked',origin));
$('.name,.country,.newsletter:checked',origin).each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(list).append(str).append(' a
href=#remove
class=removeRemove Item/a');
return false;
});
};
form
input class=name/
select class=country
option value=FranceFrance/option
option value=PortugalPortugal/option
option value=UKUK/option
option value=USUS/option
/select
input type=checkbox value=Newsletter class=newsletter
name=newsletter/
input type=submit value=Add to List/
/form
1. you were binding the 'remove buttons' everytime you ran the
function, keep the livequery call outside the function so it only runs
once
2. your HTML was missing IDs, I made them into classes so you don't
need to pass IDs everytime
3.
[jQuery] Re: My first plugin ... need some help.
This is quite specific to made into an actual plug-in, but here it
goes:
$.fn.createList = function(list){
var origin = this;
$(':submit',origin).bind('click',function(){
str = [];
console.log($('input,select,checkbox:checked',origin));
$('.name,.country,.newsletter:checked',origin).each(function(){
str.push($(this).val());
});
str = str.join(',');
$('li/li').appendTo(list).append(str).append(' a
href=#remove
class=removeRemove Item/a');
return false;
});
};
form
input class=name/
select class=country
option value=FranceFrance/option
option value=PortugalPortugal/option
option value=UKUK/option
option value=USUS/option
/select
input type=checkbox value=Newsletter class=newsletter
name=newsletter/
input type=submit value=Add to List/
/form
1. you were binding the 'remove buttons' everytime you ran the
function, keep the livequery call outside the function so it only runs
once
2. your HTML was missing IDs, I made them into classes so you don't
need to pass IDs everytime
3. 'this' inside your appendTo() was refering to the button, not the
form
only tested on FF3, works alright.
- ricardo
On Oct 16, 8:39 am, shapper [EMAIL PROTECTED] wrote:
Hi,
I added a live example to:http://www.27lamps.com/Beta/List/List.html
It is not working. Could someone, please, help me with this?
I am trying to create something similar to what is used in wordpress
to add tags to a post but getting the values from multiple form
inputs.
Thanks,
Miguel
On Oct 16, 5:58 am, ricardobeat [EMAIL PROTECTED] wrote:
If the ids are supplied in '#id,#otherid,#otherid' format, you could
do:
var str = new String;
$(options.formids).each(function(){
str += $(this).val();
str += ',';});
$('li/').appendTo(options.listid).text(str);
- ricardo
On Oct 15, 9:49 pm, shapper [EMAIL PROTECTED] wrote:
Hello,
I am trying to create my first JQuery plugin that does the following:
On a form, when a button is pressed, a few form elements values are
used to create a string (CSV format).
This string is added to an ordered list and with a remove button to
remove it from the list.
Could someone, please, help me making this work. What I have is:
(function($) {
$.fn.AddToList = function(options) {
var defaults = {
formids: input1, select1, input2,
buttonId: submit,
listId: items
};
var options = $.extend(defaults, options);
return this.each(function() {
$('.Remove')
.livequery('click', function(event) {
$(this).parent().remove();
});
$(options.buttonId).bind('click', function() {
$(options.listID).append(li??/li);
});
});
};
})(jQuery);
I created three parameters:
formids: The ids of the form elements from where the content should
be taken
buttonId: The id of the button that triggers the adding of the form
element values to the list
listId: The listid where the items should be added.
I am using LiveQuery to add the remove action to the button adding a
class of Remove to all buttons.
Thanks,
Miguel
[jQuery] Re: My first plugin ... need some help.
If the ids are supplied in '#id,#otherid,#otherid' format, you could
do:
var str = new String;
$(options.formids).each(function(){
str += $(this).val();
str += ',';
});
$('li/').appendTo(options.listid).text(str);
- ricardo
On Oct 15, 9:49 pm, shapper [EMAIL PROTECTED] wrote:
Hello,
I am trying to create my first JQuery plugin that does the following:
On a form, when a button is pressed, a few form elements values are
used to create a string (CSV format).
This string is added to an ordered list and with a remove button to
remove it from the list.
Could someone, please, help me making this work. What I have is:
(function($) {
$.fn.AddToList = function(options) {
var defaults = {
formids: input1, select1, input2,
buttonId: submit,
listId: items
};
var options = $.extend(defaults, options);
return this.each(function() {
$('.Remove')
.livequery('click', function(event) {
$(this).parent().remove();
});
$(options.buttonId).bind('click', function() {
$(options.listID).append(li??/li);
});
});
};
})(jQuery);
I created three parameters:
formids: The ids of the form elements from where the content should
be taken
buttonId: The id of the button that triggers the adding of the form
element values to the list
listId: The listid where the items should be added.
I am using LiveQuery to add the remove action to the button adding a
class of Remove to all buttons.
Thanks,
Miguel
