Refresh element using only JS console - javascript

I am needing to refresh only one element using the JS console, rather than refreshing the whole page. I've got code that already works, but it depends on refreshing the page.
if (document.readyState === "complete") { vote(); }
function vote() {
//Do some stuff
setTimeout(function(){
location.reload();
}, 500);
}

function reload(){
var container = document.getElementById("testDiv");
var newContent = "After reload";
container.innerHTML= newContent;
}
<button>Reload</button>
<br/>
<div id="testDiv">
Before reload.
</div>

Looks like you just want to reload an iframe:
your normal html
<iframe src="page that should be reloaded.html">old browser</iframe>
<script>
function reload(){ document.getElementsByTagName("iframe")[0].reload();
}
</script>

What does refreshing one element mean? If you have a div with an id of element then you can just change the contents of that div using javascript and it will make the changes in your html. If the div contains "HI" then you can use document.getElementById("element").innerHTML and change it to whatever you want. Or you can change its attributes, you can add elements inside that div using javascript as well, what is it you are trying to do exactly? I assume that no matter what it is, you can just grab that element via its id and change it whenever you want it to refresh.

Related

How can I make the entire parent element of an anchor clickable?

I have almost achieved what I am looking to but the page is reloading twice after I have injected the code. The reload is undesirable.
<script>
$("#block-yui_3_17_2_1_1548947018047_6823").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
</script>
The URL to the page: https://goodbrother.squarespace.com/blog/
The top image div titled "whos who in a production crew" is the div using this code.
You're returning an array with find('a'). You need to specify a single element. It might work with find('a')[0], but you'd be better off putting a class on your anchor and targeting that.
I was able to resolve by adding a class to the "a"
<script>
$("#block-yui_3_17_2_1_1548947018047_6823").click(function() {
window.location = $(this).find("a.image-overlay").attr("href");
return false;
});
</script>

jQuery keep selected content on load

I'm working on a control panel, and I need to have the output of a command appear live. I have managed to get this to work by having the command output to a file, and loading that file via jQuery. I refresh the output every second using:
<script>
$(function(){
setInterval(refreshFrame, 1000);
});
</script>
and
<script>
document.getElementById("title").innerHTML="Update";
function refreshFrame(){
$("#frame").load("/assets/readfile.php?type=custom#content")
}
</script>
This works and loads the output without refreshing the entire page. However this makes copying impossible as the selection is gone or gets mutated as the contents are loaded again. Is there any way to keep the selection across reloads, and if not, how can I pause the refreshing when there is a selection?
try something like this:
$(function(){
document.getElementById("title").innerHTML="Update";
setInterval(function(){
if(!$('#frame').is(":hover")){
$("#frame").load("/assets/readfile.php?type=custom#content")
}
}, 1000);
});
How about only updating the element's html if the content has changed and the user has not selected anything in #frame?
var lastContent;
$(function(){
setInterval(refreshFrame, 1000);
});
function refreshFrame(){
$.ajax({
url:"/assets/readfile.php?type=custom#content"
}).done(function(content) {
if(!$(window.getSelection().anchorNode).is("#frame") && $(window.getSelection().anchorNode).closest("#frame").length == 0 && content != lastContent) {
$("#frame").html(content);
lastContent=content;
}
});
}

.removeClass not functioning within .replaceWith

I'm trying to make a button that will hide a specific -- and then replace it with another hidden . However, when I test the code, everything fires correctly except for the .removeClass which contains the "display: none."
Here is the code:
<script type="text/javascript">
$(document).ready(function(){
var webform = document.getElementById('block-webform-client-block-18');
var unmarriedbutton = document.getElementById('unmarried');
var buyingblock = document.getElementById('block-block-10');
$(unmarriedbutton).click(function () {
$(buyingblock).fadeOut('slow', function() {
$(this).replaceWith(function () {
$(webform).removeClass('hiddenbox')
});
});
});
});
</script>
The CSS on 'hiddenbox' is nothing more than "display: none.'
There is a with the id of unmarried, which when clicked fades out a div and replaces it with a hidden div that removes the class to reveal it. However, the last part doesn't fire -- everything else does and functions properly. When I look at in the console too, it shows no errors.
Can someone please tell me where the error is? Thanks!
Edit: I may be using the wrong function to replace the div with, so here's the site: http://drjohncurtis.com/happily-un-married. If you click the "download the book" button, the the div disappears and is replaced correctly with the div#block-webform-client-block-18. However, it remains hidden.
The function you pass to replaceWith has to return the content you want to replace it with. You have to actually return the content.
I don't know exactly what you're trying to accomplish, but you could use this if the goal is to replace it with the webform object:
$(this).replaceWith(function () {
return($(webform).removeClass('hiddenbox'));
});
NB, use jquery !
var webform = $('#block-webform-client-block-18');
var unmarriedbutton = $('#unmarried');
var buyingblock =$('#block-block-10');
unmarriedbutton.click(function () {
buyingblock.fadeOut('slow', function() {
$(this).replaceWith( webform.removeClass('hiddenbox'));
});
});
Was too fast, i believe it's the way you select your object (getelementbyid) then you create a jquery object from it... -> use jquery API

Load javascript in html within content pane

