I had url which looks like http://localhost/dashboard/index.php?id=1 so that i would pass the value in url as per use and switch the dashboard accordingly. All i wanted is url should be visible like http://localhost/dashboard/index.php or even http://localhost/dashboard/index.php/1. I want to hide or replace a url string(for visibility) and not to redirect which i tried using htaccess. can we do that using JavaScript??
You can push state in browser history javascript. This will change your current page's url without redirecting to new url. Try below code in page load event.
history.pushState("", "", "1");
You can use AJAX to get your data from the php file and display the content on your browser.
This will avoid redirection and also the url will remain clean.
Haven't tried it but here's what you can do:
<!DOCTYPE html>
<html>
<body>
<p><span id="dashboardView"></span></p>
<span class="btn" val="1" onclick="showDashboard(this)">Dashboard 1</span>
<script>
function showDashboard(elem) {
var xhttp;
var val = elem.getAttribute("val");
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("dashboardView").innerHTML = this.responseText;
}
};
xhttp.open("GET", "dashboard/index.php?id="+val, true);
xhttp.send();
}
</script>
</body>
</html>
var urlStr = 'http://localhost/dashboard/index.php?id=1';
var nextURL = urlStr.replace("?", "");
alert(nextURL);
Related
I have an index which shows a list of orders, each of which calls a function (named dynamically with PHP when I brought the data from the db), to simplify I've reduced the function that each div contains to just an alert. But also every minute an ajax function executes that searches for new orders and appends them on top, with the exact same code as the ones initially loaded. The jQuery works perfectly in the elements that are loaded initially but doesn't work at all in the elements generated dynamically.
This is the index with one initial order inside, BEFORE newOrders runs for the first time. The alert on that order functions properly
<div id="content">
<div id="pedido_4126" class="pedido">
<h4>Pedido 4126</h4>
<button id="btn4126">Alert</button>
<script>
alert("Pedido 4126");
</script>
</div>
</div>
<script>
function newOrders() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "simplereq.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
console.log(response);
var element = document.querySelector('#content');
var content = element.innerHTML;
ultimoid = response.ultimoid;
element.innerHTML = response.contenido + content;
}
};
xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
}
setInterval(newOrders, 60000);
</script>
And this is the index when the function has executed once and appended a new order on top with it's corresponding script, dynamically generated and received from the AJAX call:
<div id="content">
<div id="pedido_4255" class="pedido">
<h4>Pedido 4255</h4>
<button id="btn4255">Alert</button>
<script>
alert("Pedido 4255");
</script>
</div>
<div id="pedido_4126" class="pedido">
<h4>Pedido 4126</h4>
<button id="btn4126">Alert</button>
<script>
alert("Pedido 4126");
</script>
</div>
</div>
<script>
function newOrders() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "simplereq.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
console.log(response);
var element = document.querySelector('#content');
var content = element.innerHTML;
ultimoid = response.ultimoid;
element.innerHTML = response.contenido + content;
}
};
xhttp.send("ultimoid="+encodeURIComponent(ultimoid));
}
setInterval(newOrders, 60000);
</script>
As you can see, the html and script are exactly the same, but the one on the new order brought by the ajax call, doesn't work.
Ok, so doing more research I came upon the best answer for my case, I'll leave it here in case it helps someone:
In the content I generate in the AJAX call, I print the scripts like this, and obviously hide it with css:
<div class="javascript">
$("body").on("click","#btn4255",function(){
alert("Pedido 4255");
});
</div>
And then I execute this function every time the AJAX call is returned
$('.javascript').each(function() {
eval($(this).text());
});
I only evaluate strings I generate myself so in this case I think it's not unsafe to use eval().
import selenium
driver = webdriver.Firefox()
url='web.whatsapp.com'
driver.get(url)
for i in range (0,10):
url=https://web.whatsapp.com/send?phone=9178XXX53439&text=hello
driver.get(URL)
its reload the whole page every time.
I want to change page content while this loop call URL without reloading page.
I change this url=https://web.whatsapp.com/send?phone=9178XXX53439&text=hello every time.
You can load content in background using ajax in Javascript.
Try this demo
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>The XMLHttpRequest Object</h1>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
</script>
</body>
</html>
i need help, here my code :
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "getstok.php?secretkey=123&sku=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Masukkan kode barang / SKU:</b></p>
<form>
Kode Barang: <input type="text" onkeyup="showHint(this.value)">
</form>
<div id="txtHint"></span>
</body>
</html>
What I need is:
I want to hide this "secretkey=123" so visitor cannot see my secret key
when call "xmlhttp.send();" return the value and I want to convert it to php like example
$getxmlhttp = xmlhttp.send();
when I type something it will be call function, but when I press enter that refresh, how to disable the enter or what the best suggestion for me.
this is my site sample:
http://stok.tk
for example type "YI 067"
1 : You can't. The browser (and so the visitor) can always know wich page is called with wich URL and parameters
2 : You can't do it like that. You need to get the value of your request into getstok.php with the super global variables $_GET['your var']
3 : It's reloading the page because it's sending your form. By default it send it to the same page. Just remove your <form>
I came across the question : How do I load an HTML page in a <div> using JavaScript?
I want to basically do the same thing with POST data but I'm not sure where to start.
The existing script works with get requests only?
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
}
</script>
I would like to avoid using jQuery if I can avoid it.
You can use the same ajax example you had posted in your comment, by changing the http://www.yoursite.com/home.html to home.html
Similar to below
In Javascript,
<script>
function load_home(e, getwhat){ // <--- send which html file to get and display the content in argument 'getwhat'
e.preventDefault();
var con = document.getElementById('content');
var xhr = new XMLHttpRequest();
xhr.open("POST", getwhat, true); // <-- this is post request
//xhr.open("GET", getwhat, true); // <-- this is get request
xhr.setRequestHeader('Content-type', 'text/html');
xhr.onreadystatechange = function(e) {
if(xhr.readyState == 4 && xhr.status == 200) {
con.innerHTML = xhr.responseText;
}
}
xhr.send();
}
</script>
In HTML,
HOME
ABOUT US
SERVICE
<div id="content"></div>
The best aproach is to use jquery like this working demo
html
<nav id="menu" class="menu-side">
About
Help
Contact
</nav>
<div id="target">
<!-- content is being loaded here from other .html files -->
</div>
javascript
$(function() {
var $menu = $('#menu'),
$target = $('#target');
$menu.on('click', '> a', function(event) {
var $this = $(this);
event.preventDefault();
$target.load($this.attr('href'));
});
})
I am trying to get some information from the Yahoo Console for weather conditions. The xml result tree from Yahoo looks like this: result tree
I am able to get things that are only one level deep with the code I have. My variable 'beta' is for the title which works beautifully. The second variable is 'alpha' which will not work. I believe it has to do with how I call for it 'item.condition.temp' and with the node values.
I am very new to this so please list any sources you use as it will help me going forward.
<!DOCTYPE html>
<html>
<head>
<p id="alpha"></p>
<p id="beta"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
myFunction(xhttp);
}
};
xhttp.open('GET', 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%3D2444827&diagnostics=true', true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById('beta').innerHTML =
xmlDoc.getElementsByTagName('title')[0].childNodes[0].nodeValue;
document.getElementById('alpha').innerHTML =
xmlDoc.getElementsByTagName('item.condition.temp')[0].childNodes[0].nodeValue;
}
</script>
I would suggest adding &format=json to your URL to make it this:
https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%3D2444827&diagnostics=true&format=json
Then parse the resulting JSON which is a more JavaScript way of doing it.