Javascript links and google seo - javascript

I have an xml file which would contain links to several internal html pages. I am using HTML DOM to get these links and display the links in a table. These links are simple html links and no parameters. These html pages reside in the server.
My question is, when I used fetch as google in webmaster tools. google is fetching the javascript but not the table that is populated. Will google crawl and index these links? I want to make sure that these pages linked here will be indexed... Please guide me through this issue. Also let me know if there would be a better way to display content from xml so that google crawls these links.
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/jobs/jobs.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write('<table id="example">');
document.write('<thead><tr><th>Job ID</th><th>Job Title</th><th class=\"mobexcl\">Location</th><th class=\"mobexcl\">Country</th><th class=\"mobexcl\">Date Posted</th><th>Status</th><th class=\"mobexcl\">View</th></tr></thead><tbody>');
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
if(i%2==0){
document.write('<tr class="alt">');
}
else{
document.write('<tr class="alt1">');
}
document.write("<td>");
document.write(''+x[i].getElementsByTagName("JOBID")[0].childNodes[0].nodeValue+'');
document.write("</td><td>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</td><td class=\"mobexcl\">");
document.write(x[i].getElementsByTagName("LOCATION")[0].childNodes[0].nodeValue);
document.write("</td><td class=\"mobexcl\">");
document.write(x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue);
document.write("</td><td class=\"mobexcl\">");
document.write(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("STATUS")[0].childNodes[0].nodeValue);
document.write("</td><td class=\"mobexcl\">");
document.write('View/Apply');
document.write("</td></tr>");
}
document.write("</tbody></table>");
</script>

Crawlers won't execute scripts on your page.
Google has devised a method to crawl ajax populated sites. You can read about it here.
Third item in the list seems to be applicable to your case.
Basically, your server needs to create a HTML snapshot of the ajax rendered page for google bot to crawl.
Google also provides tool to test this setup.
HTH.

Related

Cannot display js script in ie using querySelectorAll in XMLdom

