Problem creating jQuery plugin with textareas - javascript

I'm trying to modify this script that emulates the Word 2007 minibar in a textarea. I have wrapped it in a plugin, the problem is that it will not work with multiple textareas.
You can try it out at JSBin
(Just select som text in the first textarea and then click on the "b")
Can someone help me? I'm kinda lost.
Update
Should have mentioned that it shows up correctly in the preview, but it adds double tags in the textarea. And it doesn't work in Firefox or IE. Why?
It is very hackish, so I was hoping for someone do show me how to do it right.
It only works in Chrome as of now

First we'll address the double tags issue, they happen because of these handlers:
$("#bold").click(function() { ... });
$("#italic").click(function() { ... });
$("#underline").click(function() { ... });
$("#link").click(function() { ... });
They're being bound inside your .each() loop, meaning a handler is being bound for each element you're running your code on, creating n handlers for the same #bold element, just move these handlers outside your .each() loop (and be sure to .unbind() them or use .live(), in case the plugin is run more than once as well).
While we're at it, we should move the $(document).mousedown(function() { ... }); out of that loop as well, same issue of not wanting to bind it multiple times.
Your IE/Firefox problems are mostly the result of how the example is setup on JSBin (jQuery not being defined because of the includes), not actual code issues with the plugin. However since .select() can be used across browsers I think you can eliminate the $.browser.msie clause, at least in IE8 it's not needed, but be sure to test older versions if you want to support them.
With only the changes above and some code formatting improvements (.css() can take an object for example), I've setup your code for testing here.

Related

jQuery(document).on("keydown",...) works, but not document.addEventListener("keydown",...)

I thought I should see how much I really need jQuery now. So I started by replacing
jQuery(document).on("keydown.", function(e){...})
with
document.addEventListener("keydown", function(e){...})
I believed that one was easy, but to my surprise the event was no longer fired. To investigate this a bit I entered the second version in the console. Now it worked. ;-)
That is a bit impractical, of course. I would prefer that I did not have to enter it in the console...
In the code the event listener is added right after some changes to the DOM, i e some additions. I guess the trouble might be related to this, but I have no idea what to do.
Any suggestions?
EDIT: Thanks everyone for the comments. In this particular case it would be good to get rid of jQuery (but otherwise it is no problem using jQuery of course).
I should have said that some DOM elements are added long after the page is loaded so window.onload etc is not useful here.
I should maybe also have said that I am testing this in the latest version of Chrome and for this I am not interested in backward compatibility (it is too complicated anyway in this case so I have just dropped that... ;-) ).
UPDATE: Someone asked for code. Here is an example I just tested:
document.addEventListener("keydown.test", function(e){
console.log("doc.addEL test keydown, e=", e)
});
Looking in Chrome Dev Tools at the properties of the HTML element I can see the event listener there (with the code above). It is just not fired. Seems like it is just time to write yet another bug report then. ;-)
My bad. I misread the news that event handlers now can be removed using standard syntax. They can, but the syntax is that you give the event+handler function to removeEventListener.
The syntax I used above for the event, "keydown.test", is not a valid syntax (if you are not using jQuery).
Sorry for wasting your time. Hope someone can use the answer.

Cloning a DIV with multiple inputs in Jquery Mobile

I'm new to javascript and I can't seem to figure out this thing which I reckon should be a no-brainer.
I'm using Jquery mobile. I would like to clone a div and update the IDs of the elements in it. This seems to work fine. However, I can't get the cloned select element to work properly. I doesn't seem to work - I can't select anything - after its been cloned. When I call an extra $('html').trigger('create'); on the page the select elements starts looking 'funny' (probably because it got enhanced a second time) but does works.
I've posted a simplified version of my code here: http://jsfiddle.net/cUBPF/1/
Does anyone have a suggestion for me?
Thanks!
I'm not experiencing any problems however I'm just using my desktop. My first thought is to avoid calling the $('html').trigger('create'); at all and simply do what you want to within the clone_button click but then again, I'm not really sure what you are doing.
Instead of doing all this, why not output 10 or 20 of these fields and the display:none/display:block them......I assume you will run into less compability issues this way and you really don't want to allow infinite amount of fields....your going to run into browser memory issues which is just going to cause more bugs.

Internet Explorer 7 onclick event on submit button does not fire

