Dynamically create html for jQuery tabs - javascript

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/.

Related

SharePoint jquery javascript does not run but works from console

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".

Dynamic HTML page not using css

I'm trying to dynamically set the content of a popup.
Here is a first HTML page where everything is defined statically :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
<ul class='links-list'>
<li><a target='_blank' href='siteURL'><i class='myButton'>TEXT</i></a></li>
<li><a target='_blank' href='twitterURL'><i class='myButton'>TEXT</i></a></li>
</ul>
</div>
</body>
</html>
Now I need to dynamically set my buttons, so I've removed everything which will be dynamically created :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
My content script "script.js" receive data (array of links) and have to create buttons in my HTML document :
self.port.on("liste", function(list)
{
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.class = 'links-list';
for (var i = 0; i < list.links.length; ++i)
{
var site = list.links[i];
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.class = "myButton";
link.text = site.text;
link.href = site.url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);
});
Issue is links created dynamically aren't using "myStyle.css", here is a comparaison :
Static vs dynamic load :
Could anyone help me resolving this? Thank you.
The correct way to give an item a class using javascript is - unintuitively enough - className, or setAttribute. So either of these will add the correct class:
button.className = 'myButton'
button.setAttribute('class', 'myButton')
Using just .class does not work in Javascript:
document.getElementById('a1').class = 'aClass';
document.getElementById('a2').className = 'aClass';
document.getElementById('a3').setAttribute('class', 'aClass');
.aClass { color: red; }
<pre id="a1">.class</pre>
<pre id="a2">.className</pre>
<pre id="a3">.setAttribute</pre>
Looks to me like the comment from CBroe is the answer. In your javascript you're putting the text into the link instead of your button. That means that the button will essentially be invisible. That's why it looks different from your hard-coded example. Try this javascript instead.
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.className = 'links-list';
for (var i = 0; i < 4; ++i){
var url = i;
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.className = "myButton";
button.innerHTML = 'text'+i;
link.text = "ab ";
link.href = url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);

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"]

Inserting script and link tag inside the header tag

Is it possible to insert/generate <Script> and <Link> tag inside the <Header> using only Javascript or DOM (not JQuery) when the page load or by just including one <Script> tag inside the <Header> and do it from there? And would still allow us to debug it and avoid duplicates if just in case we already added one similar <Script> or <Link> in the <Header>?
For example:
Before
<Header>
<script src="Scripts/Generate.js" type="text/javascript"></script>
</Header>
After
<Header>
<script src="Scripts/Generate.js" type="text/javascript"></script>
<script src="Scripts/Script1.js" type="text/javascript"></script>
<script src="Scripts/Script2.js" type="text/javascript"></script>
<link href="CSS/Css1.css" rel="stylesheet" type="text/css" />
<link href="CSS/Css2.css" rel="stylesheet" type="text/css" />
</Header>
Any advice or answers would help me.
HTML:
<head>
<script src="Scripts/Generate.js"></script>
</head>
Scripts/Generate.js:
if(!document.getElementById('id1')) {
var script = document.createElement('script');
script.id = 'id1';
script.src = 'Scripts/Script1.js';
document.head.appendChild(script);
}
if(!document.getElementById('id2')) {
var link = document.createElement('link');
link.id = 'id2';
link.rel = 'stylesheet';
link.href = 'CSS/Css1.cs';
document.head.appendChild(link);
}
Afterwards, the HTML is:
<head>
<script src="Scripts/Generate.js"></script>
<script id="id1" src="Scripts/Script1.js"></script>
<link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>
The easiest way is like this:
> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';
I'll presume that "duplicate" means having the same src attribute value. Note that this will only prevent the addition of a duplicate by the script, so it must be run after all other scripts have been added:
function conditionallyAddBySource(tagName, src) {
tagName = tagName.toLowerCase();
var elements = document.getElementsByTagName(tagName);
var propToCheck = {script:'src', link: 'href'}[tagName];
for (var i=0, iLen=elements.length; i<iLen; i++) {
// If find a "matching" element, do nothing
if (elements[i][propToCheck].indexOf(src) != -1) {
return;
}
}
// Otherwise, add an element of the required type
var element = document.createElement(tagName);
element[propToCheck] = src;
document.getElementsByTagName('head')[0].appendChild(element);
}
conditionallyAddBySource('script', 'myJSLib.js');
The new element doesn't have to be added to the head, could just be written immediately using document.write or attached to the body (or any other element that can have child nodes other than the HTML and document element). Link elements probably should be in the head though.
Edit
Determine whether to check src or href depending on whether tagName is script or link.
Using Paul's suggestion of querySelector, you can use:
function conditionallyAddBySource(tagName, src) {
tagName = tagName.toLowerCase();
var propToCheck = {script:'src', link: 'href'}[tagName];
var element = document.querySelector(tagName + '[' + propToCheck + '$="' + src + '"]');
if (!element) {
element = document.createElement(tagName);
element[propToCheck] = src;
document.getElementsByTagName('head')[0].appendChild(element);
}
}
provided querySelector support is avilable (IE 8 in standards mode and higher, dunno about others).

showing array values in list items - Jquery, Backbone.js

i am trying to output array values via a click using backbone view model, please advise how to output each array values on a separate line or maybe displaying each array value in a list item via jquery. Thanks :)
<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
</head>
<body>
<button>click</button>
<div class="ctype"></div>
<div class="cexperience"></div>
<script type="text/javascript">
var Job1 = Backbone.Model.extend({
defaults:{
type:'permanent',
experience:['html','css','php']
}
});
var myJob1 = new Job1();
var Jobview1 = Backbone.View.extend({
el:'button',
events:{
'click':'render'
},
render: function(){
var _type = myJob1.get('type');
var _experience = myJob1.get('experience');
$('div.ctype').html(_type);
$('div.cexperience').html(_experience);
return this
}
})
$(document).ready(function(e) {
var myJobview1 = new Jobview1();
});
</script>
</body>
</html>
_.each(_experience, function (key, value) {
var tmp = $('<p />');
tmp.html(value);
$('.experience').append(tmp);
)};
this should work.
maybe you need to switch key, value to value, key.
i tend to forget the order of the parameters.

Categories

Resources