0

I am trying to retrieve text from a .txt file using jQuery (I am also using Bootstrap). I am very new to web design but I am familiar somewhat with coding. I have the following button in my HTML:

<button type="button" class="btn btn-primary-outline-btn text-btn" data-toggle="modal" data-src="test.txt" data-target="#textModal"><img class="video_icon" src="assets/icons/parchment_icon.png" alt="text"</button>

As you can see, the target of the button is a modal which loads up text like so:

<!-- Text Modal -->
      <div class="modal fade" id="textModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <p id="outputText">File not found.</p>
            </div>
          </div>
        </div>
      </div>

My JS file looks like this (changed following one of the answers):

$(".text-btn").on("click", textFunction);

function textFunction() {
  var el = document.getElementById('test');
  console.log(el.getAttribute('data-src'));
  jQuery.get(el.getAttribute('data-src'), function(data) {
    $( '#outputText' ).html(data.replace('n',''));
  });
}

Whilst the filepath outputs to the console correctly, I am unsure how to use jQuery to utilise this so that it will input the file contents into the modal-body. Additionally, my issue is now how to make the variable assigned through getElementById correctly correspond to the button pressed. Moreover, I am not sure how to use getAttribute or attr in jQuery to obtain the data source in javascript.

This is an issue as I will have multiple buttons with multiple file sources so I would like the jQuery to retrieve from each button's respective data source. Is there a way in which I can do this...?

Dilan
  • 2,610
  • 7
  • 23
  • 33
  • Does this answer your question? [How to get the value of an attribute in Javascript](https://stackoverflow.com/questions/37880165/how-to-get-the-value-of-an-attribute-in-javascript) – Heretic Monkey Aug 27 '20 at 21:55
  • Hi @HereticMonkey. Thank you for your reply but I think not as it appears the values passed in are strings and I am hoping to retrieve data from a text file. I may be incorrect but I was led to believe this entails a slightly different process? –  Aug 27 '20 at 22:10
  • You're looking to get the value of `data-src` attribute into the URL argument of the `jQuery.get` call, right? The linked question's answers describe how to get the value of the `data-src` attribute, just as both of the current answers do. – Heretic Monkey Aug 28 '20 at 00:39
  • Hi @HereticMonkey. Perhaps I misunderstood. Just to be clear, is the value of ```data-src``` when put into jQuery.get equivalent to ```jQuery.get('test.txt' ... );```? I am trying to get the text from test.txt into the ```modal-body```. With respect to the current answers you refer to, do you mean the ones below? Unfortunately I keep pulling the entire page source instead of just the data-src value. I will attempt again with this change and report back. –  Aug 28 '20 at 01:21
  • Hi @HereticMonkey. Thanks so much. You were correct. It logs the file path to the console when I have ```console.log(el.getAttribute('data-src'))```. For the jQuery.get, I am not sure how to formulate this as ```jQuery.get($(el.getAttribute('data-src')) ... );``` does not work. Apologies for the questions. –  Aug 28 '20 at 01:44
  • Hi @HereticMonkey. My apologies for the triple post. I have now amended the OP to reflect changes but unfortunately still a little ways off from the answer although it does successfully output the console. I think it's a syntax issue, owing to my lack of knowledge with respect to jQuery. Thank you for your help on this. –  Aug 28 '20 at 02:09

2 Answers2

0

For the case of multiple buttons, you can use an onclick event on each, which will fire textFunction. Then, inside the text function, you can retrieve the correct button's data-src using jQuery's data() function:

//assuming all your relevant buttons have class `text-btn`
//call textFunction on button click
$(".text-btn").on("click", textFunction);

function textFunction() {
  //inside event handler, `this` points to the button that triggered the event
  jQuery.get($(this).data('src'), function(data) {
    alert(data);
    $( '#outputText' ).html(data.replace('n',''));
  });
}
Anis R.
  • 6,656
  • 2
  • 15
  • 37
  • Hi @Anis R. I attempted this but I seem to be getting the entire source code for the webpage here. I tried both removing and including the call to the function in ```$document.ready``` but to no avail, unfortunately. –  Aug 27 '20 at 21:35
0

You have to set the full file url in data-src then use:

$('.text-btn').on('click', function() {
    $.get($(this).data('src'), function(data) {
        $('#outputText').html(data);
    });
});
Ibrahim El Hajj
  • 26
  • 3
  • Hi @Ibrahim El Hajj. Thank you for your reply. I have this set currently as test.txt is in the same directory as index.html. Would I still need to make it explicit? –  Aug 27 '20 at 22:07
  • Hi @jsaider, this will work for you but we use the full url to avoid any broken ones cause I usually use frameworks and url will be relative to the route – Ibrahim El Hajj Aug 28 '20 at 05:46
  • Hi @Ibrahim El Hajj. I attempted with the full URL and I got a CORS issue (I am running the site via Github pages currently). I then removed the URL and simply used the filepath but this also did not work and gave me a 404 error. –  Aug 28 '20 at 12:24
  • 1
    Hi @Ibrahim El Hajj. My apologies. I made some changes (so as the file is the same directory, I simply point to the filename itself) and it works. Thank you so much. I will mark this as the answer. –  Aug 28 '20 at 12:38