Jquery selector data retrival in variable, in another different page - javascript

How can we use Jquery to read certain page content in a variable on a different page? If for example we want to read div.tag1 from a page into another page but in a variable( ie i dont want to load it into the page but manipulate it so store it in variable)
Eg: file1.html have(say)
<div class="tag1"> Hello world </div>
<div class="tag2"> Hello Boys </div>
<div class="tag3"> Hello Girls </div>
Now I want page2 to have Jquery script that will store the content of div.tag1 in a variable.
This is what I need in file2.html :
// without loading it to any page ie without using load.
<script type="text/javascript">
var filename = "file1.html";
var myData = // Code to retrieve div.tag1 from file1.html( ie filename)
document.write(myData); // for the time being.. later it will go in Database.
Any help will be appreciated.

The simplest solution is to use load on a newly created element (a hidden element will also work):
var content = $("<div />").load("/page.html div.tag1",
function(){ // callback
alert(content.text());
});

Related

How do I change placeholder content in javascript per page

How do I update content loaded with Jquery .load() with javascript?
I'm using two placeholders on every page: one with the navigation bar, and one with the main skeleton of the content, like this:
<body>
<div id="nav-placeholder">
</div>
<div id="content-placeholder">
</div>
</body>
The nav bar and content are both in seperate files and are loaded into the pages with an external javascript file like this:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
So far, it all works nicely. Now, I'm trying to alter the content separately for each page (with JS)
Part of content.html is for example
<h2 id="subheader1">Title</h2>
I'm trying to change the #subheader1 content in the javascript file like so:
$(function(){
$("#nav-placeholder").load("nav.html");
});
$(function(){
$("#content-placeholder").load("content.html");
});
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
but that doesn't work (this is aimed at all pages, but it still doesn't work). Probably because it's only seeing the placeholder DIV in index.html and not it's content?
I tried placing the subheader1 div in the index.html to test, and then it did work, but that would take away the efficiency of the placeholder.
Is there any way to do this (or another way to be more efficient with pages with the same (DIV) layout but different text?)
Thanks!
The load method is not synchronous, so
$(document).ready(function() {
document.getElementById("subheader1").outerHTML = "test" ;
});
is executed before the html is loaded in the page.
The doc suggest using a callback function.
it is executed after post-processing and HTML insertion has been performed
I had success using this in my js file:
$(document).ready(function() {
$(function(){
$("#nav-placeholder").load("./nav.html", function() {
document.getElementById("insideNav").outerHTML = "It works !" ;
});
});
});
with <h2 id="insideNav">Original Nav Bar</h2> in my nav.html.

How to load JSON data into span of HTML while loading the page

I have following html code. It has inline data-value as 12500
<div class="number">
<span id="count" data-counter="counterup" data-value="12500">0</span>
</div>
I would want it to get it updated with value fetched from JSON.
My script file looks like this
url = "../assets/pages/data.json";
jQuery(document).ready(function(){
$.getJSON(url,function(setData){
var tsCounter = document.querySelector('#count');
tsCounter.dataset.value = setData[1].count;
});
)};
What I see is, this value is updated after DOM is created and that is the reason I don't see it on page load. I don't want to use "onload" event of HTML's body.
Is there anyway I can get this working?

Multiple javascript on the same page?

