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();
}
};
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?
});
});
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>
I have a very simple widget outlined that appears to fire an event via _trigger that I cant seem to bind to:
; (function ($) {
$.widget('testspace.ftpWidget', {
options: {},
widgetEventPrefix: 'ftpwidget:',
_create: function () {
var that = this;
that.paused = ko.observable(false);
},
_triggerPlayerInitialized: function () {
console.log("player initialized");
this._trigger("testeventname", null, null);
console.log("player testeventname supposedly fired");
},
pause: function () {
this.paused(!this.paused());
console.log("player paused");
this._triggerPlayerInitialized();
},
_destroy: function () { },
_setOption: function (key, value) { }
});
}(jQuery));
In an html file:
<script>
jQuery(document).ready(function ($) {
$('#videoA').ftpWidget();
var widget = $('#videoA').data("testspace-ftpWidget");
console.log(widget);
$(widget).on("ftpwidget:testeventname", function (event, data) {
console.log("widget initialized");
});
widget.pause();
});
And console output:
Why is this event not being handled / or is it not even being fired? How can I debug this?
Update:
This answer, though not my problem, gave me a hint. The OP is calling the on binding from an element body. So I changed
$(widget).on("ftpwidget:testeventname", function (event, data) {
to
$("body").on("ftpwidget:testeventname", function (event, data) {
and it worked, so does
$("#video").on("ftpwidget:testeventname", function (event, data) {
So now I have it working but don't really understand why. Is it a scope "thing"?
I was thinking
"I want to register for the testeventname on widget"
What's going on here?
_trigger itself can actually call your function. In the first parameter you're specifying the name of the callback function you want to trigger. So if you were to change:
$('#videoA').ftpWidget();
to
$('#videoA').ftpWidget({
testeventname: function (event, data) {
console.log("widget initialized");
}
});
that would also work.
Jquery-UI: How to Use the Widget Factory
I'm just learning jquery, and I'm running into behavior I don't understand. I have:
html:
<div id="tour" data-location="london">
<button>Get Photos</button>
<ul class="photos"></ul>
</div>
and
jquery:
var tour = {
init: function () {
$("#tour").on("click", "button", alert("clicked"));
}
};
$(document).ready(function () {
alert("hello");
tour.init();
});
The "hello" alert is appearing after the dom is loaded, as I would expect. However the "clicked" alert is firing as well, and does not subsequently fire when the button is pressed.
http://jsfiddle.net/abalter/295sgf5c/2/
If you want it to be executed when clicking on the button, you would need to wrap it in a function:
Updated Example
var tour = {
init: function () {
$("#tour").on("click", "button", function () {
alert("clicked")
});
}
};
See this fiddle.
Your callback needs to be a function, like this:
var tour = {
init: function () {
$("#tour").on("click", "button", function(e){alert("clicked")});
}
};
I'm trying to bind a click event to the function below, however the entire function is currently being run when being binded in the document ready.
Is it possible to run it solely on the click event? Possibly it has something to do with the way my method is composed?
Thanks in advance
$(function() {
$("#expand-search").on("click", search.resize());
});
var search = {
element: $('#search_advanced'),
resize: function() {
search.element.slideToggle(400, 'swing', search.buttonState());
},
buttonState: function() {
if(search.element.is(':hidden')) {
console.log('hidden');
} else {
console.log('visible');
}
}
};
You are calling the function (handler) instead of passing the reference (name) of function (handler) to on().
Change
$("#expand-search").on("click", search.resize());
To
$("#expand-search").on("click", search.resize);
No parenthesis to event handlers! You want to pass the function-to-be-executed, not the result from executing it. Also, you will need to move your search object inside the ready handler since you use selectors for its initialisation.
$(function() {
var search = {
element: $('#search_advanced'),
resize: function() {
search.element.slideToggle(400, 'swing', search.buttonState);
},
buttonState: function() {
if(search.element.is(':hidden')) {
console.log('hidden');
} else {
console.log('visible');
}
}
};
$("#expand-search").on("click", search.resize);
});