Avatar of newbie27
newbie27Flag for United Kingdom of Great Britain and Northern Ireland asked on

jquery append

Hello Folks,
I am using jQuery append function to show "clear button"  on anchor onclick event, the problem is its adding the button every time i click on the anchor tag. is there anyway we can restrict to display only once?
please advice
regards
sam
$('#shortlist').append('<input type="button" name="btnClear" id="btnClear" value="Clear"/>');

Open in new window

JavaScriptWeb Development

Avatar of undefined
Last Comment
newbie27

8/22/2022 - Mon
JohnSixkiller

Hi,

put the button in your HTML code with style="display:none", and make it visible in  that function.

or

if(documeng.getElementById("btnClear") == null) ... apend it ...
ASKER
newbie27

Hello John,
thanks again for your response, I wanted to do using jQuery apparently...
ASKER CERTIFIED SOLUTION
JohnSixkiller

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
newbie27

thanks john, that worked ...!!

i have another issue in the code i am attaching, please can we cut shot the script as the same script is been repeated twice one block for single selection another one for all items ....

please have a look and see if this makes any sense to you?

i will add a separate question for this ....

thanks for your help
regards
sam

<script>//<![CDATA[   
$(document).ready(function(){
        // Extend offset function
        jQuery.fn._offset = jQuery.fn.offset;
        jQuery.fn.extend({
            offset: function() {
                var a = arguments;
                return (a.length) ? this.animate({ top: a[0].top || a[0], left: a[0].left || a[1] }, (a[0].top ? a[1] : a[2]) || 1) : this._offset();
            }
        });
        // end
        
        // First thing will be to load items from the cookie showShortList()
        // Store as array [RefNo: Title, etc.] then construct <li></li> etc. from this
        
        $('.addToShortList').click(function () { 
        
                var myId = $(this).attr('id') ;
                var theId = myId.replace('_lnk', '');
                var myTitle =  $(this).attr('title') ;
                
                //Don't add the same item again.. [i think that there is a cooler wya to do this]
                var myLi = $('#' + theId + '_li').html();
                if (myLi){
                        //this doesn't work on the first click?! we need a better test
                        $('#'+myId).mousedown(function(){$('#' + theId + '_li').css('background','#fef8a5')});
                        $('#'+myId).mouseup(function(){$('#' + theId + '_li').css('background','')});
                        return;
                }
                
                // create div for the animation
                var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + '; top:' + $(this).offset().top + '; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
                $('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);
                $(this).animate({opacity: "0.3"}, 500);
                
                //I.E seems to require display:none; followed by .show/slideDown event. FF is OK without!
                $('#shortlist').prepend('<li id="' + theId + '_li" style="display:none;">' + myTitle + ' <a href="#" class="dynAdded" onclick="removeItem(this); return false;" title="Remove">[-]</a></li>');
                $('#'+  theId + '_li').slideDown("slow");
                $('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});				  
                
                
                //alert($(this).offset().top + ', ' + $(this).offset().left + ' >>> ' + $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left);
                //var msg = $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left + '\n';
                //msg += $('#'+ theId + '_spg').offset().top + ', ' + $('#'+ theId + '_spg').offset().left;
                //alert(msg);
                
                //N.B. The page should load the cookie and then set the Add2ShortList buttons to opacity 0.3 - so's you know.. :) use .each fn
				
                $.cookie('shortlist', theId+","+myTitle); 
				
				  if( $("#btnClear").length <= 0 ) 
					$('#shortlist').append('<input type="button" name="btnClear" id="btnClear" value="Clear"/>');					
				  if( $("#btnEdit").length <= 0 ) 
					$('#shortlist').append('<input type="button" name="btnEdit" id="btnEdit" value="Save/Edit" />');
		
			     $('#btnClear').click( function(){                 
                  $('.dynAdded').each( function(){removeItem(this)} );						   
       });
        });
		
					
 
       $('#chkAll').click( function(){      
                $('.addToShortList').each(function () { 
     
                        var myId = $(this).attr('id') ;
                        var theId = myId.replace('_lnk', '');
                        var myTitle =  $(this).attr('title') ;
                        
                        //Don't add the same item again.. [i think that there is a cooler wya to do this]
                        var myLi = $('#' + theId + '_li').html();
                        if (myLi){
                                //this doesn't work on the first click?! we need a better test
                                $('#'+myId).mousedown(function(){$('#' + theId + '_li').css('background','#fef8a5')});
                                $('#'+myId).mouseup(function(){$('#' + theId + '_li').css('background','')});
                                return;
                        }
                        
                        // create div for the animation
                        var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + '; top:' + $(this).offset().top + '; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
                        $('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);
                        $(this).animate({opacity: "0.3"}, 500);
                        
                        //I.E seems to require display:none; followed by .show/slideDown event. FF is OK without!
                        $('#shortlist').prepend('<li id="' + theId + '_li" style="display:none;">' + myTitle + ' <a href="#" class="dynAdded" onclick="removeItem(this); return false;" title="Remove">[-]</a></li>');
                        $('#'+  theId + '_li').slideDown("slow");
                        $('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});
                        
                        
                });
					if( $("#btnClear").length <= 0 ) 
						$('#shortlist').append('<input type="button" name="btnClear" id="btnClear" value="Clear"/>');					
					if( $("#btnEdit").length <= 0 ) 
						$('#shortlist').append('<input type="button" name="btnEdit" id="btnEdit" value="Save/Edit" />');
					$('#btnClear').click( function(){                 
						$('.dynAdded').each( function(){removeItem(this)} );						   
					});
				
        });
		
		
		
		
		
			
 });
  
function addAllToShortList(el){
	
}
 
 
function removeItem(el){
 
	var myId = $(el).parent().attr('id') ;
	var theId = myId.replace('_li', '');
	
	$('#'+myId).slideUp("slow", function(){$(this).remove()});
	$('#'+theId+'_lnk').animate({opacity: "1.0"}, 500);
	
}
	
// We need to save the list to the cokie after adding/removing anything saveShortList()
// PLUS	: we need a button for removeAll items (i.e. clear shortList)
//		: postshortList - [i.e. send list of ISBNs to listAdmin
//		: Add two icons to Shortlist menubar 'Clear' & 'Save'  [see NETSITY pages]
//		: Move the '[-]' remove link to the left and trim the 'title' text to no more than n characters
//		: create an AddAll button to add all listed items [.each fn] on the page
//		: not vital but the offset in IE is wrong - something to do with absolute positioning..
//		: the shortlist will ned to bable to scroll [see NETSITY pages]
 
// ]]>
</script>

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER
newbie27

thanks
ASKER
newbie27