I have an html file that I want to be loaded from various pages into a dijit.contentpane. The content loads fine (I just set the href of the contentpane), but the problem is that javascript within the html file specified by href doesn't seem to be executed at a consistent time.
The final goal of this is to load an html file into a contentpane at an anchor point in the file (i.e. if you typed in index.html#tag in order to jump to a certain part of the file). I've tried a few different methods and can't seem to get anything to work.
What I've tried:
1.
(refering to the href of the dijit.contentpane)
href="page.htm#anchor"
2.
(again, refering to the href of the dijit.contentpane -- didn't really expect this to work, but decided to try anyways)
href="#anchor"
3. (with this last try inside the html specified by href)
<script type="text/javascript">
setTimeout("go_to_anchor();", 2000);
function go_to_anchor()
{
location.href = "#anchor";
}
</script>
This last try was the closest to working of all of them. After 2 seconds (I put the delay there to see if something in the dijit code was possibly loading at the same time as my javascript), I could see the browser briefly jump to the correct place in the html page, but then immediately go back to the top of the page.
Dojo uses hashes in the URL to allow bookmarking of pages loaded through ajax calls.
This is done through the dojo.hash api.
So... I think the best thing you can do is use it to trigger a callback that you write inside your main page.
For scrolling to a given position in your loaded contents, you can then use node.scrollIntoView().
For example, say you have a page with a ContentPane named "mainPane" in which you load an html fragment called "fragment.html", and your fragment contains 2 anchors like this :
-fragment.html :
Anchor 1
<p>some very long contents...</p>
Anchor 2
<p>some very long contents...</p>
Now say you have 2 buttons in the main page (named btn1 and btn2), which will be used to load your fragment and navigate to the proper anchor. You can then wire that up with the following javascript, in your main page :
<script type="text/javascript">
require(['dojo/on',
'dojo/hash',
'dojo/_base/connect',
'dijit/layout/BorderContainer',
'dijit/layout/ContentPane',
'dijit/form/Button'],
function(on, hash, connect){
dojo.ready(function(){
var contentPane = dijit.byId('mainPane');
var btn1 = dijit.byId('btn1');
var btn2 = dijit.byId('btn2');
btn1.on("Click", function(e){
if (!(contentPane.get('href') == 'fragment.html')) {
contentPane.set("href", "fragment.html");
}
hash("anchor1");
});
btn2.on("Click", function(e){
if (!(contentPane.get('href') == 'fragment.html')) {
contentPane.set("href", "fragment.html");
}
hash("anchor2");
});
// In case we have a hash in the URL on the first page load, load the fragment so we can navigate to the anchor.
hash() && contentPane.set("href", "fragment.html");
// This callback is what will perform the actual scroll to the anchor
var callback = function(){
var anchor = Array.pop(dojo.query('a[href="#' + hash() + '"]'));
anchor && anchor.scrollIntoView();
};
contentPane.on("DownloadEnd", function(e){
console.debug("fragment loaded");
// Call the callback the first time the fragment loads then subscribe to hashchange topic
callback();
connect.subscribe("/dojo/hashchange", null, callback);
});
}); // dojo.ready
}); // require
</script>
If the content you're loading contains javascript you should use dojox.layout.ContentPane.

Javascript display html if div exists

I am trying to display a table (or ul) that will contain a navigation bar on my page, but only displays the tabs that will contain jquery called divs present on the html.
Essentially, it's a single html document that contains all divs, jquery hides all divs but the first, and the nav bar will allow to navigate through each.
Now I am trying to make it easy to use for my client, so that the menu items will only exist if the div for it also exists. I've got most of it done, the only thing is actually knowing if a div exists.
I tried using this:
if(document.getElementById("page1")) {
document.write("<b>Good morning</b>");}
else
{
document.write("<b>Bad morning </b>");
}
When I place the above code within the div page1, it returns true. Is there no way to do it from the top of the page and not within the div?
Thanks!
Update:
As suggested by many, I have used the following:
$j(document).ready(function(){
//Hide the sections we don't need right away
$j("#page2").hide();
$j("#page3").hide();
$j("#page4").hide();
if ($j('#page1').length > 0) {
var page = 'Excellent Morning' ;
}
});
Then when I try to use:
document.write(page);
It displays the following instead:
[object HTMLBodyElement]
Why not use jQuery since you are already?
if ($('#page1').length > 0) {
// do stuff...
}
EDIT: As davin pointed out, your code should be evaluated after the DOM has been rendered. You can do this by placing it in a $(document).ready call:
$(document.ready(function() {
if ($('#page1').length > 0) {
// do stuff...
}
});
EDIT 2: Based on the OP's edits, a better solution would be to add a placeholder element and to set its content (like FishBasketGordo suggested). An example of this:
$(document.ready(function() {
//Hide the sections we don't need right away
$("#page2, #page3, #page4").hide();
if ($('#page1').length) {
$('#myPlaceHolder').html('<b>Good Morning</b>');
}
else
{
$('#myPlaceHolder').html('<b>Bad Morning</b>');
}
});
Somewhere else in the document...
<span id="myPlaceHolder"></span>
If you place it at the top of the page, the page1 div doesn't exist when the code runs. If you are using jQuery, place the code in a $(document).ready event. Then, you can put it where you want it within the markup. Here's an example:
$(document).ready(function() {
if (document.getElementById("page1")) {
document.write("<b>Good morning</b>");
} else {
document.write("<b>Bad morning </b>");
}
});
Although, rather than doing a document.write, I would consider having a placeholder span or div, and setting it's innerHTML property (or use jQuery's html method). I would also use CSS for my style instead of <b> tags, but that's another matter entirely.
You can use
if ($(selector).length > 0) {
// element exists
}
or you can check out this post for a more elegant solution
Is there an "exists" function for jQuery?

Categories