I've created a dynamic listview from database on my jQuery mobile #page1.
That works all perfect. I can see a list with all items from my database (ID, name ...)
Now I want to pass the ID garm.ID from my database item to the next page, after I've clicked on a item in the listview.
My JavaScript:
$(document).on("pagecreate", "#page1",function(){
$(function() {
$.ajaxSetup( {
"async": false
} );
$.getJSON("http://server/kas1.js", function(data) {
for(var i = 0; i < data.length; i++) {
var garm = data[i];
$.getJSON("http://server/kas2.js", function(data) {
var no = data[0].no;
$("#content-page1").append(
"<ul data-role=\"listview\">" +
"<li><a href=\"#page2\">" +
"<h2>Hello</h2>" +
"<p>Status:"+data[0].no+"</p>" +
"</a></li>" +
"</ul><br>"
);
});
}
});
$.ajaxSetup( {
"async": true
} );
});
});
You can see the line: "<li><a href=\"#page2\">" +
With this link you will redirect to the next page and on the next page I want to use the passed ID.
Try this:
$(document).on("pagecreate", "#page1",function(){
$(function() {
$.ajaxSetup( { "async": false } );
$.getJSON("http://server/kas1.js", function(data) {
for(var i = 0; i < data.length; i++) {
var garm = data[i];
$.getJSON("http://server/kas2.js", function(data) {
var no = data[0].no;
$("#content-page1").append(
"<ul data-role=\"listview\">" +
"<li><a href='#page2?garm_id='" + garm.ID + ">" +
"<h2>Hello</h2>" +
"<p>Status:"+data[0].no+"</p>" +
"</a></li>" +
"</ul><br>"
);
});
}
});
$.ajaxSetup( { "async": true } );
});
});
On page two:
function queryStringParameters (keyValueString) {
var query_string, whole_query_string, query_string_obj = {};
if (typeof keyValueString === "undefined") {
whole_query_string = window.location.search;
if (whole_query_string[0] === "?") {
query_string = whole_query_string.replace('?', '');
} else {
query_string = whole_query_string;
}
} else {
query_string = keyValueString
}
var query_string_array = query_string.split('&');
if (query_string !== '') {
for (var i = 0; i < query_string_array.length; i++) {
var query = query_string_array[i],
query_array = query.split('=');
query_string_obj[query_array[0]] = query_array[1] || '';
}
return query_string_obj;
} else {
return {};
}
}
var hash = window.location.hash,
queryString = hash.split('?')[1],
garm = queryStringParameters(queryString),
garm_id = garm.id;
I hope this works:
'<li><a href="#page2,garmId='+ garm.ID +'">'
then, in page 2 you can (hopefully) parse the hashtag to get the id
Hope this helps, cheers
Related
I've got a strange behaviour with a JSLINK I'm using on my SP. The save button of the form is not working with IE if I change the value of the field that the JSLINK is transforming but it's ok with Chrome.
The field is type of Multiline plain text. I'm using using to save some JSON.
Here is the code:
(function() {
var loaded = false;
var repeaterFormArr = [
"<input type='text' id='nameInput' placeholder='Nom complet' class='ms-long ms-spellcheck-true intervenantsBox' required>",
"<input type='text' id='addressInput' placeholder='Adresse' class='ms-long ms-spellcheck-true intervenantsBox'>",
"<input type='text' id='phoneInput' placeholder='Telephone' class='ms-long ms-spellcheck-true intervenantsBox'>",
"<input type='text' id='emailInput' placeholder='Email' pattern=\"[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,4}$\" title='xxx#yyy.zzz' class='ms-long ms-spellcheck-true intervenantsBox'>",
"<select name='typeActor' id='typeActor' class='ms-long intervenantsBox'><option value='plaignant'>Plaignant</option><option value='avocat'>Avocat</option><option value='DPO'>DPO</option><option value='demandeur'>Demandeur</option></select>",
];
var ControlRenderModeIntervenant;
var repeaterFormValues = [];
function includeCss() {
if (loaded) return;
loaded = true;
var link = document.createElement('link');
link.href = _spPageContextInfo.siteAbsoluteUrl + '/Style%20Library/CSS/intervenantsEditCustom.css';
link.rel = 'stylesheet';
document.head.appendChild(link);
}
// This function provides the rendering logic
function IntervenantsRepeaterFiledViewTemplate(ctx) {
ControlRenderModeIntervenant = ctx.ControlMode;
if (ctx.CurrentItem[ctx.CurrentFieldSchema.Name] && ctx.CurrentItem[ctx.CurrentFieldSchema.Name] != '[]') {
var fieldValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name].replace(/"/g, "\"").replace(/(<([^>]+)>)/g, "");
repeaterFormValues = JSON.parse(fieldValue);
}
return GetRenderHtmlRepeaterValuesIntervenants();
}
// This function provides the rendering logic
function IntervenantsRepeaterFiledEditFTemplate(ctx) {
var field = ctx.CurrentFieldSchema,
encodedName = field.Name + '_' + field.Id + '_$NumberField';
ControlRenderModeIntervenant = ctx.ControlMode;
var formCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(ctx);
if (formCtx.fieldValue) {
repeaterFormValues = JSON.parse(formCtx.fieldValue);
}
// Register a callback just before submit.
ctx.FormContext.registerGetValueCallback(field.Name, function() {
return JSON.stringify(repeaterFormValues);
});
ctx.FormContext.registerInitCallback(field.Name, function() {
document.getElementById('innerFormIntervenants').addEventListener('submit', function(evt) {
evt.preventDefault();
AddIntervenant();
return false;
});
var deleteLinks = document.getElementsByClassName('delete-link');
if (deleteLinks.length > 0) {
for (var i = 0; i < deleteLinks.length; i++) {
deleteLinks[i].addEventListener("onclick", function(evt) {
evt.preventDefault();
DeleteItem(deleteLinks[i].getAttribute('data-myAttri'));
return false;
});
}
}
});
// formCtx.registerGetValueCallback(formCtx.fieldName, function() {
// return JSON.stringify(repeaterFormValues);
// });
var HTMLViewTemplate = "<form id='innerFormIntervenants'>{Controls}<div><input type='submit' value='Add' style='margin-left:0'></div><br/><div id='divRepeaterValues'>{RepeaterValues}</div><br/></form>";
var returnHTML = "";
for (index = 0; index < repeaterFormArr.length; ++index) {
returnHTML += repeaterFormArr[index];
}
returnHTML = HTMLViewTemplate.replace(/{Controls}/g, returnHTML);
returnHTML = returnHTML.replace(/{RepeaterValues}/g, GetRenderHtmlRepeaterValuesIntervenants());
return returnHTML;
}
function GetRenderHtmlRepeaterValuesIntervenants() {
var index;
var innerindex;
var HTMLItemsTemplate = "<table width='600px' style='border:1px solid #ababab;'>{Items}</table>";
var HTMLItemTemplate = "<tr>{Item}</tr>";
var HTMLValueTemplate = "<td>{Value}</td>";
if (ControlRenderModeIntervenant == SPClientTemplates.ClientControlMode.EditForm || ControlRenderModeIntervenant == SPClientTemplates.ClientControlMode.NewForm) {
HTMLItemTemplate = "<tr>{Item}<td><a class='delete-link' data-myAttri='{Index}' href='#'><img src='/SiteAssets/IMG/user-delete.png' class='deleteUserButton'/></a></td></tr>";
}
var returnHTML = "";
var tempValueHtml;
for (index = 0; index < repeaterFormValues.length; ++index) {
tempValueHtml = "";
for (innerindex = 0; innerindex < repeaterFormValues[index]["Intervenant"].length; ++innerindex) {
tempValueHtml += HTMLValueTemplate.replace(/{Value}/g, repeaterFormValues[index]["Intervenant"][innerindex]["Value"]);
}
returnHTML += HTMLItemTemplate.replace(/{Item}/g, tempValueHtml);
returnHTML = returnHTML.replace(/{Index}/g, index);
}
if (repeaterFormValues.length) {
returnHTML = HTMLItemsTemplate.replace(/{Items}/g, returnHTML);
}
return returnHTML;
}
function AddIntervenant() {
var innerFormIntervenants = document.getElementById('innerFormIntervenants');
if (innerFormIntervenants.checkValidity()) {
var index;
var tempRepeaterValue = [];
for (index = 0; index < innerFormIntervenants.length; index++) {
if (innerFormIntervenants[index].type != "submit" && innerFormIntervenants[index].type != "button" && innerFormIntervenants[index].type != "reset") {
tempRepeaterValue.push({
"ID": innerFormIntervenants[index].id,
"Value": innerFormIntervenants[index].value
});
innerFormIntervenants[index].value = "";
}
}
repeaterFormValues.push({ "Intervenant": tempRepeaterValue });
document.getElementById("divRepeaterValues").innerHTML = GetRenderHtmlRepeaterValuesIntervenants();
}
}
function DeleteItem(index) {
repeaterFormValues.splice(index, 1);
document.getElementById("divRepeaterValues").innerHTML = GetRenderHtmlRepeaterValuesIntervenants();
}
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.OnPreRender = includeCss;
overrideCtx.Templates.Fields = {
myCustomField: {
View: IntervenantsRepeaterFiledViewTemplate,
DisplayForm: IntervenantsRepeaterFiledViewTemplate,
NewForm: IntervenantsRepeaterFiledEditFTemplate,
EditForm: IntervenantsRepeaterFiledEditFTemplate
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();
In Debug, I can see that the callback function is called. Then it goes inside the JS of SharePoint for saving the item. But the save button is just going to grey and then nothing append.
I am new to JSLink and am trying to separate fields of the View Item form into tabs rather than the New Item form (tried using this on DispForm, showed tabs but not different fields). Are there any examples or ways to modify this to work on the view form?
Link: https://code.msdn.microsoft.com/office/Client-side-rendering-code-b2eedf92#content
var currentFormUniqueId;
var currentFormWebPartId;
// Use "Multi String" javascript to embed the required css
var MultiString = function (f) {
return f.toString().split('\n').slice(1, -1).join('\n');
}
//CSS would go here
var tabsObj = [
["General", ["Title", "Age", "Married", "Mobile", "SSN"]],
["Work", ["Manager", "Salary", "Phone", "Email"]],
["Other", ["Comments"]]
];
(function () {
// jQuery library is required in this sample
// Fallback to loading jQuery from a CDN path if the local is unavailable
(window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.0.min.js"><\/script>'));
var tabsContext = {};
tabsContext.OnPreRender = TabsOnPreRender;
tabsContext.OnPostRender = TabsOnPostRender;
// accordionContext.OnPostRender = accordionOnPostRender;
tabsContext.Templates = {};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(tabsContext);
})();
function TabsOnPreRender(ctx) {
if (!currentFormUniqueId) {
currentFormUniqueId = ctx.FormUniqueId;
currentFormWebPartId = "WebPart" + ctx.FormUniqueId;
jQuery(document).ready(function () {
var tabHTMLTemplate = "<li class='{class}'><a href='#{Index}'>{Title}</a></li>";
var tabClass;
var tabsHTML = "";
for (var i = 0; i < tabsObj.length; i++) {
tabClass = "";
if (i == 0){ tabClass = "active";}
tabsHTML += tabHTMLTemplate.replace(/{Index}/g, i).replace(/{Title}/g, tabsObj[i][0]).replace(/{class}/g, tabClass)
}
jQuery("#" + currentFormWebPartId).prepend("<ul class='tabs'>" + tabsHTML + "</ul>");
jQuery('.tabs li a').on('click', function (e) {
var currentIndex = jQuery(this).attr('href').replace("#","");
showTabControls(currentIndex);
jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
showTabControls(0);
jQuery("#" + currentFormWebPartId).prepend("<!--mce:0-->");
});
}
}
function TabsOnPostRender(ctx) {
var controlId = ctx.ListSchema.Field[0].Name + "_" + ctx.ListSchema.Field[0].Id;
jQuery("[id^='" + controlId + "']").closest("tr").attr('id', 'tr_' + ctx.ListSchema.Field[0].Name).hide();
}
function showTabControls(index)
{
jQuery("#" + currentFormWebPartId + " [id^='tr_']").hide();
for (var i = 0; i < tabsObj[index][1].length; i++) {
jQuery("[id^='tr_" + tabsObj[index][1][i] + "']").show();
}
}
Replace functions TabsOnPostRender and showTabControls:
function TabsOnPostRender(ctx) {
var controlId = ctx.ListSchema.Field[0].Name;
jQuery("a[name^='SPBookmark_" + controlId + "']").closest("tr").hide();
}
function showTabControls(index ){
jQuery("a[name^='SPBookmark_']").closest("tr").hide();
for (var i = 0; i < tabsObj[index][1].length; i++) {
jQuery("a[name^='SPBookmark_" + tabsObj[index][1][i] + "']").closest("tr").show();
}
}
I'm having this weird error while accessing the key evenimente of my object. Any ideas why?
It clearly is available but I cannot access it via .(dot)
EDIT: Sorry, here is the code
var isPresent = function(entry) {
var evenimente = entry.evenimente;
var elem = $("#" + entry.nume + "-" + entry.prenume);
for(var i = 0; i < evenimente.length; i++) {
var eveniment = evenimente[i];
if(eveniment.eveniment_id == eventId && eveniment.user_id == entry.id) {
elem.prop('checked', true);
}
}
elem.prop('checked', false);
}
I get entry via ajax from the server
Looks like your entry is an array (see the [ and ] in your console).
So, you should be able to access the evenimente field this way:
var ev = entry[0].evenimente
The updated code would look like this:
var isPresent = function (entry) {
var evenimente = entry[0].evenimente;
var elem = $("#" + entry[0].nume + "-" + entry[0].prenume);
for (var i = 0; i < evenimente.length; i++) {
var eveniment = evenimente[i];
if (eveniment.eveniment_id == eventId && eveniment.user_id == entry[0].id) {
elem.prop('checked', true);
}
}
elem.prop('checked', false);
}
Also, for convenience, you could just override the entry value like below:
var isPresent = function (entry) {
entry = entry[0];
if (!entry) {
throw new Error("No available entry.");
}
var evenimente = entry.evenimente;
var elem = $("#" + entry.nume + "-" + entry.prenume);
for (var i = 0; i < evenimente.length; i++) {
var eveniment = evenimente[i];
if (eveniment.eveniment_id == eventId && eveniment.user_id == entry.id) {
elem.prop('checked', true);
}
}
elem.prop('checked', false);
}
I'm trying to make an XML based menu with JavaScript, XML and jQuery. I've been successful at getting the categories of the menu, but haven't been able to generate the items in the categories.
My script is as follows, and later in this thread, I've asked for suggestions for this code:
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function() {
$.ajax({
url: animalsXMLurl, // name of file you want to parse
dataType: "xml",
success: function parse(xmlResponse) {
var data = $("item", xmlResponse).map(function() {
return {
id: $("animal_id", this).text(),
title: $("animal_title", this).text(),
url: $("animal_url", this).text(),
category: $("animal_category", this).text().split('/'),
};
}).get();
var first_item = category_gen(data, 0);
$('ul.w-nav-list.level_2').append(first_item);
var categnumber = new Array();
for (i = 1; i <= data.length; i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
{
categnumber[i] = data[i].id.split('_');
console.log(categnumber[i][0]);
for (j = 1; j <= data.length; j++) //appending via a function.
{
var data_text = category_or_animal(data, categnumber, j);
console.log(data_text);
$('ul.w-nav-list.level_2').append(data_text);
}
}
function category_or_animal(d, catg, k) {
var catg1 = new Array();
var catg2 = new Array();
var catg1 = d[k].id.split('_');
if (d[k - 1]) {
var catg2 = d[k - 1].id.split('_');
//if(d[k-1].id)
if (catg1[0] != catg2[0])
return category_gen(d, k);
} else
return '</ul>' + animal_gen(d, k);
}
function category_gen(d, z) {
var category_var = '<li class="w-nav-item level_2 has_sublevel"><a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">';
return category_var;
}
function animal_gen(d, z) {
var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span class="w-nav-arrow"></span></a></li>';
return animal_var;
}
}, error: function() {
console.log('Error: Animals info xml could not be loaded.');
}
});
});
Here's the JSFiddle link for the above code: http://jsfiddle.net/mohitk117/d7XmQ/4/
In the above code I need some alterations, with which I think the code might work, so I'm asking for suggestions:
Here's the function that's calling separate functions with arguments to generate the menu in above code:
function category_or_animal(d, catg, k) {
var catg1 = new Array();
var catg2 = new Array();
var catg1 = d[k].id.split('_');
if (d[k - 1]) {
var catg2 = d[k - 1].id.split('_');
//if(d[k-1].id)
if (catg1[0] != catg2[0])
return category_gen(d, k);
} else
return animal_gen(d, k) + '</ul>';
}
At the if(catg1[0] != catg2[0]) it checks if the split string 1_2 or 1_3 is equal to 1_1 or 1_2 respectively. By split, I mean the first element: 1 .... if you have a look at the xml: [ :: Animals XML :: ], you'll see that the animal_id is in the format of %category_number% _ %item_number% ... So I need to create the menu with CATEGORY > ITEM (item=animal name)
Now if I could return category_gen() + animal() with animal(){ in a for loop for all the matching category id numbers} then maybe this could be complete! But I don't of a count script for conditioning the for loop (i=0;i<=count();i++)...
Would anyone know of how to get this script functioning?
Hard to tell what the provided JSFiddle is trying to do.
This is my best stab at it. I used JQuery to parse the XML out into categories and generate lists of items.
http://jsfiddle.net/d7XmQ/8/
"use strict";
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function () {
var $menu = $('#menu');
$.ajax({
url: animalsXMLurl, // name of file you want to parse
dataType: "xml",
success: handleResponse,
error: function () {
console.log('Error: Animals info xml could not be loaded.');
}
});
function handleResponse(xmlResponse) {
var $data = parseResponse(xmlResponse);
createMenu($data);
}
function parseResponse(xmlResponse) {
return $("item", xmlResponse).map(function () {
var $this = $(this);
return {
id: $this.find("animal_id").text(),
title: $this.find("animal_title").text(),
url: $this.find("animal_url").text(),
category: $this.find("animal_category").text()
};
});
}
function createMenu($data) {
var categories = {};
$data.each(function (i, dataItem) {
if (typeof categories[dataItem.category] === 'undefined') {
categories[dataItem.category] = [];
}
categories[dataItem.category].push(dataItem);
});
$.each(categories, function (category, categoryItems) {
var categoryItems = categories[category];
$menu.append($('<h2>').text(category));
$menu.append(createList(categoryItems));
});
}
function createList(categoryItems) {
var $list = $('<ul>');
$.each(categoryItems, function (i, dataItem) {
$list.append(createItem(dataItem));
});
return $list;
}
function createItem(dataItem) {
return $('<li>').text(dataItem.title);
}
});
You can solve this without using any for/while loop or forEach.
function myCounter(inputWords) {
return inputWords.reduce( (countWords, word) => {
countWords[word] = ++countWords[word] || 1;
return countWords;
}, {});
}
Hope it helps you!
I'm using this autocomplete code to be able to pull stock information:
var YAHOO = {};
YAHOO.util = {};
YAHOO.util.ScriptNodeDataSource = {};
var stockSymbol;
var compName;
YUI({
filter: "raw"
}).use("datasource", "autocomplete", "highlight", function (Y) {
var oDS, acNode = Y.one("#ac-input");
oDS = new Y.DataSource.Get({
source: "http://d.yimg.com/aq/autoc?query=",
generateRequestCallback: function (id) {
YAHOO.util.ScriptNodeDataSource.callbacks =
YUI.Env.DataSource.callbacks[id];
return "&callback=YAHOO.util.ScriptNodeDataSource.callbacks";
}
});
oDS.plug(Y.Plugin.DataSourceJSONSchema, {
schema: {
resultListLocator: "ResultSet.Result",
resultFields: ["symbol", "name", "exch", "type", "exchDisp"]
}
});
acNode.plug(Y.Plugin.AutoComplete, {
maxResults: 10,
resultTextLocator: "symbol",
resultFormatter: function (query, results) {
return Y.Array.map(results, function (result) {
var asset = result.raw,
text = asset.symbol +
" " + asset.name +
" (" + asset.type +
" - " + asset.exchDisp + ")";
return Y.Highlight.all(text, query);
});
},
requestTemplate: "{query}®ion=US&lang=en-US",
source: oDS
});
acNode.ac.on("select", function (e) {
alert(e.result.raw.name);
stockSymbol = e.result.raw.symbol;
compName = e.result.raw.name;
alert("stockSymbol is "+stockSymbol);
alert("compName is "+compName);
});
});
I have a text field where the text is being entered, then I need to display a few pieces of information based on what was entered:
$(document).ready(function(e) {
//$(".selector").button({icons: {primary: "ui-icon-search"}});
//$(".home").button({icons: {primary: "ui-icon-home"}});
var q = window.location.href.split("?ac-input=");
alert("q is "+q)
if (q && q[1])
$("input").val(q[1]);
alert("what is this?" +q[1]);
runForm();
});
..........
function runForm(){
$("#stock_news").html("");
//var stockSymbol = e.result.raw.symbol;
alert('stockSymbol in runForm is ' +stockSymbol);
alert('compname is runForm is '+compName);
var newsStocks = "http://query.yahooapis.com/v1/public/yql?.......";
$.getJSON(newsStocks, function(data) {
var headlines = data.query.results.a;
newStr = "<h3>Current Headlines</h3>";
newStr += "<ol>";
for(var i=0; i<headlines.length; ++i){
var news = headlines[i];
newStr += "<li><a href='"+news.href+"'>"+news.content+"</a></li>";
}
newStr += "</ol>";
$("#stock_news").html(newStr);
});
htmlStr = '<img src="http://chart.finance.yahoo.com/z?s='+stockSymbol+'&t=5d&q=l&l=off&z=s®ion=US&lang=en-EN"/>';
$("#stock_graph").html(htmlStr);
}
What is happening is, the stockSymbol and compName are correctly set from entering, but for some reason nothing renders on the page, as q is undefined....Any ideas on where I am messing up here?
Figured it out. I needed to call runForm inside the acNode.ac.on("select", function (e)