SharePoint jquery javascript does not run but works from console - javascript

I have the following code which works from console but does not work on page load.
The page does not have any error.
<div class="nav-report-category">
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ms-listviewtable tr[class='ms-gb']").each(function(){
alert('test 3');
});
var $mydiv = document.getElementsByClassName("nav-report-category")[0];
var $liTag = document.createElement('li');
var $aTag = document.createElement('a');
});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-report-category">
</div>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ms-listviewtable tr[class='ms-gb']").each(function(){
alert('test 3');
});
var $mydiv = document.getElementsByClassName("nav-report-category")[0];
var $liTag = document.createElement('li');
$mydiv.append($liTag);
var $aTag = document.createElement('a');
$mydiv.append($aTag);
});
</script>
Not sure what you are trying to do but if you wanted it in the DOM you have to also append it.If this is the thing that "was not working".

Related

Dynamically create html for jQuery tabs

I'm trying to write a page while creating almost all of the html via javascript. I want to use jQuery Tabs in my project. The content gets created, but the tabs are not showing. Is this a CSS issue?
function buildDocument() {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = "";
var uList = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = 'One';
li2.innerHTML = 'One';
uList.appendChild(li1);
uList.appendChild(li2);
var t1 = document.createElement("div");
var t2 = document.createElement("div");
t1.id = "tabs-1";
t2.id = "tabs-2";
t1.innerHTML = "Tab1";
t2.innerHTML = "Tab2";
tabsContainer.appendChild(uList);
tabsContainer.appendChild(t1);
tabsContainer.appendChild(t2);
$( "#tabs" ).tabs();
}
And the HTML:
<!doctype html>
<html>
<head>
<script src="main.js"></script>
<script type="text/javascript" src="external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body onload="buildDocument();">
<div id="tabs">
</div>
</body>
</html>
The jQuery files I've downloaded from their website here (everything as default):
http://jqueryui.com/download/
This is what I get
Your code works for me.
My include are:
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js">
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js">
function buildDocument() {
var tabsContainer = document.getElementById("tabs");
tabsContainer.innerHTML = "";
var uList = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
li1.innerHTML = 'One';
li2.innerHTML = 'One';
uList.appendChild(li1);
uList.appendChild(li2);
var t1 = document.createElement("div");
var t2 = document.createElement("div");
t1.id = "tabs-1";
t2.id = "tabs-2";
t1.innerHTML = "Tab1";
t2.innerHTML = "Tab2";
tabsContainer.appendChild(uList);
tabsContainer.appendChild(t1);
tabsContainer.appendChild(t2);
$( "#tabs" ).tabs();
}
<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<body onload="buildDocument();">
<div id="tabs">
</div>
</body>
DEMO
Your codes works good for me. The only thing i changed is:
<script type="text/javascript">
$(function(){
buildDocument();
})
</script>
instead of <body onload="buildDocument();"> but is not necessary.
You must load your jqueryui stuff from the right url.
Take a look at https://code.jquery.com/ui/ for all the version.
If you are including jQuery, why don't you consider to short the code
of your function.
An example:
function buildDocument() {
var tabsContainer = $('#tabs');
tabsContainer.empty();
var linkOne = '<li>One</li>';
var linkTwo = '<li>One</li>';
var t1 ='<div id="tabs-1">Tab1</div>';
var t2 ='<div id="tabs-2">Tab2</div>';
tabsContainer.append('<ul>'+linkOne+linkTwo+'</ul>')
tabsContainer.append('<div>'+t1+t2+'</div>');
tabsContainer.tabs();
}
You can also works with array stuff like:
var links=["tab-1","tab-2"];
var tabPg=["Tab1","Tab2"];
is jquery-ui.css loading properly?
Try Google hosted library
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
If jquery-ui.css is loading properly, you should see the default style. Also make sure your HTML is rendered in a right format as https://jqueryui.com/tabs/.

document.getElementById returns null when working with iFrame

My html page has the following 2 scripts:
1.
<script language="javascript" type="text/javascript">
document.write("<iframe id=\"frame\" src=\"http://mywebsite.com/" + "\"scrolling=\"yes\" width=\"850\" height=\"575\" frameborder=0></iframe>");
</script>
2.
<script type="text/javascript">
var myframe = document.getElementById("frame");
if (myframe) {
var myframe_window = document.getElementById('frame').contentWindow;
if (myframe_window) {
myframe_window.confirm = window.confirm;
}
}
</script>
I'm trying to override a methiod in iFrame, but cannot get its id.
What am I doing wrong?

Get selected (current) list item ID

Is there a way to get a current list item ID using JavaScript?
Any help is appreciated.
Use this function: GetUrlKeyValue("ID")
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script src="/jquery.SPServices-2013.02a.js" type="text/javascript"></script>
<script type="text/javascript">
var itemid = GetUrlKeyValue("ID")
</script>
<script type="text/javascript" src="/jquery-1.10.2.min.js"></script>
<script src="/jquery.SPServices-2013.02a.js" type="text/javascript"></script>
<script type="text/javascript">
var docurl = document.URL;
var beginindex = docurl.indexOf('?ID=') + 4;
var endindex = docurl.indexOf('&Source=');
var itemid = docurl.substring(beginindex, endindex);
</script>
I found this is the easiest way
SP.ScriptHelpers.getDocumentQueryPairs()["ID"]

Why am I getting a “hover is not defined” error in my JavaScript?

What’s going on? It says that “hover is not defined”, but in my jsFiddle, the code works fine:
click
<div id="1"></div>
<script type="text/javscript">
function hover(x) {
var id = x;
var hoverBubble = document.getElementById(id);
hoverBubble.innerHTML = "hello";
}
</script>
<script type="text/javscript">
That is misspelled. It should be javascript
<script type="text/javascript">

Javascript method not defined

Why does this not work when I move the code in the first script block (without the script tag itself) to an external javascript file.
The idea is to call homead.load() from home page and load everything processed by homead_build();
Error says 'homead not defined' using Firefox Error console
<div id="box">
</div>
<script type="text/javascript">
var homead = {
box_id: "box",
width: "150px",
load: function(){
homead.homead_build();
},
homead_build: function(){
var div = document.createElement('div');
div.style.width = homead.width;
div.style.height = '55px';
div.style.border = 'solid 2px #000';
var box = document.getElementById(homead.box_id);
box.appendChild(div);
}
};
</script>
<script language="JavaScript" type="text/javascript">
homead.load();
</script>
Maybe you are including the external script file after you call homead.load()? Make sure it is loaded before it is used:
<script language="JavaScript" type="text/javascript" src="external.js"></script>
<script language="JavaScript" type="text/javascript">
homead.load();
</script>
Make sure you include it before using homead, and that the file has been loaded correctly.
(e.g.: say alert("im loaded...") in the file)
Your code can be simplified btw:
var homead = {
box_id: "box",
width: "150px",
load: function(){
var div = document.createElement('div');
div.style.width = homead.width;
div.style.height = '55px';
div.style.border = 'solid 2px #000';
var box = document.getElementById(homead.box_id);
box.appendChild(div);
}
};
yes its working fine.You might be giving wrong src path of file to script tag.
I have done following ;
<script language="JavaScript" type="text/javascript" src="../../Scripts/test.js" ></script>
added code
<div id="box">
</div>
<script language="JavaScript" type="text/javascript">
homead.load();
</script>

Categories

Resources