Develop Reference

jQuery script works only once, then TypeError: $(...) is not a function

I've downloaded this script for use conditional fields in forms:
(function ($) {
$.fn.conditionize = function(options) {
var settings = $.extend({
hideJS: true
}, options );
$.fn.showOrHide = function(is_met, $section) {
if (is_met) {
$section.slideDown();
}
else {
$section.slideUp();
$section.find('select, input').each(function(){
if ( ($(this).attr('type')=='radio') || ($(this).attr('type')=='checkbox') ) {
$(this).prop('checked', false).trigger('change');
}
else{
$(this).val('').trigger('change');
}
});
}
}
return this.each( function() {
var $section = $(this);
var cond = $(this).data('condition');
// First get all (distinct) used field/inputs
var re = /(#?\w+)/ig;
var match = re.exec(cond);
var inputs = {}, e = "", name ="";
while(match !== null) {
name = match[1];
e = (name.substring(0,1)=='#' ? name : "[name=" + name + "]");
if ( $(e).length && ! (name in inputs) ) {
inputs[name] = e;
}
match = re.exec(cond);
}
// Replace fields names/ids by $().val()
for (name in inputs) {
e = inputs[name];
tmp_re = new RegExp("(" + name + ")\\b","g")
if ( ($(e).attr('type')=='radio') || ($(e).attr('type')=='checkbox') ) {
cond = cond.replace(tmp_re,"$('" + e + ":checked').val()");
}
else {
cond = cond.replace(tmp_re,"$('" + e + "').val()");
}
}
//Set up event listeners
for (name in inputs) {
$(inputs[name]).on('change', function() {
$.fn.showOrHide(eval(cond), $section);
});
}
//If setting was chosen, hide everything first...
if (settings.hideJS) {
$(this).hide();
}
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}(jQuery));
I'm trying this because I need to use conditionize() in one of my tabs and when I reload the tab, all works but if I go to other tab and I return to the previous tab(where I need this works), I get that error.
When I change tabs, I'm only reloading one part of the page.
When I load the page this works perfectly, but if I try to call function again from browser console, it tells me that TypeError: $(...)conditionize() is not a function.
I have included the script in header tag and I'm calling it with this script on the bottom of body:
<script type="text/javascript">
$('.conditional').conditionize();
</script>
EDIT:
I have written
<script type="text/javascript">
console.log($('.conditional').conditionize);
setTimeout(function () {console.log($('.conditional').conditionize);}, 2);
</script>
and this print me at console the function, and when 2 milliseconds have passed, it print me undefined

I have found the solution.
Because any reason, the $ object and jQuery object are not the same in my code.
I have discovered it using this on browser console:
$===jQuery
This return false (This was produced because in other JS, I was using the noConflict(), which give me the problem)
Explanation: noConflict()
So I have solved it changing the last line of my JS by:
//Show based on current value on page load
$.fn.showOrHide(eval(cond), $section);
});
}
}($));
Putting the $ instead of 'jQuery'

Integrating CKEditor into elFinder

I'm sure this has been covered before as I've found similar posts but unfortunately non that work for me in this scenario.
Basically what I have is the elFinder and CKEditor side by side on a page.
What I'm looking to do is open the files contents into CKEditor when the file is double clicked, or when edit is clicked from the contextMenu.
Please could someone advise on how I could achieve this.
Thank you

