Something out there who had displayed the rendered html of a page in a div..
Lately I had develop a simple CMS for page meta taggings (dynamically add meta tags according to db record). All goes okay until SEO teams want a proof that it was 'really' rendering the metas.. I can prove to them using the developer tools but they do not want to manually press the F12 and check if the meta was rendered. They do want to display directly on screen e.gdiv.
And I have no idea where to start. Excluding my situatuon, Is it possible to grab the data in developer tools and display it on a div or iframe? Or the view source maybe?
I am searching for possible solution to this but unluckily, cant find one using javascript, jquery, php.
You could propose to make bookmarklets that your SEO team can run that would make JS alerts of meta tag innerHTML.
Otherwise as one comment says, they should just press Ctrl+U, Ctrl+F, type "meta", press enter, and get over it.
Related
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
Hi I am trying to scrape a website where there is an input text. Whenever, I click on the input text there are dropdown suggestions for the value of the input text. It is not on select tag.
The value of those suggestion is inside a div tag elements. There were almost 200 divs/suggestions of it.
What I did is scrape from it using scrapy using xpath / css selectors. I found out that these 200 divs are actually hidden when I view the code using "View page source" instead of "Inspect elements".
Please help. Thank you
These elements are generated on the fly by some dropdown library, so you have to investigate the website source code and/or the HTTP requests it's making. All the data you are looking for should be there (most likely in JSON format), not in the HTML itself.
For example, if you are using Chrome:
Press F12 to open devtools while you are on the website
Press F5 to reload the page
Navigate to Network or Source tab
Try to locate the data (CTRL+F would be really helpful here)
The only option I can see is to choose the width and height on survey monkey and it generates a JS code to host.
This is the code I'm being given (I've removed my actually form url name for privacy reasons):
<script>(function(t,e,n,o){var s,c,i;t.SMCX=t.SMCX||[],e.getElementById(o)|| (s=e.getElementsByTagName(n),c=s[s.length-1],i=e.createElement(n),i.type="text/javascript",i.async=!0,i.id=o,i.src=["https:"===location.protocol?"https://":"http://","FORM.js"].join(""),c.parentNode.insertBefore(i,c))})(window,document,"script","smcx-sdk");</script>
Here's an idea of what result I'm getting
I want to be able to have the form look like its part of the webpage and not an embedded box that scrolls.
Is there a way to force this?
SOLVED: Found alternative work around
I am using WSS 3.0 in my application. I am displaying a List as a DataView Webpart. My objective here is to make this webpart visible to a selected group of individuals. As there is no option for Target Audience in WSS 3.0, I went to edit Permissions for List and gave Read permissions only to selected users. This doesn't hide the web part from the page, rather shows an Access Denied message to other users.
Access denied. You do not have permission to perform this action or access this resource.
As I said, I want to hide this webpart, as in make it invisible on the web page from other users who do not have permissions to view it. As this message will be displayed only to those users who do not have permissions!, my approach is to search for the above message in the html and identify and hide the parentnode, thereby hiding the webpart.
I am not quite sure how to do this. Any ideas? Thanks in advance!
I'm going to assume you're in a situation where you can add additional web parts to the page and not trying to add JavaScript to the DataView Web Part directly. My suggestion won't work on a separate page if a Designer adds another view of this list.
Upload a blank .js file to your Site Assets. Add a Content Editor Web Part to your page, point it at that file. Add JQuery from a provider or host it yourself, adding the reference in your file. From there, you have 3 directions in which to work: first, explore the web part with Internet Explorer's F12 Developer Tools, keeping a particular eye on divs and tables with good unique ids, names, or classes that would solve your problem if hidden. Also keep an eye on the id of the div or table or cell or whatever that contains your access denied text. Second, (assuming you're new to JQuery) do some JQuery tutorials and then start playing with selecting the above items and, say, changing their background color. Once you have both of those, you're 90% there: (try to) select the object that would contain the access denied text, and if the innerHTML is present and equals that string, then set display:none for the div or tables to hide your web part. The third tool you have is editing the page directly with SharePoint Designer: you can toss a div with an id of your choosing around any xsl:template, which might help in your JQuery selecting.
I'm sorry I can't give you the specific code, since I'm not in a position to test it. If that changes, I'll try and give a more detailed response.
Old, misdirected answer: Do either of the answers here work for you? Alternatively, this answer has some great resources to solve your problem. Just change the message to an empty string.
Thanks Aron :D
I found the id for the webpart and hard coded it. It provided the solution, but I was hoping to programmatically fetch the id instead by searching the innerhtml, as I have more than one web parts that have to be hidden.
I found a partial solution here:
Hide SharePoint web part using javascript onclick method
I put a CEWP on the page and added the following script in it:
<script>
function hide()
{
var content = document.getElementById("webpartID").innerHTML;
var n = content.search("Access denied. You do not have permission to perform this action or access this resource");
if(n!=-1)
{ document.getElementById("webpartID").style.display="none";
}
}
_spbodyonloadfunctionnames.push("hide");
</script>
In my case, I picked up the webpart id from the aspx page or view source for the page.
My javascript framework uses Ajax to dynamically change certain parts of my page. When I use a javascript console like firebug or the one that comes with Chrome and I try to find some tags it seems that the dynamically altered HTML parts are not searched. I will have to hunt them down manually which is a daunting task at times since the framework generates tons of HTML.
The only info I can find about this concerns finding tags programmatically by traversing the DOM but that is not what I'm looking for, I need my debugger to be able to find those tags when I am examining the code at runtime.
Is there a way around this in any browser?
I've created a simple example to demonstrate here
If you open it with Chrome, start the javascript console before clicking on the button and search for the word tag you will find 1 in the original HTML.
Next, click the button. You will see the change. Now search again for the same word tag. It will not be found. However, if you do a find for ta, it will be found. Looks like the search results are buffered someway and not cleared once the page changes.
Firebug doesn't seem to update the page at all.
I found out that if you start Chrome's javascript console after the Ajax refresh, text can be found however, if the Ajax refresh happens when the Javascript console is allready open, searching capabilities within the refreshed Ajax content is limited. I still can't figure out when it does/doesn't work.
Firebug > HTML Panel > mini-menu > Expand Changes
Then your search will work.
Make sure you are appending the ajax content to the document, at least some hidden div. It would be useful if you provide an example.
You can use jquery expressions in the console if you want to find something particular. Something like that: $('#myid'). Of course, you can search not only by id using jquery.