How to create a modal popup message from XSL

Question

I am creating an XSL page where I want to do call a modal popup. Below is part of my XSL file:

   <xsl:if test="(/ShoppingBag/Multibuy/Discount) &gt; 0">
       <tr>
         <td class="sbTotalsColLeft saving">
           DiscountDetails
         </td>
         <td class="sbTotalsColRight">
       </td>
     </tr>
   </xsl:if>

What I want to do is when client clicked on DiscountDetails I want to display a modal popup with below information

   <table class="tbpromotionTypes">
     <xsl:for-each select="/ShoppingBag/MultibuyDiscountedPromotionTypes/PromotionType">
       <tr>
         <td class="ptLeft ">
           <xsl:value-of select ="./PromotionHeading"/>
         </td>
         <td class="ptRight">
           <xsl:value-of select="./DiscountedPrice"/>
         </td>
       </tr>
     </xsl:for-each>
   </table>

kjhughes · Answer 1 · 2013-09-25T19:12:56.323

XSLT has no notion of popups or clicks.

You can use xsl:messsage to log text to the console.

You can transform XML into HTML, including JavaScript as needed, to create a page in which modal dialog boxes and clicks are operable concepts.

For this input sample file:

<?xml version="1.0" encoding="UTF-8"?>
<ShoppingBag>
  <MultibuyDiscountedPromotionTypes>
    <PromotionType>
      <PromotionHeading>Bread</PromotionHeading>
      <DiscountedPrice>$1</DiscountedPrice>
    </PromotionType>
    <PromotionType>
      <PromotionHeading>Eggs</PromotionHeading>
      <DiscountedPrice>$2</DiscountedPrice>
    </PromotionType>
    <PromotionType>
      <PromotionHeading>Milk</PromotionHeading>
      <DiscountedPrice>$2</DiscountedPrice>
    </PromotionType>
  </MultibuyDiscountedPromotionTypes>
</ShoppingBag>

This XSLT script:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
                xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" indent="yes"/>
  <xsl:template match="/">
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>jQuery UI Dialog - Default functionality</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <link rel="stylesheet" href="/resources/demos/style.css" />
        <script>
          $(function() {
            $( "#dialog" ).dialog({autoopen: false});
            $( "#dialog" ).dialog("close");
          });
          $(document).ready(function() {
            $('#discountDetailsId').click(function() {
              $( "#dialog" ).dialog({ modal: true });
            });
          });
        </script>
      </head>
      <body>
        <table>
          <tr>
            <td id="discountDetailsId">DiscountDetails</td>
          </tr>
        </table>
        <div id="dialog" title="Discount Details">
          <table class="tbpromotionTypes">
            <xsl:for-each select="/ShoppingBag/MultibuyDiscountedPromotionTypes/PromotionType">
              <tr>
                <td class="ptLeft ">
                  <xsl:value-of select ="./PromotionHeading"/>
                </td>
                <td class="ptRight">
                  <xsl:value-of select="./DiscountedPrice"/>
                </td>
              </tr>
            </xsl:for-each>
          </table>
        </div>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Produces this HTML file (jsfiddle.net):

<html lang="en">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta charset="utf-8">
      <title>jQuery UI Dialog - Default functionality</title>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="/resources/demos/style.css"><script>
          $(function() {
            $( "#dialog" ).dialog({autoopen: false});
            $( "#dialog" ).dialog("close");
          });
          $(document).ready(function() {
            $('#discountDetailsId').click(function() {
              $( "#dialog" ).dialog({ modal: true });
            });
          });
        </script></head>
   <body>
      <table>
         <tr>
            <td id="discountDetailsId">DiscountDetails</td>
         </tr>
      </table>
      <div id="dialog" title="Discount Details">
         <table class="tbpromotionTypes">
            <tr>
               <td class="ptLeft ">Bread</td>
               <td class="ptRight">$1</td>
            </tr>
            <tr>
               <td class="ptLeft ">Eggs</td>
               <td class="ptRight">$2</td>
            </tr>
            <tr>
               <td class="ptLeft ">Milk</td>
               <td class="ptRight">$2</td>
            </tr>
         </table>
      </div>
   </body>
</html>

Such that when you click on DiscountDetails, as requested, a modal dialog box is displayed.

enter image description here

hello thanks for the detail message really appreciate is but the is instated of referecing to a 3rd part to site can i download this .js file and attached to my script folder? where can i download this files — rushd, Sep 26 '13 at 08:53
You can download the referenced files at the locations given by their URLs: for jquery-1.9.1.js, it is [here](http://code.jquery.com/jquery-1.9.1.js), and so on. See also ["Benefits vs. Pitfalls of hosting jQuery locally"](http://stackoverflow.com/questions/3832446/benefits-vs-pitfalls-of-hosting-jquery-locally) and also ["Loading jQuery from Google or locally if not online"](http://stackoverflow.com/questions/6115132/loading-jquery-from-google-or-locally-if-not-online). — kjhughes, Sep 26 '13 at 10:08
@kjhughes: I am working on the same problem, I tried your code but all I am getting is DiscountDetails but when i click on it nothing happens instead I see Bread, Eggs and Milk on the same page below DiscountDetails. Any thoughts? — Ankit Vora, Dec 30 '15 at 20:23
@ankk: See [***Running XSLT in a Web Browser***](http://stackoverflow.com/a/29942399/290085). — kjhughes, Dec 30 '15 at 20:36

score -1 · Answer 2 · answered Sep 25 '13 at 15:29

-1

Suggestion: use td classes "sbTotalsColLeft" OR "saving" with JQuery to to display a model popup

$(".sbTotalsColLeft").Click(...... modal popup code here ....);

Refer : http://jqueryui.com/dialog/

answered Sep 25 '13 at 15:29

Madurika Welivita

890
1
10
19

2

Madurika Welivita - Perhaps you should give more details. For example, explain that XSL renders xml, text or HTML and they will have render output that 1. Calls the jquery library and 2, the xsl will need to output a jquery method that will create a popup on click.\ – PhillyNJ Sep 25 '13 at 15:44
1

@PhilVallone, you're right, and I've done just that in my answer. – kjhughes Sep 25 '13 at 19:16

How to create a modal popup message from XSL

2 Answers2

Linked