Onclick window.location changes the updated css property using my javascript - javascript

The css property which is updated in the javascript does not stay when on click is triggered from html.
Javascript:
<script type="text/javascript">
function Redirect() {
window.location.replace("http://127.0.0.1:5000/testlink");
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'}
</script>
HTML:
<input type="radio" name="tabset" id="tab1" aria-controls="rawdata"onclick="Redirect()">
Raw Data
Once the tag is clicked, the css property changes appears and goes away once the windows refreshes

Once the radio button is selected, you can set it to a local storage and then check it when the page is first loaded.
$(document).ready(function() {
var hasClick = localStorage.getItem("hasClick");
if(hasClick == true){
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'}}
Javascript:
<script type="text/javascript">
function Redirect() {
sessionStorage.setItem("hasClick", true);
document.getElementsById('tab1').style.cssText = 'color:blue; font-size:22px;'};
window.location.replace("http://127.0.0.1:5000/testlink");
</script>
HTML:
<input type="radio" name="tabset" id="tab1" aria-
controls="rawdata"onclick="Redirect()">

That wont work, you will need to save these changes somewhere, for example:
Cookies
Local storage
Database
you save your change somewhere in these 3 saving options and then write a javascript code on window load to check if there is a color setting availaible and then change your tag color

Maybe you would prefer to do ajax? This way you can make a http request to the backoffice without the lost of your page state. Then your css property change will apply after your request.

Related

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

Document.write on a different html page

Hmm is it possible to document.write on other html page?
For example I create a two html page, the first page have a textfield and submit button. I enter a text in a textfield and after I click the submit button the value of the textfield will be transfer to the second html page and load the html page and write the value on it.
Just a beginner to javascript so bear with me please :D
You can do this by using Query String.
window.location = "Pass.aspx?variabletopass=test";
Use this line of where you are trying to redirect your page,and value of your textfield in query string.
Since you're using pure javascript and HTML, I assume server-side things are out of the picture. So Felix Kling's comment is actually, I think, a good way to go. Here's one way you could use localStorage to make this work:
/* index.html */
<form action="result.html" onsubmit="submit()">
<input type="text" id="input">
<input type="submit" value="Submit">
</form>
<script>
function submit() {
var input = document.getElementById("input").value;
localStorage.input = input;
}
</script>
/* result.html */
<div id="result"></div>
<script>
document.getElementById("result").innerHTML = localStorage.input;
</script>
Without using php you can document.write() submitted text on other html file as follows.
<html>
<script>
var a = document.location.toString();
var b = a.slice(a.indexOf("?")+1,a.length);
var c = b.split("&");
for(i=0;i<c.length;i++){
document.write(c[i]);
}
</script>
</html>
If you are working on Single page Application you can quite easily achieve this, by just storing the value in correct scope.
If you are on multiple page application you can achieve this by any of the following ways:
sending parameter in url
storing value in localStorage/sessionStorage
storing it in cookie(Not recommended)
sending it to server in forms param(Not recommended)

Refresh chart(javascript) after doing mysql Query

I've got a javascript for drawing a chart. I get my information out of my MySQL base. And I got 3 different buttons to get the different information out of the database.
My problem now is, I get the information out of my database, it shows it in the chart but when it shows the information it refreshes the page.
Is there a way to show the information after my page is refreshed? I actually tried to use the window.onload but that doesn't give me the wanted result.
in php I use the following code to get the info from my MySQL DB:
if(isset($_POST['btnProduct']))
{
....
}
in html it's like this:
<div class="content">
<form action="" method="post" enctype="multipart/form-data">
<input type="submit" name="btnProduct" id="btnFilterProduct">
</form>
</div>
And in JS I use this code:
<script type="text/javascript">
window.onload = function()
{
document.getElementById('btnFilterProduct').onclick = function()
{
....
}
}
I know the PHP needs to refresh to get the data. and Javascript doesn't. But can I change the order? Or is there a way to change my JS to let it load AFTER the page is refreshed?
To stop the page reload, modify your onclick function to be:
document.getElementById('btnFilterProduct').onclick = function(event) {
event.preventDefault();
...
}
event.preventDefault stops the default behavior of the event, which in this case is to refresh the page since you have an empty action. Another option would be to not use a form. Just use the <button> element instead.

function variable not passing to global variable

Good day all, I've two pages of php file and an external javascript file. I want to pass a selected radio button's value to a jquery global variable so that I can view the div element which has the same id as selected radio button's value. Whenever I click PLAY! button I don't see my div element on the next page. Here are my codes:
player-choose.php script:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/mycustom.js"></script>
</head>
<body>
<div id="player-list">
<input type="radio" name="player" value="fighter" id="fighter-radio"><label for="fighter-radio"><img src="images/heroes/fighter-01.png" width="74" height="70"></label>
<input type="radio" name="player" value="pakhi" id="pakhi-radio"><label for="pakhi-radio"><img src="images/heroes/pakhi.png" width="95" height="70"></label>
</div>
<button id="play">PLAY!</button>
</body>
mycustom.js script:
var playerID;
function start(){
spawnhero();
}
$(function(){
$("#play").click(function(){
window.location.href = 'index.php';
playerID = $('input[name=player]:checked').val();
});
})
function spawnhero () {
$("#content").append($("<div>").attr('id', playerID));
}
index.php script:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/mycustom.js"></script>
</head>
<body onload="start()">
<div id="content">
<div id="galaxy"></div>
</div>
</body>
It's a very simple thing but I don't know why it's not working. Am I doing something wrong here? Please if anyone finds a solution enlighten me. Tnx!
If you're moving to a new page (window.location = ...), you'll need some slightly more complicated way of transferring information between those pages - for the most part, HTTP/HTML is "stateless", with the exception of technologies like cookies. JavaScript variables get wiped out entirely - it's actually re-parsing the entire JQuery library on each new page (not to say that's something to avoid)
For a video game, as long as player information doesn't include server components (I could be wrong) my recommendation would be saving player information in sessionStorage.
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage
However, if this is a server-based game in which your choice of player matters beyond the local computer, you'd likely want to send the player ID to the server, either by structuring the page request differently:
window.location.href = 'index.php?playerId=' + playerId;
Or by POSTing the data as a form; most easily accomplished by structuring your submit button as an <input type="submit">, and wrapping all your <input> elements in a <form method="POST"> object.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
From there, your server software could write the second page's response out differently based on the given information - you can even customize what JavaScript is written inside of a <script> tag using PHP directives.
var playerId = "<?php print($_POST['playerId']); ?>";
Hopefully that helps get you started.
global variables are not persistent across pages. Once you load your index.php , it will have the new global scope(window variable).
I suggest passing a parameter.
$("#play").click(function(){
playerID = $('input[name=player]:checked').val();
window.location.href = 'index.php?id=' + playerID;
});
afterward, inside your index.php script , read the parameter and assign accordingly.
Alternative solution is you could you use JavaScript or jQuery cookie or localstorage. You can get/set values across page loads/redirects but these are not passed to server.
jQuery Cookie
var playerID = $('input[name=player]:checked').val();
$.cookie("playerId", playerID);
LocalStorage
var playerID = $('input[name=player]:checked').val();
localStorage.setItem("playerId", playerID);

How do I make permanent changes to javascript variables or html elements inside of .click()?

For example:
$(document).ready(function(){
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
});
This only changes the text in #rightAd for the moment the button is clicked. How do I make it remain, "HELLO EVERYBODY" after the click ends? Or am I thinking about this the wrong way?
changing via script will reflect until the page gets refreshed.
Try this:
HTML:
<div id="rightAd"> some text.....</div>
<button id="submit">Submit</button>
JQuery:
$('#submit').click(function(){
$('#rightAd').text("HELLO EVERYBODY");
});
If you are using <input type="submit"/> this will submit your page, so changes will be flashed as page gets refresh.
Use event.preventDefault() to prevent form from submission

Categories