Solved

how do I call a jquery function on a button click

Posted on 2011-02-10
7
586 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

738 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