javascript - on redirecting to a previous html page the page should not refresh -
actually have 2 fields in "click.html".one "name" field , other "client_ip" field.i have entered name in "name" field , later on click of "client_ip" text box has redirected index.html.
in index.html i'll select required client_ip's , redirect page again click.html.so selected client_ip fields placed in client_ip text box of click.html page.
now after redirecting click.html,the name had entered in "name" text box vanishing because of page refresh while redirecting.but now,i want redirect click.html without refreshing click.html page.how can achieve ...
my click.html:
<html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/plugins/master/pagination/simple_numbers_no_ellipses.js"></script> <link rel='stylesheet' href='style.css'> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.datatables.min.css"> </head> <body> <div> <label>start time:<select id="start time" id="startid" name="starttime"> <option value="00:00" >00:00</option> <option value="00:30">00:30</option> <option value="01:00">01:00</option> <option value="01:30">01:30</option> <option value="02:00">02:00</option> <option value="02:30">02:30</option> <option vlaue="03:00">03:00</option> </select></label> </div> <div id="clicdiv"> client ip :<input type="text" id="ipclick" onclick="getvalue();" name="client ip" style="width:600px;"/> </div> <script> function getuserip(){ if(!window.location.href.match(/client_ip=.*?([^\&]+)/)) return; var ip = window.location.href.match(/client_ip=.*?([^\&]+)/)[0].replace('client_ip=',''); var res = ip.replace(/%2c/g,",") $("#ipclick").val(res); } getuserip(); function getusername(){ if(!window.location.href.match(/name=.*?([^\&]+)/)) return; var name = window.location.href.match(/name=.*?([^\&]+)/)[0].replace('name=',''); if($("#hiddenname").length) $("#hiddenname").val(name); else $('#textdiv').val(name); } getusername(); function getstarttime(){ if(!window.location.href.match(/starttime=.*?([^\&]+)/)) return; var starttime = window.location.href.match(/starttime=.*?([^\&]+)/)[0].replace('starttime=',''); var res = starttime.replace(/%253a/g,",") if($("#hiddenname5").length) $("#hiddenname5").val(res); else $('#startid').val(res); } getstarttime(); function getvalue(){ var name = $("#textdiv").val()?('?name='+$("#textdiv").val()):''; location.href='/home/divya/html_docs/index.html'+name; } </script> </body> </html> my index.html:
<!doctype html> <meta charset='utf-8'> <html> <head> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript" src="http://cdn.datatables.net/1.10.9/js/jquery.datatables.min.js"></script> <script type="text/javascript" src="https://raw.githubusercontent.com/mpryvkin/plugins/master/pagination/simple_numbers_no_ellipses.js"></script> <link rel='stylesheet' href='style.css'> <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.9/css/jquery.datatables.min.css"> <script> $(document).ready(function() { $("#ip").val(''); $('#example').datatable( { "pagingtype": "full_numbers" } ); } ); </script> </head> <body> <div> <form action="/home/divya/html_docs/click.html" method="get" > client_ip :<input type="text" id ="ip" name="client_ip" style="width: 600px;"/> <div id="subdiv"> <button type="submit" value="submit">submit</button> </div> </div></br> <table id="example" class="display" cellspacing="0" width="100%"> </table> <script> var selectedips = []; var tabulate = function (data,columns) { var svg = d3.select('#ip').append("svg") var table = d3.select('#example') var thead = table.append('thead') var tbody = table.append('tbody') thead.append('tr') .selectall('th') .data(columns) .enter() .append('th') .text(function (d) { return d }) var rows = tbody.selectall('tr') .data(data) .enter() .append('tr') var cells = rows.selectall('td') .data(function(row) { return columns.map(function (column) { return { column: column, value: row[column] } }) }) .enter() .append('td') .text(function (d) { return d.value }) .append("input") .attr("id","change") .attr("type", "checkbox") .style("float","left") .on("change", function(d, i) { if ($(this)[0].checked) { if (selectedips.indexof(d.value) < 0) { selectedips.push(d.value); } } else { if (selectedips.indexof(d.value) > -1) { selectedips.splice(selectedips.indexof(d.value), 1); } } $('#ip').val(selectedips.join(',')); }); return table; } d3.csv('some1.csv',function (data) { var columns = ['client_ip'] tabulate(data,columns) }); </script> </body> </html> can please me out...
update function on click.html
function getvalue(){ var name = $("#textdiv").val()?('?name='+$("#textdiv").val()):''; location.href='/home/divya/html_docs/index.html'+name; } on index.html
put hidden in form element
<input type="hidden" id="hiddenname" name="name" /> put function on common js file or in both index.html , click.html
function getusername(){ if(!window.location.href.match(/name=.*?([^\&]+)/)) return; var name = window.location.href.match(/name=.*?([^\&]+)/)[0].replace('name=',''); if($("#hiddenname").length) $("#hiddenname").val(name); else $('#textdiv').val(name); } getusername();
Comments
Post a Comment