locked
open div in new window on row click RRS feed

  • Question

  • User639567535 posted

    I try to open div in new window on row click . i tried this .. div open in new window but the problem div is display but there is no css reflect on demo bar no  and menu display where as i want to display these with div when div is open in new window

    this is what i tried

    http://jsfiddle.net/8dXvt/1484/

    Wednesday, November 9, 2016 11:26 AM

All replies

  • User283571144 posted

    Hi Bakhtawa,

    i tried this .. div open in new window but the problem div is display but there is no css reflect on demo bar no  and menu display where as i want to display these with div when div is open in new window

    According to your description and codes, I find you use jQuery html method to fill the div's value into new page's html body.

    $(w.document.body).html(html1, html2);

    In my opinion, this will fill just one html, html2 will not fill into the html body.

    I suggest you could use jQuery append method.

    Codes as below:

        $(w.document.body).append(html1);
        $(w.document.body).append(html2);

    Besides, if you use windows.open it will generate a new page.

    In this blank page, you just fill the "#container" and "#sumdata"'s codes into the page body element.

    You don't import any jQuery file and css file, so you will find the css is losing.

    So the demo bar and css codes isn't in the new page.

    You could use F12 to check the new page's codes.

    If you want to show the demo bar and menu item in the new page, you should import them.

    Besides, I suggest you could use jQuery UI dialog method.

    It will open a popup window in the page, and you don't need to import any css file and js file.

    This way is more easily than generating a new page.

    More details, you could refer to follow codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="scripts/jquery-1.10.2.min.js"></script>
         <script src="http://code.highcharts.com/highcharts.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    width: "50%"
                });
                var chart = new Highcharts.Chart({
    
                    chart: {
                        renderTo: 'sumdata',
                        type: 'pie',
                        width: 500,
                        borderWidth: 2,
                        events: {
                            load: function (event) {
                                var total = 0;
                                for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                                    total += this.series[0].yData[i];
                                }
                                var text = this.renderer.text(
                                  'Total: ' + total,
                                  this.plotLeft,
                                  this.plotTop - 20
                              ).attr({
                                  zIndex: 5
                              }).add()
                            }
                        }
                    },
    
                    title: {
                        text: 'demo'
                    },
    
                    credits: {
                        enabled: false
                    },
    
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        y: 30,
                        labelFormat: '{name} ({y})',
                        navigation: {
                            activeColor: '#3E576F',
                            animation: true,
                            arrowSize: 12,
                            inactiveColor: '#CCC',
                            style: {
                                fontWeight: 'bold',
                                color: '#333',
                                fontSize: '12px'
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    series: [{
                        data: (function () {
                            var names = 'grapes,lemon,orange,sugar,tea,pine',
                                              arr = [];
    
                            Highcharts.each(names.split(','), function (name) {
                                arr.push({
                                    name: name,
                                    y: Math.round(Math.random() * 100)
                                });
                            });
    
                            return arr;
                        }()),
                        showInLegend: true
                    }]
    
                });
            });
    
    
    
            $(function () {
                var chart = new Highcharts.Chart({
    
                    chart: {
                        renderTo: 'container',
                        type: 'pie',
                        width: 500,
                        borderWidth: 2,
                        events: {
                            load: function (event) {
                                var total = 0;
                                for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                                    total += this.series[0].yData[i];
                                }
                                var text = this.renderer.text(
                                  'Total: ' + total,
                                  this.plotLeft,
                                  this.plotTop - 20
                              ).attr({
                                  zIndex: 5
                              }).add()
                            }
                        }
                    },
    
                    title: {
                        text: 'demo'
                    },
    
                    credits: {
                        enabled: false
                    },
    
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        y: 30,
                        labelFormat: '{name} ({y})',
                        navigation: {
                            activeColor: '#3E576F',
                            animation: true,
                            arrowSize: 12,
                            inactiveColor: '#CCC',
                            style: {
                                fontWeight: 'bold',
                                color: '#333',
                                fontSize: '12px'
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    series: [{
                        data: (function () {
                            var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
                                'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
                                arr = [];
    
                            Highcharts.each(names.split(','), function (name) {
                                arr.push({
                                    name: name,
                                    y: Math.round(Math.random() * 100)
                                });
                            });
    
                            return arr;
                        }()),
                        showInLegend: true
                    }]
    
                });
            });
    
            //function nWin() {
            //    var w = window.open();
    
            //    var html1 = $("#container").html();
            //    var html2 = $("#sumdata").html();
             
            //    $(w.document.body).append(html1);
            //    $(w.document.body).append(html2);
            //    //$(w.document.body).html(htmll);
            //}
            $(function () {
                $('#tabledata').on('click', 'tr', function () {
                    $("#dialog").dialog('open');
                })
                //  $("a#print").click(nWin);
            });
        </script>
        <style type="text/css">
     .lefttabs
    {
       background-color:#1E1E1E;
        color:White;
        ;
        font-weight:bold;
        font-size:medium;
        margin-top: 12px;
        width: 150px; 
        height: 400px;
        z-index:10;
     
    }
    .lefttabs li
    {
        list-style:none;  
        margin-left: -30px;
     }
     #tabledata
     {
           margin-left: 160px;
     }
     #cont
     {
       margin-left: 160px; 
       background-color:blue;
     }
     #sumdata
     {
       margin-left: 160px;   
     }
     .bar
     {
       background-color:blue;
       color:white;
     }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div class="bar">
    demo
    </div>
    <div class="lefttabs">
        <ul>
        <li>
        <a>DASHBOARD</a> 
        </li>
        <li>
        <a>EVENTS</a>
        </li>
        </ul>
        </div>
    
    
    <table id="tabledata">
    
    <thead>
      <tr>
        <td>
          1
        </td>
         <td>
          2
        </td>
         <td>
          3
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>
        1data
      </td>  
      <td>
        2data
      </td>  
      <td>
       3data 
      </td>  
      </tr>
      <tr>
      <td>
         data1
      </td>  
      <td>
        data2
      </td>  
      <td>
       data3
      </td>  
      </tr>
    </tbody>
    </table>
    
    <div id="dialog">
        <div id="container" style="width: 50px; height: 200px;margin-left: 170px;"></div>  
    <br />
    <div id="sumdata" style="width: 50px; height: 200px;margin-left: 170px;"></div> 
        </div>
    </div>
    
        </form>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

     

    Thursday, November 10, 2016 3:00 AM
  • User639567535 posted

    Hi Bakhtawa,

    Bakhtawar Ashiq

    i tried this .. div open in new window but the problem div is display but there is no css reflect on demo bar no  and menu display where as i want to display these with div when div is open in new window

    According to your description and codes, I find you use jQuery html method to fill the div's value into new page's html body.

    $(w.document.body).html(html1, html2);

    In my opinion, this will fill just one html, html2 will not fill into the html body.

    I suggest you could use jQuery append method.

    Codes as below:

        $(w.document.body).append(html1);
        $(w.document.body).append(html2);

    Besides, if you use windows.open it will generate a new page.

    In this blank page, you just fill the "#container" and "#sumdata"'s codes into the page body element.

    You don't import any jQuery file and css file, so you will find the css is losing.

    So the demo bar and css codes isn't in the new page.

    You could use F12 to check the new page's codes.

    If you want to show the demo bar and menu item in the new page, you should import them.

    Besides, I suggest you could use jQuery UI dialog method.

    It will open a popup window in the page, and you don't need to import any css file and js file.

    This way is more easily than generating a new page.

    More details, you could refer to follow codes:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="scripts/jquery-1.10.2.min.js"></script>
         <script src="http://code.highcharts.com/highcharts.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script>
            $(function () {
                $("#dialog").dialog({
                    autoOpen: false,
                    width: "50%"
                });
                var chart = new Highcharts.Chart({
    
                    chart: {
                        renderTo: 'sumdata',
                        type: 'pie',
                        width: 500,
                        borderWidth: 2,
                        events: {
                            load: function (event) {
                                var total = 0;
                                for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                                    total += this.series[0].yData[i];
                                }
                                var text = this.renderer.text(
                                  'Total: ' + total,
                                  this.plotLeft,
                                  this.plotTop - 20
                              ).attr({
                                  zIndex: 5
                              }).add()
                            }
                        }
                    },
    
                    title: {
                        text: 'demo'
                    },
    
                    credits: {
                        enabled: false
                    },
    
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        y: 30,
                        labelFormat: '{name} ({y})',
                        navigation: {
                            activeColor: '#3E576F',
                            animation: true,
                            arrowSize: 12,
                            inactiveColor: '#CCC',
                            style: {
                                fontWeight: 'bold',
                                color: '#333',
                                fontSize: '12px'
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    series: [{
                        data: (function () {
                            var names = 'grapes,lemon,orange,sugar,tea,pine',
                                              arr = [];
    
                            Highcharts.each(names.split(','), function (name) {
                                arr.push({
                                    name: name,
                                    y: Math.round(Math.random() * 100)
                                });
                            });
    
                            return arr;
                        }()),
                        showInLegend: true
                    }]
    
                });
            });
    
    
    
            $(function () {
                var chart = new Highcharts.Chart({
    
                    chart: {
                        renderTo: 'container',
                        type: 'pie',
                        width: 500,
                        borderWidth: 2,
                        events: {
                            load: function (event) {
                                var total = 0;
                                for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
                                    total += this.series[0].yData[i];
                                }
                                var text = this.renderer.text(
                                  'Total: ' + total,
                                  this.plotLeft,
                                  this.plotTop - 20
                              ).attr({
                                  zIndex: 5
                              }).add()
                            }
                        }
                    },
    
                    title: {
                        text: 'demo'
                    },
    
                    credits: {
                        enabled: false
                    },
    
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        y: 30,
                        labelFormat: '{name} ({y})',
                        navigation: {
                            activeColor: '#3E576F',
                            animation: true,
                            arrowSize: 12,
                            inactiveColor: '#CCC',
                            style: {
                                fontWeight: 'bold',
                                color: '#333',
                                fontSize: '12px'
                            }
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    series: [{
                        data: (function () {
                            var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
                                'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
                                arr = [];
    
                            Highcharts.each(names.split(','), function (name) {
                                arr.push({
                                    name: name,
                                    y: Math.round(Math.random() * 100)
                                });
                            });
    
                            return arr;
                        }()),
                        showInLegend: true
                    }]
    
                });
            });
    
            //function nWin() {
            //    var w = window.open();
    
            //    var html1 = $("#container").html();
            //    var html2 = $("#sumdata").html();
             
            //    $(w.document.body).append(html1);
            //    $(w.document.body).append(html2);
            //    //$(w.document.body).html(htmll);
            //}
            $(function () {
                $('#tabledata').on('click', 'tr', function () {
                    $("#dialog").dialog('open');
                })
                //  $("a#print").click(nWin);
            });
        </script>
        <style type="text/css">
     .lefttabs
    {
       background-color:#1E1E1E;
        color:White;
        ;
        font-weight:bold;
        font-size:medium;
        margin-top: 12px;
        width: 150px; 
        height: 400px;
        z-index:10;
     
    }
    .lefttabs li
    {
        list-style:none;  
        margin-left: -30px;
     }
     #tabledata
     {
           margin-left: 160px;
     }
     #cont
     {
       margin-left: 160px; 
       background-color:blue;
     }
     #sumdata
     {
       margin-left: 160px;   
     }
     .bar
     {
       background-color:blue;
       color:white;
     }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
        <div class="bar">
    demo
    </div>
    <div class="lefttabs">
        <ul>
        <li>
        <a>DASHBOARD</a> 
        </li>
        <li>
        <a>EVENTS</a>
        </li>
        </ul>
        </div>
    
    
    <table id="tabledata">
    
    <thead>
      <tr>
        <td>
          1
        </td>
         <td>
          2
        </td>
         <td>
          3
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>
        1data
      </td>  
      <td>
        2data
      </td>  
      <td>
       3data 
      </td>  
      </tr>
      <tr>
      <td>
         data1
      </td>  
      <td>
        data2
      </td>  
      <td>
       data3
      </td>  
      </tr>
    </tbody>
    </table>
    
    <div id="dialog">
        <div id="container" style="width: 50px; height: 200px;margin-left: 170px;"></div>  
    <br />
    <div id="sumdata" style="width: 50px; height: 200px;margin-left: 170px;"></div> 
        </div>
    </div>
    
        </form>
    </body>
    </html>

    Result:

    Best Regards,

    Brando

     

    thnaku 

    but no  i dont want to display pop up .. i want to show data in new page

    Thursday, November 10, 2016 4:51 AM
  • User283571144 posted

    Hi Bakhtawar,

    but no  i dont want to display pop up .. i want to show data in new page

    Could you please explain more about "demo bar no  and menu display"?

    Which div is demo bar?

    Which div is menu display?

    If you could explain more, it will be more easily for us to find the solution.

    Best Regards,

    Brando

    Thursday, November 10, 2016 5:04 AM
  • User639567535 posted

    Brando ZWZ

    Hi Bakhtawar,

    Bakhtawar Ashiq

    but no  i dont want to display pop up .. i want to show data in new page

    Could you please explain more about "demo bar no  and menu display"?

    Which div is demo bar?

    Which div is menu display?

    If you could explain more, it will be more easily for us to find the solution.

    Best Regards,

    Brando

    Check update fiddle

    http://jsfiddle.net/8dXvt/1506/

    now i display both div on next page when click on tr

    in this demo bar which background color is blue and menu which background color is black want to show also these with charts

    Thursday, November 10, 2016 5:51 AM
  • User283571144 posted

    Hi Bakhtawar,

    now i display both div on next page when click on tr

    in this demo bar which background color is blue and menu which background color is black want to show also these with charts

    According to your description, I suggest you could set the div's style in the html tag's element and use jQuery clone method to copy the html element.

    More details, you could refer to follow codes:

     <script src="http://code.highcharts.com/highcharts.js"></script>
     
    <div style="background-color:blue;color:white;" id="bb">
    demo
    </div>
    <div id="cc" style="background-color:#1E1E1E;color:White;;font-weight:bold;font-size:medium;margin-top: 12px;width: 150px;height: 400px; z-index:10;">
        <ul>
        <li style="list-style-type:none;">
        <a>DASHBOARD</a> 
        </li>
        <li style="list-style-type:none;">
        <a>EVENTS</a>
        </li>
        </ul>
        </div>
    
    
    <table id="tabledata">
    
    <thead>
      <tr>
        <td>
          1
        </td>
         <td>
          2
        </td>
         <td>
          3
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
      <td>
        1data
      </td>  
      <td>
        2data
      </td>  
      <td>
       3data 
      </td>  
      </tr>
      <tr>
      <td>
         data1
      </td>  
      <td>
        data2
      </td>  
      <td>
       data3
      </td>  
      </tr>
    </tbody>
    </table>
    
    
    <div id="container" style="width: 50px; height: 200px;margin-left: 170px;margin-top: 12px;display:none"></div>  
    <br />
    <div id="sumdata" style="width: 50px; height: 200px;margin-left: 170px;margin-top: 12px;display:none"></div> 
    
    
    

    JS:

    $(function () {
        var chart = new Highcharts.Chart({
    
            chart: {
                renderTo: 'sumdata',
                type: 'pie',
                width: 500,
                borderWidth: 2,
                events: {
                load: function(event) {
                  var total = 0;
                    for(var i=0, len=this.series[0].yData.length; i<len; i++){
                        total += this.series[0].yData[i];
                    }
                  var text = this.renderer.text(
                    'Total: ' + total,
                    this.plotLeft,
                    this.plotTop - 20
                ).attr({
                    zIndex: 5
                }).add()
                }
                  }
            },
    
            title: {
                text: 'demo'
            },
    
            credits: {
                enabled: false
            },
    
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                y: 30,
                labelFormat: '{name} ({y})',
                navigation: {
                    activeColor: '#3E576F',
                    animation: true,
                    arrowSize: 12,
                    inactiveColor: '#CCC',
                    style: {
                        fontWeight: 'bold',
                        color: '#333',
                        fontSize: '12px'    
                    }
                }
            },
        tooltip: {
                formatter: function() {
                    return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
                }
            },
            series: [{
                data: (function () {
      var names = 'grapes,lemon,orange,sugar,tea,pine',
                        arr = [];
    
                    Highcharts.each(names.split(','), function (name) {
                        arr.push({
                            name: name,
                            y: Math.round(Math.random() * 100)
                        });
                    });
    
                    return arr;
                }()),
                showInLegend: true
            }]
    
        });
    });
    
    
    
    $(function () {
        var chart = new Highcharts.Chart({
    
            chart: {
                renderTo: 'container',
                type: 'pie',
                width: 500,
                borderWidth: 2,
                events: {
                load: function(event) {
                  var total = 0;
                    for(var i=0, len=this.series[0].yData.length; i<len; i++){
                        total += this.series[0].yData[i];
                    }
                  var text = this.renderer.text(
                    'Total: ' + total,
                    this.plotLeft,
                    this.plotTop - 20
                ).attr({
                    zIndex: 5
                }).add()
                }
                  }
            },
    
            title: {
                text: 'demo'
            },
    
            credits: {
                enabled: false
            },
    
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                y: 30,
                labelFormat: '{name} ({y})',
                navigation: {
                    activeColor: '#3E576F',
                    animation: true,
                    arrowSize: 12,
                    inactiveColor: '#CCC',
                    style: {
                        fontWeight: 'bold',
                        color: '#333',
                        fontSize: '12px'    
                    }
                }
            },
        tooltip: {
                formatter: function() {
                    return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name + '</b><br />Rs.: ' + Highcharts.numberFormat(this.y, 2);
                }
            },
            series: [{
                data: (function () {
                    var names = 'Ari,Bjartur,Bogi,Bragi,Dánjal,Dávur,Eli,Emil,Fróði,Hákun,Hanus,Hjalti,Ísakur,' +
                        'Johan,Jóhan,Julian,Kristian,Leon,Levi,Magnus,Martin,Mattias,Mikkjal,Nóa,Óli,Pauli,Petur,Rói,Sveinur,Teitur',
                        arr = [];
    
                    Highcharts.each(names.split(','), function (name) {
                        arr.push({
                            name: name,
                            y: Math.round(Math.random() * 100)
                        });
                    });
    
                    return arr;
                }()),
                showInLegend: true
            }]
    
        });
    });
    
    function nWin() {
              var w = window.open();
              
    var html3 = $("#bb").clone();
    var html4 = $("#cc").clone();
         var html1 = $("#container").clone();
        var html2 = $("#sumdata").clone();
          html2.css("display","");
          html1.css("display","");
              $(w.document.body).append(html3);
              $(w.document.body).append(html4);
              $(w.document.body).append(html1);
              $(w.document.body).append(html2);
              //$(w.document.body).html(htmll);
          }
          $(function () {
              $('#tabledata').on('click', 'tr',(nWin)) 
            //  $("a#print").click(nWin);
          });
          
          
          
          

    Result:

    http://jsfiddle.net/8dXvt/1507/

    Best Regards,

    Brando

    Thursday, November 10, 2016 4:33 PM