jQuery can't refresh page with parameters - javascript

I'm sorry to post with my question but I really don't understand. There are some moments like this one where I have the impression that nothing work in web.
I'm trying to do something pretty simple, I just want to reload a page and add a parameter by clicking on a button with jQuery. I searched and of course I found solutions but it doesn't work for me and I really don't understand why.
I tried several solutions but none works.
$(document).ready(function() {
$("#btnDL").click(function() {
/*window.location.href = window.location.href.replace( /[\?#].*|$/, "?dl=1" );*/
/*if(!window.location.hash) {
window.location.replace(window.location.href + "?dl=1");
}*/
/*var url = new URL(window.location.href);
url.searchParams.set('dl','1');
location.reload();*/
var url = window.location.href;
url += '?dl=1'
window.location.href = url;
});
});
Here is my code (I let some solutions I tried in comment), this doesn't work, when I click on my button it just refresh the page but the URL is still the same.
I think you've seen this question a lot of times so sorry for the inconvenience.
Thank you

$(document).ready(function() {
$("#btnDL").click(function() {
var url = window.location.href;
window.location.href = window.location.href + "?dl=1";
});
});
try this

I have tested it on Google Chrome and it is appending id with the url. Try it:
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$("#btnDL").click(function() {
var url = window.location.href;
alert(url);
url += '?dl=1'
window.location.href = url;
})
});
</script>
</head>
<body>
<button id='btnDL'>
Click Me
</button>
</body>
</html>

Related

JavaScript function only works after page reload

I know this has been asked a lot on here, but all the answers work only with jQuery and I need a solution without it.
So after I do something, my Servlet leads me to a JSP page. My JS function should populate a drop down list when the page is loaded. It only works properly when the page is refreshed tho.
As I understand this is happening because I want to populate, using innerHTML and the JS function gets called faster then my HTML page.
I also get this error in my Browser:
Uncaught TypeError: Cannot read property 'innerHTML' of null
at XMLHttpRequest.xmlHttpRequest.onreadystatechange
I had a soulution for debugging but I can't leave it in there. What I did was, every time I opened that page I automatically refreshed the whole page. But my browser asked me every time if I wanted to do this. So that is not a solution that's pretty to say the least.
Is there something I could do to prevent this?
Edit:
document.addEventListener("DOMContentLoaded", pupulateDropDown);
function pupulateDropDown() {
var servletURL = "./KategorienHolen"
let xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
if (xmlHttpRequest.readyState === 4 && xmlHttpRequest.status === 200) {
console.log(xmlHttpRequest.responseText);
let katGetter = JSON.parse(xmlHttpRequest.responseText);
JSON.stringify(katGetter);
var i;
for(i = 0; i <= katGetter.length -1; i++){
console.log(katGetter[i].id);
console.log(katGetter[i].kategorie);
console.log(katGetter[i].oberkategorie);
if (katGetter[i].oberkategorie === "B") {
document.getElementById("BKat").innerHTML += "" + katGetter[i].kategorie + "</br>";
} else if (katGetter[i].oberkategorie === "S") {
document.getElementById("SKat").innerHTML += "" + katGetter[i].kategorie + "</br>";
} else if (katGetter[i].oberkategorie ==="A") {
document.getElementById("ACat").innerHTML += "" + katGetter[i].kategorie + "</br>";
}
// document.getElementsByClassName("innerDiv").innerHTML = "" + katGetter.kategorie + "";
// document.getElementById("test123").innerHTML = "" + katGetter.kategorie + "";
}
}
};
xmlHttpRequest.open("GET", servletURL, true);
xmlHttpRequest.send();
}
It can depend on how + when you're executing the code.
<html>
<head>
<title>In Head Not Working</title>
<!-- WILL NOT WORK -->
<!--<script>
const p = document.querySelector('p');
p.innerHTML = 'Replaced!';
</script>-->
</head>
<body>
<p>Replace This</p>
<!-- Will work because the page has finished loading and this is the last thing to load on the page so it can find other elements -->
<script>
const p = document.querySelector('p');
p.innerHTML = 'Replaced!';
</script>
</body>
</html>
Additionally you could add an Event handler so when the window is fully loaded, you can then find the DOM element.
<html>
<head>
<title>In Head Working</title>
<script>
window.addEventListener('load', function () {
const p = document.querySelector('p');
p.innerHTML = 'Replaced!';
});
</script>
</head>
<body>
<p>Replace This</p>
</body>
</html>
Define your function and add an onload event to body:
<body onload="pupulateDropDown()">
<!-- ... -->
</body>
Script needs to be loaded again, I tried many options but <iframe/> works better in my case. You may try to npm import for library related to your script or you can use the following code.
<iframe
srcDoc={`
<!doctype html>
<html>
<head>
<style>[Style (If you want to)]</style>
</head>
<body>
<div>
[Your data]
<script type="text/javascript" src="[Script source]"></script>
</div>
</body>
</html>
`}
/>
Inside srcDoc, it's similar to normal HTML code.
You can load data by using ${[Your Data]} inside srcDoc.
It should work :
document.addEventListener("DOMContentLoaded", function(){
//....
});
You should be using the DOMContentLoaded event to run your code only when the document has been completely loaded and all elements have been parsed.
window.addEventListener("DOMContentLoaded", function(){
//your code here
});
Alternatively, place your script tag right before the ending body tag.
<body>
<!--body content...-->
<script>
//your code here
</script>
</body>

Javascript redirect not working if i delete alert