So I have been searching everywhere, tried everything, but still, my script doesn't display in IE!! Any version! It displays in FF and Chrome beautifully, but ie, AAAAAARGH!! I changed the doctype to <!DOCTYPE html>, I added the <meta http-equiv="X-UA-Compatible" content="IE=edge" /> tag to my head, checked that my browser wasn't in quirks mode, or compat mode and just running in standards mode, deleted my cookies, history and reset my ie settings, checked my security settings and still nothing! What else am I missing? I am looking for that "missing link" that will FINALLY display my script in ie. Any ideas or help will be greatly appreciated.
SITUATION: I am using an html template to display and XML file using js.
JS:
var xmlhttp, xmlDoc, y
var xmlhttp = new XMLHttpRequest();
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest(); // code for IE7+, Firefox, Chrome, Opera, Safari
}
else if (window.ActiveXObject)
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
}
xmlhttp.open("GET", "/localfile/xmlfilename.xml", false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var y = xmlDoc.querySelectorAll(".class1, .class2");
document.write("<ul id='feed' data-role='listview' data-inset='true'>");
for (i=0;i<y.length;i++)
{
document.write("<li><strong>"+y[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</strong><br>"+y[i].getElementsByTagName("pubDate")[0].childNodes[0].nodeValue+"<br>"+y[i].getElementsByTagName("description")[0].childNodes[0].nodeValue+"</li>");
}
document.write("</ul>");
XML:
<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0">
<channel>
<item class="class1">
<title>Update's Title</title>
<pubDate>28 Oct 2015</pubDate>
<description><![CDATA[Whatever the update is with some links.]]></description>
</item>
<item class="class2">
<title>Another Update Title</title>
<pubDate>1 Oct 2015</pubDate>
<description><![CDATA[Some more html tags in the !cdata.]]></description>
</item>
</channel>
</rss>
Like I said, I am using an html template and using js to render my XML data. It displays very nicely in Chrome and FF, but not in ie 5+ or edge. The beauty of it all is that I don't get any errors in either browser, except for the Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/ in both FF and Chrome, and get no errors in ie. I know JQuery has some cool methods, but would rather stick with js to display my content. Sorry for the frustration, but WTH am I doing wrong??
First of all, try to do the ajax stuff using jQuery.
If it works, you will know that the problem is the ajax code ...
After rechecking my ajax, I was searching for an alternative method for both getElementsByClassName and querySelectorAll, when I read an article about the XMLDocument Object: http://help.dottoro.com/ljbcjfot.php & read that neither was supported by ie. Ugh, gonna have to rewrite the script all over again, for the 3rd time, but using jQuery. It makes sense that ie's error console kept telling me that querySelectorAll method was not supported. rolling eyes Thanks for the help Guilherme.
FINALLY FOUND THE ANSWER!! My ajax works well when I loaded the entire xml document. However, when I added the parameters to filter and only display xml nodes with the specific classes instead of the entire document, getElementsbyClassName and querySelectorAll were not working in ie and later read that neither was supported by ie n-e version: http://help.dottoro.com/ljbcjfot.php. I researched for a long time trying out new solutions, and everything in js. I took your advice to use jquery to upload my doc and began using the parameters & methods to only display the nodes with specific classes, and it was cross browser compatible. In case anyone needs it:
jquery code
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<ul id="feed"></ul>
<script>
$.ajax({
type: 'GET',
url: '/file/rssfeed.xml',
dataType: 'xml',
success: function(xml){
$(xml).find("item.class1, item.class2").each(function(){
var title = $(this).find('title').text();
var date = $(this).find('pubDate').text();
var description = $(this).find('description').text();
$('#feed').append('<li><strong>'+title+'</strong><br>'+date+'<br>'+description+'</li>');
});
}
});
</script>
</body>
I added a ul tag in the html with the id="feed" and the lis fell in place for each post. Originally, I used the js to upload the xml document and display all the nodes in the html template, but had to use jquery to filter and display only the xml nodes with separate classes (item.class1, item.class2). The original js/ajax script, without the parameters, is cross browser compatible, and the jquery script I'm using now, filters and displays in Chrome, FF & IE!! Yay!! Take that ie!!

Getting "Cannot read property 'innerHTML' of null" but I have that id initiated

I have read on here that usually this problem comes up when the specific div isn't loaded yet or just isn't there. I have this code looping so even if it wasn't fully loaded the first time it will be by the next iteration. Also I for sure have a div with the id participants.
<div id="participants">
<div class="sectionhead wow bounceInUp" data-wow-duration="2s">
<span class="bigicon icon-user"></span>
<h3>Participants<h3>
<h4>Check out who has signed up already!</h4>
<hr class="separetor">
<div id"test" onload="updateVariables()">
</div>
</div>
</div>
<script>
setInterval(function(){
updateVariables();
},4000);
updateVariables = function() {
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var info = xmlhttp.responseText;
console.log(info);
var out = info.split("\n");
console.log(out[1]);
var outLen = out.length;
for(x = 0; x < outLen; x++){
document.getElementById("test").innerHTML += out[x];
document.getElementById("test").innerHTML += "<br>";
}
}
}
xmlhttp.open("GET","../php/tour.txt",true);
xmlhttp.send();
}
</script>
That's pretty simple. In your real page you have a simple typo mistake. Instead of
<div id"test" onload="updateVariables()">
You should have
<div id="test" onload="updateVariables()">
EDIT: the easiest way to locate such errors on your own is debugging. I consider at the moment that Chrome dev tools is the best option, however you can use dev tools F12 of any browser, since this problem is simple. I will demonstrate an example on Chrome.
In console you will see errors happening. To the right of the error you can see a link to the place in sources where it happens.
A click on (index):247 takes you there in debugger window. Where you can place a breakpoint. Once you hit the breakpoint you have very powerful tools provided by Chrome. You can add variables to watch list, you can execute any code in console, you can trace the DOM (Elements tab) at current moment.
The typo of interest can be easily located by copying the code you suppose is working to console document.getElementById("test").
Now you start getting puzzled what the heck it returns null instead of a div. You go to elements tab and search for test by Ctrl+F. You find the text in html however after roaming around with beer you notice that the id is actually not defined due to wrong syntax

Convert to Text Box search instead of drop down

I've been using this script to bring back information from a drop down select option, i want to use this same method but in a text box, where the user can input a search instead, is this possible to do? It would be a search engine of sorts. I think i can figure out how to create the search engine part, I just need to covert this first to make sure i can return back a proper result.
My objective is to Allow the user to type in a text field a specific logo he/she wants, and the return is the results of that search. They are searching png images in an array and will select one to complete the form.
function showSub(str) {
var xmlhttp;
if (str=="") {
document.getElementById("txtSub").innerHTML="";
return;
}
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtSub").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getSub.php?q="+encodeURIComponent(str),true);
xmlhttp.send();
}
Html
<tr>
<td width='15%'><div align='right'><strong>Sub-Category</strong></div></td>
<td width='70%'><div id="txtSub"></div></td>
</tr>
Side note: I've seen search queries that give you results on the fly and results that give you results after pressing enter. My current script that uses this is in ajax I believe and gives you the results after the drop down is selected, would it possible to do the same with a text search box?
Edit: Also, if this script is the wrong method to do this, and someone has an alternate suggestion or a script that already does this, i'm very open to other ideas. thanks.
If you want to use a text field input you could do something like:
html
<input type="text" id="searchText" value="" />
javascript/jquery
$(document).on('change', '#searchText', function() {
// Get the search text
var searchText = $(this).val();
// Make sure it isn't empty
if (searchText.length > 0) {
// Send the update request
showSub(searchText);
}
});

