We Keep Coding

JQuery: Text changed on previous element disappears

I am working on a JQuery application where I am trying to change the text of a previous element using $(element).prev().text("Mytext");. But when I scroll up / scroll down the page, the changes I have made are disappeared.
titles = $('.checkGroup:checked').parent().map(function () {
return $(this).text();
}).get(); // Generate Array of Titles
for (i = 0; i < titles.length; i++) {
$('span[level ="' + i + '"]').prev().text(titles[i]);
}
this is my code snippet. please help me to fix this

To fix this add the following JS.
Note that this is a quick fix. There must be some callback functions you can use to have the same end effect. The Slick.Grid plugin is rendering the HTML on scroll. Hence the issue.
Events for SlickGrid.
Edit 1:
grid.onScroll.subscribe(function(e,args){
$('.checkGroup:checked').parent().each(function (i, val) {
$('span[level ="' + i + '"]').each(function(){
$(this).prev().text($(val).text());
});
});
})
Normally the following might have worked. But the SlickGrid had many mysteries of its own. Its not a scroll event.
$(document).on('scroll', '.slick-viewport',function(){
$('.checkGroup:checked').parent().each(function (i, val) {
$('span[level ="' + i + '"]').each(function(){
$(this).prev().text($(val).text());
});
});
})

Pagedown Editor - make inline links instead of referenced links

