Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery one function to process 3 clicks

Posted on 2016-11-08
7
Medium Priority
?
69 Views
Last Modified: 2016-11-09
I have 3 buttons that I want to do similar things with just use different files. But I cant seem to tell which button was pressed  .  

 <script type="text/javascript">         
 
     $(function () {

         var fileName;            

         $(".bclick").click(function () {		        //// the click happens on a class 
         
           if (elem.attr("id" == 'Button1')) {          /// Was button 1 the button that was clicked?
                 fileName = "2016-ESD-256.pdf";                
             }			 

             if (elem.attr("id" == 'Button2')) {       //// Was button 2 the button that was clicked?
                 fileName = "2016-ESD-257.pdf";                
             }		
	 
             if (elem.attr("id" == 'Button3')) {   //// Was button 3 the button that was clicked?
                 fileName = "2016-ESD-258.pdf";                
             }		
	 
             alert("Process File:  " + fileName);
			 ....
			 ....
			 .... do stuff
         });
     });
  </script>
	
<html>	
	<div class="buttonbox">
		 <input id="Button1"  type="button" class="btn2    bclick" value="Violation 1" />
		 <input id="Button2"  type="button" class="btn2    bclick" value="Violation 2" />
		 <input id="Button3"  type="button" class="btn2    bclick" value="Violation 3" />
	</div>
	
</html>

Open in new window

0
Comment
Question by:Charles Baldo
  • 3
  • 3
7 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41879784
Test page : https://jsfiddle.net/tuuge0un/
<!DOCTYPE html>
<html>  
<head
 <script type="text/javascript">         
 
     $(function () {

         var fileName;            

         $(".bclick").click(function () {		        //// the click happens on a class 
            switch($(this).attr("id")) {
                case "Button1": fileName = "2016-ESD-256.pdf";break;
                case "Button2": fileName = "2016-ESD-257.pdf";break;  
                case "Button3": fileName = "2016-ESD-258.pdf";break;                
                default:break;
            }
            alert("Process File:  " + fileName);
        });
     });
  </script>
</head>
<body>
	<div class="buttonbox">
		 <input id="Button1" type="button" class="btn2 bclick" value="Violation 1" />
		 <input id="Button2" type="button" class="btn2 bclick" value="Violation 2" />
		 <input id="Button3" type="button" class="btn2 bclick" value="Violation 3" />
	</div>
</body>	
</html>

Open in new window

0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 1000 total points
ID: 41880878
Why not make the filename a custom data attribute on the button?
HTML
    <div class="buttonbox">
       <input id="Button1"  type="button" class="btn2 bclick" value="Violation 1" data-pdf="2016-ESD-256.pdf" />
       <input id="Button2"  type="button" class="btn2 bclick" value="Violation 2" data-pdf="2016-ESD-257.pdf" />
       <input id="Button3"  type="button" class="btn2 bclick" value="Violation 3" data-pdf="2016-ESD-258.pdf" />
    </div>

Open in new window

jQuery
<script>
$(function() {
  $('.bclick').click(function(e) {
    e.preventDefault();
    alert('Process File: ' + $(this).data('pdf'));
  });
});
</script>

Open in new window

Working sample here

Edit: This puts the control in the markup leaving the jQuery generic.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 41880937
if you're able to store the filename in the html, you may also use the ID attribute to store filename
Test page : https://jsfiddle.net/tuuge0un/1/

<!DOCTYPE html>
<html>  
<head
 <script type="text/javascript">         
     $(function () {
         var fileName;            
         $(".bclick").click(function () {		        //// the click happens on a class 
            fileName = $(this).attr("id") + ".pdf"
            alert("Process File:  " + fileName);
        });
     });
  </script>
</head>
<body>
	<div class="buttonbox">
		 <input id="2016-ESD-256" type="button" class="btn2 bclick" value="Violation 1" />
		 <input id="2016-ESD-257" type="button" class="btn2 bclick" value="Violation 2" />
		 <input id="2016-ESD-258" type="button" class="btn2 bclick" value="Violation 3" />
	</div>
</body>	
</html>

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41880961
Not sure I would use the ID. The custom data attribute is there for a reason - storing custom data. It is possible to have filenames with spaces in them - which ID's don't support but data does. You can get around this with the %20 urlencode but that just looks messy.

What if you have two buttons on the same page that link to the same document? May not be the case here but it is a possibility - the constraint of uniqueness on ID would disqualify using ID as a place to store the document name.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41880997
If you can really play on the HTML, one more way :)
Test page : https://jsfiddle.net/tuuge0un/2/

<!DOCTYPE html>
<html>  
<head
<script>
   function process(fileName) {
        alert("Process File:  " + fileName);
   }
</script>
</head>
<body>
	<div class="buttonbox">
		 <input onclick="process('2016-ESD-256.jpg');" type="button" class="btn2 bclick" value="Violation 1" />
		 <input onclick="process('2016-ESD-257.jpg');" type="button" class="btn2 bclick" value="Violation 2" />
		 <input onclick="process('2016-ESD-258.jpg');" type="button" class="btn2 bclick" value="Violation 3" />
	</div>
</body>	
</html>

Open in new window

0
 

Author Comment

by:Charles Baldo
ID: 41881501
Thanks all, learned

like solution with least code.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41881660
You are welcome.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…
Suggested Courses

971 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