How can I use in javascript an object stored in my server?

Question

I would like to declare in javascript two object stored in a file.txt and use it in a code.

For example I wrote this in my index.php:

 var counter = Number(localStorage.getItem('rans')) || 0;
 var counter1 = Number(localStorage.getItem('bans')) || 0;

$('.redanswer').one('click', function(){
     localStorage.setItem('rans', ++counter);
     $( '.rtotal' ).text( counter + " concordano" );
     $( '.btotal' ).text( counter1+ " non concordano");
     $('.rgraphic').css("height", counter * 100 / (counter1+counter));
     $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});

$('.blueanswer').one('click', function(){
      localStorage.setItem('bans', ++counter1);
      $( '.btotal' ).text( counter1 + " concordano" );
      $( '.rtotal' ).text( counter + " non concordano");
      $('.rgraphic').css("height", counter * 100 / (counter1+counter));
      $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});

As you can see, in this example, the items bans and rans are stored in the localStorage and I used those items for the counters. I would like to write exactly the same code but with the new bans and rans stored in my file.txt. I think this had to be done with AJAX but I don't know.

I think the file.txt has to be wrote like this:

bans: 1; //casual number
rans: 5;  //casual number

I hope you understand, Thank you very much.

It can be done with AJAX, which I think means you need to read a book or find some tutorials — RiggsFolly
– RiggsFolly, Commented Feb 5, 2016 at 15:48
I can't found nothing on youtube, and I can't understand how to insert the code I need in my code. — Niccolò Guidi
– Niccolò Guidi, Commented Feb 5, 2016 at 15:50
YouTube is not the only resource out there, but GOOGLE will find almost anything if you try it — RiggsFolly
– RiggsFolly, Commented Feb 5, 2016 at 15:56

RiggsFolly · Accepted Answer · 2016-02-05 15:54:17Z

1

It could be done with ajax but it can also be done without

index.php

<?php
    // read your file.txt
    // strip off the comments
    // get the value part of bans: 1 into a variable $bans
    // get the value part of rans: 5 into a variable $rans

// for testing
$bans = 1;
$rans = 5;

echo '<script>';
echo "var master_bans = $bans;";
echo "var master_rans = $rans;";
?>

var counter = Number(localStorage.getItem('rans')) || master_bans ;
var counter1 = Number(localStorage.getItem('bans')) || master_rans;

$('.redanswer').one('click', function(){
     localStorage.setItem('rans', ++counter);
     $( '.rtotal' ).text( counter + " concordano" );
     $( '.btotal' ).text( counter1+ " non concordano");
     $('.rgraphic').css("height", counter * 100 / (counter1+counter));
     $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});

$('.blueanswer').one('click', function(){
      localStorage.setItem('bans', ++counter1);
      $( '.btotal' ).text( counter1 + " concordano" );
      $( '.rtotal' ).text( counter + " non concordano");
      $('.rgraphic').css("height", counter * 100 / (counter1+counter));
      $('.bgraphic').css("height", counter1 * 100 / (counter1+counter) );
});
</script>

answered Feb 5, 2016 at 15:54

RiggsFolly

94.7k22 gold badges108 silver badges152 bronze badges

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

1 Comment

Yogi Over a year ago

@NiccolòGuidi - This is a good answer. Just remove the localStorage calls if you don't want them and it will still work, e.g., var counter = master_bans;

Yogi · Accepted Answer · 2016-02-05 16:38:48Z

1

RiggsFolly's solution, which does the work on the server side, seems the best approach. (up voted)

However, another alternative is to simply load the file using a script tag as shown below.

The content of file.txt is:

var config={"rans":10,"bans":20};

Page:

<html>
<head>
    <script type="text/javascript" src="file.txt"></script>
</head>
<body>
<script type="text/javascript">

     var counter =  config.rans;
     var counter1 = config.bans;
     alert( 'counter: ' + counter + ', counter1: ' + counter1 );

     // the rest of your code here

</script>
</body>
</html>

The values in file.txt could be modified using an editor, PHP function, or some javascript like so:

  // write file.txt
  var xhr = new XMLHttpRequest();
  xhr.open('PUT','file.txt', true);
  xhr.setRequestHeader('Content-Type','text/javascript; charset=utf-8');
  xhr.send( 'var config={"rans":' + counter + ',"bans":' + counter1 + '};' );

edited Feb 5, 2016 at 16:38

answered Feb 5, 2016 at 16:32

Yogi

7,4943 gold badges34 silver badges42 bronze badges

2 Comments

Niccolò Guidi Over a year ago

How can I edit permanently the file.txt? I want to replace the text in file.txt with 'var config={"rans":' + ++counter + ',"bans":' + ++counter1 + '};'

Yogi Over a year ago

@NiccolòGuidi - From your example, it appears you want to increment and store the new values to the file. Correct? Then what event and conditions should cause the update? If you can provide more information then I will provide a suggestion and example.

Shaazaam · Accepted Answer · 2016-02-05 17:12:46Z

0

You are correct, you will need to use AJAX to get that data out.

$.ajax({
  type: 'GET',
  url: 'file.txt',
  dataType: 'json',
  success: function(data) {
    if (data.result === 'error') {
      //show an error message
    return false;
    } else {
     console.log(data);
     bans = data.bans;
     rans = data.rans;
    }
  }
});

This is typical AJAX code I use. If you can store whatever data is in file.txt as an array in PHP it might be easier to work with. So for example your file.php that you're calling to from AJAX could looks like this:

<?php
$bans = array(); //your bans data here
$rans = array(); //your rans data here

try {
  echo json_encode(array('result' => 'success', data => array('bans' => $bans, 'rans' => $rans)));
} catch (Exception $e) {
    echo json_encode(array('result' => 'error', 'message' => $e->getMessage()));
    exit();
}

This may not be the best for your set-up, but I hope the information helps you.

edited Feb 5, 2016 at 17:12

answered Feb 5, 2016 at 15:53

Shaazaam

1021 silver badge11 bronze badges

2 Comments

Yogi Over a year ago

Is it still considered Ajax when async = false ?

Shaazaam Over a year ago

@Roberto: Good question. That snippet was from an older piece of code I had sitting around. Setting async to false is a deprecated method. @NiccolòGuidi: Put that $.ajax section under something like $('.blueanswer, .redanswer').on('click, function() { //ajax here })

Collectives™ on Stack Overflow

How can I use in javascript an object stored in my server?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related