We Keep Coding

jquery append a href materialize modal not working

hello i have this problem where i need to append a href tag with materialize modal inside it
so this is the code
<a href='#modalcreatechecklistitem' class='modal-trigger'>Add an item</a>
i have no problem when i just put it in my html
however, when i tried to append using jquery
$("#ajaxChecklist").append("<a href='#modalcreatechecklistitem' class='modal-trigger'>Add an item</a>");
it is not working
UPDATE :
class modal-trigger is not loaded, is this from jquery or my css?
it is working fine when i code in my html file
ANSWER:
jquery doesnt allow you to append a materialize class to an element.
To do this action, you need to re-initialize the materialize element or function
in this case, i did a function on the #modalcreatechecklistitem
the funtion will re-intialize the materialize modal and open the modal

you working is working fine, i just checked in fiddle also
https://jsfiddle.net/jvk3/8nfbxa1p/1/
may be you placed inside the table div or similar to parent

Two important questions:
1 - Is it code running in document.ready?
2 - Is there element with this id ajaxChecklist on the page?

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!

Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

How to append content into a twitter-bootstrap popover

How can I append a ne DOM element into a bootstrap popover. I have to render a small charts, using Highcharts, which should be displayed into popover, so I cant use just a string for content attribute.
So the main problem is, how to get the popover element after $el.popover() was called.

you have to enable the html option of the popover instance, for example,
$('.popover-with-html').popover({ html : true });

You can do it with
$el.popover({
content: $('.chart')
})
where .chart is your chart (or whatever) element.

javascript using a div created in script with plugin

I have created a div using jquery and put some text in it:
var newdiv=$('<div id="content">').append('some text here');
$("#wrapper").append(newdiv);
Now I am trying to use the plugin masonry on the div.
I have added the following just below the above that creates the div:
$("#wrapper").masonry();
I have checked and jquery and masonry are loading correctly.
The new div called content shows in firebug correctly, but the masonry part is not doing anything to the new "content" div.
Any ideas?

Perhaps you should try adding 'appended':
var newdiv=$('<div id="content">').append('some text here');
$("#wrapper").append(newdiv);
$("#wrapper").masonry('appended', newdiv);
There's an append/prepend example here http://masonry.desandro.com/demos/adding-items.html

Hiding TinyMCE with jQuery

I have a TinyMCE textarea inside of #container
When I use $('#container').hide() and then $('#container').show(), tinyMCE throws:
Cannot read property 'selection' of undefined
I'm using the jquery plugin, so this is how I set it up:
$('#container textarea').tinymce({ /* options */ });
What should I be doing differently?

The correct command to use here is
// editor_id is the id of your textarea and
// tinymce will use this id to uniquely identify this editor instance
editor_id = $("#container textarea").attr('id');
tinymce.get(editor_id).hide();
to make it visible again use
tinymce.get(editor_id).show();

This question is about hiding and showing tinymce editor but if anyone came here about removing and re-adding tinymce editor without error then my solution can work for them.
To remove existing tinymce editor and add new needs clearance of tinymce.EditorManager.editors array. This solution works in both cases : 1. If you have only one editor and you want to remove and add it again. 2. If you have multiple editors and you want to remove some special editor and add it again.
console.log(tinymce.EditorManager.editors);
This will give you a view of the array and exact index of you desired editor which you want to remove. For example one sample output of above console can be:
Array[2]
0:B
1:B
length:2
textarea-1:B
textarea-2:B
_proto_Array[0]
This is the output of the console when i have two tinymce editors on textareas : #textarea-1 and #textarea-2 Lets suppose I want to delete #textarea-2 and re-add it then it can be done as follows:
tinymce.EditorManager.editors.splice(1, 1);//removing second element in array.
delete tinymce.EditorManager.editors['textarea-2'];//deleting respective textarea id from array
Then you can add it again simply using init:
tinymce.init({
selector:'#ts-textarea-2'
});
If you have only one textarea associated with tinymce editor lets say : #textarea-1 and you want to remove and re-initialize it then you can just empty tinymce.EditorManager.editors by :
tinymce.EditorManager.editors = [];
And then you can add using init command as explained above. Worked for me without any error.
I hope it helps

Instead of hiding it, try sending it off screen - something like:
$('#container').css('left', '-1000px');
EDIT/UPDATE:
You could also try removing TinyMCE from the textarea before you hide() the container, and then bring it back after you show(). But you'll need to give your textarea an #ID:
//To Enable
tinyMCE.execCommand('mceAddControl', false, $("#container textarea").attr('id'));
//To Disable
tinyMCE.execCommand('mceRemoveControl', false, $("#container textarea").attr('id'));

Apparently it was the animation. if I show()/hide() I'm fine, but when I try to animate in tinyMCE has an issue after I finish animating, possibly trying to set options once the textarea's display isn't none.