Solved

how do I call a jquery function on a button click

Posted on 2011-02-10
7
564 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
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
Comment Utility
"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
Comment Utility
Ah, Ok. I dont know how to do that (Im incredibly new to this)
0
 

Author Closing Comment

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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

762 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

11 Experts available now in Live!

Get 1:1 Help Now