Does anyone know how to use hooks or edit Markdown.Editor.js from Pagedown to have it create inline links and instead of referenced ones?
As in, I want this to happen when I click the link button:
[inline link](http://www.google.com)
![alt text](http://website.com/bear.jpg "title text")
instead of this:
[referenced link][1]
![referenced image][2]
[1]: http://google.com/
[2]: http://website.com/bear.jpg "title text"
Thanks!
For reference: https://code.google.com/p/pagedown/

Unfortunately, there do not appear to be any hooks for this functionality in Markdown.Editor.js. I was however able to find the section of code responsible for this, and create a patch for your desired functionality.
Open Markdown.Editor.js in your editor of choice.
Find this section of code:
var linkDef = " [999]: " + properlyEncoded(link);
var num = that.addLinkDef(chunk, linkDef);
chunk.startTag = isImage ? "![" : "[";
chunk.endTag = "][" + num + "]";
Replace with this code:
chunk.startTag = isImage ? "![" : "[";
chunk.endTag = "](" + properlyEncoded(link) + ")";
Profit!

Get a copy
Open a file Markdown.Converter.js
Scroll to the line 724
Edit method function _DoImages(text) {}
Scroll to the line 581
Edit method function _DoAnchors(text) {}
Finally you can achieve absolutely any imaginable results with editing the source code.
UPD:
Just for fun the patch (if you prefer the patches):
converter.hooks.chain("postConversion", function (text) {
var anchors = [];
// definitions
text = text.replace(/\[(\d+)\]\: (htt.+)\n/gi, function(anchor_definition){
anchors.push(anchor_definition.match(/(htt.+)\n/i)[1]);
return("");
});
// anchors in the text
text = text.replace(/\]\[\d+\]/gi, function(anchor){
var id = parseInt(anchor.match(/\d+/)[0]);
var code = "][" + (anchors[id - 1]) + "]";
return(code);
});
return(text);
});

Highcharts Tooltip formatting for shared Tooltips

If for example I have a chart with three series in it and the tooltips are set to shared, I would like more control over formatting the tooltips. Currently I use the formatter: somefunction() and create my own html to use in the tooltip that is displayed. Now this works very nicely, but now I would like to be able to know when the formattor function fires which series I am over so that out of the three series in the tooltip I can format the text I show accordingly.
Shared Tooltip:
Header Label
Series 1
Series 2 (If I am hovering over this item I want to bold it in the formatter function)
Series 3

There isn't such info in shared tooltip - simply you can hover empty space on a chart (none of series) and it will be displayed, see: http://jsfiddle.net/LBsL5/
Solution which may work for you is to disable shared tooltip and get values from other series using:
var xIndex = this.series.xData.indexOf(this.x),
allSeries = this.series.chart.series;
Now loop over all series and use allSeries[index].yData[xIndex] to get value from each series.
Of course, if this.series.index (or this.series.options.index ) is the same index above, then generate bold text.

Thanks for the direction on this. I am posting the full code here to implement this. Hopefully it will help others.
// Header for tooltip.
// This row consists of bold text, with the text being the xAxis Label
// that the Series falls in followed by the Chart Title.
var toolTip = '<b>' + this.x + ' ' + chartTitle + '</b><br/>';
// Get the current index in the Series you are hovering over.
var xIndex = this.series.xData.indexOf(this.point.x);
// Get all the Series represented in the Chart.
var allSeries = this.series.chart.series;
// Loop over each Series.
for (var index = 0; index < allSeries.length; index++) {
// Get the value from each Series.
var yDataValue = allSeries[index].yData[xIndex];
// Check if this is the same as index and if it is then you are
// hovering over the point that needs the text in the formatted tooltip in bold for that Series.
if (this.series.index === index || this.series.options.index === index) {
//
// Generate Bold Text here.
//
toolTip = toolTip + '<b>' + allSeries[index].name + ': ' + yDataValue + '</b>';
}
else {
toolTip = toolTip + allSeries[index].name + ': ' + yDataValue;
}
}

Cannot Select div's after insert via JavaScript / jQuery

I have a descriptions for each layer of a map , being generated via JSON objects. I generate all html for these containers, which contains maps , legends, and descriptions.
html_description += '<div ' + hide + ' id="'+ map_div_id + '_description_' + id + '">' + layer_info.description + '</div>';
// Set the description from the layer info
$('#' + map_div_id + '_description').html(html_description);
Then I want to only show certain descrptions (depending on which layer is showing). So below should work , (as it works in my console debugger) .
// Hide Descriptions
$('#' + map_div_id + '_description div').hide();
$('#' + map_div_id + '_description_' + visible).show();
// Show Proper Description
console.log('#' + map_div_id + '_description_' + visible);
console.log($('#' + map_div_id + '_description_' + visible));
Also the odd thing is I can manipulate the heading contanier :
// THIS WORKS?!
$('#' + map_div_id + '_description').hide();
Any ideas?
http://jsfiddle.net/PazSs/2/

Thanks for the jsFiddle.
I modified it to investigate, and here's my copy:
http://jsfiddle.net/PazSs/8/
I do believe your problem is in your dynamic_layer array. I stepped through the code in jsFiddle and that array has zero elements.
The result is when you call
dynamic_layer[map_div_id].setVisibleLayers(layer_id);
It crashes, as you're dereferencing an undefined result (null).
I see you're populating the dynamic_layer further above:
if (typeof geo_server != 'undefined' && geo_server != null) {
gp_server = gis_server + '/' + geo_server;
gp = new esri.tasks.Geoprocessor(gp_server);
} else {
// Adds a dynamic layer
dynamic_layer[map_div_id] = new esri.layers.ArcGISDynamicMapServiceLayer(full_map_server);
map[map_div_id].addLayers([dynamic_layer[map_div_id]]);
}
This seems to be the only place you stuff objects into the dynamic_layer array, so I'd start there. Check out your logic and ensure that you always put the layer in when required.
Let me know if it works!

that selector:
$('#' + map_div_id + '_description div')
would look for a div inside your description div.
assumed the value of 'map_div_id' is 'test' your markup after insert should look like this:
<div id="test_description">
<div> ...your description here </div>
</div>
when i see how your build your html_descriptions string, it does not look like it is doing that... (it only would be like that if 'layer_info.description' would contain '...'
thats a lot of assuming, it's probably easier you show us some generated markup, and complete script. use jsfiddle

I can see your logic:
HIDE ALL layer descriptions
and then SHOW only the layers you want to see
What does "visible" mean? Is that an id? The name implies a boolean.
If it's a boolean, your selector
$('#' + map_div_id + '_description_' + visible).show();
doesn't look like it'll work properly.
Can you describe what visible is a bit more, please, and give examples of the actual markup?
Thanks.

Problems updating the content of a Kendo UI TabStrip without AJAX?

I have a small console that displayed the output of certain actions in my website, the need to have another console that would display a different kind of output made me want to combine both consoles in a Kendo UI TabStrip, the thing is that the information displayed on the console isn't received with AJAX so when I started to insert the HTML elements like before, the tab didn't got updated.
This is how I initialize the tab:
$('#tabConsole').kendoTabStrip({
animation: {
open: {
effects:'fadeIn'
}
}
});
This is how my HTML looks:
<div id="tabConsole">
<ul>
<li class="k-state-active">Salida</li>
<li id="notificacionTab">Notificaciones</li>
</ul>
<div id="userConsole"></div>
<div id="notificationConsole"></div>
</div>
This is how I try to update it:
function appendToConsole(content, type, optional) {
//code to append to console
var actualDate = new Date();
var prevContent = $('#userConsole').html();
if (typeof prevContent === 'undefined') {
prevContent = '';
}
var strType = '';
var iconType = '';
var moreOutput = '';
if (type == 1) {
strType = 'infoConsole';
iconType = 'infoIcon.png';
} else if (type == 2) {
strType = 'warningConsole';
iconType = 'warningIcon.png';
moreOutput = '<img id="viewDetails" value="' + optional + '" class="moreConsole" src="../Content/images/icons/arrow.png">';
} else if (type == 3) {
strType = 'errorConsole';
iconType = 'errorIcon.png';
}
var iconOutput = '<img class="iconConsole" src="../Content/images/icons/' + iconType + '">';
var dateOutput = '<div class="dateConsole">' + iconOutput + ' ' + actualDate.toLocaleDateString() + ', ' + actualDate.toLocaleTimeString() + ' : </div>';
var consoleOutput = prevContent + '<div class="outputConsole">' + dateOutput + content + moreOutput + '</div>';
$('#userConsole').html(consoleOutput.toString());
var height = $('#userConsole')[0].scrollHeight;
$('#userConsole').scrollTop(height);
//my try to update the tab
var tabStrip = $('#tabConsole'),
selectedIndex = tabStrip.data('kendoTabStrip').select().index(),
clone = original.clone(true);
clone.children('ul')
.children('li')
.eq(selectedIndex)
.addClass('k-state-active')
.end();
tabStrip.replaceWith(clone);
$('#tabConsole').kendoTabStrip({
animation: {
open: {
effects: 'fadeIn'
}
}
});
}
How can I update the contents of the DIV that are inside the TabStrip?
EDIT
It seems Kendo UI renames the DIVs' ids that represent the tabs to tabConsole-1 and tabConsole-2, explaining why the update wasn't working, still there's a lot of strange behavior, I had to specify the height for each DIV so the overflow propety would work, also the images with id viewDetails and class moreConsole when set to position absolute, get rendered outside the DIV that represents the tab, but if I change the position property to relative, the images stay inside the DIV but are displayed not at the end of the DIV like I want to, but relative to the size of the DIV that comes before them.
I'm really confused as to how to set the styles so the contents are displayed properly.

Adding content to a tabStrip can be achieved using:
$(tabConsole.contentElement(idx)).append(newContent)
where:
idx is the tab index,
newContent is what you want to add to the existing content and
tabConsole is the variable set to $("#...").kendoTabStrip(...).data("kendoTabStrip");.
You don't need to create a new tabStrip (in addition you should not re-create KendoUI elements since this is a pretty expensive operation).
About using multiple tags with the same id... you should not use it, use class instead. ids should be unique.
I'm still trying to understand your problem with the styling.