I want to add new html in page asynchronously like
$.each(programListAll, function (j, innerItem)
{
programHtml = '<div class="row"><ul>';
$("#programList").append(programHtml);
});
It should show user that html is adding asynchronously.
How can I achieve this?
You could have a little delay in adding the items, the code would look like this:
var $programHtml = $('<ul class="row"></ul>');
$('#programList').append($programHtml);
var delay = 1000;
$.each(programListAll, function (j, innerItem)
{
$programHtml.delay(j * delay).append('<li'> + innerItem + '</li>');
});
Related
I am struggling to get the HTML data from the sourcedialog in ckeditor.
I can get the HTML data from the editor itself, no problem. But getting it from the dialog is a pain in the ass.
I want to display a live preview of the HTML entered in the source dialog, and for that I need the HTML data, not from the editor, but from the dialog which the user is editing.
CKEDITOR.on('dialogDefinition', function(ev) {
var editor = ev.editor;
var dialog = ev.data.definition.dialog;
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var editorName = ev.editor.name;
var htmlData = CKEDITOR.instances[editorName].getData();
if (dialogName == 'sourcedialog') {
dialog.on('show', function () {
//console.log(this.getSize().width);
console.log(this);
$("#sourcePreview").css("display", "block");
$("#sourcePreview").html(htmlData);
$(".cke_dialog_ui_input_textarea textarea").on("keyup", function() {
//var dialogElementUpdated = dialogObj.getElement().getFirst();
//console.log(editorData);
//$("#sourcePreview").html(htmlDataUpdated);
});
});
dialog.on('hide', function () {
console.log('dialog ' + dialogName + ' closed.');
$("#sourcePreview").css("display", "none");
});
}
});
This is what I have so far (sorry about all the console.logs, this is work in progress). I am obviously getting HTML data from the varible: htmlData, but this is from the editor, not the dialog.
CKEditor is great but yeah, there's a lot about it that's a pain in the ass.
if (dialogName == 'sourcedialog')
{
dialog.on('show', function ()
{
// 'input' is the correct event to listen to for a textarea,
// it fires on paste too.
this.getContentElement('main', 'data').getInputElement().on('input', function()
{
console.log('textarea contents: ' + this.$.value);
}
}
}
I am developing a tab in my website and I want to have html code for different tab in different file.how do I call html code from one file to another
Four options; Ajax, dynamic JavaScript, tab already loaded with display:none;, or iframe.
I have used this to do what i think you need.
(function () {
var UI;
UI = {
main: function () {
var elems;
elems = "<div id='div1'>Div 1</div>";
elems += "<div id='div2'>Div 2</div>";
body.innerHTML = elems;
}
}
window.onload = function () {
UI.main();
}
}());
note: body.innerHTML goes to the ID, not the tag. So HTML would look just like this:
<body id='body'>--JS inception here--</body>
So if you are going to target a specific tab, it would look like this:
elems = "<div>my tab</div>";
myID.innerHTML = elems;
I want to build a url where parts of the url string are dynamic build with a select box.
The watch is only called at startup:
$scope.$watch('url', function () {
$scope.buildUrl();
}, true);
Here is the fiddle:
http://jsfiddle.net/mkeuschn/wJGFm/
best regards
The $watch will only fire if the value being watched changes. In this case, it is better to watch dimension, since this is the selection that is changing. Then, you can re-assign the dimension part of the url and re-build.
Here is an updated fiddle.
JS:
$scope.buildUrl = function () {
$scope.url.dimension = $scope.dimension.value;
$scope.completeUrl = $scope.url.base + "dateFrom=" + $scope.url.from + "&dateTo=" + $scope.url.to + "&dimension=" + $scope.url.dimension;
};
$scope.$watch('dimension', function () {
$scope.buildUrl();
}, true);
I tried to implement this code (http://stackoverflow.com/questions/10318316/how-to-hide-or-display-a-google-maps-layer/) on my page, to put the weather/clouds on/off my map,
but somehow it interferes with my current code. I tried the two options that were presented in the above link already, but perhaps I did something wrong, or it interferes with the Fusion Tables selections that are already in my map?
Could someone please help me with the right snippet of code?
My page is here http://www.strahlen.org/map/mapplusweather.htm.
The (de)select buttons are already in the bottom right corner.
Thanks in advance,
Frank
ps: although an admin deleted your posting, thanks to Alexander Farber for your previous help!
ps 2: I of course have the weather layer working, see http://www.strahlen.org/map/mapweather.htm, but I cannot toggle it on/off
* final edit *
to prevent link-rot: I used the code here in my "production-version" now -> http://www.strahlen.org/map/
I've taken a look at your site and I believe you just have to make some basic changes to your existing code. First, add two new vars within you initialize() function:
function initialize() {
var tableId = 3167783;
var cloudDisplayIsOn = false;
var weatherDisplayIsOn = false;
Then, in your existing cloud click listener code, make these changes:
google.maps.event.addDomListener(document.getElementById('cloud'),
'click', function() {
if ( cloudDisplayIsOn ) {
cloudLayer.setMap( null );
cloudDisplayIsOn = false;
}
else {
cloudLayer.setMap( map );
cloudDisplayIsOn = true;
}
});
And finally, in your existing weather click listener code, make very similar changes:
google.maps.event.addDomListener(document.getElementById('weather'),
'click', function() {
if ( weatherDisplayIsOn ) {
weatherLayer.setMap( null );
weatherDisplayIsOn = false;
}
else {
weatherLayer.setMap( map );
weatherDisplayIsOn = true;
}
});
Now you may have to do a little minor debugging, but I believe this will add the display on/off code for the cloudLayer and the weatherLayer that you need.
I'm trying to perform a similar function, but with a different slant. The following code is the currently used geeToggleLayer function from the fusion_maps_v3.js file which our map server page references. I am trying to eliminate the checkbox toggle in favor of someone simply clicking the layer label to toggle visibility.
function geeToggleLayer(e, checkBoxId, channel, glmId, layerName) {
try {
var cb = document.getElementById(checkBoxId);
var id = glmId + '-' + channel;
// toggle layer visibility via clicking checkbox
try {
if (cb.checked) {
geeMap.showFusionLayer(id);
} else {
geeMap.hideFusionLayer(id);
}
} catch (err2) {
alert('Failed attempt to enable/disable layer: ' +
layerName + '\n' + id + '\n' + err2);
}
} catch (err) {
alert('Failed attempt to get checkbox for layer: ' +
layerName + '\n' + err);
}
cancelEvent(e);
}
I'm setting up a extjs panel with a GMap2 embedded. Here's the setup:
map = new GMap2(document.getElementById("gmappanel"));
map.setCenter(new GLatLng(58.019257, -115.572402), 3);
map.setUIToDefault();
I'm using the example from here so that when I click a marker, I get an info window. The problem is, the event fires and I can see the proper HTML in the console, but nothing else happens. The info window simply doesn't open. no error, nothing.
Here's the code for that:
function createMarker(point, val) {
var marker = new GMarker(point);
var name = val.data.name;
var html = "<table class='marker'>";
html += "<tr><td>Name: </td><td>" + name + "</td></tr>";
html += "</table>";
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
debug("Marker fired");
});
return marker;
}
Here's how I call it:
var marker = createMarker(point,store.getAt(i));
Any ideas?
Sounds like your HTML is not valid. Can you dump some example html data that you are passing to the openInfoWindowHtml? Your createMarker function works just fine with :
var html = "<table class='marker'><tr><td>Name: </td><td> sometext </td></tr></table>";
what version of the api are you using? 2.x?
Possibly you want bindInfoWindowHtml, not openInfoWindowHtml.
Something along the lines of..
function createMarker(point, val) {
var marker = new GMarker(point);
var name = val.data.name;
var html = "<table class='marker'>";
html += "<tr><td>Name: </td><td>" + name + "</td></tr>";
html += "</table>";
marker.bindInfoWindowHtml(html);
return marker;
}
You also have two marker variables defined in different scopes, check to make sure you have the listener on the right "marker".