Develop Reference

JSLink to Hyperlink Column in SharePoint List

I have an external list in SharePoint that includes a URL column. The URL column is a calculated field in SQL server, so the entire URL is already there. I need this field to hyperlink and I have been trying to use JSLink to do so. What would the JavaScript for that look like?
For example, if my fields were...
First Name | Last Name | Profile URL
How would I get the URL in the Profile URL field to hyperlink?
I have been looking for solutions all morning without any luck. I am not familiar with JavaScript, so the code I am using is pieced together from posts I have been reading. I have made sure the my JSLink address is correct.
~site/SiteAssets/myCode.js
I have tried different variations of code. My latest is this:
(function () {
var profUrlField = {};
profUrlField.Templates = {};
profUrlField.Templates.Fields = {
"Profile_X0020_URL": {
"View": function (ctx) {
var urlField = ctx.CurrentItem[ctx.CurrentFieldSchema["Profile_X0020_URL"]];
return "<a href='" + urlField + "'>" + urlField + "</a>";
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(profileUrlField);
})();
After applying my JSLink to my web part I reload the page and nothing happens. No errors but no links.
I'm also not sure how to reference the column. In SQL Server it is PROFILE_URL, but in the SharePoint list header it is Profile URL.

Modify the code as below to check if it works.
(function () {
var profUrlField = {};
profUrlField.Templates = {};
profUrlField.Templates.Fields = {
"PROFILE_URL": {
"View": function (ctx) {
var urlField = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
return "<a href='" + urlField + "'>" + urlField + "</a>";
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(profileUrlField);
})();

Javascript redirect concatenates url linstead of redirecting

I want to call a controller action whenever a value is updated from a textbox.
Note that this script sits inside the same view which will be returned from the Dispatch/Index controller action
I tried doing it like this:
<script>
$('#deliveryDate').change(function () {
var date = $('#deliveryDate').val();
var sDate = date.split('/');
location.href = 'dispatch/' + sDate[0] + sDate[1] + sDate[2];
});
</script>
And it works perfectly the first time the value changes (ie, the page redirects to /dispatch/12122016).
However, when I change the value again, it redirects to /dispatch/dispatch/13122016, so the value just keeps concatanating and this of course produces an error.
I tried chaging the redirect line to location.href = '#Url.Action("Index", "Dispatch")/' + sDate[0] + sDate[1] + sDate[2];, but now it just concatenates the new date on to the url instead of redirecting how I need it to... (ie, it navigates to /dispatch/12122016/13122016)
Is there ANY way of doing this without including the literal url path??
How can "clear" the current url before redirecting the action I need (which should just be dispatch/12122016 ?

Simply prepend a forward slash in the URL, this should always dictate that the url change is always bound to be absolute.
As a bonus: I also changed your date concatenation after /dispatch into a join.
$('#deliveryDate').change(function () {
var date = $('#deliveryDate').val();
location.href = '/dispatch/' + date.split('/').join('');
});

Try this by appending the forward slash. Because your concatenating the dispatch string on every redirect
<script>
$('#deliveryDate').change(function () {
var date = $('#deliveryDate').val();
var sDate = date.split('/');
Var URL = '/dispatch/' + sDate[0] + sDate[1] + sDate[2];
Window.location.href = URL
});
</script>

Unable to receive parameter in query string when redirected to other page

Hi I am developing one application in java-script. I have two pages default.aspx and addnewitem.aspx. there is one html table in default.aspx and one button. When i click on button i want to redirect to addnewitem.aspx page. I have some parameters to send in query string. I am able to redirect to addnewitem.aspx but page not found error i am getting. I am not sure why i am getting page not found error. I am trying as below.
function getValues() {
var Title = "dfd";
var PrimarySkills = "fdfd";
var SecondarySkills = "dfdf";
var url = "http://sites/APPSTEST/JobRequisitionApp/Pages/AddNewItem.aspx?Title=" + encodeURIComponent($(Title)) + "&PrimarySkills=" + encodeURIComponent($(PrimarySkills)) + "&SecondarySkills=" + encodeURIComponent($(SecondarySkills));
window.location.href = url;
}
I am checking querystring in addnewitem.aspx as below.
<script type="text/javascript">
var queryString = new Array();
$(function () {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["Title"] != null && queryString["PrimarySkills"] != null) {
var data = "<u>Values from QueryString</u><br /><br />";
data += "<b>Title:</b> " + queryString["Title"] + " <b>PrimarySkills:</b> " + queryString["PrimarySkills"] + " <b>SecondarySkills:</b> " + queryString["SecondarySkills"];
$("#lblData").html(data);
alert(data);
}
});
</script>
"http://sites/APPSTEST/JobRequisitionApp/Pages/AddNewItem.aspx?Title=%5Bobject%20Object%5D&PrimarySkills=%5Bobject%20Object%5D&SecondarySkills=%5Bobject%20Object%5D"
I tried lot to fix this. May i know where i am doing wrong? Thanks for your help.

You should use the relative path in your url instead of hard coding the entire folder structure, which is probably incorrect since you are getting a 404. And you need to change the url every time you publish the site to the hosting enviroment when you hard code it like that.
So change
var url = "http://sites/APPSTEST/JobRequisitionApp/Pages/AddNewItem.aspx?Title=...
into
var url = "/AddNewItem.aspx?Title=...
if both the pages are in the same folder. Should AddNewItem.aspx be located in the Pages folder, you have to add that folder of course: var url = "/Pages/AddNewItem.aspx?Title=...

Javascript - How to get script to run with Ajax requested data

Battlefield Page
In the image above, there is a page that has a battlefield with 20 users on it. I have written JavaScript to capture the data and store it in a MySQL db. The problem comes into the picture when I need to hit next to go to the next page and gather that data.
It fetches the next 20 users with an Ajax call. Obviously when this happens, the script can't log the new information because the page never loads on an Ajax call which means the script doesn't execute. Is there a way to force a page load when the Ajax link is clicked?
Here's the code:
grabData();
var nav = document.getElementsByClassName('nav')[0].getElementsByTagName('td')[2].getElementsByTagName('a')[0];
nav.addEventListener("click", function(){
grabData();
});
function grabData(){
var rows = document.getElementsByClassName('table_lines battlefield')[0].rows;
var sendData = '';
for(i=1; i < rows.length -1 ; i++){
var getSid = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].getElementsByTagName('a')[0].href;
var statsID = getSid.substr(getSid.indexOf("=") + 1); //Grabs ID out of stats link
var name = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[2].textContent.replace(/\,/g,"");
var tff = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[3].textContent.replace(/\,/g,"");
var rank = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[6].textContent.replace(/\,/g,"");
var alliance = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[1].textContent.trim();
var gold = document.getElementsByClassName('table_lines battlefield')[0].getElementsByTagName('tr')[i].getElementsByTagName('td')[5].textContent.replace(/\,/g,"");
if(alliance == ''){
alliance = 'None';
}
if(gold == '??? Gold'){
gold = 0;
}else{
gold = gold.replace(/[^\/\d]/g,'');
}
sendData += statsID + "=" + name + "=" + tff + "=" + rank + "=" + alliance + "=" + gold + "#";
}
$.ajax({
// you can use post and get:
type: "POST",
// your url
url: "url",
// your arguments
data: {sendData : sendData},
// callback for a server message:
success: function( msg ){
//alert(msg);
},
// callback for a server error message or a ajax error
error: function( msg )
{
alert( "Data was not saved: " + msg );
}
});
}
So as stated, this grabs the info and sends to the php file on the backend. So when I hit next on the battlefield page, I need to be able to execute this script again.
UPDATE : Problem Solved. I was able to do this by drilling down in the DOM tree until I hit the "next" anchor tag. I simply added an event listener for whenever it was clicked and had it re execute the JavaScript.

Yes, you can force a page load thus:
window.location.reload(true);
However, what the point of AJAX is to not reload the page, so often you must write javascript code that duplicates the server-side code that builds your page initially.
However, if the page-load-code-under-discussion runs in javascript on page load, then you can turn it into a function and re-call that function in the AJAX success function.
Reference:
How can I refresh a page with jQuery?

Javascript window.location redirect with url rewriting, no querystring

I have endlessly googled for about an hour, so please forgive me if this has been asked before.
I am using pure Javascript and do not wish to use jQuery.
PREAMBLE
I have an HTML form with 3 select boxes that control a search of items. When one is updated, a simple function reads each of the values in the select boxes and produces a URL that matches our URL rewriting standard.
http://www.example.com/search/select1/data1/select2/data2/select3/data3/
This is then used in a
history.pushState
to update the browser's url address so a user can bookmark the page right away. This works fine.
PROBLEM
When the user presses the button of the form, what I want is the function to read all the select box values, generate the URL as before but also load this specific URL so that the underlying database code can return the results for that search on the page.
However, when I use
window.location.href
it loads the page, but also sends the querystring from the form submission. This mucks up the database code because, essentially, it's getting all the data twice.
EXAMPLE
I choose 'A' from select1, 'D' from select2 and 'E' from select3.
This results:
http://www.example.com/search/select1/A/select2/D/select3/E/?select1=A&select2=D&select3=E
SO...
Is it possible to generate the URL in the correct rewritten format, then load the page without the querystring?
JAVASCRIPT
function changepage(loadpage)
{
var theform
theform = document.getElementById("searchform");
var pageurl
pageurl = 'http://www.example.com/search/'
var select1 = theform.select1.value;
var select2 = theform.select2.value;
var select3 = theform.select3.value;
if(select1 != '')
{
pageurl = pageurl + 'select1/' + select1 + '/';
}
if(select2 != '')
{
pageurl = pageurl + 'select2/' + select2 + '/';
}
if(select3 != '')
{
pageurl = pageurl + 'select3/' + select3 + '/';
}
history.pushState('data', '', pageurl);
if(loadpage=='yes')
{
window.location.href = pageurl;
}
}
HTML
<form method="post" action="form.asp">
<select id="select1"><option>A</option><option>B</option></select>
<select id="select2"><option>C</option><option>D</option></select>
<select id="select3"><option>E</option><option>F</option></select>
<button onClick="changepage('yes');">
</form>