Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #28589 > unrolled thread

Update Java script variables dynamically

Back to article view | Back to comp.lang.javascript

Contents

  Update Java script variables dynamically techie24by7@gmail.com - 2015-09-01 05:44 -0700
    Re: Update Java script variables dynamically "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2015-09-01 16:01 +0200
    Re: Update Java script variables dynamically JJ <jj4public@vfemail.net> - 2015-09-01 22:13 +0700

#28589 — Update Java script variables dynamically

Hello All,

How you doing.

I have a requirement to change SVG drawn image dynamically based on user given inputs from UI screen.  The inputs are rows and columns.  

below is html code
------------------

<!DOCTYPE html>
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Self Organizing Maps</title>

        <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
        <script type="text/javascript" src="http://d3js.org/d3.hexbin.v0.min.js"></script>  
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>


<script>


function handleIt(){

r = document.getElementById('r').value;
c = document.getElementById('c').value;
p = document.getElementById('p').value;

alert(r+''+c+''+p);

MapColumns=c;
MapRows=r;

}


</script>

    </head>
    <body>
<div style="width:100%;"> 
<div id="header">
<h1>Map</h1>
</div>
<div id="nav">

<form action="javascript:handleIt()">
  Row#<br>
  <input type="text" id="r" name="row" value="12" size="4" maxlength="4">
  <br>
  Column#<br>
  <input type="text" id="c" name="column" value="20" size="4" maxlength="4">
  <br>
  Size of Cell<br>
  <input type="text" id="p" name="cell" value="50" size="4" maxlength="4"> px
  <br>
  <input type="**submit**" value="GO">
</form> 
</div>
<div style="float:right; width:90%;">
<div id="chart" style="overflow:auto; "></div>
<script type="text/javascript" src="script.js"></script>
</div>
</div>
    </body>
</html>


In above index.html i have external java script being referred.

<script type="text/javascript" src="script.js"></script>
script.js has below variable.

var MapColumns = 20, MapRows = 12;

upon click of submit button in index.hmtl code, i want capture the values of r,c and update MapColumns, MapRows values in java script (script.js) and reload the page , how can i do that.

[toc] | [next] | [standalone]

#28590

techie24by7@gmail.com wrote on 01 Sep 2015 in comp.lang.javascript:
> In above index.html i have external java script being referred.

Impossible.

There is no "Java script", as "Java" has no script version.

There is "Javascript", and that is not a script version of "Java".

There even is someone who is convinced that there is no "Javascript".

> <script type="text/javascript" src="script.js"></script>
> script.js has below variable.
> 
> var MapColumns = 20, MapRows = 12;
> 
> upon click of submit button in index.hmtl code,

.html, I hope.

> i want capture the values of r,c and update MapColumns, MapRows values 
> in java script (script.js)

What do you wnt to do with it?
 
Change the serverside script.js?

Or enter them as variables in the new page?

> and reload the page , how can i do that.

use a <form> to send the values
and window.location.search to receive the string
and regex to get the values out of the string.

<http://www.w3schools.com/jsref/prop_loc_search.asp> 

That is much easier using serverside coding, btw.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#28592

On Tue, 1 Sep 2015 05:44:31 -0700 (PDT), techie24by7@gmail.com wrote:
> Hello All,
> 
> How you doing.
> 
> I have a requirement to change SVG drawn image dynamically based on user
> given inputs from UI screen.  The inputs are rows and columns.  
> 
> below is html code
> ------------------
> 
> <!DOCTYPE html>
> <html>
>   <head>
>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
>         <title>Self Organizing Maps</title>
> 
>         <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
>         <script type="text/javascript" src="http://d3js.org/d3.hexbin.v0.min.js"></script>  
>         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>
> 
> <script>
> 
> function handleIt(){
> 
> r = document.getElementById('r').value;
> c = document.getElementById('c').value;
> p = document.getElementById('p').value;
> 
> alert(r+''+c+''+p);
> 
> MapColumns=c;
> MapRows=r;
> 
> }
> 
> </script>
> 
>     </head>
>     <body>
> <div style="width:100%;"> 
> <div id="header">
> <h1>Map</h1>
> </div>
> <div id="nav">
> 
> <form action="javascript:handleIt()">
>   Row#<br>
>   <input type="text" id="r" name="row" value="12" size="4" maxlength="4">
>   <br>
>   Column#<br>
>   <input type="text" id="c" name="column" value="20" size="4" maxlength="4">
>   <br>
>   Size of Cell<br>
>   <input type="text" id="p" name="cell" value="50" size="4" maxlength="4"> px
>   <br>
>   <input type="**submit**" value="GO">
> </form> 
> </div>
> <div style="float:right; width:90%;">
> <div id="chart" style="overflow:auto; "></div>
> <script type="text/javascript" src="script.js"></script>
> </div>
> </div>
>     </body>
> </html>
> 
> In above index.html i have external java script being referred.
> 
> <script type="text/javascript" src="script.js"></script>
> script.js has below variable.
> 
> var MapColumns = 20, MapRows = 12;
> 
> upon click of submit button in index.hmtl code, i want capture the values
> of r,c and update MapColumns, MapRows values in java script (script.js)
> and reload the page , how can i do that.

You might want to use local storage to store the form data.

With local storage, the handleIt() function would be like this.

function handleIt() {

  r = document.getElementById('r').value;
  c = document.getElementById('c').value;
  p = document.getElementById('p').value;

  alert(r+''+c+''+p);

  c = parseInt(c.trim()); //or use regex for better string trimming
  r = parseInt(r.trim());

  if ((c > 0) && (r > 0)) {
  //i.e. must be valid positive integer numbers

    localStorage.setItem('MapColumns', c);
    localStorage.setItem('MapRows', r);

    MapColumns = c;
    MapRows = r;

    location.reload();

  } else {

    alert('Invalid map column / row value.');

  }

}

And both map variable declarations in script.js would be like this.

var MapColumns = parseInt(localStorage.getItem("MapColumns")) || 20, 
    MapRows = parseInt(localStorage.getItem("MapRows")) || 12;

If your script has a function to update the SVG view based on new column and
row values, you can call that function instead of reloading the page. This
can save your server bandwidth as well as improve the web application
performance.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web