We Keep Coding

Outsourcing jQuery request on solr in external javascript

I am trying to outsource my inline javascript into an external one. The inline code looks like this and it works fine.
<script type="text/javascript">
$.getJSON('../servlets/solr/select?q=mods.genre:issue_a&state:published&rows=1&
fl=returnId,id,search_result_link_text,parentLinkText,mods.title&sort=modified
desc&wt=json',
function (data) {
$(data.response.docs).each(function(i, doc){
let ausgabe = "Ausgabe: ";
let titelmain = doc['search_result_link_text'];
let titelall = doc['mods.title'];
for (let i=0, item; item=titelall[i]; i++) {
if (item.indexOf(titelmain)>=0) {
titelall.splice(i,1);
}
}
let titel = titelall.join(' ' + '|' + ' ');
$('#periodicals').append($('<div class="modified"></div>')
.append('<p class="lastmod-p interline text-content">' +
'<span class="fa fa-arrow-right text-info" />' + ' ' +
'<span style="font-weight:bold">' + (doc['parentLinkText']) +
'</span>' + '<br/>' + '<a class="navbar-link" style="font-weight:bold" href="../receive/'+doc['returnId']+'">' + doc['search_result_link_text'] + '</a>' + '<br/>' + titel + '</p>' + '<p/>')
);
});
});
</script>
The external javascript (new.js) looks like this.
It is stored inside the same folder as the html (index.html) invoking it.
$(document).ready(function(){
jQuery.getJSON('http://localhost:8282/mir/servlets/solr/select?q=mods.genre:journal&state:published&rows=2&fl=id,search_result_link_text,mods.title,mods.title.main,sb_amt,sb_ort&sort=modified desc&wt=json',
function (data) {
$(data.response.docs).each(function(i, doc){
let amt = doc['sb_amt'] ? doc['sb_amt'] : ' ';
let ort = doc['sb_ort'] ? doc['sb_ort'] : ' ';
let alletitel = doc['mods.title'];
let titel = alletitel.slice(1);
titel = titel.join(' ' + '|' + ' ');
let meta = [titel,amt,ort];
let text = meta.join(' ' + '|' + ' ');
$('#periodicals').append($('<div class="modified"></div>')
.append('<p class="lastmod-p interline text-content">' +
'<a class="navbar-link" style="font-weight:bold" href="../receive/'+doc['id']+'">' + doc['search_result_link_text'] + '</a>' + '<br/>' + text + '</p>')
);
});
});
alert('New Documents');
});
I added alert to be sure that the external javascript is beeing resolved.
The alert text pops up correctly but there is no data displayed.
In my HTML Code I have this:
<script src="new.js"></script>
<div class="col-md-4">
<h4 class="text-dark font-weight-bold" style="">PERIODICALS</h4>
<div id="periodicals"></div>
<a style="vertical-align:top" href="../servlets/solr/select?q=mods.genre:journal&
state:published&sort=modified desc"></a>
</div>

Passing recevied data to Express code with JavaScript

I am using node.js and express.I would like pass received data from socket.io inside div tag. According to received data from socket.io, I want to check with the for and if statements like below.
- for(var i in rows)
-if (rows[i]['senderID'] == "1" && rows[i]['receiverID'] == "2")
div.direct-chat-msg
div.direct-chat-name.pull-left
div.direct-chat-info.clearfix
span.direct-chat-name.pull-left #{rows[i]['senderID']}
span.direct-chat-timestamp.pull-right #{rows[i]['sentDate']}
img.direct-chat-img(src="/images/users/avatar04.png", alt="alt")
div.direct-chat-text #{rows[i]['message']}
-else if (rows[i]['senderID'] == "2" && rows[i]['receiverID'] == "1")
div.direct-chat-msg.right
div.direct-chat-name.pull-right
div.direct-chat-info.clearfix
span.direct-chat-name.pull-left #{rows[i]['senderID']}
span.direct-chat-timestamp.pull-right #{rows[i]['sentDate']}
img.direct-chat-img(src="/images/users/avatar.png", alt="alt")
div.direct-chat-text #{rows[i]['message']}
-else
div.direct-chat-msg.right
p No message!
div.box-footer
div.input-group
input.form-control(type="text" id="message" placeholder="Write a message...")
span.input-group-btn
button.btn.btn-danger.btn-flat(type="submit" onclick="sendMessageJS()") Send
How can i run this code to under the following HTML tag:
div.direct-chat-messages(id="chatArea")

