Pass the right ID number from a button with jQuery

Question

I am trying to get the right id number once this button on the page gets clicked, I stuck here getting the right id number to be passed properly.

I have a test code that shows what I am trying to do:

   <?xml version="1.0" encoding="utf-8"?>
   <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   <style type="text/css">

   .w3_myapp_btn_small {
       font-size: 12px;
       background-size: 16px;
       background-position: 5px 2px;
       padding: 3px 6px 3px 17px; /*25*/
   }

   a.myapp { color: #fff;}

   #range-logo {
       background-image:url('icon.png');
       display:block;
       height:15px;
       overflow:hidden;
       text-indent:100%;
       white-space:nowrap;
       width:5px;
   }

   </style>
   <script type="text/javascript">

   $(document).ready(function() {

   var isMobile = {
       Android: function() {
           return navigator.userAgent.match(/Android/i);
       },
       BlackBerry: function() {
           return navigator.userAgent.match(/BlackBerry/i);
       },
       iOS: function() {
           return navigator.userAgent.match(/iPhone|iPad|iPod/i);
       },
       Opera: function() {
           return navigator.userAgent.match(/Opera Mini/i);
       },
       Windows: function() {
           return navigator.userAgent.match(/IEMobile/i);
       },
       any: function() {
           return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
       }
   };

    $(document).on("click", '.myapp', function() {

           if( isMobile.any() ) {

        //var text = $(this).attr("data-text");
               var url = $(this).attr("data-link");

        // The right ID  number in here 
        var $wbox = $('#box_').text();

        var message = encodeURIComponent($wbox) + " - " + encodeURIComponent(url);

               var myapp_url = "myapp://send?text=" + message;
               window.location.href = myapp_url;

    } else {

               alert("mobile devices only");
           }

       });
   });
   </script>

   </head>
   <body bgcolor="#1A1A1A">
   <br><br>
   <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;"  id="box_1"> 12 meter </p></center>
   <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>

   <br><br><br>

   <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;"  id="box_2"> 13 yard </p></center>
   <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>

   <br><br><br>

   <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;"  id="box_3"> 14 lbs </p></center>
   <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>

   <br><br><br>

   </body>
   </html>

Please read this [MCVE] - particularly the *minimal* part - you've included a ton of irrelevant browser sniffing code and irrelevant styles. — freedomn-m, Jul 15 '16 at 15:42
You might find this useful: http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — freedomn-m, Jul 15 '16 at 15:42
`` is deprecated, so is `bgcolor` as attribute. And `$('#box_')` is not an element you have in your HTML. — putvande, Jul 15 '16 at 18:04

score 0 · Answer 1 · answered Jul 15 '16 at 15:40

Wrap all items in divs e.g.

<div class="myappLink">
    <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;" id="box_1"> 12 meter </p></center>
    <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>
</div>

Add following line to get the id

var $id = $(this).parents(".myappLink").find("p:first").attr("id");

Here is full code

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE HTML PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        .w3_myapp_btn_small {
            font-size: 12px;
            background-size: 16px;
            background-position: 5px 2px;
            padding: 3px 6px 3px 17px; /*25*/
        }

        a.myapp {
            color: #fff;
        }

        #range-logo {
            background-image: url('icon.png');
            display: block;
            height: 15px;
            overflow: hidden;
            text-indent: 100%;
            white-space: nowrap;
            width: 5px;
        }
    </style>
    <script type="text/javascript">

        $(document).ready(function () {

            var isMobile = {
                Android: function () {
                    return navigator.userAgent.match(/Android/i);
                },
                BlackBerry: function () {
                    return navigator.userAgent.match(/BlackBerry/i);
                },
                iOS: function () {
                    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
                },
                Opera: function () {
                    return navigator.userAgent.match(/Opera Mini/i);
                },
                Windows: function () {
                    return navigator.userAgent.match(/IEMobile/i);
                },
                any: function () {
                    return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
                }
            };

            $(document).on("click", '.myapp', function () {

                if (isMobile.any()) {

                    //var text = $(this).attr("data-text");
                    var url = $(this).attr("data-link");

                    // The right ID  number in here
                    //var $wbox = $('#box_').text();

                    var $id = $(this).parents(".myappLink").find("p:first").attr("id");

                    var $wbox = $('#' + $id).text();

                    var message = encodeURIComponent($wbox) + " - " + encodeURIComponent(url);

                    var myapp_url = "myapp://send?text=" + message;
                    window.location.href = myapp_url;

                } else {

                    alert("mobile devices only");
                }

            });
        });
    </script>

</head>
<body bgcolor="#1A1A1A">
    <br><br>
    <div class="myappLink">
        <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;" id="box_1"> 12 meter </p></center>
        <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>
    </div>
    <br><br><br>
    <div class="myappLink">
        <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;" id="box_2"> 13 yard </p></center>
        <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>
    </div>
    <br><br><br>
    <div class="myappLink">
        <center><p style="color:#ffffff;font-weight:normal;font-size: 12px;" id="box_3"> 14 lbs </p></center>
        <center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>
    </div>
    <br><br><br>

</body>
</html>

I have one more issue, this part sits in a different "div":
. — Andre, Jul 15 '16 at 18:03
What you need to do is to wrap both link and the P tag in one div and then you can get id using var $id = $(this).parents(".myappLink").find("p:first").attr("id"); Does it not work if you wrap it like

14 lbs

. — Jawad Umar, Jul 15 '16 at 20:57

score 0 · Answer 2 · answered Jul 15 '16 at 15:41

I'll assume you're trying to get the id of the closest box (because the id of all the a anchors is the same).

<center><p style="color:#ffffff;font-weight:normal;font-size: 12px;"  id="box_3"> 14 lbs </p></center>
<center><p><a data-text="Welcome" data-link="http://www.test.com" class="myapp app_btn_small" id="range-logo">.</a></p></center>

You get the anchor ($(this)), go up to the center then .prev (previous sibling), then down to the p.

var id = $(this).closest("center").prev().find("p").prop("id");   
// eg "box_3"

This will only work if you don't change the html structure.

Pass the right ID number from a button with jQuery

2 Answers2