Develop Reference

Backbone.js - Solving method

BACKBONE and Jquery
I have a piece of code:
var ChatMessage = Backbone.View.extend({
el : '#friend-list',
events : {},
initialize : function() {},
loadMessage : function(parent_id) {
//ukrycie komunikatów etc.
$("#chat_body").html('');
$("#end-record-info").hide();
$("#end-record-load").hide();
page = 1;
this.ajax(parent_id,page); //initial data load
},
ajax : function(parent_id,page) {
$.getJSON( "/**/**/"+parent_id+"/"+page, function( json ) {
$("#end-record-load").hide();
this.build(json.message, page);
page ++; //page increment
loading = false; //set loading flag off
end_record = false;
if(json.max < page){ //no more records
end_record = true; //set end record flag on
return; //exit
}
});
},
build : function(arr, page) {
alert('dgd');
html = '';
var height = 0;
arr.reverse();
$.each(arr, function(i, data){
html += '<div class="answer '+data.side+'">';
html += '<div class="avatar">';
html += '<a href="**" target="_blank">';
html += ''+data.id+'';
html += '</a>';
html += '<div class="status offline"></div>';
html += '</div>';
html += '<div class="name">';
html += '<a href="**" target="_blank">';
html += data.username;
html += '</a>';
html += '</div>';
html += '<div class="text">';
html += data.content;
html += '</div>';
html += '<div class="time">';
if (data.side != 'left') {
html += data.dateSendMessage
}
else {
if (data.read == 0) {
html += 'xxx';
}
else {
html += 'xxx';
}
}
html += '</div>';
html += '</div>';
});
var nh = $('#chat_body').html();
$('#chat_body').html(html+nh);
if (page == 1) {
$('#chat_body .answer').each(function(i, value){
height += parseInt($(this).height());
});
height += '';
$('.chat2').scrollTop(height);
}
}
});
In AJAX method I want to build method
this.build(json.message, page);
But something does not work and I get an error.
pm2.js:67TypeError: this.build is not a function. (In 'this.build(json.message, page)', 'this.build' is undefined)
Can anyone help? What changes in this piece of code can be by the way?
Piotr

