jquery - Why Raphael js Graph doesn't work using .html() -
i have problem code. code display table not graph some.php located in folder named bin , js located in folder have no idea why doesn't work when try directly @ some.php graph shown when click button on index.php no graph shows, tried put bin/js/the js link results problem can no longer click button 2 can give me idea why happening? or can give me example work on
the index.php
<!doctype html> <html> <head> <style> p { color:red; margin:4px; } b { color:blue; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="action-button"> <button id="1" value="1074">button 1</button> <button id="2" value="1074">button 2</button> </div> <div id="output"></div> <script> $("button").click(function () { var attr = $(this).attr("id"); var val = $(this).val(); $.ajax({ type: "post", url: "bin/some.php", data: { lookbookid: attr, type: val } }).done(function( html ) { $("#output").html(attr + ' - ' + val + ' - ' + html); }); }); </script> </body> </html> the some.php
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>raphaĆ«l · analytics</title> <link rel="stylesheet" href="demo.css" type="text/css" media="screen"> <link rel="stylesheet" href="demo-print.css" type="text/css" media="print"> <script src="js/raphael.js"></script> <script src="js/popup.js"></script> <script src="js/jquery.js"></script> <script src="js/analytics.js"></script> </head> <body> <?php echo "lookbookid: ".$_post['lookbookid']." - "; echo " type: ".$_post['type'] ?> <table id="data"> <tfoot> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> <th>6</th> <th>7</th> <th>8</th> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> <th>14</th> <th>15</th> <th>16</th> <th>17</th> <th>18</th> <th>19</th> <th>19</th> <th>20</th> <th>22</th> <th>23</th> <th>24</th> <th>25</th> <th>26</th> <th>27</th> <th>28</th> <th>29</th> <th>30</th> <th>31</th> </tr> </tfoot> <tbody> <tr> <td>8</td> <td>25</td> <td>27</td> <td>25</td> <td>54</td> <td>59</td> <td>79</td> <td>47</td> <td>27</td> <td>44</td> <td>44</td> <td>51</td> <td>56</td> <td>83</td> <td>12</td> <td>91</td> <td>52</td> <td>12</td> <td>40</td> <td>8</td> <td>60</td> <td>29</td> <td>7</td> <td>33</td> <td>56</td> <td>25</td> <td>1</td> <td>78</td> <td>70</td> <td>68</td> <td>2</td> </tr> </tbody> </table> <div id="holder"></div> </body> </html>
there 2 problems approach
- the ajax request retrieves entire document, , attempting inject in page. shouldn't that.
- the jquery .html method strips of javascript tags out safety, no js execute.
you can test theory trying use
$("#output")[0].innerhtml = attr + ' - ' + val + ' - ' + html which may work in browsers, noted already, not valid. since full document try using iframe, or modify php return snippet of html instead of full document.
Comments
Post a Comment