Get selected (current) list item ID - javascript

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

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

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?

use tags <script> with if and else

I have some script tag like this:
<script src="cordova-2.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/xml2json.js"></script>
<script src="js/ZipPlugin.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/prefixfree.min.js"></script>
This is my app i wrote using phonegap for android but i want to use code in web. And i dont use all for web page.
Have any way to do it like using if else like this in html:
if(anything) {
<script src="cordova-2.5.0.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.mobile-1.1.1.min.js"></script>
<script src="js/jquery.xdomainajax.js"></script>
<script src="js/xml2json.js"></script>
<script src="js/prefixfree.min.js"></script>
} else {
<script src="js/ZipPlugin.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
}
I am a dumper, please help me.
Thanks for reading!!!
Edit:
if i want to change my script tag:
<script src="js/prefixfree.min.js"></script>
Become like this:
<script src="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/js/prefixfree.min.js"></script>
Have anyway to make a variable like:
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/"
And then use in tag like this:
<script src = "key + 'js/prefixfree.min.js'"></script>
How about this,
function registerScript(scriptPath) {
var scriptTag = document.createElement('script');
scriptTag.type = 'text/javascript';
scriptTag.async = true;
scriptTag.src = scriptPath;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(scriptTag, s);
}
if (anything) {
registerScript("cordova-2.5.0.js");
}
For the first part. you can do this:
if (anything) {
$('head').append('<script src="cordova-2.5.0.js"></script>')
.append('<script src="js/jquery-1.7.2.min.js"></script>')
.append('<script src="js/jquery.mobile-1.1.1.min.js"></script>')
.append('<script src="js/jquery.xdomainajax.js"></script>')
.append('<script src="js/xml2json.js"></script>')
.append('<script src="js/prefixfree.min.js"></script>')
} else {
$('head').append('<script src="js/ZipPlugin.js"></script>')
.append('<script src="js/jquery-ui.min.js"></script>')
.append('<script src="js/jquery.ui.touch-punch.min.js"></script>')
}
To change the script tag, do this:
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/"
$('script[src="js/prefixfree.min.js"]').attr('src', key + 'js/prefixfree.min.js');
Using jquery template :
DEMO : http://jsfiddle.net/abdennour/R36Qc/3/
Your template :
<script id="myscripts" type="text/x-jquery-tmpl">
<script src="${myurl}" type="text/javascript">
{{html "</sc"+"ript>"}}
</script>
Your javascript code :
$('#myscripts').tmpl(myarray).prependTo('head')
The branching (if) is done on array of String (src of js) :
var myarray=[]
if (anything) {
myarray=[{myurl:"cordova-2.5.0.js"},
{myurl:"js/jquery-1.7.2.min.js"},
{myurl:"js/jquery.mobile-1.1.1.min.js"},
{myurl:"js/jquery.xdomainajax.js"},
{myurl:"js/xml2json.js"},
{myurl:"js/prefixfree.min.js"},
{myurl:"js/jquery.mobile-1.1.1.min.js"}
]
} else {
myarray=[{myurl:"js/ZipPlugin.js"},
{myurl:"js/jquery-ui.min.js"},
{myurl:"js/jquery.ui.touch-punch.min.js"} ]
}
See : https://stackoverflow.com/a/5462679/747579
To check result , open browser inspector :
You could make a script to create all the scripts node like:
<script>
var head= document.getElementsByTagName('head')[0];
var key = '';
if(anything) key = 'http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/';
var scripts = new Array()
scripts[0] = 'js/prefixfree.min.js';
scripts[1] = 'js/foo.js';
for(var s in scripts) {
var script= document.createElement('script');
script.type= 'text/javascript';
script.src= key + s;
head.appendChild(script);
}
</script>
You could use pure javascript like that:
<script>
var key ="http://smartphone.thnt.vn/VietGames/GhepTranhTu/Web/",
file=document.createElement('script');
file.type = "text/javascript";
file.src = key + 'js/prefixfree.min.js';
document.getElementsByTagName("head")[0].appendChild(file);
</script>
<script>
if(foo) {
document.write('<script src="a.js"><\/script>');
} else {
document.write('<script src="b.js"><\/script>');
}
</script>
In this case document.write is a valid option. The script tags are blocking anyway.
You can include script files dynamically using JavaScript. See an example here:
Load jQuery with Javascript and use jQuery

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