javascript using a div created in script with plugin - javascript

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

Related

append a html file to div created by a js script

I am trying to append an HTML file to a div recent created by a js script but I get an error in the jquery library,
the code here, create a div and I want to append room.html within :
var contenedor = $('PageLoaded');
$('#button').click(function(){
container = document.createElement('<div></div>');
container.setAttribute('class','container');
container.get("room.html", function(htmlexterno){
$(".container").html(htmlexterno);
});
How can I embed room.html into the div which I am creating?
You seem a little confused about the difference between native JS and jQuery methods.
container is an Element object. It has no get() method as that's part of jQuery. To fix this you could use $.get() instead.
However, given your usage, it would appear that $.load() is more appropriate here as your goal is to add content to the new element.
$('#button').click(function(){
let $container = $('<div class="container"></div>').appendTo('#yourSelectorHere...');
$container.load("room.html");
});

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?

Bootstrap Displaying PopOver Dynamically

I am trying to create a Bootstrap popup dynamically. I am using the following code but it does not show anything.
function showDictionaryPopup(term) {
// create popover div
var popoverDiv = $("<div>");
popoverDiv.attr("data-toggle","popover");
popoverDiv.attr("data-content","This is a test");
popoverDiv.addClass("row");
popoverDiv.popover();
$("body").append(popoverDiv);
}
I do not get any errors or anything..
Looks like you are appending the div to the DOM but never letting the popover be shown. Try calling popoverDiv.popover('show');
You may also want to add some content to the popover. All the available options can be found here: http://getbootstrap.com/javascript/#popovers

jQuery Autosize plugin on dynamically added textarea elements

Hi :) I'm using jQuery Autosize plugin to resize some of my textarea elements dynamically. Everything is good but the problem is that when I add some textarea elements to the DOM dynamically, the autosize thing no longer works.
I initialize the plugin like so:
$(document).ready(function () {
$('textarea').autosize();
});
I tried to enable the plugin for my dynamically added textareas like:
myDynamicallyAddedTextarea.autosize();
Unfortunately, nothing happened. Can anybody help me with this?
sorry I can't comment yet, where are you adding this textarea at? can you post some of the code around the dynamic generation so that I can see when this stuff is getting called?
according to the docs, all you have to do is something like this for dynamically added elements...
function addTextArea() {
$(body).append($('<textarea class="test" />'));
$('.test').autosize();
});
//somewhere in code, but must be after the autosize plugin js has loaded
addTextArea();

Append javascript content inside gwt dialogBox

I have a js function that shows some content in a div. So I create this div in my html panel and when calling js function from my gwt code the function works fine...(JNSI)
The problem is when I want to show this content in a dialogBox. So what I do is this: I create the dialogBox using uibinder and I create a div inside as follows:
<g:HTMLPanel ui:field="hmtl_panel">
<div ui:field="show_to_this_div">
</div>
</g:HTMLPanel>
and in the js I use "document.getElementById('show_to_this_div')" as when the div was in the html panel...But nothing happens :-(!
I think you should be using $wnd.document

Categories