Basically I want to trigger the "modal:show" event from when .show-modal is clicked, but I get no respons when I trigger the event. I've tried many different implementations, but can't get it right.
$(".modal").on("modal:show", function (event) {
onShowModal(event.id);
});
function onShowModal(modalId) {
let $modal = $("#" + modalId);
$modalBlack.fadeIn("slow", function () {
$modal.fadeIn("fast", function () {
$modal.trigger("modal:showing", { id: modalId });
});
});
}
$(".show-modal").click(function (event) {
let modalId = $(this).data("modal-id");
event.preventDefault();
$(".modal").trigger("modal:show", { id: modalId });
});
To get your code working I had to make a few modifications. Try this:
<div class="modal">Generate my own HTML</div>
<div class="show-modal" data-modal-id="randomId">Make a button</div>
<div class="randomId" >Toggle, toggle.</div>
<script>
$(".modal").on("modal:show", function (event, idObj) {
// The trick here is that the first parameter is the event.
// The second parameter is the object that you send in on the
// triggering call. ($(".modal").trigger...)
onShowModal(idObj);
});
function onShowModal(idObj) {
let $modal = $("#" + idObj.id);
// Don't forget to go into the object and get the Id.
// I don't have modalBlack so my code broke at this point.
$modalBlack.fadeIn("slow", function () {
$modal.fadeIn("fast", function () {
$modal.trigger("modal:showing", { id: modalId });
// modalId is probably going to be idObj.id.
});
});
}
$(".show-modal").click(function (event) {
let modalId = $(this).data("modal-id");
event.preventDefault();
$(".modal").trigger("modal:show", { id: modalId });
// Notice that you are sending this as an object {id:modalId}.
});
</script>
Related
I have a problem with selecting element after generating by async callback function.
How to do that?
My code:
$(document).ready(function() {
function1(function2);
//here i want to select generated element by id $('#select-id')
});
function function1(callback) {
$.getJSON('./ajax/results_get.php', function(data) {
console.log("function1");
callback();
});
}
function function2() {
console.log("function2");
}
EDIT:
Now i used callback, but i don't know how to make visible object created within function3 to the click button event.
$(document).ready(function() {
function1(function() {
function2(function() {
function3(function(){
var foo = $('#element');
});
});
});
$('#savebtn').click(function(){
//how to use assigned foo here?
});
});
I trigger an event "modal:show", where I pass the id of a modal object. But when I handle the event the Event.data are always undefined.
How should I access these values?
<img src="/GetPicture?pic=110&thumb=1" class="r img show-modal" data-modal="modalZoom" data-id="110" data-index="1" />
$(".show-modal").click(function (event) {
var idModal = $(this).data("modal");
event.preventDefault();
$("#" + idModal).trigger("modal:show", [{ id: idModal }]);
});
$(".modal").on("modal:show", function (event) {
var $modal = $("#" + event.data.id);
$modalBlack.fadeIn("slow", function () {
$modal.fadeIn("fast", function () {
$modal.trigger("modal:visible", [{ id: event.data.id }]);
});
});
});
The extra data you're trying to pass along with the modal:show event will not be attached to the event object itself; instead it would arrive as a second parameter to the event handler:
$(".show-modal").click(function(event) {
var idModal = $(this).data("modal");
event.preventDefault();
$("#" + idModal).trigger("modal:show", [{
id: idModal
}]);
});
$(".modal").on("modal:show", function(event, foo) {
console.log(foo.id) // <-- not event.data.id or event.id; the data you want isn't attached to the event object at all
// ...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="show-modal" data-modal="modalZoom" data-id="110" data-index="1" />
<div class="modal" id="modalZoom">test</div>
In this particular case, though, since the ID you're looking for is on the same element on which the event was triggered, it would be much simpler to not pass the data between handlers, but instead just read it from the DOM:
$(".show-modal").click(function(event) {
var idModal = $(this).data("modal");
event.preventDefault();
$("#" + idModal).trigger("modal:show");
});
$(".modal").on("modal:show", function(event) {
console.log($(this).attr("id"))
// ...
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="show-modal" data-modal="modalZoom" data-id="110" data-index="1" />
<div class="modal" id="modalZoom">test</div>
I replaced this:
var $modal = $("#" + event.data.id);
with this:
var $modal = $("#" + event.id);
Below are my codes I'm using currently. Can someone help as this is important.
$("#btn" + arr[i].numberID).on("click", { id: arr[i].numberID }, function (event) {
var data = event.data;
getdet(data.id);
});
function getdet(numberID) {
window.location = "order.html?numberID=" + numberID;
}
I am not sure about this, but I think your issue is that the click event listener is not binding to the buttons in the other pages(the reason being that the buttons are dynamically generated when you change pages). This article explains the problem: Event binding on dynamically created elements?.
Try if this works:
$(document).on("click", "#btn" + arr[i].numberID, { id: arr[i].numberID }, function (event) {
var data = event.data;
getdet(data.id);
});
function getdet(numberID) {
window.location = "order.html?numberID=" + numberID;
}
Hope this helps.
I created a small AutoComplete object and list my results as a list of li elements. I have an this.on('input', function () {}); event that handles when you choose an item in the list and works fine. Now I want to add an blur event to hide results. Adding the blur events stops the input event from working.
$.fn.autoComplete = function () {
this.on('input', function () {
AutoComplete(self.val());
});
this.on('blur', function () {
$('#' + settings.resultsDivId).hide();
});
function AutoComplete(term) {
// ajax call
});
};
This worked in the following JSFiddle - it looks like you have an error after your AutoComplete function (it ends with ");"): https://jsfiddle.net/ek5v59t6/
$(function() {
$('input').autoComplete();
});
$.fn.autoComplete = function () {
this.on('input', function () {
console.log('input fired');
AutoComplete($(this).val());
});
this.on('blur', function () {
console.log('blur fired');
$('#results').hide();
});
function AutoComplete(term) {
$('#results').show();
}
};
Short question, how can I more efficiently write below code so I don't repeatedly assign the parent variable a new value?
Is this bind function the same as using object literals?
function bindAuthorPopup() {
$(".insight-author").on({
mouseenter: function (event) {
var parent = $(this).parent('div').find('.popup-content');
parent.toggleClass('show');
},
mouseleave: function (event) {
var parent = $(this).parent('div').find('.popup-content');
parent.toggleClass('show');
},
});
}
You can do something like this:
function bindAuthorPopup() {
$(".insight-author").each(function() {
var elem = $(this);
var parent = elem.parent('div').find('.popup-content');
elem.on({
mouseenter: function (event) {
parent.toggleClass('show');
},
mouseleave: function (event) {
parent.toggleClass('show');
},
});
});
}
This works even if the callbacks are different. If they're always the same, then you can use what #sh1da9440 wrote.
You can pass space-separated event types to the "on" method.
function bindAuthorPopup() {
$(".insight-author").on('mouseenter mouseleave', function (event) {
var parent = $(this).parent('div').find('.popup-content');
parent.toggleClass('show');
});
}