locked
How to add dynamically controls in JQuery RRS feed

  • Question

  • User-996729099 posted

    Hi,

    I have one textbox on page. i want to add label and image after this textbox dynamically using JQuery. Can anyone sugessts the best solution for that. Thanks

    Wednesday, July 20, 2011 8:37 AM

Answers

  • User-287874541 posted

    Use this anyways:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#ButtonID").click(function () {
                $("#TextBoxID").after("<span>Some text in 'label'</span><img src='some URL' alt='Whatever' />");
            });
        });
    </script>

    which will insert a span and image directly after the textbox. Make sense? Let me know if you need more help!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 20, 2011 9:46 AM
  • User-1860977447 posted

    Hi,

    I tested out this code it is working fine..hope it helps you.

    jQuery:

    $(document).ready(function () {
    
                $('#btn').click(function () {
                    $('#sampleText').after('<span><img src="images/refresh.gif" alt="Invalid img" />');
                }); 
    });
    
    
    HTML:
    <input type="text" id="sampleText" value="" />
    <input type="button" id="btn" value="submit" />
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 20, 2011 10:59 AM
  • User-287874541 posted

    In the button click event, use:

    $('#TEXTBOX_ID').nextAll().remove();

    That will remove all elements after your textbox, inside of the container. So you need something like:

    <div>
        Textbox
        Span
        Image
    </div>

    so that the span and image are removed. If you didn't have the div containing them, all elements after textbox will be removed. You may already have it setup like this (I haven't looked at your original post in awhile), so you may ignore this if I'm wrong.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2011 1:35 AM

All replies

  • User455156504 posted

    Hi,

    you can use .hide() - http://api.jquery.com/hide/ - and .show() - http://api.jquery.com/show/ - for this purpose.

    Wednesday, July 20, 2011 9:02 AM
  • User-1774044348 posted

    i want to add label and image after this textbox dynamically using JQuery

    Hi friend,

    you can do that with jquery bit tell me, you need to add this after you click a button? write something in the textbox?

    give me some details and I'll help you!

    Good Luck!

    Wednesday, July 20, 2011 9:19 AM
  • User-512064933 posted

    Say you have a textbox

    <asp:TextBox runat="server" id="txtInput" />

    Then in your Javascript write

    $("input[id$='txtInput']").append('<p>Test</p><img src="hello.gif"' />);




    Wednesday, July 20, 2011 9:19 AM
  • User-996729099 posted

    Thanks for your reply.

    $("input[id$='txtInput']").append('<p>Test</p><img src="hello.gif"' />); 
    
    
    this line of code is not working. Its not appending image after textbox.

    Wednesday, July 20, 2011 9:35 AM
  • User-996729099 posted

    Actually i need it after button click

    Wednesday, July 20, 2011 9:38 AM
  • User-287874541 posted

    Then in your Javascript write

    (just saying) You need to move the final single quote in the append to outside of the "/>".

    I know this just an example, but why are you appending anything to an input? It won't really do anything.........

    Wednesday, July 20, 2011 9:43 AM
  • User-1774044348 posted

    if you have a static image,

    you can do that:

    add the label and image to your page inside a div:

    $("#yourDivId").hide();
    
    $("#ButtonID").click(function(){
      $("#yourDivID").show();
    })
     
    so this will show what you want on click!
    Wednesday, July 20, 2011 9:43 AM
  • User-287874541 posted

    Use this anyways:

    <script type="text/javascript">
        $(document).ready(function () {
            $("#ButtonID").click(function () {
                $("#TextBoxID").after("<span>Some text in 'label'</span><img src='some URL' alt='Whatever' />");
            });
        });
    </script>

    which will insert a span and image directly after the textbox. Make sense? Let me know if you need more help!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 20, 2011 9:46 AM
  • User-996729099 posted

    Thanks for your reply hoodedperson70. but still image is not placed after textbox. my code is 

    $(pcontrolID).after("<label id='error'><img src='Images/show.gif' alt='Invalid' /></label>");
    
    
    i can see the label and image in markup but not on page. 
    Wednesday, July 20, 2011 10:25 AM
  • User-287874541 posted

    Probably because using "pcontrolID" by itself won't find it. You need to use the ID selector "#" and prepend it in the selector. Change your code to;

    $("#" + pcontrolID).after("<label id='error'><img src='Images/show.gif' alt='Invalid' /></label>");

    And may I ask why you're using a label for this? You can obviously use labels however you want, but I would think you want a span in this case. You can see what labels are used for more often, at http://www.w3schools.com/tags/tag_label.asp

    Wednesday, July 20, 2011 10:36 AM
  • User-1860977447 posted

    Hi,

    I tested out this code it is working fine..hope it helps you.

    jQuery:

    $(document).ready(function () {
    
                $('#btn').click(function () {
                    $('#sampleText').after('<span><img src="images/refresh.gif" alt="Invalid img" />');
                }); 
    });
    
    
    HTML:
    <input type="text" id="sampleText" value="" />
    <input type="button" id="btn" value="submit" />
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 20, 2011 10:59 AM
  • User-996729099 posted

    How to remove all the elements after textbox. like  i have one textbox and one image and label after this textbox. on button click i want to remove all the elements after textbox. Any help.

    Thursday, July 21, 2011 1:17 AM
  • User-287874541 posted

    In the button click event, use:

    $('#TEXTBOX_ID').nextAll().remove();

    That will remove all elements after your textbox, inside of the container. So you need something like:

    <div>
        Textbox
        Span
        Image
    </div>

    so that the span and image are removed. If you didn't have the div containing them, all elements after textbox will be removed. You may already have it setup like this (I haven't looked at your original post in awhile), so you may ignore this if I'm wrong.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, July 21, 2011 1:35 AM
  • User-996729099 posted

    Thanks for your reply. How to check that element is already exists. Like i have an image after textbox. how can i check i have an image after textbox in jquery. thanks

    Thursday, July 21, 2011 1:48 AM
  • User-287874541 posted

    If you have the structure:

    <div>
        Textbox
        Span
        Image
    </div>

    then you can use this code (hopefully):

    if ($("#TextboxID").siblings("img").is('*'))
    {
    
    }

    I found other solutions, so whichever one works should be fine:

    if ($("#TextboxID").siblings("img").length())
    {
    
    }
    
    // or
    
    if ($("#TextboxID").siblings("img").length() > 0)
    {
    
    }
    
    // or
    
    if ($("#TextboxID").siblings("img").size())
    {
    
    }
    
    // or
    
    if ($("#TextboxID").siblings("img").size() > 0)
    {
    
    }

    I think they all would work.

    Thursday, July 21, 2011 9:39 AM