JQuery - Has Internet Explorer problems with dynamic tables? - javascript

My script creates dynamic input fields inside a table. When I try to run a function after an action it doesn't work (In Internet Explorer, everywhere else it's working fine)
I found out that everything works properly, when the input fields come from static HTML.
Do you know something if IE has some problems with dynamically inserted input fields?
The code is simple and works everywhere else:
.append($('<input>')
.attr('type', 'text')
.attr("name","avz_anzahl["+avz_array+"][]")
.attr("size","3")
.attr("bez","avz_anzahl")
.attr("nr","")
.attr("onblur","test();")
.attr("value", "")
Somehow the follwing function doesn't get executed in Internet Explorer:
function test()
{ alert("ok"); }
Do you know why?

In order to make sure jQuery events are working, use proper jQuery events, like bind or blur.
Also jQuery have more elegant way to create html element:
$("input", {
type: "text",
name: "avz_anzahl["+avz_array+"][]"
size: 3,
bez: "avz_anzahl",
nr: "",
blur: test,//make sure there is no (),
click: function(){
},
value: ""
}).appendTo(SomeElement);

Related

select2 'change' event doesn't trigger for the first time

I have Select2 Javascript widget on my page.
$('#order_address_select').select2({
placeholder: "Select adress",
ajax: {
url: '<?=Yii::app()->getBaseUrl(true)?>/order/getplacemarklist',
dataType: 'json',
},
tags: true,
});
When I'm typing some text, and if it is not found in database and not loaded through ajax, I can anyway choose it, cause attribute tags is setted to true. Then I have following code
$('#order_address_select').change(function () {
alert($("#order_address_select option[data-select2-tag='true']").val());
});
The problem is when I'm typing text, and selecting it as a tag, event doesnt trigger for the first time. But when I'm typing text again, and selecting it, code alerts value of previously selected option. For example: I'm typing "aaa", selecting it, nothing happens, then I'm typing "bbb", selecting it, and got alert with "aaa"
So, if anyone is interested, I found solution on select2 github repository, you just need to add an empty <option></option> to your <select>. And then it will work fine
Inside my change handler I get the selected option as
var data = $(this).select2("data")[0];
Like this:
$selectXXXXX.on('change', function (e) {
var data = $(this).select2("data")[0];
var cfg = configuraciones[data.id];
app.usersFocusChange(data.id, cfg);
});
Ref: select2 dox
You can resolve it by manipulating html :
$('#yourselect2').append("<option selected value='your_val'>your_text</option>");

jQuery dialog with <object>, cannot call dialog('close') from within object document

I have the following situation on a web application.
A dialog is built and opened on the fly when clicking on a link:
var dialogInitiator = $("<div id='dialog-initiator' style='background-color: "+bgcolor+";'>Loading...</div>");
dialogInitiator.appendTo(parentFrame);
dialogInitiator.dialog({
modal:true,
autoOpen: false
}).on('keydown', function(evt) {
if (evt.keyCode === $.ui.keyCode.ESCAPE) {
dialogInitiator.dialog('close');
}
evt.stopPropagation();
});
dialogInitiator.dialog('open');
Right after that, I load a new html page into the dialog, with an < object >, like this:
var objectFrame = $('<object style="border: 0;width:'+(dlwidth-30)+'px;min-height:'+(dlheight-46)+'px;" type="text/html" style="overflow:auto;" data="'+url+'"></object>');
dialogInitiator.html(objectFrame);
Now, the "url" variable contains a link to this new html document. When that page is ready, it will focus on an input field. This prevents the ESCAPE key from closing the dialog. So, I am trying to manually trigger the .dialog('close') event on escape keypress.
I do the following, from within the loaded document:
$('#dialog-initiator', window.parent.document).dialog('close');
It get the following error:
"Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'"
Strange thing is, when i call:
console.log( $('#dialog-initiator', window.parent.document).html() );
it shows me the html from the dialog. So it actually IS initiated.
Well, I have tried to fix this error with the help of Google, but without success. I guess my situation is quite specific.
Note: we are forced to use the technique with loading this whole webpage into the dialog due to older functionality we used in modalDialogs. Since they are depricated in the latest Google Chrome, we've built a temporary solution with jQuery dialog.
I hope someone can help me out. I appreciate it!
You can try a global method created after the modal is created
dialogInitiator.dialog({
modal: true,
autoOpen: false,
create: funtion(e,ui) {
window.closeMyDialog = function() {
$('#dialog-initiator').dialog('close');
};
}
})...
Then call it by doing window.parent.closeMyDialog();.
Why not use JQuery UI? It's easier than making your own.
http://jqueryui.com/dialog/#default

Full Calendar eventDrop firing eventClick in Firefox 15

I don't know what exactly to change about the following code to make it work in Firefox 15:
eventDrop: function (event, dayDelta) {
updateCalendarEvent(event.id, dayDelta);
//Firefox 15 fires eventClick for no good reason???
},
eventClick: function (event) {
alert('event click');
if (event.url) {
alert(event.url);
vUrl = '../Activities/' + event.url;
openActivityAddEditDialog(vUrl, 'Edit Activity');
return false;
}
},
I have done a fair bit of research and this is definitely a BUG. Code works fine in Chrome, Safari, Firefox 14 & even IE - but not Firefox 15. It's been almost 2 months and no fix is in sight.
Someone posted this about a work-around hack here:
http://code.google.com/p/fullcalendar/issues/detail?id=1523
Another similar unanswered Full Calendar Firefox SO question:
Full Calendar event hyperlinks automatically fire in Firefox
You will also have some event data like this:
events: [
{id: '76',title: 'Hot Shave',data: 'Some data',start: new Date(2012,9, 17, 13 , 55),end: new Date(2012,9,17, 13 , 115),allDay: false, url: '<someurl>'}
],
Change the event where it says "url:" to "workingurl:" and update your eventclick code to be:
eventClick: function (event) {
alert('event click');
if (event.workingurl) {
alert(event.workingurl);
vUrl = '../Activities/' + event.workingurl;
openActivityAddEditDialog(vUrl, 'Edit Activity');
return false;
}
},
That should stop FF firing off the click based on the url: property which then no longer exists.
When you include the 'url' attribute in your event JSON FullCalendar will render the event as an an <a> link rather than a <div>.
It looks like Firefox is treating the drag and drop of the <a> as a click and following the URL. This results in the AJAX request getting interrupted and returning status=0 as documented here:
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest?redirectlocale=en-US&redirectslug=Using_XMLHttpRequest#XMLHttpRequests_being_stopped
In my case (Firefox 18) this is resulting in a "You are offline! Please check your network" warning message.
Renaming the 'url' attribute to 'targetUrl' causes the event to be rendered as a <div> solving the problem. You then need to modify your eventClick handler to use the new attribute accordingly.
Even after putting breakpoints for all functions in fullcalendar.js - the error still happens and no full calendar functions are getting fired after eventDrop completes - but the re-direct still happens.
ONLY IN FIREFOX 15!
Also changed to earlier versions of jquery - but no difference.
I have seen some recent posts about Firefox 15 and drop event bugs, but nothing applies to this specifically.
Is anyone out there having this problem?
If not - is there a way to only disable drag & drop for Firefox users?

Modify CKEditor link dialog to add custom attribute to links

I am using CKEditor on a website and I need to be able to put a special data attributes on some of the links created through the editor. The user would indicate that they need the special attribute put on the link by checking a checkbox in the link dialog. I have managed to add a checkbox to the link dialog with the following code:
CKEDITOR.on('dialogDefinition', function(ev) {
if (ev.data.name == "link") {
var info = dialog.getContents("info");
info.elements.push({
type: "vbox",
id: "urlOptions",
children: [{
type: "hbox",
children: [{
id: "button",
type: "checkbox",
label: "Button",
commit: function(data) {
data.button = this.getValue()
console.log("commit", data.button, data);
},
setup: function(data) {
this.setValue(data.button);
console.log("setup", data.button, data);
}
}]
}]
});
}
});
Now I have two problems. The first one is that despite me adding the code in the commit and setup functions that should save the state of the checkbox, it's not working. It's as if the data can't hold any other parameters but the ones there by default.
The second problem is that I don't know how to add / remove the data attribute on my links. It seems to me that I should be doing that in my onOk callback on the dialog, however, the link dialog already has an onOk callback, so I'm not sure how I should be proceeding. I, of course, do not want to modify any of CKEditor's files directly.
How can I accomplish these things?
You best option is to modify the plugin. So you need to open the source code and find the file links.js in c:\ckeditor_3.6.5\ckeditor\_source\plugins\link\dialogs\
The source code is quite big (40k) but here you can modify the dialog however you want. When you finish just copy it to your plugins folder, and compress it: http://jscompress.com/
I have done what you need myself. The whole uncompressed file is here: https://gist.github.com/3940239
What you need to do:
First add this line just before the dialog "browse" button is appended. Approx. in line: 547:
{
id: "button",
type: "checkbox",
label: "Button",
setup: function (data) {
this.allowOnChange = false;
if (data.button)
this.setValue(data.button);
this.allowOnChange = true;
},
commit: function (data) {
data.button = this.getValue()
this.allowOnChange = false;
}
},
This part is actually your code. I just copied and pasted it.
Then, go to the onOk function, approx. in line 1211: and after commitContent add this code:
this.commitContent( data );
//My custom attribute
if (data.button)
attributes["custom-attribute"] = "button";
else
attributes["custom-attribute"] = "";
This will modify your link adding the attribute to the element such as text
That's it. Although, you may also like to load the current status of the checkbox. Then, go to the function parseLink . Approx. line 179 to load the attributes:
...
if ( element )
{
retval.button = element.getAttribute('custom-attribute');
var target = element.getAttribute( 'target' );
...
I am exploring the same thing now. What I have decided to do at this point is to:
Get a base ckeditor install without the link plugin
create my own fork of the link plugin, and add my changes to it, then activate and use this plugin within the group that link normally shows up in.
...working with it as a custom plugin (albeit a copy of the original) should alleviate the problem of upgrading. You just simply do not use the original link plugin at all. Copy and rename it, and use your custom copy instead.

jQuery's slideToggle does both slideDown and slideUp in IE8 simultaneously

I've uploaded my problem here : http://gotchance.com/k2/
Try clicking on the "Login" link. It works fine in FF and Safari. However in IE8, the form slides down and then slides up again automatically.
For testing purpose, i added 4 more "test" links and found that only the links inside #navigation div cause this problem.
Also, if i toggle using any other element like "button" "input", it works fine. Only the "a" tags inside the "#navigation" cause the problem.
Any ideas ?
Your html does not validate. Always make sure you run it through the w3c validator first. An invalid dom can play hell with jquery selectors (especially in ie).
Also I have noticed that the rounded and font plugins produce some odd markup which may also cause issues.
Have you tried stripping the page down to its bare bones then adding the functionality a piece at a time ensuring after every step your toggle is working.
One problem I see is that you have an extra comma in your custom.js file. The extra comma is on line 25.
Before:
confirm: {
required: true,
equalTo: "#rpassword"
},
},
After:
confirm: {
required: true,
equalTo: "#rpassword"
}
},
I don't know if that will solve your problem though.

Categories

Resources