I have a status page, which bascially says if a service is online or offline. I am using a css class on the div tags to make them look different (one red one green). I was looking at making an admin page were I can log in and change the class on the div with javascript onclick. It is basic code but works fine
<script>
function toggleClass(el){
if(el.className == "class1"){
el.className = "class2";
} else {
el.className = "class1";
}
}
</script>
<div class="class1" onclick="toggleClass(this)"></div>
<div class="class1" onclick="toggleClass(this)"></div>
I want the changes I make on the admin.php page to effect the index.php, I cant have the index.php have the JS as people would just click and change the status. Is there an easy solution for this? I do have access to mysql and PHP if needed, any advice?
I would save the status into mysql and check with php. so you don't need js for that.
create a function in your adminPanel to set the status.
If you have access to websockets use them to update the status on the fly.
otherwise create an interval which will automatically update the status every ... 5 seconds or something. The users don't want to reload the page every few seconds to get update.
also show the time when the status was updated the last time.
Related
I created an html site where the user can input a code in a text input and then this code is being inserted in a MYSQL database if certain conditions are met. In case of a successfull database entry I would like to notify the user with a little pop up message, which displays something like "Success" and also stating some data from the table row, the code was inserted into.
I found a nice looking pop up message on the following page, which I would like to use: https://www.gitto.tech/posts/animated-modal-box-using-html-css-and-javascript/.
However, in the implementation from the page, the pop-up is triggered by the click of a button:
document.getElementById("open-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.add("active");
});
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
I would like to execute the pop-up based on an if-condition, in which I check whether an php variable is already set:
<?php
if (isset($group)) {
?> ......HTML code.....
So, can anybody tell me how to successfully remove that "onClick" function of the pop-up?
Thanks in advance!
I understand that you reload the page after said data was inserted into database?
If so, what you can do to show pop-up initially, is to simply add class active to your popup (element with class popup, like that:
<div class="popup center active">
...
</div>
BUT
in order to be able to close the popup, you still will have to attach the second part of the provided script (you can simply insert it within script tags inside php if statement (at the end of HTML body element), like:
<script>
document.getElementById("dismiss-popup-btn").addEventListener("click",function(){
document.getElementsByClassName("popup")[0].classList.remove("active");
});
</script>
note: It doesn't change the fact that, as said above - it would be better to handle this with XHR (e.g. via ajax)
I am looking for a very simple process to record a click to an element then to update a database with that number.
For example a page is displayed then the variable is incremented when a click is made within that element. It only needs to record 1 click so a 0/1 variable is fine but when the zero changes to a 1 it needs to be recorded on the database.
Any simple way to do this? I am assuming it would be ajax but not too hot with that. I would need to also pass the ID of the row to update on the DB. Any help is appreciated :)
It really needs to happen in the background with the only interaction being the click on the element that holds the page so no page refresh. I have a good idea of what i want but the coding part in Javascript/Ajax eludes me. Basically i need to set up a listener for the click or an onclick to the element which will then fire up ajax to send a single variable (the id in the database) which will update the row in the db.
so for example
<div id="page" onclick="updateclick()">
Page content
</div>
<script>
function updateclick() {
var click = "1";
ajax part to send the variable $db_id to a seperate php file so the DB can
be updated
}
</script>
Something like this.
Greetings I have the following javascript controlling some DOM elements on my page to toggle on/off to hide the elements and save real estate on the page ...
I have a gridview at the bottom of the page, and when I perform operations on the gridView, my page reloads and the toggle is reset.
// Toggle Dealer Information on/off
$("#mlldlr").click(function () {
$("#DealerContainer").toggle();
$("#ShowHideDI").toggle();
if ($("#morelessDi").text() === ("...show less"))
$("#morelessDi").text("...show more");
else
$("#morelessDi").text("...show less");
The problem is ... if I toggle off and I reload the page for whatever reason, the toggle is reset to on, meaning the items show. I want them to remain closed until I initiate their reopening. Is there any way to do this?
JavaScript doesn't store state between page reloads by default. If you want to persist the state, you'll need to store that information some where. localStorage might be the right solution. Here's a simple example of how localStorage can keep a css state after reloading: http://jsfiddle.net/kweqaofv/2/
Other than using the COOKIE or The hide();
Follow the simple 1 line code:
$("element").toggle(100);
#element is the element of which you want to turn off the toggle on page loads
Just insert this line at first and then,
Toggle your element, like a sliding dailog or
Navigation panel!
Hope it helps!
Put this below the tag.
<script type="text/javascript">
$(document).ready(function ()
{
$("#DealerContainer").hide();
$("#ShowHideDI").hide();
});
</script>
The fact that the page is reloaded is making the DOM to reset to its initial state, thus resetting the toggle.
The only way I think this can be done is to have a parameter that would not be changed on page reload.
I have three suggestions:
1- You can set a cookie in your browser with the value of the toggle (on/off) and when the page loads, ask for this value and set the toggle. This can be done with jquery (follow this link for more info How do I set/unset cookie with jQuery?):
To set a cookie:
$.cookie("test", 1);
To delete it:
$.removeCookie("test");
2- The other option is to save this parameter on the server side. I'm guessing that if the page is reloading is because you are making a request to the server?
If this is the case, you could send the state of the toggle to the server, do your query, and on the response get the state of the toggle back. In the callback function you would then set the proper toggle state.
3- Another way could be using a JFrame for the grid, making the grid the only item of the page to reload.
Hope this helps
I had a similar problem with one that is as simple as
Jquery
$(document).ready(function() {
$('nav a').click(function() {
$('p').toggle('slow');
});
});
with regards to toggle being switched "on" upon page load.
All I did on this on was inline text the html with style="display :none;".This switches off the 'p' tag upon load and thus the user can switch it "on" any time after that.
So that is
HTML
<nav style="padding-top: 1cm; padding-bottom:1cm;">
<ul>
<li style="padding-bottom: .2cm;">
<a class="popup" style="padding-bottom: .2cm;cursor : pointer;"><b>Send</b></a>
</li>
<p style ="display: none;">your cat a litter box.
</p>
</ul>
</nav>
Bear in mind that the 'p' takes no space upon page load.
Hope I shed some light.
Is it possible to alter the url of a webpage so that it will activate specific click-activated features on the webpage without the user having to do the clicking?
To better illustrate my question I made this fiddle.
The page loads with a red box with information in it. The user can click the box once to see new information. They can click it again to see a third piece of information.
I would like to have urls that load the page with specific information showing. For example, if the main url for my page is http://www.mypage.com, then I would like to have urls http://www.mypage.com/#info2 and http://www.mypage.com/#info3 so that when the user enters the info2 (respectively, info3) url, the page loads with the second (respectively, third) piece of information showing.
Remarks: I have searched some other questions about activating scripts with hashtags, but have not found something I can understand or implement into what I want to do. In particular, I need my hashtag urls to be able to implement a sequence of several actions (e.g. two clicks to get info3 in the above example).
Remark 2: I am open to other solutions too. I just need someone to explain how to accomplish what I am trying to do.
You could use this after you define your click handlers.
if (window.location.hash == '#1'){
$("#info1").click();
}
if (window.location.hash == '#2'){
$("#info1").click();
$("#info2").click();
}
Not sure if any of this works -- I didn't devote much time on it, given the state of the question, but consider:
var hash_page = (window.location.hash+'').replace(/^#/,''); // get hash and parse
var page_number = hash_page.match(/\w+?(\d+)/)[1] || 1; // get the number
var next_page = page_number + 1; // get next number
$('#info'+page_number).click(function(){
window.location.hash = 'info' + next_page;
});
Assuming that your red box is a div like this:
<div class="redbox">...</div>
and that you have three blocks within it (info 1, 2, and 3):
<div class="redbox">
<div class="info1">...</div>
<div class="info2">...</div>
<div class="info3">...</div>
</div>
With jQuery you could do something simple like this:
jQuery(".redbox").click(function()
{
if(jQuery(".redbox .info3").is(":visible"))
{
return; // all done already
}
if(jQuery(".redbox .info2").is(":visible"))
{
jQuery(".redbox .info3").show();
return;
}
jQuery(".redbox .info2").show();
});
I'm not too sure why you'd like that in the URI. The only reason for such would be in case the user comes back to that same place and you'd want them to see the page in the same state. If that is important, then yes, you should use the window.location.hash to change the URI. That way, if the user comes back you can test the hash and setup the status as required on load. However, note that the hash does not get sent to the server. It is only a client thing.
My solution supposes that info2 and info3 are already loaded. It is also possible to use the load() function to load them dynamically. It depends on their size and whether you do or do not want that information to be visible when the user does "Show Source".
There is the reason why some systems use the "hashbang" feature in their website:
https://developers.google.com/webmasters/ajax-crawling/
Google, at some point, said they would drop that functionality, but it looks like they have not done so and actually continue to encourage people to use that methodology. Twitter has been using it for a while, but from what I can see they don't use it anymore.
I am using codeigniter to build a web app. I am having some problems with the following scenario.
The user clicks on submit button on 'home'
He is redirected to home/ok where I retrieve his info
from home/ok he is redirected back to home#final
But the thing is, final is hidden by default and it is not displaying. I have a JavaScript function that toggles final and it is displayed.
Is there anyway I can make the ok function redirect to the JavaScript function? I cannot add it on body onload since I don't want the success message to appear beforehand.
How about doing something like:
<? $display = ($_SERVER['HTTP_REFERER'] == base_url() . 'home/ok')? 'block': 'none'; ?>
<div id="final" style="<?=$display?>;">
OK
</div>
To set the default display style based on which way the page is displayed.
You could also look in to Flash data in the Session class, see. http://codeigniter.com/user_guide/libraries/sessions.html which I think is used for what I think you want to achieve