Suppose I have a radio button collection.
While I am selecting/deselecting certain options, Tick mark seems to be moving as well.
However if I see the HTML code, none of the options really show a "checked=true" in html.
1)So where is this information stored about my choices really ? DOM objects ?
Also using JS I change the checked attributes of DOM object- yet I dont see a change in HTML source of page. & I want this information to be present in HTML - coz I would be exporting pages in a way.
2)How do I use the Javascript to include "checked=true" in HTML itself ?
The HTML source is only the "blueprint" for the current page. The code gets loaded and parsed into DOM nodes, somewhere in the browser's memory. When the page is displayed, things take place in the browser's memory.
Therefore, dynamic changes will not automatically reflect to the default "view source" view in the browser.
Firebug's source view can show dynamic changes to the DOM - it translates them back into HTML "live". You won't see form values there, though.
As #Daniel points out, the "view selection source" function in Firefox also shows a "live" view of the selected area.
When you right click and select "view source", you will get the source that was sent to you by the server. Firefox has a "view selection source" that allows you to view the "updated" source, and the Firebug extension allows you to view this as well. Chrome has got "Developer Tools" built-in that allows you to inspect the HTML as well.
Related
This website contains a numeric "value adjustment" value (highlighted on the left in the image below) that appears when visitors populate fields elsewhere on the page with certain values.
My goal is to find the code that calculates the value adjustment. I know that populating the fields that makes this value appear queries a database, but the values from that database are then passed to some sort of program/code somewhere that computes the "value adjustment."
As I'm a novice when it comes to Javascript and web design, my first step was to inspect the elements around the value adjustment in Chrome Developer Mode. As you can see on the right-hand side of the image, it's straightforward to find that value. However, I have no idea how that value was produced.
At a high level, what steps can I take to try to figure this out? For example, does the fact that the value is "hard-coded" in that image as a string imply that there is a script file that is sourced somewhere every time that value is updated? How can I look for/inspect this script? Or are these scripts not observable?
When you inspect the elements tab in dev tools you are inspecting what is rendered on the webpage. It always looks hard coded. It's showing you the end result.
If you inspect an element that changes things on the page when it's interacted with, it probably has js 'event listeners' attached to it. You can inspect the code for the listeners in dev tools which would reference specific js functions which are called when specific events occur. You can do essentially the same thing via the console too.
Additionally, If you look in the network tab of a web page you can see all the client side files served to you when a page is loaded. You can filter for js files. However, there could also be js embedded within html.
Depending on how the page was made, libraries/frameworks used, and what processing was done to the js before being added to production environment, the js code could be quite a nightmare to attempt to read even if you have an in-depth knowledge of JS.
I'm testing a page that has about 50 read-only fields, each one shows values that come from a database. The page works fine, when a change is made in that field (in the database) the page shows the change correctly.
The problem is:
To see how the change is reflected I must refresh the whole page (with f5) and this takes a long time reloading the whole page from scratch. I need a way to use the chrome console to refresh just that HTML element (the one that contains the field I'm testing) and speed up testing. There are too many values that I have to try: /
For example, I know that I can give commands to the browser from the console like the following:
document.getElementById("combo-1123-trigger-picker").click();
document.getElementById("combo-1123-trigger-picker").remove();
And those work. But, if I try something like:
document.getElementById("combo-1123-trigger-picker").load();
or something like:
document.getElementById("combo-1123-trigger-picker").refresh();
...it does not work.
Is there a way to update just one HTML element using the Chrome Console or the Development Tools?
I am trying save data from a web site. There are fields in the html that look like this
<td class="data-value" id="v0">yellow</td>
where the text yellow changes as the user moves the mouse on the page. (To be clear, these fields do not appear in the source if I just do "view-source", but if I use Chrome Develpment Tools and do "inspect element" I can see this.)
I want to find and save the source of this text, which I'm pretty sure is coming from JSON somehow, but I'm not that familiar with Ajax and other tools that the site appears to be using.
So, is there a way to identify where this text is coming from and access it? In other words, I'd like to be able to parse the HTML, and identify what call to make to just see the JSON that is populating this text.
The text may be remotely generated, in which case you will have to simulate the same AJAX requests to access all of the cases.
If the text is stored locally (Javascript), you can access it via events. The first step would be to identify the type of event. Is it a onmouseover or onmousemove? What is the event callback attached to? The page, or the elements being "overed"?
After identifying those criteria with a debugger, you will be able to search the html and javascript references for where these events are being attached in code. That will lead you to a callback function (the one making the decision of which text to post). This callback may perform AJAX, it could have a local table, or it could be a different callback for each element. Any way you go, at that point you will know which file to have your script look at to parse out the data you're looking for.
I took over a project (ASP.Net AJAX, JSON) where I have a page that loads a large select (combo box) list of 1,430 entries and loads without issue on our main (landing) search page.
Issue:
I get the following error in MicrosoftAjaxTemplates.debug.js when loading a page where we edit or insert. The difference between the search page and edit page is that there is ajax data binding involved.
Microsoft JScript runtime error: and no other information.
in function Sys$UI$Template$compile() on the line:
element._msajaxtemplate = [this.instantiateIn = new Function("_containerElement", "$dataItem", "$index", "_referenceNode", "$parentContext", "_instanceId", code), nestedTemplates];
Here is a portion of the element inner html (removed most options; however, there are 1,430 options):
select style="width: 500px;" id="ddl_1_CompanyID_53f3ff5f-3070-4473-b8d9-e4055e29e0e9" önchange="UpdateObserver('CompanyID', this.value);" class="queryfield" title="Company" fieldbinding="CompanyID" LoadOnDemand="false" sys:value="{{CompanyID}}" width="500px" showcode="False" descfield="CompanyDescription" codefield="CompanyID" queryid="1" lookupid="1" sys:attach="dataview"> option value="0">(None) /option> /select> ... 1,429 options...
If I paste the entire HTML into jsfiddle.net the select list (combo box) renders with all options listed (no error).
I thought that the data used to build the select list was the culprit so I employed a binary sort approach where I deleted half the data and the error went away. I tested the other half and no error; but, with all 1,430 options I get the error.
Attempted Workaround
The next approach was to load the data onfocus of the select list (combo box). On the main page, no problem... control has focus the list populates. On the PrettyPhoto pages no error; however, the list is empty. Using Fiddler2 I see the JSON data being passed back and I can put a break point where the binding happens in javascript; however, the select list (combo box) is empty.
I've run into other issues with PrettyPhoto and read the following that helped me solve my date picker issue: "'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox"Source
I sense this same issue has to do with the select list not loading. Just not sure how to fix this.
Debugging
Removed the usage of pretty photo and the issue persisted (this issue seems to be the binding and the amount of data).
In IE 9 (or 8) I get the original issue.
In FireFox and Chrome... all is well.
I've been banging my head on this issue for some time now, any suggestion or tip to lead me in the right direction will be much appreciated.
The end solution was to not pre-load all the data into the drop down list; however, to load the data on demand. If the user pressed the "A" key, all the data that started with "A" would load the list and there were no errors.
I'm experiencing some very strange behavior after submitting a form.
I have a php page (mobile.php) that generates a series of forms (one at a time on separate requests). On submit the same php page (mobile.php) is called and it returns the next form.
Here's the really bizarre thing ... when I view source on the second page it shows the html from the first page, even though the browser is correctly displaying the second page. I then checked firebug and saw that it was also correctly showing the html for the second page.
One consequence of this is that my javascript form validation does not work on the second page. I figure this might well have something to do with this weird HTML discrepancy.
Any ideas?
View > Source shows the source of the current document
Firebug shows a live view of the DOM, which starts out with the document source, is modified by error recovery and then may be further modified by JavaScript.
Presumably the second "page" is being loaded via Ajax or otherwise created via DOM manipulation.