javascript jquery html google-diff-match-patch

I am unable to compare two text files using library from Google, called diff_match_patch

I am trying to compare the two text files using library from Google, called diff_match_patch in HTML and Javascript. But I am unable to get the difference between two text files. I am using the following code to compare the text.

<!DOCTYPE html>
<html>
  <head>
    <title>Slide Panel</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="jquery.min.js" type="text/javascript"> </script>
    <script src="diff_match_patch.js" type="text/javascript"> </script>
    <script src="deal_override_requests.min.js" type="text/javascript"> </script>
    <script src="jquery.pretty-text-diff.min.js" type="text/javascript"> </script>
    <script src="jquery.pretty-text-diff.js" type="text/javascript"> </script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
    <script>
      $("input[type=button]").click(function () {
        $("#wrapper tr").prettyTextDiff({
          cleanup: $("#cleanup").is(":checked")
        });
      });
    </script>
  </head>
  <body>
    <div id="wrapper">
      <h3>
        Demo of jQuery.PrettyTextDiff
      </h3>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th>Original</th>
            <th>Changed</th>
            <th>Diff</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="original">This si text 1</td>
            <td class="changed">This is text one</td>
            <td class="diff"></td>
          </tr>
          <tr>
            <td class="original">Today is Jan the 24th, 2013</td>
            <td class="changed">Today is January the 25th of the year 2013</td>
            <td class="diff"></td>
          </tr>
          <tr>
            <td class="original">A mouse is here</td>
            <td class="changed">A sofa is here</td>
            <td class="diff"></td>
          </tr>
        </tbody>
      </table>
      <div>
        <input type='button' class='btn btn-primary' value='Diff' />
      </div>
    </div>
  </body>
</html>

Please help me in resolving this issue.

Solution

You have some of problem in your code such as multiple jquery references, multiple pretty-text-diff references etc.

Here is a fixed and working snippet:

$("input[type=button]").click(function () {
  $("#wrapper tr").prettyTextDiff({
    cleanup: $("#cleanup").is(":checked")
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js" type="text/javascript"> </script>
<script src="https://cdn.rawgit.com/arnab/jQuery.PrettyTextDiff/4b0f134e7209659d2fcc84af3118f554e926d801/jquery.pretty-text-diff.min.js" type="text/javascript"> </script>
<div id="wrapper">
  <h3>
    Demo of jQuery.PrettyTextDiff
  </h3>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>Original</th>
        <th>Changed</th>
        <th>Diff</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="original">This si text 1</td>
        <td class="changed">This is text one</td>
        <td class="diff"></td>
      </tr>
      <tr>
        <td class="original">Today is Jan the 24th, 2013</td>
        <td class="changed">Today is January the 25th of the year 2013</td>
        <td class="diff"></td>
      </tr>
      <tr>
        <td class="original">A mouse is here</td>
        <td class="changed">A sofa is here</td>
        <td class="diff"></td>
      </tr>
    </tbody>
  </table>
  <div>
    <input type='button' class='btn btn-primary' value='Diff' />
</div>

http://jsbin.com/kanami/edit?html