How to get unnamed elements from an external webpage using AJAX?

At the moment I'm trying to get an element off an external website using AJAX, so far I've (hopefully) managed to get the page:
var xmlhttp;
var version;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
version=xmlhttp.innerHTML;
}
}
xmlhttp.open("GET","http://www.minecraftwiki.net/wiki/Minecraft_Wiki",true);
xmlhttp.send();
Now I just need to find a way to get the contents:
<dd> Current PC version:
<b>
<a href="/wiki/Version_history#1.2.5" title="Version history">
1.2.5
</a>
</b>
</dd>
I've checked the source code of the url and sadly the element I want is unnamed (Has no id=" "), so is it still possible to do so? And if so, how? Thanks
First, you're making a cross-domain request, so unless you're using a browser that allows cross-domain AJAX, this is most likely not going to work for you without using a server-side proxy.
However, to answer your original question, you don't need an id attribute to access an element. While helpful, you can access an element in any number of ways.
Class Selectors
var col = document.getElementsByClassName("the-class");
Then loop through the collection until you find the element you want.
jQuery Selectors:
jQuery Selectors are perhaps the easiest way to handle DOM manipulations and get access to the element you are interested in:
// example of an attribute selector:
var exampleHTML = $('div[title="example"]).html();
There is also XPath, but from my experience jQuery CSS Selectors are more modern, robust, and help speed up the development process.

Images through XML into to HTML

I have a folder of images, these images need to display on a HTML page I'm using a excel spreadsheet exported to XML which is imported into HTML using Javascript: (copied and pasted from w3schools).
What I need to do is get the images from the images folder using XML and display it in between h2 and h3.
How do I do this and what would it look like in the XML file and Javascript below?
Each div (below) then needs to be a link to different pages?
Also the items on the XML needs to be indexable/searchable I have google custom site search.
Thanks in advance.
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","cdcat.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
document.write("<div class=\"feat_product\"><h2>");
document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
document.write("</h2><h3>");
document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
document.write("</h3></div>");
}
</script>
I will not write your code for you, but explain the approach:
You need to use img elements and set the src attribute to the public path the images are exposed on. This is in javascript.
In your XML, for each CD element you will need to pass in the image path as well to be consumed by the javascript.

Categories

Resources