First of all I'm using wordpress with elementor plugin and the accordion feature.
I've got a code of video player:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
}; LEADNETWORK_generuj_player(ustawienia);</script>
I need to put in on several places on the same page. When I tried just multiple copy->paste, only in one place is showing. Is it possible? Any advices?
Please take a look at first line:
<div id="player_div"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"player_div",
It says basically that the video is put into a div with id=player_div due to element_id:"player_div". If you change the first line to something like:
<div id="my_second_video_placeholder"></div><script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><script> var ustawienia = {element_id:"my_second_video_placeholder",
it's highly probable that it would work.
If you copy and paste this code in multiple locations you will load the code and declare the same variables twice, which for Javascript won't work. The "ustawienia" variable is also pointing to the player_div, and with HTML id's this will only find the first one.
<script src="https://lnaff.pl//API_VIDEO/LOCKER/js.js"></script><!-- only include once -->
<div id="player_div1"></div> <!-- div for first video -->
<div id="player_div2"></div> <!-- div for second video -->
<script>
var video1 = {element_id:"player_div1",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
var video2 = {element_id:"player_div2",
wysokosc:"455",
szerokosc:"800",
skin:"1",
czas_blokady:"19",
dlugosc_filmu:"2589",
video_url:"http://androidapkmodpro.com/wp-content/uploads/2020/01/Intro.mp4",
video_img:"https://i.imgur.com/YvKvkYL.png",
stream:"0",
programy_url:["https://leadnet.pl/p_uri/q6pYwlgb27QyvVjdPke1/x1vo6wa/?parametr=",],
player_button:["https://i.imgur.com/ACzzOnz.png",],
};
LEADNETWORK_generuj_player(video1);
LEADNETWORK_generuj_player(video2);
</script>
Now I've not used the lead network video player, but this should work without issue. For each new video, you would need to create a new target DIV tag and a new video variable in the script section.
Hope this helps.

Store JSON information within a HTML file or the other way around

That title might be a little confusing but I don't know how to put it otherwise. I have some JSON encoded data in a .json-file:
{"foo":"bar", "bar":"foo", "far":"boo"}
and some HTML content in a .html-file:
<h1>I'm a Title</h1>
<p>Lorem Ipsum</p>
<br>
<img src="./media/foo.png">
There is a jQuery script that takes the data from both files ($.getJSON() and $(#div).load()) and creates a page with some predefined head, uses the html as content and the json data to create some buttons (key=destination & value=name) on there.
Because the project has many of these pages I would love to have only one file that holds both my HTML content AND the JSON data so I had all I needed for one page would be a single file access. So the question really is: How can I store both JSON and HTML data in one file so jQuery can access, distinguish and process it?
This is part of an electron application but I'm not sure if that even matters for that question.
The content of the json file assuming it is a json object can be assigned to a javascript variable in the html document in a script tag.
Then to refer to, for example foo, you use theJsonObject.foo;
With the following javascript snipet you can see inthe browser's console the name of each property an the value.
How you mix this in your current code depends on how you are writting it. But make sure the variable is declared before you use it.
for (let prop in theJsonObject) {
console.log( prop + ": " + theJsonObject[prop] );
};
<html>
<head>
....
<script>
var theJsonObject = {"foo":"bar", "bar":"foo", "far":"boo"};
</script>
</head>
<body>
....
</body>
</html>

Jquery function to change id name continues to run on other pages even thouigh i don't want it to

This behavior is happening on a intranet website structured for computer based training. I am using a function to change "id" name of a div using jquery on the fly on a single page.
$('#frameTextBg').attr('id','frameTextBg-horz');
It works fine. The problem is that when I navigate to another page, this functions continues to run and any page with div name #frameTextBg is being renamed to frameTextBg-horz.
I navigate to other pages using jquery to load pages inside a div. Note "var NextPage" is declared in each page by the authoring programs html export:
function NextPage() {
$('#content').load(nextPage)
};
How can I stop this function from running on other pages?
Thanks in advance.
Mark
Here are portions of the html markup relevant to the "outside" container that will load each page inside a div named #content.
...
<body class="mainBody" onLoad="resizeCBT();">
<div id="container">
<div id='content'></div>
<div id="footer">
<p id="footerP">LessonName</p>
<div id="footerPG">00 of 00</div>
<div id="footerNav"></div>
<div id="footerID" style="display:block" ></div>
<div id="control" name="control"><div>
</div>
<script type="text/javascript">
$('#content').load("Menu-0.htm");
$( "#control" ).load( "interface/control.htm #select1" );
document.getElementById('control').style.display="none";
</script>
</body>
...
Next are portions of the markup for a single page that runs the function to rename the id:
...
<script type="text/javascript">
var frame_id = 95675
var graphic_1 = "20.png"
var graphic_2 = ""
var nextPage = "a.htm"
var prevPage = "c.htm"
var thisPage = "b.htm"
var menuTitle = ""
var frameTitle = "title"
var sequence = 20
var totalFrames = 26
var manifestName = "No_Flash"
var instructText = ""
var audioFilename = ""
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
</script>
</head>
<body>
<div id="header">
<div id="header1"><h1 id="header1t">headerOne</h1></div>
<div id="header2"><h1 id="header2t">HeaderTwo</h1></div>
<div id="header3"></div>
</div>
<div id="GRAPHIC"><img src="20.png"></div>
<div id="TEXT" class="text">Text here.</div>
<div id="frameTextBg"></div>
<script type="text/javascript">
function NextPage() {
$('#content').load(nextPage)
};
function PrevPage() {
$('#content').load(prevPage)
};
document.getElementById('footerID').innerHTML = frame_id;
document.getElementById('footerPG').innerHTML = sequence + " of " + totalFrames;
if (typeof runAfterPgLoad == 'function') {
runAfterPgLoad();
}
</script>
</body>
</html>
Other pages DO NOT have the function:
function runAfterPgLoad() {
$('#frameTextBg').attr('id','frameTextBg-off');
}
Note that some markup has been omitted because this material cannot be disclosed. Sorry if I accidentally cut off any relevant markup.
You're using ajax to replace PARTS of your page. since you're not reloading the entire page, or using a normal "click to go to next page" system, that function will keep working until you tell it to stop, e.g.
var stop_it_already = false;
if (!stop_it_already) {
$('#frameTextBg').attr('id','frameTextBg-horz');
}
This isn't a definitive answer, because I'm still unclear about how exactly NextPage gets called.
You should never have different HTML elements with the same id. Since it's not something you're meant to do, I'm not even sure the specification for HTML says what should happen, so your page may behave differently on different browsers. Does $('#frameTextBg') represent all frameTextBg elements? Or does the browser only let it be one element and, if so, which one?
I used to work on a project which involved embedding lots of not-quite-identical copies of a website in another website. We had to change all the id attributes to CSS classes. Then, assuming all the frameTextBg elements are in different sections of the website, we could write $('.section-1 .frameTextBg'), $('.section-2 .frameTextBg'), etc.
Note "var NextPage" is declared in each page by the authoring programs html export
My client-side javascript is a little rusty, but I think that any declaration not inside a function definition just goes in the global scope anyway. This could cause problems with the latest copy of NextPage running instead of an earlier one. (But I can't tell because I don't see where NextPage is called from.)
You say you're reloading part of the page. Do you really need to reload the part with the <script> element?

Categories