We Keep Coding

Ckeditor not working with angular App

I am having issue with ckeditor4.When I run it independently its working fine.But when I trying to run it with my angular app its not working.Here is my sample code:
var initSample = ( function() {
var wysiwygareaAvailable = isWysiwygareaAvailable(),
isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' );
return function() {
var editorElement = CKEDITOR.document.getById( 'editor' );
// :(((
if ( isBBCodeBuiltIn ) {
editorElement.setHtml(
'Hello world!\n\n' +
'I\'m an instance of [url=http://ckeditor.com]CKEditor[/url].'
);
}
// Depending on the wysiwygare plugin availability initialize classic or inline editor.
if ( wysiwygareaAvailable ) {
CKEDITOR.replace( 'editor' );
} else {
editorElement.setAttribute( 'contenteditable', 'true' );
CKEDITOR.inline( 'editor' );
// TODO we can consider displaying some info box that
// without wysiwygarea the classic editor may not work.
}
};
function isWysiwygareaAvailable() {
// If in development mode, then the wysiwygarea must be available.
// Split REV into two strings so builder does not replace it :D.
if ( CKEDITOR.revision == ( '%RE' + 'V%' ) ) {
return true;
}
return !!CKEDITOR.plugins.get( 'wysiwygarea' );
}
}
When I console after "isBBCodeBuiltIn = !!CKEDITOR.plugins.get( 'bbcode' )" line its consoling fine.But it is not entering inside return function() { }.Any suggestion?

How do you call an AngularJS function from javascript?

I am trying to call the AngularJS method advanceSlide() from my Javascript after the if statement, however,this line:
angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();
doesn't seem to be working. Here is the full code.
Javascript
window.onload = function() {
cast.receiver.logger.setLevelValue(0);
window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
console.log('Starting Receiver Manager');
// handler for the CastMessageBus message event
window.messageBus.onMessage = function(event) {
console.log('Message [' + event.senderId + ']: ' + event.data);
// display the message from the sender
displayText(event.data);
if (event.data == "quit") {
angular.element(document.getElementById('FotoSpill')).scope().advanceSlide();
};
// inform all senders on the CastMessageBus of the incoming message event
// sender message listener will be invoked
window.messageBus.send(event.senderId, event.data);
}
ANGULARJS
var FotoSpill = angular.module('FotoSpill', []);
FotoSpill.config(['$routeProvider', '$locationProvider', function( $routeProvider, $locationProvider ) {$routeProvider.when('/tag/:tag');}]);
FotoSpill.controller('slideshow', function ( $scope, $http, $timeout, $route, $location ) {
// Set the API endpoint
var api = 'https://api.instagram.com/v1/locations/436022/media/recent?access_token=257058201.9af4692.3d68e63b114944a0be332da732923a23&callback=JSON_CALLBACK',
newReq, refreshApi;
var seconds = 1000;
$scope.fetchImages = function() {
$scope.loadingClass = 'loading';
$scope.imgCurrent = 0;
// if ( ! $route.current )
// $location.path( '/tag/' + $scope.tag );
// else if ( angular.isDefined( $route.current.params.tag ) )
// $scope.tag = $route.current.params.tag;
$http.jsonp(
api.replace( '%tag%', $scope.tag )
).success( function( data ) {
delete $scope.loadingClass;
$scope.images = data.data;
// Set the first image active
if ( data.data.length )
$scope.makeActiveSlide( $scope.imgCurrent );
// Cancel the previous update request
if ( refreshApi )
$timeout.cancel( refreshApi );
// Check for new images on every loop
if ( data.data.length )
refreshApi = $timeout( $scope.fetchImages, 60*seconds );
}).error( function() {
delete $scope.loadingClass;
refreshApi = $timeout( $scope.fetchImages, 2*seconds );
});
}
// Fetch images
$timeout( $scope.fetchImages );
$scope.advanceSlide = function() {
// Method 1
// Use a classname to highlight the current active slide
if ( angular.isDefined( $scope.images ) && $scope.images.length )
$scope.makeActiveSlide( $scope.imgCurrent + 1 );
$timeout( $scope.advanceSlide, 6*seconds ); //time between slide transition
}
}
).filter(
'escape', function () {
return function( input ) {
return escape( input );
}
}
);

you need to apply your changes
angular.element(document.getElementById('FotoSpill')).scope().$apply('$scope.advanceSlide()');
try that

Don't know how is your HTML, but it seems the problem is about the DOM selected, or say, jqLite selecter.
If you are using something like <div ng-controller="slideshow"></div>, you can use:
angular.element('[ng-controller=slideshow]').scope().$apply('advanceSlide()');
This code first try to find the correct DOM node regarding the scope you want to access with angular.element, then retrieve its scope through scope(), finally $apply a expression in the context of the scope.

Check if link contains javascript

How can I tell, in JavaScript/jQuery if a link is Javascript?
For example:
Trigger
Trying to make sure a script only logs links, and not javascript, anchors, etc.
Basically I need to capture the href of the link as I .each through them (already done) I just need a reliable way to check that variable to see if it is javascript, ie, function w/e
var rand = function() {
return Math.random().toString(36).substr(2);
};
$(function(){
$('#lhcb a').each(function() {
var rawlink = $(this).attr("href");
var link = encodeURIComponent( rawlink );
var token = rand();
var href = $(this).prop('href');
var proceed = $.get( "lhc/link.php?link=" + link + "&a=c", function( data ) {
if ( data == 1 ) {
return true;
} else {
return false;
}
});
if ( href.match("^javascript:") ) {
proceed = false;
}
if ( rawlink.charAt(0) != '#' ) {
if ( proceed ) {
$(this).after( " <span style='font-size:xx-small;'>( Hits: <span id='" + token + "'></span> )</span>" );
$.get( "lhc/link.php?link=" + link + "&a=q", function( data ) {
$('#' + token).html(data);
});
$(this).attr( "href", "lhc/link.php?link=" + link + "&a=g" );
}
}
});
});
This is what I have, but as mentioned below, it wouldn't be able to see if the href is just a function without the JavaScript declaration.

A little script can help. I wrote a sample:
http://jsfiddle.net/qXkHX/
var normalLinks = [];
$("a").each(function(i) {
var a = $(this);
var href = $.trim(a.attr("href"));
if(href.indexOf("javascript:") !== 0) normalLinks.push(href);
});
$("#result").text(normalLinks.join(","));
It iterates through the anchors in the document and pushes every link that does not start with javascript:. Maybe this helps.

javascript change event fires when page loads - how to avoid this?

I have a form with chained select boxes. The zend controller sets the default values for these select boxes (values come from the db). I am a jquery novice.
$form->setDefaults($data);
a jquery file is loaded :
$(document).ready(function(){
// set up the chained select
$("#region").remoteChained("#country", "/ws/regionstructure");
$("#province").remoteChained("#region", "/ws/regionstructure");
$("#town").remoteChained("#province", "/ws/regionstructure");
});
The problem is that when the page loads it is triggering the change event for country and resetting all of the selects.
Here is the remoteChained jquery code that is being called:
/*
* Remote Chained - jQuery AJAX(J) chained selects plugin
*
* Copyright (c) 2010-2011 Mika Tuupola
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($) {
$.fn.remoteChained = function(parent_selector, url, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
/* Build data array from parents values. */
var data = {};
$(parent_selector).each(function() {
var id = $(this).attr("id");
var value = $(":selected", this).val();
data[id] = value;
});
$.getJSON(url, data, function(json) {
/* Clear the select. */
$("option", self).remove();
/* Add new options from json. */
for (var key in json) {
if (!json.hasOwnProperty(key)) {
continue;
}
/* This sets the default selected. */
if ("selected" == key) {
continue;
}
var option = $("<option />").val(key).append(json[key]);
$(self).append(option);
}
/* Loop option again to set selected. IE needed this... */
$(self).children().each(function() {
if ($(this).val() == json["selected"]) {
$(this).attr("selected", "selected");
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
/* Force updating the children. */
$(self).trigger("change");
});
});
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.remoteChainedTo = $.fn.remoteChained;
})(jQuery);

I don't see any issue with removing the change event, but the way that plugin works seems highly inefficient. I refactored this (untested), so give this a go and see how it works for you.
You can call it like so:
$( "#region" ).remoteChained( { parentSelector: "#country", url: "/ws/regionstructure" } );
$( "#province" ).remoteChained( { parentSelector: "#region", url: "/ws/regionstructure" } );
$( "#town" ).remoteChained( { parentSelector: "#province", url: "/ws/regionstructure" } );
This shouldn't trigger the change event. If you find you need to do this, you can do something like this:
$( '#region' ).trigger( 'change' );
Here is the new plugin code. Let me know if you have any issues with it:
( function( $ ) {
$.fn.remoteChained = function ( options ) {
var defaults = { },
settings = $.extend( { }, defaults, options );
return this.each( function () {
var el = $( this ),
parent = $(settings.parentSelector),
data = { };
parent.each( function () {
var el = $(this);
data[ el.attr( 'id' ) ] = el.find( ':selected' ).val();
});
parentSelector.bind( 'change.remotechanged', function ( e ) {
var request = $.ajax( { url: settings.url, data: data } );
request.done( function ( response ) {
var newOption;
el.find( 'option' ).remove();
for ( var key in response ) {
if ( !response.hasOwnProperty( key ) ) {
continue;
}
newOption = $( '<option />' )
.val( key )
.append( response[ key ] );
key === 'selected' && newOption.attr( 'selected', 'selected' );
newOption.appendTo( el );
}
if ( el.find( 'option' ).length === 1 && el.val() === '' ) {
el.attr( 'disabled', 'disabled' );
} else {
el.removeAttr( 'disabled' );
}
});
});
});
};
})( jQuery );

Converted JavaScript to FBJS - tabs still not working

I tried my best to convert JavaScript to FBJS according to this page: http://wiki.developers.facebook.com/index.php/FBJS.
Yet my tabs are still not working properly. Does anyone have any suggestions how to fix this so I can click through the tabs and display and hide content accordingly:
<script type="text/javascript"><!--
var tabLinks = [];
var contentDivs = [];
function init() {
var tabListItems = document.getElementById('tabs').getChildNodes();
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].getNodeName("LI") ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].addEventListener(onclick, showTab)
tabLinks[id].addEventListener(onfocus, function() { this.blur() };
if ( i == 0 ) tabLinks[id].setClassName('selected');
i++;)
}
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].setClassName('tabContent hide');
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].setClassName('selected');
contentDivs[id].setClassName('tabContent');
} else {
tabLinks[id].setClassName('');
contentDivs[id].setClassName('tabContent hide');
}
}
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.getChildNodes().length; i++ ) {
if ( element.getChildNodes[i].getNodeName(tagName) ) return element.getChildNodes[i];
}
}
function getHash( url ) {
var hashPos = url.getLastIndexOf ( '#' );
return url.getSubString( hashPos + 1 );
}
init();
--></script>
Thanks for any response.

FBML tabs (which use FBJS) are deprecated now and will be disabled in the future. You should create a new application with IFRAME tab (which is by default now).
IFRAME tabs are just tabs with IFRAME inside, and your code is loaded into this iframe from a specified URL as any other web page. You can use any Javascript frameworks in it (like jQuery), so you don't need to learn how to write FBJS.

Setup a Facebook page that uses a Facebook app. Make sure you set up your app using an iFrame that points to a file on your server. You'll get a lot more freedom using an iFrame when it comes to Javascript and it's a great way to leverage a CMS if you're going to need to do that as well. Best of Luck!