[jQuery] Re: Simple problem
mkmanning and jules, thanks! Must have been end-of-the-day synapse shutdown...
[jQuery] Re: Simple problem
mkmanning and jules, thanks! Must have been end-of-the-day synapse shutdown...
Re: [jQuery] Re: Simple problem
unsubscribe
[jQuery] Re: Simple problem
Modify this line of code
var panelID = "panel_" + $("input").val();
to
var panelID = "panel_" + $(this).val();
On Oct 30, 9:56 am, AlChuck wrote:
> Hello, I'm new to using jQuery. I was motivated by wanting to put some
> panels on an ASP.NET website which would display additional info if a
> link or button was clicked. I found a simple tutorial and mimicked
> that and it works fine, but uses the specific ID of the hyperlink to
> trigger the action. My page needs a list of items, and if you click on
> one, extra information appears right below the item. So what I want to
> do is capture clicks on any link, read the ID, and then use the ID to
> identify the ID of the related asp:Panel element.
>
> Here's the starting point:
>
>
> $(function() {
> $("#myButtonID").click(function(evt) {
> evt.preventDefault();
> $('#myPanelID').toggle('fast');
> });
> });
>
>
> If you click on the button rendered thusly:
>
>
>
> The panel with id="myPanelID" is toggled (the CSS defines it so that
> display is set to "none" by default.
>
> But I want a list of these panels and buttons on my page, so I want
> the code to be able to do this for any of the buttons I click.
>
> It also works if instead of the button with the specific ID
> "myButtonID" I change
>
> $("#myButtonID").click(function(evt)
>
> to
>
> $("input").click(function(evt)
>
> My impression is that this will cause the code to trigger if any input
> element on the page is clicked, which is the first step to what I want
> to do. My notion is that I can then get the value of the clicked
> button and use that value to identify which panel to animate.
>
> One of the FAQs on the jQuery site says I can get the value of the
> button thusly:
>
> var mybuttonval = $("input").val();
>
> Then I could use a simple naming convention and use that value to
> identify the Panel I want to animate. For example, if my button had
> the value "ACME_widget-mach1" I could set the Panel I want to show
> text in to "panel_ACME_Widget-mach1"
>
> So I rewrote my code as follows:
>
>
>
> $(function() {
> $("input").click(function(evt) {
> var panelID = "panel_" + $("input").val();
> evt.preventDefault();
> $(panelID).toggle('fast');
> });
> });
>
>
> It appeared to work just like I hoped... until I put in a second
> button/panel pair, with button ID= ACME_widget-mach2 and panel ID=
> panel_ACME_widget-mach1. What happens is, regardless of which button I
> click, only the first panel, the one with ID=panel_ACME_widget-mach1
> is toggled.
>
> It's as if when any button is clicked, the value I am getting is the
> value of the first button in the collection. I put in an alert box
> right after declaring the variable to test this:
>
> alert(panelID);
>
> and sure enough, the value that displays is the value assigned to the
> first of these buttons on the page.
>
> So what am I doing wrong here? How can I get the value of the button
> that is actually clicked?
>
> Thanks!
>
> Alan
[jQuery] Re: Simple problem
var panelID = "panel_" + $("input").val();
You're problem is the selector; look at it for a second to see why it
won't work (think about what exactly it's selecting). If you want the
value of the button that was clicked, just reference it with 'this',
as in
var panelID = "panel_" + this.value;
or you could use its ID:
var panelID = "panel_" + this.id;
You could wrap it like this:
var panelID = "panel_" + $(this).val(); //or $(this).attr('id')
but it's overkill.
On Oct 29, 3:56 pm, AlChuck wrote:
> Hello, I'm new to using jQuery. I was motivated by wanting to put some
> panels on an ASP.NET website which would display additional info if a
> link or button was clicked. I found a simple tutorial and mimicked
> that and it works fine, but uses the specific ID of the hyperlink to
> trigger the action. My page needs a list of items, and if you click on
> one, extra information appears right below the item. So what I want to
> do is capture clicks on any link, read the ID, and then use the ID to
> identify the ID of the related asp:Panel element.
>
> Here's the starting point:
>
>
> $(function() {
> $("#myButtonID").click(function(evt) {
> evt.preventDefault();
> $('#myPanelID').toggle('fast');
> });
> });
>
>
> If you click on the button rendered thusly:
>
>
>
> The panel with id="myPanelID" is toggled (the CSS defines it so that
> display is set to "none" by default.
>
> But I want a list of these panels and buttons on my page, so I want
> the code to be able to do this for any of the buttons I click.
>
> It also works if instead of the button with the specific ID
> "myButtonID" I change
>
> $("#myButtonID").click(function(evt)
>
> to
>
> $("input").click(function(evt)
>
> My impression is that this will cause the code to trigger if any input
> element on the page is clicked, which is the first step to what I want
> to do. My notion is that I can then get the value of the clicked
> button and use that value to identify which panel to animate.
>
> One of the FAQs on the jQuery site says I can get the value of the
> button thusly:
>
> var mybuttonval = $("input").val();
>
> Then I could use a simple naming convention and use that value to
> identify the Panel I want to animate. For example, if my button had
> the value "ACME_widget-mach1" I could set the Panel I want to show
> text in to "panel_ACME_Widget-mach1"
>
> So I rewrote my code as follows:
>
>
>
> $(function() {
> $("input").click(function(evt) {
> var panelID = "panel_" + $("input").val();
> evt.preventDefault();
> $(panelID).toggle('fast');
> });
> });
>
>
> It appeared to work just like I hoped... until I put in a second
> button/panel pair, with button ID= ACME_widget-mach2 and panel ID=
> panel_ACME_widget-mach1. What happens is, regardless of which button I
> click, only the first panel, the one with ID=panel_ACME_widget-mach1
> is toggled.
>
> It's as if when any button is clicked, the value I am getting is the
> value of the first button in the collection. I put in an alert box
> right after declaring the variable to test this:
>
> alert(panelID);
>
> and sure enough, the value that displays is the value assigned to the
> first of these buttons on the page.
>
> So what am I doing wrong here? How can I get the value of the button
> that is actually clicked?
>
> Thanks!
>
> Alan
[jQuery] Re: Simple problem with createElement
The main problem is, since the fields can be updated very quickly.
There could be multiple "sending. . ." tags next to input boxes. With
the fadeout, this will produce strange results if I just move it
around.
Also, I just tried the method you described and it only works the
first time.
On Apr 28, 7:27 pm, brian wrote:
> You're not actually removing the span, though. It might be better to
> create it once, then move it wherever as needed.
>
> // inside $(document).ready()
>
> $('').attr("id", "fieldstatus")
> .addClass("fieldstatus")
> .appendTo('body');
>
> ...
>
> // inside your event handler
> $('#fieldstatus')
> .remove()
> .html("sending . . .")
> .appendTo( $(this).parent() );
>
> On Tue, Apr 28, 2009 at 10:10 PM, Code Daemon wrote:
>
> > I am creating an element with createElement and then appending it to a
> > table and then after a few seconds, deleting it with a call to empty
> > (). This works fine
>
> > The problem seems to be that every time I create the element, I am
> > creating it with the same id and after a few iterations, it fails. It
> > will append the element to the table, but will not fadeout or delete
> > the element properly.
>
> > var obj = document.createElement('span');
> > $(obj).attr("id", "fieldstatus")
> > .addClass("fieldstatus")
> > .html("sending . . .")
> > .appendTo( $(this).parent() );
>
> > $.post('main/submit', {date:
> > $("#caldate").val(), fieldname: $
> > (this).attr("id"), value: $(this).val() },
> > function(json){
> >
> > $("#fieldstatus").html(json.status);
> > setTimeout(function(){
> >
> > $("#fieldstatus").fadeOut(2000, function(){
> >
> > $("#fieldstatus").empty();
> >
> > });
> > },
> > 1000);
> > },
> > "json"
> > );
[jQuery] Re: Simple problem with createElement
You're not actually removing the span, though. It might be better to
create it once, then move it wherever as needed.
// inside $(document).ready()
$('').attr("id", "fieldstatus")
.addClass("fieldstatus")
.appendTo('body');
...
// inside your event handler
$('#fieldstatus')
.remove()
.html("sending . . .")
.appendTo( $(this).parent() );
On Tue, Apr 28, 2009 at 10:10 PM, Code Daemon wrote:
>
> I am creating an element with createElement and then appending it to a
> table and then after a few seconds, deleting it with a call to empty
> (). This works fine
>
> The problem seems to be that every time I create the element, I am
> creating it with the same id and after a few iterations, it fails. It
> will append the element to the table, but will not fadeout or delete
> the element properly.
>
> var obj = document.createElement('span');
> $(obj).attr("id", "fieldstatus")
> .addClass("fieldstatus")
> .html("sending . . .")
> .appendTo( $(this).parent() );
>
> $.post('main/submit', {date:
> $("#caldate").val(), fieldname: $
> (this).attr("id"), value: $(this).val() },
> function(json){
>
> $("#fieldstatus").html(json.status);
> setTimeout(function(){
>
> $("#fieldstatus").fadeOut(2000, function(){
>
> $("#fieldstatus").empty();
>
> });
> },
> 1000);
> },
> "json"
> );
[jQuery] Re: Simple problem with createElement
Here is how I fixed it:
1) I needed to use remove() instead of empty()
2) To avoid conflicts in the the id, I appended (new Date()).getTime()
to each id to make sure all the id's are unique.
Now when I create a bunch of elements really quickly, they all
disappear eventually.
On Apr 28, 7:10 pm, Code Daemon wrote:
> I am creating an element with createElement and then appending it to a
> table and then after a few seconds, deleting it with a call to empty
> (). This works fine
>
> The problem seems to be that every time I create the element, I am
> creating it with the same id and after a few iterations, it fails. It
> will append the element to the table, but will not fadeout or delete
> the element properly.
>
> var obj = document.createElement('span');
> $(obj).attr("id", "fieldstatus")
> .addClass("fieldstatus")
> .html("sending . . .")
> .appendTo( $(this).parent() );
>
> $.post('main/submit', {date:
> $("#caldate").val(), fieldname: $
> (this).attr("id"), value: $(this).val() },
> function(json){
>
> $("#fieldstatus").html(json.status);
> setTimeout(function(){
>
> $("#fieldstatus").fadeOut(2000, function(){
>
> $("#fieldstatus").empty();
>
> });
> },
> 1000);
> },
> "json"
> );
[jQuery] Re: simple problem
You are selecting an image and image has no HTML or any kind of text
content in it!
img element has no html() function.
jQuery HowTo Resource - http://jquery-howto.blogspot.com
On Thu, Jan 8, 2009 at 8:11 PM, CreativeMind wrote:
>
> hi all,
> i m unable to find the img and its src attribute...
> when i write
> alert($(myobj[1][$c]).find('li').html());
> i get the output
>
>
> alert($(myobj[1][$c]).find('li').find('a').html());
>
>
> but when i try
> alert($(myobj[1][$c]).find('li').find('a').find('img').html());
>
> i get no value or empty value .. can u plz correct it..
> thx
>
[jQuery] Re: simple problem
when i use the values , they are showing me as if working properly...but when i check them using alert , i can't find any value..
