I've created a DIV that loads a text file. The goal is to update the text file and have the output correctly displayed in the browser. It works; however, when I update the text file, the contents do not display in the browser until I do a ctrl-F5 to hard refresh the page.
<div id="outage"><object width=475 data="outage.txt"></object></div>
How can I refresh the DIV or OBJECT to correctly display the data in the text file?
I think that's what you mean? Ajax can be used in this process.
If you want what has been written in the file to be moved to the 'div' immediately after the 'save' then I don't think it's possible to do it except by back-end
<div id="outage">
<object width=475 data="outage.txt"></object>
</div>
<button class="bttn">Update</button>
<script>
document.querySelector(".bttn").addEventListener("click", (e) => {
e.preventDefault()
document.querySelector('#outage').innerHTML = "";
document.querySelector('#outage').innerHTML = `<object width=475
data="outage.txt"></object>`;
});
</script>
Related
As you all know we can print a text on the same webpage by this code on the HTML:
<body>
<button onclick="myFunction()">Click me</button>
<h1 id="myHeader"></h1>
<script>
function myFunction()
{
document.getElementById("myHeader").innerHTML = "hi";
}
</script>
</body>
In my code the button is on the popup on the Folium map which looks like this:
So, I would like to write "hi" on the h1 tag, onclick function for this button "More info!" on the same page:
in HTML file:
<h1 id="myHeader">SSSSSS</h1>
<div>
<form name="AAA" >
<center>
{{ map| safe }}
</center>
</form>
</div>
<script>
function showsth()
{
document.getElementById("myHeader").innerHTML = "hi";
}
</script>
And I am using Django, so, the I predefined the popup like this:
In views.py:
popup_t = (...
+ '<button onclick="showsth()">More info!</button>'
)
test = folium.Html(popup_t, script=True)
popup = folium.Popup(test, min_width=150, max_width=500)
So, when I click on the button, I didn't get any response just like I showed in the first HTML code.
Do you have any idea about the problem?
UPDATE
I tested the AJAX JQUERY as well.
the button outside the folium's popup will work onclick, but when the button is transferred to the popup, it would not work.
It came to my mind that maybe I can work with "link", instead of "button".
The question is that: is it possible to have a link (href) that direct user to the same page without reloading? just like what AJAX does for buttons!
After a lot of research, I concluded that it is impossible to get a response from the Folium map click. For me, I used Leaflet and Ajax jQuery. I defined the map on the HTML file and used a function on-clicking the geo points. The function returned the point data to the views.py, some works were done, and the response was sent back to the HTML file in jQuery's success function. You can follow my code lines in my other qs:
How to send a simple data by Ajax jQuery to views.py in Django?
In my html file I have a button which when I press I want to get a captcha image which is generated by a python script and show its contents on a html image.The ideal way I think is to set the url of the html image to the script and from the script to print the image data into base64 but obviously this doesn't work since the image url expects a specific image type.Another not so nice way would had been to use a frame instead of a img tag and on the python script to print an img as shown in the code bellow, this is something I dont want.
So to summarize:
How can I set the content of an html image to what is generated by a server-side script.
HTML:
<div id="phone_number">
<input style="width:150;height:30" type="button" name="answer" value="Εμφάνιση αριθμού" onclick="this.parentNode.innerHTML='<img style=width:150 class=phone_img src=get_phone_captcha.py>'" />
</div>
Python(the bad way):
phone_number='699243324'
image = ImageCaptcha(fonts=['captcha/data/DroidSansMono.ttf'])
buf = BytesIO()
image.write(phone_number, buf)
print "<img width=150 src='data:image/png;base64,"+base64.b64encode(buf.getvalue())+"' >";
the src should point to an image file, which really means a path on the server that returns image data, but your script is returning html markup with the data embedded in it instead of just the image data:
print base64.b64encode(buf.getvalue())
will only print the data from the generated image, with an extra \n which may cause issues, it may or may not be better to just do:
import sys
image.write(phone_number, sys.stdout)
to directly write the image data to the stdout and send it back to the client.
<img src='data:... needs a string, so you have to do an AJAX-call to your server in your onclick() function.
...innerHTML='<img style=width:150 class=phone_img src="data:image/png....'+ajaxRet+'">'
so this is a very vague question but say I had a single .html file and I wanted to store essentially 2 websites in the one file and swap to the 2nd page when a condition became true on the first page(preferably a onclick javascript event) kind of like an if statement(if condition A becomes true on page one: show page 2 else: continue to show page 1) would this be possible in just javascript or would I need the aid of other programming languages and what would be the most optimum way of going about this? I would want the data entered in an input feild on page 1 also available on page 2.
sorry for vague question and horrible formatting, this is my first ever question.
Joel, I don't have enough reputation to comment and so I must type an answer.
Local storage allows you to store a value (page number to display) within the user's local browser memory. This value can be tested for existence (useful for true/false conditions) and can be read (for meaningful values).
All you need to do is bind the creation of a simple local storage object (the page number to display). Bind the code to create the storage object to whichever event you want (such as a button click).
localStorage.setItem('entryPage', '2');
You will also need some code to read within the HTML file to decide what to display (via scroll, hidden and displayed DIV elements or whatever technique you are using).
if(localStorage.getItem('entryPage')) {
//show page two code
}
Check here for a full tutorial set:
https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
Below is a chrome-tested one-page solution just demonstrating the concept of the local storage part. You'll always be within the same HTML file, but load will show content one until you click the button and set local storage to display page 2, then any future load will be page two until you clear local storage.
<!DOCTYPE html>
<html>
<body>
<div id="main-container">
<div id="content-one" style="display:block;">
<p>This is page one content</p>
<button id="showTwo">Show Page 2</button>
</div>
<div id="content-two" style="display:none">
<p>this is content for page 2</div>
</div>
</div>
<script>
//this function actually swaps display
function swapper(){
document.getElementById('content-one').style.display = 'none';
document.getElementById('content-two').style.display = 'block';
}
//if the value exists in storage, swap them
if(localStorage.getItem('entryPage')) {
swapper();
}
//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");
btn.addEventListener("click", function(){swapper();localStorage.setItem('entryPage', '2');}, false);
</script>
</body>
</html>
To clear local storage on Chrome, see LOCAL AND SESSION section here:
https://developer.chrome.com/devtools/docs/resource-panel#local-and-session-storage
And below is a version including a text-box which simply used the value of the local storage object to hold the data you wish to carry to content page 2. (Remember, if you have tested the first example above you must clear local storage to use this example below because otherwise it will never show you the first content pane).
<!DOCTYPE html>
<html>
<body>
<div id="main-container">
<div id="content-one" style="display:block;">
<p>This is page one content</p>
<input type="text" id="theInput"></input>
<button id="showTwo">Show Page 2</button>
</div>
<div id="content-two" style="display:none">
<p>this is content for page 2</div>
<p id="theOutput"></p>
</div>
</div>
<script>
//this function actually swaps display and shows the value from page 1 textbox
function swapper(theValue){
document.getElementById('content-one').style.display = 'none';
document.getElementById('content-two').style.display = 'block';
document.getElementById('theOutput').innerText = theValue;
}
//if the value exists in storage, swap them and pass on the value of textbox
if(localStorage.getItem('entryPage')) {
swapper(localStorage.getItem('entryPage'));
}
//when button clicked, swap them and store value
var btn = document.getElementById("showTwo");
btn.addEventListener("click", function(){
var theData = document.getElementById("theInput").value;
swapper();
localStorage.setItem('entryPage', theData);
}, false);
</script>
</body>
</html>
I have multiple buttons which currently redirect to different pages for users to perform a single action and they would then need to click another button whilst on the confirmation page to go back where they were before. This is old school and inconvenient...
What I would like to do is create 1 single pop-up box which would get triggered (appear) when any of those buttons are clicked. Inside the box, I want the relevant .php file to appear so users can confirm their action and the page would then reload and display a confirmation message.
Example:
"Delete" button needs to trigger the confirmation-popup.php to appear with the delete.php file included in it so users can confirm the deletion.
"Cancel" button needs to trigger the confirmation-popup.php to appear with the cancel.php file included in it so users can confirm the cancellation.
Here's what I've done:
- Created the pop up and included it on their Account page (that's where all the buttons are).
- Added a JS which passes through the button ID to trigger the popup
When either of the buttons is clicked, the popup would appear fine.
I'm stuck at the stage where different "action".php files need to passed and included in the body of the popup. I know I could create multiple popups each for its relevant action, but we all know this isn't best practice and it's doubling up.
Any help would be appreciated!
Edit: Added code after the below comment
HTML:
<button class="button-small button-red" id="confirm-delete">Delete</button>
JS:
$(document).ready(function() {
$("#confirm-delete").click(function() {
if (!$(".confirm-popup").is(":visible")) {
$(".confirm-popup").fadeIn("slow");
return false;
}
});
});
PHP confirm_popup.php:
<div class="confirm-popup">
<?php include 'delete_auction.php'; ?>
</div>
You can open different iframes in the popup based on the button pressed. That will allow you to use one popup and you will just edit the iframe src attribute to the correct php page. For example you can add an HTML attribute to each button that holds the URL of the page that should be opened by the button. Then you will have some JS code that on the button press will read the attribute that holds the URL and puts it in the iframe src attribute inside the popup.
Something like this using jQuery:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"><iframe src=""></iframe></div>
<script type="text/javascript">
$('.myclass').click(function(){
$('.popup iframe').attr('src', $(this).attr('content-url'));
})
</script>
Or AJAX way:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"></div>
<script type="text/javascript">
$('.myclass').click(function(){
$.ajax({
url: $(this).attr('content-url'),
data: {},
success: function(response) {
$('.popup').html(response);
},
dataType: 'html'
});
})
</script>
EDIT: The solution was to add this to the profile page instead of the gender page.
$('#profile').live( 'pageinit',function(event){
$('p#pTest').text(localStorage.getItem('gender'));
});
I have a paragraph with som text in a listview that I want to change programatically from another page after clikcing save.
EDIT: This is my listview in profile.html. When you click on the item you get to another page where you can save your gender. I want to change the paragraph in this listview to the gender that was changed from the other page.
<ul data-role="listview" >
<li><a href="gender.html">
<img src="images/gender2.jpg" />
<h3>Gender</h3>
<p id="pTest">Male</p>
</a></li> </ul>
The gender html page is just basic stuff with two radio buttons and a save button.
Here is my javascript code(in a seperate file):
$('#gender').live('pageinit', function(event) {
var gender = localStorage.getItem('gender');
var boolMale = true;
if (gender == "female") boolMale = false;
$('#radio-choice-male').attr("checked",boolMale).checkboxradio("refresh");
$('#radio-choice-female').attr("checked",!boolMale).checkboxradio("refresh");
$('#saveGenderButton').click(function() {
if ($('#radio-choice-male').is(':checked'))
localStorage.setItem('gender', "male");
else localStorage.setItem('gender', "female");
$('#pTest').html('test'); //does not work
//$('p#pTest').text('test'); //does not work
//$('#pTest').text('test'); //does not work
$.mobile.changePage("profile.html");
});
});
I have tried this with javascript: $('p#pTest').text('test');
The text does not change however. (I know that the save button works). Is this possible?
Try the following, note that when the user refreshes the page, the value is "Male" again, data should be stored on a database.
$('button').click(function(){
$('#pTest').text('test')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<p id="pTest">Male</p>
<button>change</button>
"saving" is something wholly different from changing paragraph content with jquery.
If you need to save changes you will have to write them to your server somehow (likely form submission along with all the security and input sanitizing that entails). If you have information that is saved on the server then you are no longer changing the content of a paragraph, you are drawing a paragraph with dynamic content (either from a database or a file which your server altered when you did the "saving").
Judging by your question, this is a topic on which you will have to do MUCH more research.
Input page (input.html):
<form action="/saveMyParagraph.php">
<input name="pContent" type="text"></input>
</form>
Saving page (saveMyParagraph.php) and Ouput page (output.php):
Inserting Data Into a MySQL Database using PHP
It seems you have the click event wrapped around a custom event name "pageinit", are you sure you're triggered the event before you click the button?
something like this:
$("#gender").trigger("pageinit");