We Keep Coding

interact.js drag/drop referencing div

So, this is maybe just a question for interact.js users or I am missing something completely..
I was looking for a javascript library that provides me with drag/drop/scale/rotate and touch functionality for all those given functionalities. So, I stumbled upon interact.js, yet I seem to have a problem referencing elements while using the onDrop method:
I'll just take the code of the interact.js page, which I'm providing you here: http://jsfiddle.net/Zyy2N/2/
The part that is making problems is:
$(event.relatedTarget.id).hide();
which doesn't do anything, yet also doesn't throw any errors. More so:
$('#yes-drop').hide();
works, so does:
console.log(event.relatedTarget.id);
which returns the id as expected. Is this an error?

Solution: One should actually use the correct syntax if one wants code to run correctly...
$('#'+event.relatedTarget.id).hide();
This would actually be a correct and working solution :
http://jsfiddle.net/Zyy2N/3/

Sligthly better:
$(event.relatedTarget).hide();
http://jsfiddle.net/Zyy2N/8/

Issue with LightSwitch restyling custom control with delayed rendering

I was playing around with a LightSwitch custom control using the simple code:
myapp.Facility_Details.ScreenContent_render = function (element, contentItem) {
$(element).append("<ul><li><label><input type='checkbox'/><span>Test</span></li></ul>");
}
And I notice LightSwitch makes a valiant effort to rewrite my HTML after I render it, adding it's own control styling classes to the HTML and doing a bit of re-organizing. I figured I could live with this & just get used to what it did, but then I hit a worse issue when I added some AJAX to the mix. When I do my actual rendering in the done method of a Promise the post-processing doesn't happen.
EG:
myapp.Facility_Details.ScreenContent_render = function (element, contentItem) {
contentItem.data.getCommodityGroups().done(function (data) {
$(element).append("<ul><li><label><input type='checkbox'/><span>Test</span></li></ul>");
});
}
Renders totally differently (Doesn't edit the HTML). I could live with this too, but then if I browse away from this page & back to it then it swaps over to the first display... I tried returning the Promise from render thinking maybe that'd let it wait for me to be done, but no dice.
Does anyone know how can I either:
a) Prevent this reprocessing so I get the HTML I write every time.
b) Trigger this reprocessing explicitly so I can make sure it happens after I render inside a Promise.

It is jQuery doing the work so wrap into jQuery object before appending it perhaps?
Look at the samples down the page here MSDN article.

This restyling is coming from jQuery Mobile. Turns out the solution is to trigger a create event after editing the HTML (EG: $(element).trigger('create');) to tell jQuery Mobile there's new HTML to style.
Another approach is to add data-role='none' so jQuery Mobile leaves your HTML alone. I'll probably mostly use the latter, but it's good to know both exist.
Actually found the answer over at another StackOverflow question - the trick was knowing it was jQuery Mobile that mattered which is a lot easier to find info for than LightSwitch itself.

The jQuery addClass function quits my script

