Home jQuery on the fly tutorial

Adding Anchor to a text on the fly using jQuery

I come across the requirement where I need to create an anchor to a list based on some condition – hence I can go that specific anchor right away.

Though this can fairly and easily performed from the server side while the list is being prepared – without a bandwidth problem, I have found javascript method more fancy and easy. But, for the poor browser whose javascript is disabled, you might want to consider an alternative of server side.

Lets assume this simple scenario. You have list of completed and pending code statues. and Assume this list is longer and the completed list can appear in any place on the list but it is assured that all the completed lists would be all together.

So, all you want to do is to create an anchor to the very first of the completed list on the fly. Here is the snippet for that:

<!--
   __ __ _______
  | |/ /|    | |
  |   / | / | |
  | | | -- | |___
  |_| __||_|____| 

    Kaleb Woldearegay<contactkaleb@gmail.com>
 -->
<html>
<head><title>Simple </head>
<body>
<div id="completed"></div>
<table>
<tr>
    <td>1</td><td>code for module one</td>
</tr>
<tr>
    <td>2</td><td>code for module two</td>
</tr>
<tr class='completed'>
    <td>3</td><td>code for module 3</td>
</tr>
<tr class='completed'>
    <td>4</td><td>code for module 4</td>
</tr>
<tr class='completed'>
    <td>5</td><td>code for module 5</td>
</tr>
</table>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
        $(document).ready(function(){
                //perform only if there is atleast one completed row
                if ($("table tr.complete").length > 0){
            $("#completed").html("<a href='#anchored'>Go to Anchored</a>"); 
                        var completed = $("tr.complete:first").find("td:nth-child(2)");    //choose the second td
                        completed.html("<a name='anchored'>" + completed.html() + "</a>");//create the anchor
                        $("table tr.complete").css('background', 'green'); //colorize
        }  
                $("table tr.pending").css('background', '#cccFFF');
        });

</script>
</body>
</html>

Adding default option on the fly to select with jQuery, removing and some more…

How can I add or remove option dynamically on the select element using jQuery

Using the following snippet, you can do the following and related tasks of adding default options or working with elements that are created dynamically at the client side

  • How to add default option to select
  • How to manipulate elements that are created on the fly

Selecting element with multiple classes with jQuery

<html>
	<head><title>Adding default selection list</title>
	</head>	
	<body>
		<select name = "items" id="items">
			<option value="item1">Item One</option>
			<option value="item2">Item Two</option>
			<option value="item3">Item Three</option>
		</select>
		<input type = "button" name="checkme" id = "checkme" value='check me' />
		<p class='static'>Existing Paragraph</p>
		<div class='newly'></div>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
		<script>
			$('#items').prepend('<option value= '' selected='selected'>Select Item Please</option>');
			$('#checkme').click(function(){
				if ($('#items').val() != ""){
					$('<p>Yup you have selected ' + $('#items').val()+'<a href=''>delete</a></p>').appendTo('.newly');
				}else{
					alert('Plase select proper item');				
				}
			});
			$('p a').live('click',(function(){

				var remove = confirm("You sure to delete?");
				if (remove){
						$(this).parent().remove();
				}
  			return false;
			}));

		</script>
	</body>
</html>

The prepend function on the selected element would put the given element on top of the list – there is also an append version of it

It would be difficult to access the elements that are created on the fly/dynamically with jQuery without the use of live() – it binds the given click event to newly created elements.

Why binding/unbinding not working on firefox?

Finally, when we delete, we want to delete the the paragraph as the whole that contains the anchor. Most of the time we want to do it with in the div tag.

In this case the anchor (a) is a child of the paragraph (p) – that is where the .parent().remove() would come to play.

Populate selectbox from JSON with jQuery

Do you know how to add anchor dynamically to text?