Solved

jQuery one function to process 3 clicks

Posted on 2016-11-08
7
61 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
[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
  • 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 57

Accepted Solution

by:
Julian Hansen earned 250 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 250 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
LVL 57

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 57

Expert Comment

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

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
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)

728 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