After Bootstrap modal is shown, my app JavaScript is not working.
When I execute JavaScript from console then it is working, but my app JavaScript does not work.
Can somebody please give me advice how I can solve this issue?
HTML file:
<button type="button" class="btn btn-primary" id="save-category">Save changes</button>
JavaScript file:
var jquery = jQuery.noConflict();
jquery(window).load(function() {
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
Try to use delegate instead of event binding
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
});
});
jquery(document).on('click', '#save-category', function() {
jquery('#myModal').modal('hide');
});
What is happening here is that the #save-category button is not registered to the event that you made when the page first loads. This is because bootstrap moves the original DOM element to the modal window, thus losing the original click event.
To fix this, you should register your click event to after you show your modal view:
jquery('#add-category').click(function() {
jquery.get('api/categories/add', function(data) {
jquery('#modal-target').replaceWith(data);
jquery('#myModal').modal('show');
// Register the event here
jquery('#save-category').click(function() {
jquery('#myModal').modal('hide');
});
});
});
Also note that the load event has been deprecated in jQuery 1.8 so you might want to use jQuery(document).ready( for initialising your script code unless you need to wait for images to load.
Related
I want create a loading modal while a big function dosen't finish, this modal cant be close while this function dosen't finish, how i can do that?
You should explain little more to your question for better understanding.
I think go through my given link you will get your answer for your question
Link here: loading model
visit this link
How to use bpopup
« Basic example that will bind a click event which will trigger bPopup when fired. Add a reference to the jquery core lib (newer than 1.3.x) and bPopup. Please don’t hotlink to bPopup:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js"></script>
<script src="jquery.bpopup-x.x.x.min.js"></script>
Markup: Add a button + an element to pop up.
<html>
<head> ... </head>
<body>
...
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>
...
</body>
</html>
CSS: Hide the element you want to pop up on page load.
<style>
#element_to_pop_up { display:none; }
</style>
The magic: Bind a click event on the button which will trigger the popup.
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
OR
;(function($) {
$(function() {
$('#my-button').bind('click', function(e) {
e.preventDefault();
$('#element_to_pop_up').bPopup({
appendTo: 'form'
, zIndex: 2
, modalClose: false
});
});
});
})(jQuery);
Link For Demo Link here
I have a fullcalendar on my page. On it I have an add event button. That calls a javascript function that opens a modal view allowing the user to add an event.
function showAddMeeting() {
var current_date = $('#calendar').fullCalendar('getDate');
$("#modal").load('modal.php?type=meeting&action=add&date='+current_date);
}
This works perfectly. Now, I have another function to edit the meeting:
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}
When I put this on the button, it works fine. But when I add it as a function to the event, it does not work.
eventClick: function(event) {
showEditMeeting(event['id']);
}
When I click the event, I get the alert of the working link, but I never get a modal popover.
EDIT:
I've figured out it's because I'm not calling
data-toggle="modal" data-target="#modal"
Does anybody know of how to call that through javascript?
Bootstrap has all the methods available for the modal in "modal.js", this is included in the minified pack.
You need to use it as follows.
Original
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id);
}
Becomes
function showEditMeeting(meeting_id) {
alert('modal.php?type=meeting&action=edit&id='+meeting_id);
$("#modal").load('modal.php?type=meeting&action=edit&id='+meeting_id).modal('show');
}
Notice the additional .modal('show');
Please note, I've not tested this code.
More information: http://getbootstrap.com/javascript/#modals-methods
I am trying to alert an message when clicked on button with id tagit. but the whole form is appearing in the bootstrap popover. i also added the jquery for alerting message,but its not showing any alert dialog boxes,but when i call the same thing in javascript it is showing the alert. but i need it to be in jquery. how can i do this?
var htmlcont ='<table class="pop-table"><tr><td><button class="btn btn-warning" id="tagit">FILTER</button></td></tr></table>';
$('[data-toggle="popover"]').popover({content: htmlcont, html: true});
$("#tagit").click(function(){
alert("hello this is working");
});
You need to use event delegation, like so
$(document).on('click', "#tagit", function() {
console.log("hello this is working");
});
Event delegation for dynamic created DOM elements. Try to use Immediate parent selector to traverse easily and quickly
$(document).on('click', '#tagit', function() {
}):
I'm working with a wordpress theme and I need to activate a button when the page loads, but none of the following has worked for me (my button has the ID "reset"):
$(document).ready(function() {
$("#reset")[0].click();
});
--
$(document).ready(function(){
$("#reset").click();
})
--
$(window).load(function(){
$('#reset').click();
});
I put the code in the header or in the page where i need to activate the button, but does not work.
Thanks!
I give you example here
$(document).ready(function(){
$("#reset").click();
})
the code above should work.
JavaScript does not allow seamless programmatic triggering of an actual click event.
What you could do is
declare the click callback as a separate, named function
e.g.
function myClickCallback(e) {
// Do stuff here
}
Set this as the click callback of your button (e.g. $('#reset').on('click', myClickCallback)).
Invoke the callback when the page loads (e.g. $(document).ready(myClickCallback);)
I am not sure why you 'd want this functionality, since it sounds weird. From reading your description, by "activating", you could also mean enabling the button. To do that you should do something like the following
$(document).on('ready', function (e){
$('#reset').removeAttr('disabled');
});
You may need to refer to it using jQuery instead of $:
The jQuery library included with WordPress is set to the noConflict() mode...
https://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers
$(document).ready(function(){
$("#reset").trigger('click');
});
Use the function Trigger with the event click
$(document).ready(function(){
$("#reset").trigger('click');
});
This what works for me:
$(function () {
$('#btnUpdatePosition').click();
});
On the button event, the JQuery binding event doesn't work:
$('#btnUpdatePosition').click(function () {
alert('test again');
});
But it works when I added the event on attribute declaration:
<input type="button" value="Update" id="btnUpdatePosition" onclick="alert('Click has been called')" />
You can also call if you have a function on element:
<input type="button" value="Update" id="btnUpdatePosition" onclick="fncShow();" />
I'm trying to trigger a already written click event for an anchor tag using JavaScript but it is not working. can any one please help me to do this
I have a anchor tag
<a id="memberid">Data Member</a>
<script>
$("#memberid").click(function() {
changebreadcrumb("Data Management");
});
</script>
i want to trigger above click event on load
i tried
$("#memberid").click();
and
$("#memberid").trigger("click");
but did not work.
Place this at the end of your HTML before the closing body tag
<script>
$(document).ready(function(){
$('#memberid').trigger('click');
});
</script>
DEMO
Use jquery and check whether your dom is ready. It works fine.
See the properties in the fiddle on its left side panel
$("#memberid").click(function() {
alert('clicked');
});
$("#memberid").trigger("click");
EDIT:
FINAL DEMO
If you want to triger click on pageload, use window.onload in javascript or jquery load method as i mentioned.
$(window).load(function()
{
$("#memberid").trigger("click");
});
If your click is not working then in that case....try on() function to trigger event
$(document).ready(function(){
$("#anchor_id").on( "click", function() {
//your work
});
});