I have a function to redirect the page.
Function works perfectly when I have code like this.
document.getElementById("orderNow").addEventListener("click", function() {
// window.location.href = "http://www.w3schools.com", "_blank";
var name = document.getElementById("customerName").textContent;
var address = document.getElementById("customerStreet").textContent;
var city = document.getElementById("customerCity").textContent;
var state = document.getElementById("customerState").textContent;
var zip = document.getElementById("customerPcode").textContent;
var country = document.getElementById("customerCountry").textContent;
var phone = document.getElementById("customerPhone").textContent;
window.location.href = "https://www.amazon.com/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1";
var username = document.getElementById('enterAddressFullName');
alert(username);
But if delete alert function or this:
var username = document.getElementById('enterAddressFullName');
Redirect won't work!
I don't know how to name the problem but this is my problem.
I don't want those last two lines of code. Help me to fix
Created a basic click event example for you below.
let orderButtonEl = document.getElementById("orderNow").addEventListener("click", function() {
// ... get all the values you need here and then do the redirect below
alert("Click Event Working!!");
// Redirect
window.location.href = "https://www.amazon.com/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1";
});
<button id="orderNow"> Order Now </button>
EDIT:
Not sure what you are doing, but copy the following and save it as an index.html file. Open it with chrome, click on the button and it will redirect you.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="orderNow">
Order Now
</button>
<script type="text/javascript">
let orderButtonEl = document.getElementById("orderNow").addEventListener("click", function() {
// ... do stuff
// Redirect
window.location.href = "https://www.amazon.com/gp/buy/addressselect/handlers/display.html?hasWorkingJavascript=1";
});
</script>
</body>
</html>

Getting text from file using FileReader on Load

So, I've been working on a page that uses only local files (server is not an option, unfortunately. Not even a localhost. The struggle is real.) and I've come to a situation where I need to grab text from a .csv file and populate it to the page. I have this bit of code that works, but I need to have a file set within the function when a button is pressed. Looking up the file manually isn't an option (to visualize what I'm doing, I'm making a mock database file in the most annoying way possible (because I have to, not because I want to)).
In the page I would have something like:
<button id="myButton" onclick="getText()"></button>
<script>
var myFile = "dataset.csv";
...
</script>
The following bit of code works (in regards to having it pull the data from the csv file), but, as I said, I need to pull the text from the file when a button is pressed and just have the file name set in the script, not pulling it up manually.
<!DOCTYPE html>
<html>
<body>
<input type="file" id="fileinput" />
<div id="outputdiv"></div>
<script type="text/javascript">
function readSingleFile(evt) {
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
var splited = contents.split(/\r\n|\n|\r|,/g);
for (i=0; i<splited.length; i++){
document.getElementById("outputdiv").innerHTML = document.getElementById("outputdiv").innerHTML + splited[i] + "<br>";
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
document.getElementById('fileinput').addEventListener('change', readSingleFile, false);
</script>
</body>
</html>
From what I can tell from the API, I would need to set the file attributes to a blob in order to pass it to FileReader. How I can do this without using an input box, I have no idea. There's also a 50% chance that I am completely wrong about this since I obviously don't know how to get this done.
If someone could show me how to achieve this with regards to what I'm looking for, it would be very much appreciated. I'm absolutely stumped.
Thank you.
Note: CORS restrictons will prevent this from working in most browsers. You can use FireFox Developer Edition, which disables CORS validation.
You can use an XMLHttpRequest to load a local file:
<!DOCTYPE html>
<html>
<body>
<button onclick="readSingleFile()">Click Me</button>
<div id="outputdiv"></div>
<script type="text/javascript">
function readSingleFile() {
let xhr = new XMLHttpRequest();
let url = "relative/path/to/file.txt;
if (!url) return;
xhr.onload = dataLoaded;
xhr.onerror = _ => "There was an error loading the file.";
xhr.overrideMimeType("text/plain");
xhr.open("GET",url);
xhr.send();
}
function dataLoaded(e){
var contents = e.target.responseText;
var splited = contents.split(/\r\n|\n|\r|,/g);
for (i=0; i<splited.length; i++){
document.getElementById("outputdiv").innerHTML = document.getElementById("outputdiv").innerHTML + splited[i] + "<br>";
}
</script>
</body>
</html>

How to access data of the opened tab using javascript

I have mentioned the code below which I have been trying. I am successfully able to open a url in a new tab but unable to access the content using DOM. so someone please suggest me any ideas how to access the data...
Thank you in advance.
<html>
<head>
<script>
var url = "www.website.com";
var Tab = window.open(url);
var Name = Tab.document.getElementsByClassName('uniquename').innerHTML;
alert(Name);
</script>
</head>
</html>
You can use onLoad event in this case as:
var url = "www.website.com";
var Tab = window.open(url);
Tab.onload = function () {
var elems = Tab.document.getElementsByClassName('uniquename');
elems.forEach(function(elem,index){
console.log(elem)
})
};
But your URL in the child window should be in same domain.

Reading Excel file from JavaScript

I have following code for reading excel in javascript :
<html>
<head>
<script type="text/javascript">
function readData(x,y)
{
var excel = new ActiveXObject("Excel.Application");
alert(excel);
var excel_file = excel.Workbooks.Open("D:\File1.xlsx");
Excel.Visible = true;
alert(excel_file);
var excel_sheet = excel_file.Worksheets("DEPT INC UPDATE");
alert(excel_sheet);
var data = excel_sheet.Cells(x,y).Value;
alert(data);
return data;
}
</script>
</head>
<body>
<input type="button" value="SimpleButton" onclick="readData(2,3);" />
</body>
</html>
But dunno where it is going wrong ??
your input element is a submit button, but is not inside a form. When readData returns the data, nothing ever makes any use of it. and as to the rest, i dunno. you don't say where it's going wrong. does it show any one alert box?
i think there is an error in giving the path. Use double backward slashes instead of single.
In your case..
D:\File1.xlsx
Hope this might be helpful..:)

Categories