You should probably save current context before calling getJSON:
ajax : function(parent_id,page) {
var self = this;
$.getJSON( "/**/**/"+parent_id+"/"+page, function( json ) {
...
self.build(json.message, page);

Try to figure out how to show content based on window.location.hash

Im using JSON and passing data through the href tag and using a click event to show specific items from a product database. My question is that I have code in the script that assigns a unique window hash to each product. It takes the product name and strips the spaces.
How can I show the correct item on the page if the hash tag matches the item when linking from an external url?
For example, when one of the items is clicked on the page the url will show something like www.website.com#CherryTomatoes.
Obviously I cant link to this from another website because the hash only exists when the click event is fired. I want to be able to automatically show the correct item when using an external link. Below is my code hope someone can help me out with this!
//display product category based on click
$("#displayall").click(function(event){
displayAll();
});
//display all products function
function displayAll() {
var categoryImage = '';
$.each(json, function (i, item) {
categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '' + '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '' + '</div>';
});
$('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow');
//show individual product function on click
$(".showProduct").click(function(event){
//hide all current products
$('#productCategories').hide();
//get passed data from other function
var clickedItemName = '<h1>' + $(this).data('itemname') + '</h1>';
var clickedItemUPC = $(this).data('itemupc');
var clickedItemOZ = '<h2>' + $(this).data('itemoz') + '</h2>';
var clickedItemDescription = '<p>' + $(this).data('itemdescription') + '</p>';
var clickedItemImage = '<img class="img-responsive img-rounded center-block" src="' + $(this).data('itemimage') + '">';
var clickedItemGluten = $(this).data('itemgluten');
var clickedItemBPA = $(this).data('itembpa');
var clickedItemGMO = $(this).data('itemgmo');
var clickedItemPageURL = $(this).data('itempageurl');
//check if clicked data equals correct item
$.each(json, function (i, item) {
if (item.itemName === clickedItemName) {
clickedItemName
}
if (item.itemFullUPC === clickedItemUPC) {
clickedItemUPC
}
if (item.itemPackSize === clickedItemOZ) {
clickedItemOZ
}
if (item.itemDescription === clickedItemDescription) {
clickedItemDescription
}
if (item.imageURL === clickedItemImage) {
clickedItemImage
}
if (item.itemGlutenFree === clickedItemGluten) {
clickedItemGluten
}
if (item.itemBPAFree === clickedItemBPA) {
clickedItemBPA
}
if (item.itemGMOFree === clickedItemGMO) {
clickedItemGMO
}
//assign window hash to each product
if (item.itemName === clickedItemPageURL) {
event.preventDefault();
clickedItemPageURL = clickedItemPageURL.replace(/\s/g, '');
window.location.hash = clickedItemPageURL;
}
});
//remove extra characters from UPC
var originalUPC = clickedItemUPC;
var strippedUPC = '<h2>' + originalUPC.slice(1, -1); + '</h2>';
//show individual product information
$('#productSocialShare').show();
$('#individualProduct').show();
$('#relatedProducts').show();
//append product information to appropriate DIV
$('#productTitle').html(clickedItemName);
$('#productUPC').html(strippedUPC);
$('#productOZ').html(clickedItemOZ);
$('#productDescription').html(clickedItemDescription);
$('#productImage').html(clickedItemImage);
//check if gluten free is true and show image
if (clickedItemGluten == "Y") {
clickedItemGluten = '<img class="img-responsive img-rounded img-margin" src="../images/misc/gluten_free_test.jpg">';
$('#productGlutenFree').html(clickedItemGluten);
$('#productGlutenFree').show();
} else {
$('#productGlutenFree').hide();
}
//check if bpa free is true and show image
if (clickedItemBPA == "Y") {
clickedItemBPA = '<img class="img-responsive img-rounded img-margin" src="../images/misc/bpa_free_test.jpg">';
$('#productBPAFree').html(clickedItemBPA);
$('#productBPAFree').show();
} else {
$('#productBPAFree').hide();
}
//check if gmo free is true and show image
if (clickedItemGMO == "Y") {
clickedItemGMO = '<img class="img-responsive img-rounded img-margin" src="../images/misc/gmo_test.jpg">';
$('#productGMOFree').html(clickedItemGMO);
$('#productGMOFree').show();
} else {
$('#productGMOFree').hide();
}
});
closeNav();
}

Data not being stored in variable

I'm trying to add data to an empty var, but data is not getting stored.
When calling hotel_list, it shows empty. What am I missing? Thanks!
var hotelData = JSON.parse(data);
function hotelList(){
var hotel_list = '';
for (i = 0; i < hotelData.length; i++) {
function list(index, hotel) {
hotel_list += '<li class="hotel" data-index="'+ index +'">'+ hotel.name +'</li>';
document.getElementById("hotel-listing").innerHTML = hotel_list;
};
};
};
document.addEventListener('DOMContentLoaded', function() {
hotelList();
});

var data = '[{"name": "h1"}, {"name": "h2"}]';
var hotelData = JSON.parse(data);
function hotelList(){
var hotel_list = '';
(hotelData || []).forEach(function (hotel, index) {
hotel_list += '<li class="hotel" data-index="'+ index +'">'+ hotel.name +'</li>';
});
document.getElementById("hotel-listing").innerHTML = hotel_list;
};
document.addEventListener('DOMContentLoaded', function() {
hotelList();
});
<div id="hotel-listing"></div>

Increment javascript variable function onclick

This the page I'm working on:
http://gacc.nifc.gov/gbcc/predictive/PSA_ERCmap/Dev/PSAERCmap1.html
When you click on a shaded area the chart associated with the area pops up. What I'm trying to figure out is how to get the "Next PSA" link at the bottom to advance the chart in the popup to the next PSA every time you click it. I've figured out how to get it to advance by one PSA, but can't get it past that one. You'll see if you click on the link.
I have a function (called replace) that replaces the image source for the chart with a link to the next PSA number up. However, I can't figure out how to get it to increment. I tried PSA++ and PSA=PSA1 but neither of them work.
Here's my code:
<title>DEV PSA ERC Map DEV</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function overlay(a) {
PSA = a.id;
var numeric = a.id.replace('GB', '');
PSAnum = Number(numeric)
PSA1 = PSAnum + 1;
nextPSA = ('0' + PSA1).slice(-2);
var overlayContent = '';
overlayContent += '<div id="overlay">';
overlayContent += '<div>';
var imgsrce = '';
imgsrce += 'Charts/WebCharts/GB';
imgsrce += numeric;
imgsrce += '/ERCGraph.PNG';
overlayContent += '<img id="chartimage" src="';
overlayContent += imgsrce;
overlayContent += '" />';
overlayContent += '<br /><b><h1> Close</b></h1>';
overlayContent += '<b><h1> Next PSA</b></h1>';
overlayContent += '</div>';
overlayContent += '</div>';
$("#overlay").replaceWith(overlayContent);
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
if (el.style.visibility == "visible") {
//el.style.visibility="hidden";
}
} //end of overlay function
function replace(a) {
image = document.getElementById('chartimage');
console.log(image.src);
console.log(PSA);
image.src = 'Charts/WebCharts/GB';
image.src += nextPSA;
image.src += '/ERCGraph.PNG';
PSA++;
console.log(PSA);
} //end of replace function
$('.overlay-bg').click(function() {
closePopup();
});
function closePopup() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
}
$(function() {
$.get("getDate.php", function(data) {
document.getElementById("timestamp").innerHTML = "<b>RAWS observations updated on " + data + "</b>";
});
});
var file;
file = 'GB_PSAdata_Real.js';
$.getJSON(file, function(events) {
var gbname = Object.keys(events);
var divContent = '';
divContent += '<div id="map">';
divContent += '<map name="mapmap">';
for (i = 0; i < gbname.length; i++) {
var PSA = (gbname[i]);
JSONcoords = events[PSA][0].Coords;
JSONcoordString = JSONcoords.toString();
divContent += '<area id="' + PSA + '" href="#" shape="poly" coords="';
divContent += JSONcoordString;
divContent += '" onclick="overlay(this)">';
// console.log(divContent)
}
divContent += '</map>';
divContent += '<img src="GetPSAavg.php" width="826" height="1005" usemap="#mapmap" />';
divContent += '</div>';
$("#map").replaceWith(divContent);
//$("#overlay").replaceWith(overlayContent);
;
})
</script>
</head>
<div id="overlay">
</div>
<body>
<div id="header">
<img src="PSlogo.png" style="height:75px">
<img src="GBlogo.png" style="height:75px">
<span><b>Great Basin ERC Percentiles</b> *Experimental*</span>
</div>
<div id="main">
<div id="map"></div>
<div id="timestamp">RAWS Observations Updated</div>
<div id="legend">
<img src="LegendFull2.png" id="legendIMG">
</div>
</div>
</body>
</html>

You need to move the code that increments the number into the replace() function, so it gets executed each time replace() is called. Currently it is executed only once when the overlay() function is called.
First, explicitly declare a global variable (outside of any function):
var currentPSANum = null;
Place this line inside the overlay() function:
currentPSANum = Number(a.id.replace('GB',''));
Then use the following for the replace() function:
function replace(a) {
currentPSANum++;
var image = document.getElementById('chartimage');
image.src = 'Charts/WebCharts/GB' + ('0' + currentPSANum).slice(-2) + '/ERCGraph.PNG';
}

Custom Advance Find view in Iframe in CRM 2011 does not load gird in Firefox AND IE

To load a grid in Iframe of a form, in the form load event, I added this this script :
var gContext;
function loadIFrame(context) {
gContext=context.getContext();
window.fetchActivtities = new FetchViewer("IFRAME_casebysedrialno");
fetchActivtities.FetchXml = getFetchXml(null,null);
fetchActivtities.LayoutXml = getLayoutXml();
fetchActivtities.Entity = "incident";
fetchActivtities.QueryId = "{B34A5382-F6B7-E311-B5B1-000C2964D6D6}"; // view GUID
fetchActivtities.RegisterOnTab(2); //IFRAME TAB INDEX
}
function getFetchXml(itemtoSelect,itemValue) {
// FetchXML Query
return '<fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">'+
'<entity name="incident">'+
'<attribute name="title" />'+
'<attribute name="ticketnumber" />'+
'<attribute name="createdon" />'+
'<attribute name="incidentid" />'+
'<order attribute="title" descending="false" />'+
'</entity>'+
'</fetch>';
}
function getLayoutXml() {
// grid layout, you can get easily from Customization.xml file
return '<grid name="resultset" object="112" jump="title" select="1" preview="1" icon="1">'+
'<row name="result" id="incidentid">'+
'<cell name="title" width="150" />'+
'<cell name="incidentstagecode" width="100" />'+
'<cell name="casetypecode" width="100" />'+
'<cell name="prioritycode" width="100" />'+
'<cell name="productserialnumber" width="100" />'+
'<cell name="severitycode" width="100" />'+
'<cell name="statecode" width="100" />'+
'</row>'+
'</grid>';
}
function FetchViewer(iframeId) {
var Instance = this;
var vDynamicForm;
var m_iframeTab;
var m_iframeDoc;
Instance.Entity = "";
Instance.Iframe = null;
Instance.FetchXml = "";
Instance.QueryId = "";
Instance.LayoutXml = "";
Instance.RegisterOnTab = function (tabIndex) {
Instance.Iframe = document.getElementById(iframeId);
if (!Instance.Iframe)
return alert("Iframe " + iframeId + " is undefined");
m_iframeDoc = getIframeDocument();
var loadingGifHTML = "<table height='100%' width='100%' style='cursor:wait'>";
loadingGifHTML += "<tr>";
loadingGifHTML += "<td valign='middle' align='center'>";
loadingGifHTML += "<img alt='' src='/_imgs/AdvFind/progress.gif'/>";
loadingGifHTML += "<div/><b>Loading View...</b>";
loadingGifHTML += "</td></tr></table>";
m_iframeDoc.body.innerHTML = loadingGifHTML;
Instance.Refresh();
}
function RefreshOnReadyStateChange() {
if (Instance.Iframe.readyState != 'complete')
{
return;
}
Instance.Refresh();
}
Instance.Refresh = function () {
if (!Instance.Iframe)
{
return alert("Iframe " + iframeId + " is undefined");
}
m_iframeDoc = getIframeDocument();
Instance.Iframe.removeEventListener("onreadystatechange", RefreshOnReadyStateChange);
vDynamicForm = m_iframeDoc.createElement("FORM");
vDynamicForm.setAttribute("name","vDynamicForm");
vDynamicForm.setAttribute("method","post");
createTwoAttElem(m_iframeDoc,vDynamicForm,"INPUT","type","hidden","name","FetchXml");
createTwoAttElem(m_iframeDoc,vDynamicForm,"INPUT","type","hidden","name","LayoutXml");
createTwoAttElem(m_iframeDoc,vDynamicForm,"INPUT","type","hidden","name","EntityName");
createTwoAttElem(m_iframeDoc,vDynamicForm,"INPUT","type","hidden","name","DefaultAdvFindViewId");
createTwoAttElem(m_iframeDoc,vDynamicForm,"INPUT","type","hidden","name","ViewType");
vDynamicForm.action = gContext.getServerUrl()+("/AdvancedFind/fetchData.aspx");
vDynamicForm.FetchXml.value = Instance.FetchXml;
vDynamicForm.LayoutXml.value = Instance.LayoutXml;
vDynamicForm.EntityName.value = Instance.Entity;
vDynamicForm.DefaultAdvFindViewId.value = Instance.QueryId;
vDynamicForm.ViewType.value = 1039;
vDynamicForm.submit();
//Instance.Iframe.attachEvent("onreadystatechange", OnViewReady);
Instance.Iframe.addEventListener("onreadystatechange", OnViewReady);
}
function OnViewReady() {
if (Instance.Iframe.readyState != 'complete') return;
Instance.Iframe.style.border = 0;
Instance.Iframe.removeEventListener("onreadystatechange", OnViewReady);
m_iframeDoc = getIframeDocument();
m_iframeDoc.body.scroll = "no";
m_iframeDoc.body.style.padding = "0px";
}
function getIframeDocument() {
myFrame = Instance.Iframe;
myWindow = myFrame.contentWindow;
myDoc = myWindow.document;
return myDoc;
}
}
function createTwoAttElem(doc,eletoAppend,elemname,att1,att1val,att2,att2val)
{
var newelem = doc.createElement(elemname);
newelem.setAttribute(att1,att1val);
newelem.setAttribute(att2,att2val);
eletoAppend.appendChild(newelem);
}
it works prefectly in Chrome but in IE and Firefox, it only shows "Loading View ...". I inspected network requestes in all three browsers, and saw that in Chrome there is a post request to "fetchData.aspx" but there is not such request in firefox or IE.

Just found a solution.
Instead of creating the form using document.Createelement and ... I created the form by string and put it into Innerhtml of Iframe and it worked
http://social.microsoft.com/Forums/en-US/f375d23c-8867-4296-9775-3df995420579/custom-advance-find-view-in-iframe-in-crm-2011-does-not-load-gird-in-firefox-and-ie?