Solved

how do I call a jquery function on a button click

Posted on 2011-02-10
7
569 Views
Last Modified: 2012-05-11
Hi,
with the help of an expert, I am using a plugin to have a character count on some textbox's.

It works (almost)  The problem is when a new textbox is created the character function is not getting called. Its only when the page does a roundtrip to the server does the character count function work.

Does anybody know whats going on.

Here is the relevant code
Thanks!
<script language="javascript">
$(document).ready(function(){  
     $('textarea[maxlength]').keyup(function(){  
       var max = parseInt($(this).attr('maxlength'));  
       if($(this).val().length > max){  
             $(this).val($(this).val().substr(0, $(this).attr('maxlength')));  
        }  

        $(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');  

    });  

 }); 
</script>

<!---Makes a new file, textbox and texarea when the "add worksample button is clicket--->

function add_work_sample(rpid) {

	file_number["p" + rpid]++;
	$("#work_samples_container_p" + rpid).append('<tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>File:</h5><input type="file" name="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '"  size="20"  maxlength="70"/></td><td><a class="delete_new_worksample_link" id="delete_n' + file_number["p" + rpid]  + '"><img src="images/Remove-icon.jpg" title="Delete" width="40" height="40" border="0" style="cursor:pointer;" /></a>Delete</td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Title:</h5><input type="text" name="txtbrowsetitle_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="title_p' + rpid + '_n' + file_number["p" + rpid]  + '"size="50" /></td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Description:</h5><div><textarea maxlength="200" name="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" rows="5" cols="50"></textarea><br /><p class="charsRemaining"></p></div></td></tr>');



<!---Button to add new "worksample" --->
<input name="button" type="button" value="Add Worksample" class="submitbtn" onclick="add_work_sample(#qprojects.req_part_id#)"  onmouseover="this.className='submitbtn submitbtnhov'" onmouseout="this.className='submitbtn'"/>

Open in new window

0
Comment
Question by:smfmetro10
7 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34866386
http://api.jquery.com/live
This is the way of applying jQuery to dynamic elements.
0
 
LVL 16

Accepted Solution

by:
BurnieP earned 500 total points
ID: 34866484
You could put the javascript in a function, then call the function every time you add a textbox.

I have modified your code below to reflect my idea.
<script language="javascript">
$(document).ready(function(){  
     SetCharCount();
 }); 

function SetCharCount() {
$('textarea[maxlength]').keyup(function(){  
       var max = parseInt($(this).attr('maxlength'));  
       if($(this).val().length > max){  
             $(this).val($(this).val().substr(0, $(this).attr('maxlength')));  
        }  

        $(this).parent().find('.charsRemaining').html('You have ' + (max - $(this).val().length) + ' characters remaining');  

    });  

}
</script>

<!---Makes a new file, textbox and texarea when the "add worksample button is clicket--->

function add_work_sample(rpid) {

	file_number["p" + rpid]++;
	$("#work_samples_container_p" + rpid).append('<tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>File:</h5><input type="file" name="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="userfile_p' + rpid + '_n' + file_number["p" + rpid]  + '"  size="20"  maxlength="70"/></td><td><a class="delete_new_worksample_link" id="delete_n' + file_number["p" + rpid]  + '"><img src="images/Remove-icon.jpg" title="Delete" width="40" height="40" border="0" style="cursor:pointer;" /></a>Delete</td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Title:</h5><input type="text" name="txtbrowsetitle_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="title_p' + rpid + '_n' + file_number["p" + rpid]  + '"size="50" /></td></tr><tr class="new_worksample_n' + file_number["p" + rpid]  + '"><td><h5>Description:</h5><div><textarea maxlength="200" name="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" id="descriptionTextbox_p' + rpid + '_n' + file_number["p" + rpid]  + '" rows="5" cols="50"></textarea><br /><p class="charsRemaining"></p></div></td></tr>');
    SetCharCount();
}


<!---Button to add new "worksample" --->
<input name="button" type="button" value="Add Worksample" class="submitbtn" onclick="add_work_sample(#qprojects.req_part_id#)"  onmouseover="this.className='submitbtn submitbtnhov'" onmouseout="this.className='submitbtn'"/>

Open in new window

0
 

Author Comment

by:smfmetro10
ID: 34867668
Thanks for the reply.

I tried your example. It's not generating any errors, but it doesnt quite work (but I like your idea)
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 34868070
when you create an element, you have to do the fresh bindings anyways.
So when the new textbox is generated, call that event binder method again
0
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 34868513
"It works (almost)  The problem is when a new textbox is created the character function is not getting called. Its only when the page does a roundtrip to the server does the character count function work."

This is because your $('textarea[maxlength]').keyup() functionality is only being applied to the textboxes that exist when $(document).ready() is initiated.  Any textboxes created after $(document).ready() completes needs to have this functionality applied to it.

This is what gurvinder372 was talking about when saying "you have to do the fresh bindings, so call that event binder method again"

meaning: recall the "SetCharCount()" function that BurnieP wrote in his post.
0
 

Author Comment

by:smfmetro10
ID: 34872856
Ah, Ok. I dont know how to do that (Im incredibly new to this)
0
 

Author Closing Comment

by:smfmetro10
ID: 34873012
Sorry for the confusion. Completley my fault (Had some syntax wrong) This works perfectly!!!
Thanks for the help!!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

914 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now