CODEWITHSUNDEEP
ajaxd3.js
ngungo
ngungo

Reputation: 5322

d3.xhr example or AJAX d3's way

I've been looking for an example of updating data with d3.xhr but have not seen anything obvious, or at least of my level of understanding. The following 2 links are close but no cigar:

  1. from stackoverflow
  2. from mbostock’s block

I look around more and found this example in jquery and php. I tried it and understand the code. I would appreciate if you give me an equivalent code in d3.xhr or d3.json. BTW, what is different between d3.xhr and d3.json, and when to use what? Thanks in advance.

<?php
// AJAX & PHP example
// http://iviewsource.com/codingtutorials/learning-how-to-use-jquery-ajax-with-php-video-tutorial/
    if ($_GET['ip']) {
        $ip = gethostbyname($_GET['ip']);
        echo($ip);
        exit;
   }  
?>


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Get Reverse IP</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
        </script>
    </head>
    <body>
        Please enter a domain name
        <input type="text" id="searchip">
        <div id="resultip"></div>
        <script>
            $(document).ready(function() {
                $('#searchip').change(function(){
                    $.ajax({
                        type: "GET",
                        url: "ajax.php",
                        data: 'ip=' + $('#searchip').val(),
                        success: function(msg){
                            $('#resultip').html(msg);
                        }
                    }); // Ajax Call
                }); //event handler
            }); //document.ready
        </script>
    </body>
</html>

Upvotes: 1

Views: 2633

Answers (1)

ngungo
ngungo

Reputation: 5322

I found the solution. In fact it has less coding, :) I sincerely hope that the answer would be useful to someone.

<?php
// AJAX & PHP example
    if ($_GET['ip']) {
        $ip = gethostbyname($_GET['ip']);
        echo($ip);
        exit;
   }  
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Get Reverse IP</title>
        <script src="http://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        Please enter a domain name
        <input type="text" id="searchip">
        <div id="resultip"></div>
        <script>
            d3.select('#searchip').on("change", function() {
                d3.xhr('xhr.php?ip='+this.value, function(data) {
                    d3.select('#resultip').html(data.response);
                })
            });
        </script>
    </body>
</html>

Upvotes: 1

Related Questions