My modal div is:
<div class="modal" id="showmodal"><!-- content here --> </div>
Now I am calling it with data-toggle='modal' following anchor is coming with DOM:
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
and its working.
Now when I appending another link from javascript like following
<a class data-toggle="modal" data-target="#showmodal">click </a>
It's not working. Can anybody tell why? Thanks in advance.
When you have added first a tag
<a class="c" data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js knows on which element it need to attach model window event.
but when you dynamically appended
<a class data-toggle="modal" data-target="#showmodal">click </a>
bootstrap.js does not know the element exists in DOM.
so you need to manually call the js function to open model.
$('#showmodal').modal(options)
In your JS code.
Hope this helps.
Related
I am using electron to create an application.
The main page has two buttons - Button 1 and Button 2.
On Click of the button, I am redirecting to another Html Page.
<div class = "container">
<a class="btn btn-success" href="./src/page1.html" role="button">Go to Page 1</a>
</div>
<div class = "container">
<a class="btn btn-success" href="./src/page2.html" role="button">Go to Page 2</a>
</div>
Then in the Page1.html, I am adding the corresponding JS in script tag.
<script src="page1.js"></script>
However, in the JS file, I am not able to use the require function.
Error: Require is not a function.
However, require function works fine in main.js
Please help me in figuring out what am I doing wrong. I have just recently started with Electron.
Any help appreciated.
I am working on a post-comments project. Using AJAX I am generating comments. Each generated comments has Like button. But new generated Like button doesn't work until I refresh the page. The generated link is shown below.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45"></div>
</div>
Output after refreshing the page.
<div class="comment-body-container">
<div class="comment-body">
Oye jetha lali
<a class="like-comment comment-like-color comment_main_id_45"
data-like-comment-id="45" href="javascript:;">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
<div class="liked-this-comment liked_this_comment_45">
</div>
</div>
Output is almost same. But it doesn't work until I refresh the page. Could some one please provide me the solution for it.
For dynamic generated content you have to reapply the event after the content is loaded or, better, use event delegation to your likes button, something like that:
$(document).on("click", '.like-comment', function(event) {
//do your like stuff here
});
Event delegation works well with dynamic generated content and is the preferred way to handle this specific situation.
I have a vue.js single file component with a button that opens a zurb foundation modal with a video. When I click the button it reloads the page. It doesn't show any error in the dev tools console or in the network section. Here is my code: In home.vue
<a data-open="video" class="button warning" href="">WATCH VIDEO</a>
<div id="video" class="reveal" data-reveal>
<div class="lead">
<button class="close-button" data-close aria-label="Close modal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="flex-video">
<iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
</div>
</div>
The url is correct and its even making a call to youtube.
There is an issue integrating vue with js plugins, so use directives. Use this for any jquery plugins and Zurb Foundation js plugins. Explained here
can u paste your code more completely,its hard for us to help u with just an segment code.But at least u should do something like this.
in html file:
<a #click="popup()">WATCH VIDEO</a>
<div id="video"></div>
in vue file:
methods: {
popup() {
$('#video').foundation('open');
}
}
You need to remove href="" attribute from A tag:
<a data-open="video" class="button warning">WATCH VIDEO</a>
Foundation creates a new element based on your <div class="reveal" id="someModal" data-reveal>. This new element is the actual overlay you normally see. The overlay is created when you call $(document).foundation(); after loading the Foundation script.
Your modal (the iniatal data-reveal element) is not in view when foundation() is called, so no overlay is created.
You can init Foundation again in your component by adding:
mounted() {
$(document).foundation();
}
This will init Foundation again, this time with your data-reveal in view, so the overlay is created.
I've got a spoiler-code on my Homepage.
The Code looks like this:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial"
id="button"
title="Click to show/hide content"
type="button"
onclick="if(document.getElementById('spoiler')
.style.display=='none') {
document.getElementById('spoiler')
.style.display=''
}else{
document.getElementById('spoiler')
.style.display='none'
}">
Show hidden content
</a>
What I want to do now is quite simple:
After clicking on the element "button", the hidden content shall be shown and the anchor <a> shall become invisible.
So what I am looking for is:
onclick: if element "spoiler" is on display=none AND element "button" is on display=initial THEN the element "spoiler" shall change to display=initial AND element "button" shall change to display=none
Is this possible?
This code in jquery will solve your problem. I hope this is what you wanted.
$('#button').click(function() {
$('#spoiler').css('display', 'block');
$(this).hide();
});
I have demo here as well.
A JavaScript only solution will be as follows:
<div id="spoiler" style="display:none">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';
document.getElementById('button').style.display='none'">Show hidden content</a>
Try following code. JSFiddle.
<div id="spoiler" style="display:none" onclick="this.style.display='none';">
HIDDEN CONTENT HERE
</div>
<a display="initial" id="button" title="Click to show/hide content" type="button" onclick="document.getElementById('spoiler').style.display='block';">Show hidden content</a>
display="initial" isn't a valid attribute. Also, putting all of that code in the onclick attribute prevents you from reusing the code in other spoiler blocks. The best solution is to use a script tag for separation of concerns and reusability.
Here's the bare-bones of what you need:
<div id="spoiler" style="display:none">HIDDEN CONTENT HERE</div>
<a onclick="showSpoiler(this,'spoiler')">Show hidden content</a>
<script>
function showSpoiler(buttonNode, spoilerId) {
document.getElementById(spoilerId).style.display='block';
buttonNode.style.display='none';
}
</script>
I am facing problem in loading div into my javascript,
My code is:-
$(document).ready(function()
{
$('#example').hide();
$("#myDiv").tooltip({trigger:'hover',placement:'left',html:true,title:'Rate Us'}).popover({trigger:'click',placement:'top',content:$("#example").html(),});
});
<div id="example">
<button type="button" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></button>
</div>
I am not able to load button in the example div on popover.
What should I write in content:$("#example").html(), to load example div?
Please help me.
you cannot use content: for html content on popovers without setting html:true
see here for more information about popovers http://getbootstrap.com/javascript/#popovers
jsfiddle http://jsfiddle.net/CsR5Z/1/