Uhm, I've got this script but it does not work.
It's all about this line: document.getElementById('thetest').addClass('superspecial');
As soon as the class should be added (but it isn't) the whole script quits...
Does anybody know why?

Should be:
jQuery('#thetest').addClass('superspecial');
or
document.getElementById('thetest').className += ' superspecial';
document.getElementById doesn't return a jQuery element.
That's why you get has no method error.

I know this is a bit of an old post by now, but I ran into it myself and I used a method that wasn't named before to solve it.
Instead of using
document.getElementById("name").className+='superspecial';
I used
document.getElementById("name").classList.add('superspecial');
After some research it seems that this is a fairly new way to do it that isn't supported in a lot of browser versions other than the latest. Browser requirements to use this functionality are as described here:
https://www.w3schools.com/jsref/prop_element_classlist.asp
I don't know the exact difference between the two solutions, but it seems to me that getting the classList and adding to it with an existing function would be the preferable option. Especially as += is a general method of adding things to eachother that doesn't always have to work the way you expect it to.

jQuery Mobile - Dynamically creating form elements

I'm creating a web-database driven offline web-app targeted at iOS devices. I'm trying to use jQuery Mobile, but I have a problem in creating the various forms.
The form options are taken from a database query, so they are inserted into the page after it has loaded, so the "jQuery-Mobilification" doesn't happen. Taking a quick look through the source, there doesn't seem to be any obvious way to call into this at this stage (of course it's an alpha release, and I think this would be a reasonably common request, so I'm hopeful it will come). Is there some kind of workaround I can put in to do this? I'm particularly interested in radio buttons, check boxes and select lists.

UPDATE
Beta2 has a create event. I will update my faq when the beta2 gets released. See http://jquerymobile.com/blog/2011/07/22/jquery-mobile-team-update-week-of-july-18th/
Updated faq: http://jquerymobiledictionary.pl/faq.html
As CaffeineFueled proposed - .page() is the way to make JQM work with any part of HTML
.page() can be called only once for an element. Call it on a wrapping element you add to the page. It should handle everything.

The current selected answer is slightly out of date. Use 'refresh', not 'page', for styling dynamically added content (lists or forms).
If you add items to a listview, you'll
need to call the refresh() method on
it to update the styles and create any
nested lists that are added. For
example, $('ul').listview('refresh');
via the jQuery Mobile docs, 1.0.4a

This is messing around in undocumented internals, but the following is working for me:
$("#some-div").load("/html/fragment/",
function() {
$(this).find("input").customTextInput();
});
There are equivalent methods for buttons, checkboxes etc.
Have a look at the _enchanceControls [sic] method in http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.js.
Update for 1.0Alpha2: As can be expected when playing around with the internals of a library, this no longer works in the latest version. Changing customTextInput() to textinput() fixes it a bit, but the theme isn't fully applied for some reason. We were warned...

After your AJAX call finishes and you insert the form elements try calling:
$("#the-page-id").page();
I believe the jquery-mobile team will be adding a .refresh() method on the various UI elements to solve this issue in the future.

Yeah the issue is as you described. The 'mobilization' is fired when the document is ready. But since your offline DB queries are asynchronous it ends after the document.ready is fired. So the DOM is updated later in the process and doesn't have the extra CSS added to all the divs and list items.
I think you would have to change the source of the mobile js to not run on document ready but run when you tell it to run. Then you would have to call that function in your database callback.
Looks like that is the only option at the moment.
Traditionally I used jqtouch and now sencha. I haven't played much with jQuery mobile.
ALTERNATIVELY - you could write out your HTML after querying it out of the database with the necessary CSS styles on it. If you use Firebug plugin for Firefox you can see what styles / classes are getting applied when the mobilization runs. You could just write out your HTML using those conventions. Not ideal, but would work.

naugtur is right, you have to call .page() on any element that you add to the dom, then it works out nicely:
var el = $('<input type="text"/>')
el.page();
$('#something').append(el);

This worked for me (jquerymobile1.7.0):
$('#formular').append('<div data-role="fieldcontain" class="ui-hide-label">' +
'<label for="name" class="ui-hidden-accessible">Name:</label>' +
'<input type="text" name="name" size="25" id="name" placeholder="Name"/>' +
'</div>');
$('#name').textinput();
There are currently so called plugin functions for all kind of form elements (e.g. slider, textinput etc.) to create them.

Here's a link to the docs for this feature that Tom talked about. Not sure exactly when they were added, but I'm using it and it works for me!
http://jquerymobile.com/test/docs/forms/plugin-eventsmethods.html

jQuery script is slow in IE 6/7

Could someone take a moment to look at my script and see where I have gone wrong. This works fine in all modern browsers. Its IE6/7 which have the problem.
A 9KB color picker loaded.
Once loaded the picker is run.
picker.run();
This makes the picker and saves it as an object variable.
This variable can then be shown using.
picker.show();
I think the delay in opening the picker in IE might be due to the size of the color-pickers HTML. I have been tinkering with this all day and have run out of ideas. Can anyone advise?
picker : http://jasonstanley.co.uk/test/color-picker/
script : http://jasonstanley.co.uk/test/color-picker/js/color-picker.js

I have experienced slow JavaScript execution in IE7 when using prototype.js. It all boiled down to:
Do not concatenate strings, use arrays
Add content ONLY via element.innerHTML, or even better, document.write, and add as little content as possible
Use event handling with care, add only handlers when you need them
Use ID's instead of classes.
In your cube function you do concatenate strings (and declare variables inside loops...), I would look into that first.

It could simply be a factor that targeting multiple instances of a class will be slow in ie6 - ie8. I would have a look for alternatives or see i've you can improve the accuracy of the selectors used in the script.
The script also removes the picker rather than hiding it. Is there a reason why this is necessary? If so using .empty().remove() will probably speed things up too.
See the comments here in the jQuery Api