I am trying to show the data from database in a HTML Table and I want to show this html table inside the alert box, now its showing the data in side the alert box but not displaying like html table, Now my alert box is showing like this:

I want to display it in HTML table format.can anyone guide me how to do this,

This is my code:

Ajax

$(document).ready(function() {

    $("#display").dblclick(function() {                

      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "supplierprice/retrieve.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
          alert(response);
        }

    });
});
});

HTML

<td><input type="button" id="display" value="" /></td>

Retrieve.php:

include"config.php";
$result=mysql_query("select * from supplierpricehistory");

echo "<table border='1' >
<tr>
<td align=center> <b>supplier</b></td>
<td align=center><b>country</b></td>
<td align=center><b>networkname</b></td>
<td align=center><b>mcc</b></td></td>
<td align=center><b>mnc</b></td>
<td align=center><b>newprice</b></td>       
<td align=center><b>oldprice</b></td>       
<td align=center><b>status</b></td>     
<td align=center><b>date</b></td>           
<td align=center><b>user</b></td>";

while($data = mysql_fetch_row($result))
{   
    echo "<tr>";
    echo "<td align=center>$data[1]</td>";
    echo "<td align=center>$data[2]</td>";
    echo "<td align=center>$data[3]</td>";
    echo "<td align=center>$data[4]</td>";
    echo "<td align=center>$data[5]</td>";
    echo "<td align=center>$data[6]</td>";
    echo "<td align=center>$data[7]</td>";
    echo "<td align=center>$data[8]</td>";
    echo "<td align=center>$data[9]</td>";
    echo "<td align=center>$data[10]</td>";

    echo "</tr>";
}
echo "</table>";

I am trying to show the data from database in a HTML Table and I want to show this html table inside the alert box, now its showing the data in side the alert box but not displaying like html table, Now my alert box is showing like this:

I want to display it in HTML table format.can anyone guide me how to do this,

This is my code:

Ajax

$(document).ready(function() {

    $("#display").dblclick(function() {                

      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "supplierprice/retrieve.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").html(response); 
          alert(response);
        }

    });
});
});

HTML

<td><input type="button" id="display" value="" /></td>

Retrieve.php:

include"config.php";
$result=mysql_query("select * from supplierpricehistory");

echo "<table border='1' >
<tr>
<td align=center> <b>supplier</b></td>
<td align=center><b>country</b></td>
<td align=center><b>networkname</b></td>
<td align=center><b>mcc</b></td></td>
<td align=center><b>mnc</b></td>
<td align=center><b>newprice</b></td>       
<td align=center><b>oldprice</b></td>       
<td align=center><b>status</b></td>     
<td align=center><b>date</b></td>           
<td align=center><b>user</b></td>";

while($data = mysql_fetch_row($result))
{   
    echo "<tr>";
    echo "<td align=center>$data[1]</td>";
    echo "<td align=center>$data[2]</td>";
    echo "<td align=center>$data[3]</td>";
    echo "<td align=center>$data[4]</td>";
    echo "<td align=center>$data[5]</td>";
    echo "<td align=center>$data[6]</td>";
    echo "<td align=center>$data[7]</td>";
    echo "<td align=center>$data[8]</td>";
    echo "<td align=center>$data[9]</td>";
    echo "<td align=center>$data[10]</td>";

    echo "</tr>";
}
echo "</table>";

• javascript
• php
• html
• mysql
• ajax

Share Improve this question Follow edited Mar 31, 2018 at 8:23 marc_s 756k184184 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Oct 20, 2013 at 10:29 XaviXavi 2,59477 gold badges4343 silver badges5959 bronze badges 2

• If I may ask, why exactly would you want it shown in an alert box? Would this not suit a modal more efficiently and effictively? – Darren Commented Oct 20, 2013 at 10:32
• thanks for your reply this what my client want,to see the instance results... – Xavi Commented Oct 20, 2013 at 10:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You cannot display html content in the alert box of a browser. You need to use a Javascript modal plugin.

Just do a Google search for 'jquery modal plugin' or 'javascript modal window' and you will find a zillion options. Choose the plugin that works best for you.

You can only display text in Javascript alert boxes, not HTML.

You can make HTML containers like div or tables look like alerts though.
Here is an example I made. http://jsfiddle/Ur5Xn/

CSS

 #alert{
    border:1px solid #000;
    display:none;
    position:fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
    height:100px;
    width:200px;
}
.back{
    opacity:0.5;
}

Jquery

    function showAlertBox(){
     $("#alert").css("display","inherit");
     $("#content").addClass("back");
    }
    function removeAlertBox(){
        $("#alert").css("display","none");
         $("#content").removeClass("back");        
    }

    $("#alertClose").click(function(){
       removeAlertBox(); 
    });
    $("#alertShow").click(function(){
       showAlertBox(); 
    });

As you seem to use jQuery, try jQueryui dialogs : http://jqueryui./dialog/

Add js and css jqueryui files :

<script src="http://code.jquery./ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery./ui/1.10.3/themes/smoothness/jquery-ui.css" />

Edit your html :

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

Then add javascript to handle your dialog.

$(document).ready(function() {
 $( "#dialog" ).dialog({autoOpen: false});

$("#display").dblclick(function() {                

  $.ajax({    //create an ajax request to load_page.php
    type: "GET",
    url: "supplierprice/retrieve.php",             
    dataType: "html",   //expect html to be returned                
    success: function(response){                    
        $("#responsecontainer").html(response); 
        $("#dialog").dialog( "open" );
    }

});
});
});