CODEWITHSUNDEEP
javascriptphphtmlmysqlajax
Xavi
Xavi

Reputation: 2594

alertbox to show the data from database in html table Format

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:

enter image description here

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>";

Upvotes: 3

Views: 7785

Answers (3)

kmas
kmas

Reputation: 6439

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

Add js and css jqueryui files : 

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/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" );
    }

});
});
});

Upvotes: 0

zurfyx
zurfyx

Reputation: 32767

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.net/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(); 
    });

Upvotes: 0

Taylan Aydinli
Taylan Aydinli

Reputation: 4363

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.

Upvotes: 5

Related Questions