After some experimentation I've come up with the following. It's the same as the code for integrating tinyMCE but the "editors" parameter is as follows (I'm assuming you are using the jQuery adapter):
editors: [{
mimes: ['text/html'],
load: function(textarea) {
$(textarea).ckeditor();
},
close: function(textarea, instance) {
CKEDITOR.instances[textarea.id].destroy();
},
save: function(textarea, editor) {
textarea.value = $(textarea).val();
}
}
]

this is code given in the elfinder forum:
CKEDITOR.on('dialogDefinition', function(event) {
var editor = event.editor;
var dialogDefinition = event.data.definition;
var dialogName = event.data.name;
var tabCount = dialogDefinition.contents.length;
for(var i = 0; i < tabCount; i++) {
var browseButton = dialogDefinition.contents[i].get('browse');
if (browseButton !== null) {
browseButton.hidden = false;
browseButton.onClick = function(dialog, i) {
$('<div \>').dialog({modal:true,width:"80%",title:'elFinder',zIndex: 99999,
create: function(event, ui) {
$(this).elfinder({
resizable:false,
//lang:'ru', // Optional
url : /elfinder/php/connector.php?mode=image',
getFileCallback : function(url) {
if($('input#cke_118_textInput').is(':visible')){
$('input#cke_118_textInput').val(url);
} else {
$('input#cke_79_textInput').val(url);
}
$('a.ui-dialog-titlebar-close[role="button"]').click()
}
}).elfinder('instance')
}
})
}
}
}
});

Adding a custom context menu item to elFinder

I'm using elfinder and I would like to add new functionality by adding a command to the context menu. I found a solution on the github issue tracker of the project but I can't get it to work. Here's what I do:
var elf;
jQuery().ready(function() {
elFinder.prototype._options.commands.push('editimage');
elFinder.prototype._options.contextmenu.files.push('editimage');
elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image';
elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten';
elFinder.prototype.commands.editimage = function() {
this.exec = function(hashes) {
console.log('hallo');
}
}
elf = jQuery('#elfinder').elfinder({
...
//elfinder initialization
The context menu item does not show up, no error message is to be found in the console. I also tried putting editimage under contextmenu->"files" in the init part in case that was overwritten by the initialization.

I found the solution: The examples don't show the fact that you need to have a function called this.getstate inside of the elFinder.prototype.commands.yourcommand function. It shall return 0 when the icon is enabled and -1 when it's disabled.
So the full code for adding your own menu item or context menu item looks like this:
var elf;
jQuery().ready(function() {
elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image';
elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten';
elFinder.prototype._options.commands.push('editimage');
elFinder.prototype.commands.editimage = function() {
this.exec = function(hashes) {
//do whatever
}
this.getstate = function() {
//return 0 to enable, -1 to disable icon access
return 0;
}
}
...
elf = jQuery('#elfinder').elfinder({
lang: 'de', // language (OPTIONAL)
url : '/ext/elfinder-2.0-rc1/php/connector.php', //connector URL
width:'100%',
uiOptions : {
// toolbar configuration
toolbar : [
...
['quicklook', 'editimage'],
/*['copy', 'cut', 'paste'],*/
...
]},
contextmenu : {
...
// current directory file menu
files : [
'getfile', '|','open', 'quicklook', 'editimage', ...
]
}
}).elfinder('instance');
});
Hope this helps someone with the same problem.

Thanks for the answer, great!
One thing that wasn't clear was how the variables pass through.
So, for anyone else who finds this page....
elFinder.prototype.commands.editpres = function() {
this.exec = function(hashes) {
var file = this.files(hashes);
var hash = file[0].hash;
var fm = this.fm;
var url = fm.url(hash);
var scope = angular.element("body").scope();
scope.openEditorEdit(url);
}
// Getstate configured to only light up button if a file is selected.
this.getstate = function() {
var sel = this.files(sel),
cnt = sel.length;
return !this._disabled && cnt ? 0 : -1;
}
}
To get your icon to show up, add the following to your css file:
.elfinder-button-icon-editpres { background:url('../img/icons/editpres.png') no-repeat; }

FancyBox/ Popup Deeplinking

How do you implement deep linking on a page so when the user comes that that page from an external link, that fancybox modal is initiated. I'm new to JS/Jquery

I was looking for the same thing this morning and found your question as well as a forum post that has an answer.
(function()
{
var qs = location.search.slice( 1 ),
params = qs.match( /&?ab=(\d+)\|(\d+)/ );
if( params )
page( Number( params[ 1 ] ), Number( params[ 2 ] ) );
})();
"Then if you link to that page passing your two numeric parameters in this form:
concert.html?ab=1|5
It should have the stunning effect of calling page(1, 5); when the page loads. "
http://www.webdeveloper.com/forum/showthread.php?t=247899
Hope it helps - it helped me. :)

I just solved it for myself with fancybox2 and url hashes.
You can use Fancybox callbacks to set and unset hashes.
I used data attributes in the img tag to store img identifiers.
Then you can check for a hash in the url at pageload, get the index and open the fancybox with the given index.
var option = {
afterLoad: function(links) {
var title = links.element.attr('data-my-img');
location.hash = title;
},
afterClose: function() {
location.hash = '';
}
},
hash = location.hash.substr(1),
gallery = $('.fancybox');
if(hash.length > 0){
//id
var i = null;
gallery.each(function(index) {
var o = $(this).attr('data-my-img');
if($(this).attr('data-my-img') == hash){
i = index;
return;
}
});
if(i != null){
option.index = i;
$.fancybox.open(gallery, option);
}
}
gallery.fancybox(option);

Javascript code error at Internet Explorer

My web + Jquery plugins is working well on Firefox, Chrome, Safari (win & Osx) & Android also. But it sucks with Windows + Internet Explorer because it does not load some js. I am going crazy because it works in all scenarios but IE.
IE shows me 3 errors warnings. My question is. Must IE compile perfect all these 3 errors before showing well the page? For example I have a real time search using jquery, but it does not work on IE due it shows me an error with that code.
Please could you help me validate this "valid" code? Thank you all in advance
$(function() {
// find all the input elements with title attributes
$('input[title!=""]').hint();
}
);
(function ($) {
$.fn.hint = function (blurClass) {
if (!blurClass) {
blurClass = 'blur'; }
return this.each(function () {
// get jQuery version of 'this'
var $input = $(this),
// capture the rest of the variable to allow for reuse
title = $input.attr('title'),
$form = $(this.form),
$win = $(window); function remove() {
if ($input.val() === title && $input.hasClass(blurClass)) {
$input.val('').removeClass(blurClass); }
}
// only apply logic if the element has the attribute
if (title) {
// on blur, set value to title attr if text is blank
$input.blur(function () {
if (this.value === '') {
$input.val(title).addClass(blurClass); }
}
).focus(remove).blur(); // now change all inputs to title
// clear the pre-defined text when form is submitted
$form.submit(remove); $win.unload(remove); // handles Firefox's autocomplete
}
}
); }; }
)(jQuery);
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value,
data) {
window.open('ITEM.PRO?&token=#AVP'navegante'&S=' + value.substring(value.length - 4)); }
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
onSelect : onAutocompleteSelect, }; a = $('#query').autocomplete(options); }
);

Next code in your example maybe have some errors:
original code:
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value,
data) {
window.open('ITEM.PRO?&token=#AVP'navegante'&S=' + value.substring(value.length - 4)); }
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
onSelect : onAutocompleteSelect, }; a = $('#query').autocomplete(options); }
);
changed code:
var options, a;
jQuery(function() {
var onAutocompleteSelect = function(value, data) {
// in next line added plus signs before and after *navegante*
window.open('ITEM.PRO?&token=#AVP'+navegante+'&S='+value.substring(value.length-4));
}; // semicolon added
options = {
serviceUrl : 'JQUERY-#AVP$_SETLANG$.pro',
// in next line removed comma. I think: it generate error in IE
onSelect : onAutocompleteSelect //,
};
a = $('#query').autocomplete(options);
});

I tried several j queries in my website .. Most common problem i faced was this and there was nothing wrong with j query but i had to download the latest >jquery.js file and rename it also with the jquery.js ..