How can I have a control on HTML elements using a JS code from another page, like, I have an HTML page called "index" and it contain a <p> element, and I have a another page called "controlPanel", how can I Edit the <p> element in "Index" from the "controlPanel" page.
JavaScript runs in the context of the current page and is completely removed from memory along with HTML and CSS when the browser navigates from one page to another. So you cannot control one page using JavaScript from another page.
The only exceptions are:
If the first page opens the second page using the window.open() method.
If the second page is loaded in an iframe inside the first page.
What you can do is persist the state to some storage (e.g. the database, or the local storage in the browser) in the first page, and read it in the second page to change the behavior accordingly.
Of course, you can always send parameters from the first page to the second (e.g. in the URL query string), and the second page will behave differently according to the value of the parameters.
Related
I wish to use Chrome devtools' "local overrides" for a test project. I wish to only change a single character on this page, and save it to my computer. On the webpage I have chosen, there is a page I wish to change. This page is only accessible via clicking a button on the previous page. Both the previous page and the page I wish to change have the exact same URL, like so:
https://stackoverflow.com/questions/ask?guided=false (page 1 with button)
https://stackoverflow.com/questions/ask?guided=false (page 2 reached from page 1)
The pages hold some similar elements that do not change, but a large portion of the page switches from one table to another.
All elements in the table are text with hyperlinks, and in regular inspect element it is trivial to find and replace the character on the second page, but within local overrides' 'Network,' and 'Page' tabs, II can only ever find reference and elements of the first page. Is what I am attempting even possible? Please excuse any ignorance on my part, I am simply trying to better understand local overrides, and how it would work here.
Is it possible to make changes to the page source content through Ajax loaded by a jsp include in the main jsp ?
If not is it possible to reload that portion of the page alone (the jsp that loads some of the content) and to have a portion of the content in the page source changed ?
Details:
I've a variable called page this var gets its content from a java controller as a map of <String key,map<String key,String value>then it performs multiple actions and adds different params to the map, convert it to JSON and sends it to a jsp.
Recently I wanted to do something different,I want to add a param to the 'page' variable called contentOfThePage this variable gets its content dynamically when the document is fully loaded, after that I perform an Ajax request to the controller to add the new param, but the problem is that the new changes never makes it to the page source unless i reload the page or i navigate to another page and this is causing a lot of trouble as the page source may contain the page content of the previous page!
Any idea on how to avoid this and make changes to the page source (NOT DOM) directly ?
keep in mind that the contents are added dynamically but i need a way to change the page source without impacting the performance by requesting a reload after the ajax request succeeded
First You want to update some data that is already there after page load
you already have a json so a rest call i assume
you call it using ajax
now you added something else that you want to change
Yes it can be done actually
but not with the present set
i assume you have a single jsp and trying to change that jsp
well fit whatever you want to change in a panel like a graph or anything else
Add a button to top of the panel and on click the button url must be to the rest call so then data will be updated
I too have faced a similar problem with graphs,
i needed the graph to give updated data without refreshing the whole page,
so i put it inside a panel and wrote a rest controller that gives data for the graph and put a refresh button that calls this rest controller. This let me then update the graph without refreshing the rest of page
I have a web page that draws data from several other local (same origin) web pages. I collect the data from these other web pages using XMLHttpRequest. I then use the DOM to parse out the needed data from each page. There is one piece of data that I would like to include in each of the other local pages (i.e., in the DOM for each of the other local pages), however, I don't want that data visible when the web page is viewed. (Visible in the source code is OK, just not in the rendered HTML). I can think of a couple of ways of doing that. However, I am not enammered with any of them. I'm wondering what suggestions others might have. Thanks for any input.
Some options:
The hidden attribute:
All HTML elements may have the hidden content attribute
set. The hidden attribute is a boolean attribute. When
specified on an element, it indicates that the element is not yet, or
is no longer, directly relevant to the page's current state, or that
it is being used to declare content to be reused by other parts of the
page as opposed to being directly accessed by the user. User agents
should not render elements that have the hidden attribute
specified.
The template element
The template element is used to declare fragments of HTML that
can be cloned and inserted in the document by script.
In a rendering, the template element represents nothing.
Comments
Depending on the semantics, you can choose one or another. Or even combine them:
<template hidden><!-- Hidden data --></template>
As you mentioned to get through AJAX request, it is in your control where to show or not.
Once you get the result through AJAX, you can store in your script to do some manipulation or show in HTML page itself with parent tag as visible false, so that end user cannot see (except Source code viewing).
What's wrong with a simple hidden div?
<div id="hiddenData" style="display:none;">...</div>
To be honest, it seems like the way you are passing around data is kind of a hack already, so I don't see any real need to be fancy.
I'm working on my first chrome extension. My extension works on specific pages.
I need to access the current page of the user, and get values from the 'table' element in the page.
Do I need contentscript page or is background.html enough? How do I access the table element then?
Read this SO question in order to understand the difference between content script and background script. Now, back to your question
Since you want to get access to the DOM element of the current page, you need to do the following:-
In your manifest.json, make sure you have the url pattern which matches the current page url.
Make your your content script runs after page load on the current page
Once you ensure 1 and 2, you can use simple query selectors to get access to the table element and get the values you need.
Now it depends what you do want to do with the table values you have obtained. If you need them in the background script for storage purpose or some other purpose, you can use Mesage Passing to send the values to background script.
I have a list of "patients" that is queried and linked like so:
list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+data[i].UnitNumber+"&type='/><h3>"+data[i].LastName+", "+data[i].FirstName+" "+data[i].MiddleName+"</h3><p>Age: "+data[i].Age+"</br>SSN: "+data[i].SSN+"</p></a><a href='./patient.html?id="+data[i].UnitNumber+"' data-transition='slideup'>info</a>"));
Upon clicking that page I arrive at a patient profile page that should load in some of this data using the query in the URL (i.e. patient.html?id=100002). That ID is used in a getJSON call to populate the various fields. I want this to happen as soon as the page is loaded.
Problem: When one of the list elements above is clicked, it leads to the patient profile page but none of the fields have been populated. If I Refresh that same page, all of the data loads fine. Here's some code:
function login() {
var query = window.location.search;
if (query.substring(0, 1) == '?') {
query = query.substring(4);
}
$.getJSON("http://URLGOESHERE/wcf/PatientSearch.svc/byunitnumber?unitnumber="+query+"", function(data) {
var head1 = document.getElementById("name");
var newtitle=""+data.LastName+", "+data.FirstName+" "+data.MiddleName+"";
head1.firstChild.nodeValue=newtitle;
document.frmLogin.email.value=" "+data.BirthDateText+" ("+data.Age+")";
document.frmLogin.password.value=" "+data.SSN;
document["profpic"].src = "http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+query+"&type=pic";
});
}
I call the function "login()" at document.ready. I even tried calling it "onLoad" of the body. No idea why this doesn't work when linked, but does if I just go to the URL directly or I refresh..
Linking within a multi-page document
A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.
If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.
It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would look like this:
href="multipage.html" rel="external">Multi-page link