I have a form which submits via ajax to the back-end and I'm writing a general disable function in javascript that I can use to set the onclick of an element. Typing this into the browser so ignore any syntax errors in the following.
function(elementID , processingText) {
var element = document.getElementById(elementID);
if (element) {
element.setAttribute("onClick", "alert('test')");
}
}
So basically the element should have an onclick event to set an alert. I can confirm that the onclick attribute is being set correctly and it fires in IE8+, Chrome and Firefox. It will not fire in IE7.
The element I'm testing on is a submit button in a form (one form on the page). It has many fields and one submit button.
EDIT The code dispatches with an action so it should submit anyway but not until after the alert has been acknowledged /EDIT
I've trawled the net for the past two hours and the following solutions do not work or are not an option-
Add a hidden input field to form.
Wrap submit button in tag and set the onclick in this tag.
Changing case of onclick to onClick
Any solutions which involve altering the html without using javascript are not an option, I'm trying to create a general disableElement function. I can target the script at IE7 so it does not have to work in all browsers, just IE7.
Any help would be greatly appreciated
IE7 has a lot of compatibility issues, of which this is just one. If you're writing javascript that needs to be compatible with IE7, you will end up writing a lot of redundant code that does the same thing in two different ways to cater for different browsers you're supporting.
Issues like this in old browsers are precicely the reason why libraries like jQuery exist. jQuery does a lot of things, but one thing it does very well is iron out many of these nasty little quirks that crop up when writing cross-browser javascript.
The cross-browser issues have become less important in recent years, as modern browsers (including IE) have much better standards support, but if you're supporting old browsers , and old IE versions in particular, my recommendation is to use jQuery (or a similar library), because they have already solved this problem, and plenty of others that will catch you out.
If you do use jQuery, your code will become:
$(element).click(function() {alert('test');});
Before anyone points it out, yes I know the OP didn't specify jQuery in the question, and may not want a jQuery answer, but in this case I would say it is the best answer available, because if you don't use it, you will end up having to write much of the same compatibility code yourself that is already in jQuery.
IE 7 does support setAttribute method but it seems that it is not possible to change an onclick attribute with it. For more info about this issue check this: Why does an onclick property set with setAttribute fail to work in IE?
Cheers

Nested Sortable plugin consistently crashes browsers

Here's the fiddle: http://jsfiddle.net/scZtb/1/
Be warned, as the title suggests, this might crash your browser (or at least the tab, if you're in Chrome).
I'm trying to get this example to work. I've copied it almost exactly, so I don't know why it would work there, but not in my example.
Anyone know what I'm doing wrong?
It seems to only work with <ol>s not <ul>s. I can't imagine why that is, but I can work with that.
Not sure why you are wanting/needing .nestedSortable, which I don't see documented on the jQueryUI site. When I change it to use .sortable, it appears to work correctly. (Using latest Firefox)
Okay, you are using the selector 'ul' in this case, your example doesn't have a nested UL element, but when you do, you are effectively calling the plugin on the original outer list, and again on the inner list...
See recursion... When you use a generic selector with jQuery/jQueryUI you select ALL matching elements, and are calling the plugin on the outer item, then the inner item...

Javascript converting addEventListener to attachEvent

I have the following code calling a Javascript function in a nice shiny standards complient manner :). Please note that I must send elementsList[i] to the function (the this keyword will not be adaquate) as the event listerner is being attached to it's nephew (for want of a better term)
This rather mangled code will effectively find the control element for the dynamic behaviour of the current node in elementsList[i] and add a click event listener to it. When fired it passes the clicked node to the toggle function.
elementsList[i].previousSibling.lastChild.addEventListener
("click", (function(el){return function(){toggle(el)};})(elementsList[i]),false);
Thing is it doesn't work at all with IE8 and below, and in spite of spending most of the morning trying to find a work around I just can't get it to play ball. If someone knows how to translate this into IE crapo code, I'd be grateful to see it.
Have you tried
elementsList[i].previousSibling.lastChild.attachEvent
("onclick", (function(el){return function(){toggle(el)};})(elementsList[i]),false);
2 potential suggestions.
1.) Include jQuery in your project and use their x-browser event bindings (or mootools or some other lib)
2.) Not so-recommended, roll your own x-browser event bindings

Categories

Resources