How to fetch data from file using ajax on clicking table rows

Question

I am trying to fetch the data from files using Ajax by clicking row of table (passing row values to button on clicking rows) or by entering the variables in text box and pressing button. But it does not seem to be working.(Pls don't downvote as i am C++ programmer and learning web development.)

<!DOCTYPE html>
<html>
<body> 
 <script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">         </script>

  <table bodrder=1 class='list'>
  <thead>
     <tr>
            <th class='A'>ID</th>
            <th class='B'>Value</th>
            <th class='C'>Name</th>
            <th class='D'>Cell #</th>
            <th class='E'>Nickname</th>
        </tr>
     </thead>
     <tbody>
        <tr>
            <td>2</td>
            <td>54235</td>
            <td>Benjamin Lloyd</td>
            <td>(801) 123-456</td>
            <td>Ben</td>
        </tr>
       <tr>
            <td>2</td>
            <td>44235</td>
            <td>XXXXXX</td>
            <td>642363673</td>
            <td>TRE</td>
        </tr>
    </tbody>
</table>

<div id="tabs" class="plots-tabs" style="padding-top: 10px; padding-bottom: 10px">
<table>
  <tr><td>ID:<input id="id" type="text" class="inputbox" /></td></tr>
  <tr><td>Value:<input id="value" type="text" class="inputbox" /></td></tr>
</table>

This is DIV element which will be filled by div element on clicking button or by clicking table row which also generate the event and click the button by passing values to ajax and fetchign data.
<p style="width: 100%; text-align: right;"><button type="button" id="button">Submit</button></p>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
            //here ID and value are parsed through table click event or from text box on clicking button     
     $.ajax({
             url:filename,
             data: {         
                       ID: $("input#id").val(),
                       Value: $("input#value").val()
             },
             success:function(result){
             $("#tabs").html(result);
    }});
     var filename= "Data_"+ID+"_"+Value+".txt"; 
      $("#tabs").load(filename);
  });
});

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < 2; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(data);
};
</script>
</body>
</html>

cat Data_2_54235.txt

Nice Work! Your code is working with first file.

cat Data_2_44235.txt

Nice Work! Your code is working with second file.

how can i implement the above code.

where is your control with ID : "div1" ? Then only your result will populate onSucess function — Rigin
– Rigin, Commented Jan 28, 2015 at 15:44
I edited my question there is no div1, here div name is tabs. — Manish
– Manish, Commented Jan 28, 2015 at 15:48

ali404 · Accepted Answer · 2015-01-28 21:16:09Z

4

I see you generate a filename based on input values. That means that the ajax call will be made upon that filename, which is odd, becouse you have to create a file with that name.

Anyway, i don't see nowhere in your code that by clicking table rows you make an ajax call, you only save the innerHTML text to a variable data = [] and then alert it. But the problem is not here (if you don't expect to make ajax call when clicking table-rows), but it is inside the ajax call you are making when clicking the button.

first

url:filename
var filename= "Data_"+ID+"_"+Value+".txt";

I strongly suggest you don't do that. It will work if you make an ajax call to a php script which creates that txt file with filename name, and then make another ajax call to that file and fetch it.

second

data: {         
  ID: $("input#id").val(),
  Value: $("input#value").val()
}

look here at data, the doc explains it. the code above means that to filename it will pass parameters (GET parameters, i.e. x?=...), but becouse your file is .txt, this doesn't make sense.

third

$("#tabs").load("demo_test.txt");

This will add the text inside demo_test.txt to $("#tabs") , like innerHTML does or .html() does. Do you have demo_test.txt on your host? i suppose this should work.

just change you ajax call and load call with this. this should work :

$("button").click(function() {
    $.ajax({
        url : "demo_test.txt",
        dataType: "text",
        success : function (data) {
            $("#tabs").html(data);
        }
    });
});

For clicking the table-rows, just add an event listener to table-rows, and make an ajax call. read the link i send you, as they are important to understand better what is ajax.

You can see no unnecessary data parameter is thrown to ajax call, and i put there an dataType, meaning that we expect text data to be recieved. If this doesn't work, you have to be sure that you are working on localhost server(for ajax to work...) and you have demo_test.txt , and the url is passed correctly

example using input values to fetch from ajax:

$("button").click(function() {
  var id = $("input#id").val();
    var value =  $("input#value").val();
  $.ajax({
    url : "Data_" + id + "_" + value + ".txt",
    dataType: "text",
    success : function (data) {
        $("#tabs").html(data);
     },
     error: function (data) {
        #("#tabs").html('No such file found on server');
     }
    });
});

example of event handler click <tr>

$("table tbody").on("click", "tr", function() {
  var id = $(this).find("td")[0].text(); // gets the first td of the clicked tr (this is the ID i suppose)
    var value =  $(this).find("td")[1].text(); // gets the second td of the clicked tr (this is the VALUE i suppose)
  $.ajax({
    url : "Data_" + id + "_" + value + ".txt",
    dataType: "text",
    success : function (data) {
        $("#tabs").html(data);
     },
     error: function (data) {
        #("#tabs").html('No such file found on server');
     }
    });
});

edited Jan 28, 2015 at 21:16

answered Jan 28, 2015 at 15:58

ali404

1,1537 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Manish Over a year ago

I need to fetch files based on parameters and assign content to div element either by row click of table or by submitting input box data.

ali404 Over a year ago

what will you do with the parameters? submitting the form on table-row click is simple now, if you already know how to do on button click.

Manish Over a year ago

Based on parameter I will chose the file for fetching data.

ali404 Over a year ago

i know this, but the parameters will be dinamically made, text input can be anything, how do you know if you have that exact file?

Manish Over a year ago

I already have exact files in folder. Actually I have 249 million files in one folder and I need to pick just one only based on parameter submitted.

|

Collectives™ on Stack Overflow

How to fetch data from file using ajax on clicking table rows

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related