I solved the problem with adding new an html variable. For examples
var content = '<div class = "direct-chat-msg">' +
'<div class = "direct-chat-name pull-left">' +
'<div class = "direct-chat-info clearfix">' +
'<span class = "direct-chat-name pull-left">' + data[i]["senderID"] + '</span>' +
'<span class = "direct-chat-timestamp pull-right">' + data[i]["sentDate"] + '</span>' +
'</div>' +
'<img class = "direct-chat-img" src= "/images/users/avatar04.png" alt = "resim">' +
'<div class= "direct-chat-text">'+ data[i]["message"] +'</div>' +
'</div>' +
'</div>';
var chatArea = document.getElementById("chatArea");
chatArea.innerHTML += content;

Fancybox pinterest button - how to pass link title to pin description?

I found this question how to add pinterest hover button to FancyBox2
fancbybox pinterest jQuery
which works great, I just couldn't solve how to add description to the pin?
var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href)
+ '&media='+ encodeURIComponent(img.attr('src'))
+ '&description=' (what goes here??);

Not familiar with the API, but to appropriately add a description parameter and keep it encoded, you would do:
var pinUrl = a.attr('href') + '?url='+ encodeURIComponent(location.href)
+ '&media='+ encodeURIComponent(img.attr('src'))
+ '&description=' + encodeURI('I am some string of text');
Abstracting this:
function pinUrl(link, img, description) {
return link.attr('href') + '?url=' + encodeURIComponent(window.location.href) + '&media=' + encodeURIComponent(img.attr('src')) + '&description=' + encodeURI(description);
}
// Usage:
var myPinUrl = pinURL($("#somelink"), $("#someimage"), "Look at this cool text!");
// EDITED:
If you have a set of links with variable information, you might use the pinUrl function like so:
var pin_url_list = [];
$("#mydiv a").each(function() {
pin_url_list.push( pinUrl( $(this), $(this).find("img.featured"), $(this).attr("title") );
});

Another way to do it:
You could get the description from the title attribute of your link (or use a data-caption attribute) like :
$(".fancybox").fancybox({
helpers: {
title: {
type: 'inside'
}
},
beforeShow: function () {
this.title = this.title ?
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
'&media=' + encodeURIComponent(this.href) +
'&description=' + this.title + '" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" align="absmiddle"/></a>' +
'<span> ' + this.title + '</span></div>'
:
'<div class="myPint" style="height: 26px"><a href="http://pinterest.com/pin/create/button/?url=' + encodeURIComponent(document.location.href) +
'&media=' + encodeURIComponent(this.href) +
'&description='+$(this.element).data("caption")+'" class="pin-it-button" count-layout="horizontal">' +
'<img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>' +
'<span> </span></div>'
}
});
JSFIDDLE

Chosen jquery plugin not updating with <optgroup>

strange situation happening here. I'm using the jquery plugin chosen.js. I'm updating a dropdown that is already on the page with an ajax call and jquery. here is a little bit of the sample code.
here is my dropdown as shown in the page.
<div id="singleDropDownBlock" style="display: none">
<select id="SingleDropDown" class="chzn-select" data-placeholder="Choose your start Location" onchange="GetFromNodeValue();">
<!--<option>select a strating locnation based on category.</option>-->
</select>
</div>
This is the code loading the values into the dropdown using jquery.
function GetResultsFromMultiCategory(data)
{
for (i = 0; i < data.d.categories.length; i++)
{
//console.log(data.d.categories[i].catNode);
if (data.d.categories[i].catNode == "0")
{
$('#SingleDropDown').append("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
console.log("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
//onOrOff = false; </optgroup>
}
else
{
$('#SingleDropDown').append("<option " + "value=" + data.d.categories[i].catNode+ ">" + data.d.categories[i].catLoc + "</option>");
console.log("<option " + "value='" + data.d.categories[i].catNode + "'>" + data.d.categories[i].catLoc + "</option>");
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
}//end second if
}//end first if
}//end else
}
$('#SingleDropDown').append("</optgroup>");
console.log("</optgroup>");
$("#SingleDropDown").chosen({ placeholder_text_single: "Choose Map" });
$("#SingleDropDown").trigger("chosen:updated");
}
for some reason chosen does not update with the it only updates with the . Is there anything I'm missing? can someone please point me in the right direction.
I also can't get chosen to update the placeholder. All i get is the first item in list as the display.
thanks in advance for any help you can offer.

I have finally figured out my issue. I'll post the answer here so that it may help someone else someday.
The problem here is that appending one select at a time was being closed by the browser. Therefore here is the best way to do this.
function GetResultsFromMultiCategory(data)
{
$("#singleDropDownBlock").show();
$('#SingleDropDown').append("<option></option>");
var myOptions = '';
for (i = 0; i < data.d.categories.length; i++)
{
if (data.d.categories[i].catNode == "0")
{
myOptions += "<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">";
}
else
{
myOptions += "<option " + "value=" + data.d.categories[i].catNode + ">" + data.d.categories[i].catLoc + "</option>";
if (typeof(data.d.categories[i + 1]) != "undefined")
{
if (data.d.categories[i + 1].catNode == "0")
{
myOptions += "</optgroup>";
}
}
}
}
myOptions += "</optgroup>";
$('#SingleDropDown').append(myOptions);
$("#SingleDropDown").chosen({placeholder_text_single: "Choose Start Location" });
}
the take away here is that when using append instead of appending each line, build the string and then append it to the html element.

Jquery Scope Problems

function drawLabel(labelsIndex) {
// Check not deleted Label data:(DBID, text, styling, x, y, isDeleted)
if (!labelData[labelsIndex][5]) {
// Create
var newLabel = $('<div id="label' + labelsIndex + '" style="font-size:' + (labelData[labelsIndex][6] * currentScale) + 'px;z-index:9999;position:absolute;left:' + labelData[labelsIndex][3] + 'px;top:' + labelData[labelsIndex][4] + 'px;' + labelData[labelsIndex][2] + '">' + labelData[labelsIndex][1] + '</div>');
$('#thePage').append(newLabel);
// Click edit
$('#label' + labelsIndex).dblclick(function() {
if (!isDraggingMedia) {
var labelText = $('#label' + labelsIndex).html();
$('#label' + labelsIndex).html('<input type="text" id="labelTxtBox' + labelsIndex + '" value="' + labelText + '" />');
document.getElementById('#label' + labelsIndex).blur = (function(index) {
return function() {
var labelText = $('#labelTxtBox' + index).val();
$('#label' + index).html(labelText);
};
})(labelsIndex);
}
});
The code is meant to replace a div's text with a textbox, then when focus is lost, the textbox dissapears and the divs html becomes the textbox value.
Uncaught TypeError: Cannot set property 'blur' of null
$.draggable.start.isDraggingMediaresources.js:27
c.event.handlejquery1.4.4.js:63
I think I'm getting a tad confused with the scope, if anyone could give me some points I'd appreciate it. It would also be good if someone could show me how to remove the blur function after it has been executed (unbind?)

document.getElementById('#label' + labelsIndex).blur is a javascript function and less jquery :) therefore the # hash there is just irrelevant.
$('#label'+labelsIndex).bind('blur',function (){
//labelText value goes here //
});
EDIT
to be honest ur over complicating it :)
<div id="txt1">I am div</div>
<textarea id="txt2">I am text</textarea>
$('#edit_button').click(function (){
var val = $('#txt1').hide().html();// hide the div,then get value,
$('#txt2').show().val(val);//show txtarea then put value of div into it
});
Do the opposite for $('#save_button');