jquery append a href materialize modal not working - javascript

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?

Related

How to remove code in html by JS or JQuery

My website using Wordpress. When i viewsourge my Homepage (static page), it have code in tag:
text
Code is not have class or id, so i do not know how to remove it by JS or Jquery
How can i remove it by using JS or Jquery.
I really thank for your help
$('a').remove(); //if you use this, it'll remove all a from page.
$('parentdiv a').remove(); //remove the a from that parent div
It is working fine with jquery remove(),
$('a[href="https://tienichaz.com/danh-muc/do-tien-ich-du-lich/balo-du-lich"]').remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
text
google
You can depend on the [href] attribute of the (a) element to remove a specific (a) element
with this jquery code:
$("a[href='the-href-value-of-the-element-you-want-to-remove']").remove();

Triggering a Link in a Div on Div click

I have an href link in a card div that creates a modal pop-up with all the information I need for a project. i'm currently trying to trigger the click even on that link whenever any part of the div is clicked. This is for a school assignment so I can only use Vanilla JS and JQuery. the card class is the div and the extra class is the link to click.
I've seen 'stop propagation' for these type of events but that's not quite what 'm looking for.
$(".card").click(function(){
$(this).$(".extra").trigger('click');
});
I get an error from the code at .$(".extra") trying to find the instance of the extra class in the specific div.
Please try:
$('.card').click(function(){
$(this).find('.extra').trigger('click');
});

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

Make <div> link

I am having trouble making link.
I have a slide in a Magento store. Theme is responsive and slider is javascript.
This is the code i have:
<div id="camera_wrap" class="camera_wrap camera_orange_skin">
<div data-thumb="{{skin url='images/camera/slides/thumbs/slide1-thumb.png'}}" data-src {{skin url='images/camera/slides/b1.jpg'}}"></div>
</div>
Slider is showing picture and assosiated thumbnail. I want to make slider clickable but i cant get it working. Any ideas?
If i place
onclick="location.href='newurl.html';"
inside div, image is not showing :(
Any suggestions?
Don't use inline onclicks... Assign your div a class and a custom data attribute. Example:
<div class="onclick-link" data-href="mylink.html">Some content here...</div>
And then:
$('.onclick-link').unbind('click').click(function() {
window.location.href = $(this).attr('data-href');
});
This can be used for all div's you want to turn into a link, bu assigning the class and the data-href attribute.
My link
The easiest (and most semantic) way to make a link, is to use the <a> element.
If you REALLY want to go the javascript way, you can bind a handler using jQuery
$('#camera_wrap').on('click', function(){
// your code
});

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

Categories