I have the following code:
(function(jQuery){
jQuery.fn.timepicker = function(){
return this.each(function(){
jQuery(this).val("14:00");
});
};
})(jQuery);
Currently I invoke this function by the following code: $("#event_start_time").timepicker();
Where #event_start_time is the ID of an <input> field.
I do not want to invoke the plugin by using something like this:
$('#event_start_time"').click(function() {
this.timepicker();
});
How can I invoke this code only when I click inside the text box?
Hmm... this place isn't as quick as it used to be :(
I found the answer. Here's the code:
(function(jQuery){
jQuery.fn.timepicker = function(){
return this.each(function(){
obj = $(this);
obj.click(function () {
alert('test');
});
});
};
})(jQuery);
Related
I have a web page that uses
app.controller('listCtrl', function ($scope, $http) {
$http.get("http://data.com/?region=north").success(function (data) {
$scope.properties = data;
});
});
On the click of a button, I'd like to reload the source from a different URL
$http.get("http://data.com/?region=south").success(function (data) {
$scope.properties = data;
});
Is there a way of doing this?
Encapsulate the getting of the resource in a function that is parameterized, so you can call it once when the controller is initializing, and any time they click the button after that.
app.controller('listCtrl', function ($scope, $http) {
function getResource(region) {
$http.get("http://data.com/?region=" + region).success(function (data) {
$scope.properties = data;
});
}
$scope.changeRegion = getResource; // provide function for button click
getResource('north'); // initialize default
});
View:
<button type="button" ng-click="changeRegion('south')">Change Region</button>
I created an .getjson() call to work with reddit.com's API. The code is below.
$(document).ready(function() {
var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
var searchQueryText = 'XBox'; //getSearchQueryText();
$.getJSON(SEARCH_URL, {
q: searchQueryText,
limit: 3
})
.done(function (data) {
$.each(data.data.children, function(i,item) {
$("<h1>").attr("src", item.data.url).appendTo("#images");
});
})
.fail(function (data) {
alert("Something went wrong");
});
});//end ready
My .getJSON() function works and gets back data. However I am having trouble with my .each() function. I know it's slightly off even though my console isn't giving me an error message. I was hoping someone much smarter than me could help me rewrite it so it passes the content through #images in my body?
The JSON looks like this
http://www.reddit.com/r/subreddits/search.json?q=xbox&limit=3
If you just want to show all URLs in the #images elements, there is some problem in your code.
I test the reddit JSON data you're fetching.
The URL is a web page link not a image resource.
So why you try to add a non-exist attribute "src" to h1 element?
Try to use text() if you just want to show the URL and append them to element:
var SEARCH_URL = 'http://www.reddit.com/r/subreddits/search.json?jsonp=?';
var searchQueryText = 'XBox'; //getSearchQueryText();
$.getJSON(SEARCH_URL, {
q: searchQueryText,
limit: 3
})
.done(function (data) {
$.each(data.data.children, function(i,item) {
$("<h1>").text(item.data.url).appendTo("#images");
});
})
.fail(function (data) {
alert("Something went wrong");
});
This is jsfiddle demo
Hope this is helpful for you.
jQuery is throwing the following error:
Uncaught TypeError: Object # has no method 'apply'
f.event.dispatch
h.handle.i
I've found these related posts, but couldn't solve the problem using them:
This, this and this.
Here's the troublesome code:
$(document).ready(function(){
$('form.rating').click({
cancelShow:true,
callback: function(ui, type, new_value) {
var values = ui.$form.serializeArray();
values.push({
'name': 'rating',
'value': new_value
});
values = jQuery.param(values);
var msg = ui.$form.attr('update-msg');
$(msg).removeClass('hidden');
$(msg).show();
$(msg).find('div.msg-default').show();
$(msg).find('div.msg-result').hide();
$.ajax({
'type': 'POST',
'dataType': 'json',
'url': ui.$form.attr('action'),
'data': values
}).done(function(data) {
var overall_rating = ui.$form.attr('update-overall');
if(overall_rating && data['overall_rating']){
$(overall_rating).html(data['overall_rating']);
}
if(msg){
$(msg).find('div.msg-default').hide();
if(data['msg']) {
$(msg).find('div.msg-result').show();
$(msg).find('div.msg-result').html(data['msg']);
window.setTimeout(function() {
$(msg).addClass('hidden');
}, 2000);
} else {
$(msg).addClass('hidden');
}
}
if(data['user_rating'] && data['user_rating']>0) {
ui.select(parseInt(data['user_rating']));
}
});
}
});
});
Any ideas?
Edit: Okay, so I stripped it down to:
$(document).ready(function(){
$('form.rating').click({
});
});
And it is still showing the same error. Could this have something to do with my jQuery script? The only other info it shows is this line, but I don't think it helps much, since the file has 3 lines in total: jquery-1.7.2.min.js:3
The jquery click handler expects an anonymous function, like this:
$(document).ready(function(){
$('form.rating').click(function() {
// go for it!
});
});
#Ludder is close, but off by just a little. He's right that you need to be passing a function as the argument to click, but it doesn't have to be anonymous.
a = {myFun: function(){console.log("a");}}
$(document).ready(function(){
$('body').click(a.myFun);
});
and
b = function(){console.log("b");}
$(document).ready(function(){
$('body').click(b);
});
and
function c () {console.log("c");}
$(document).ready(function(){
$('body').click(c);
});
All log their bit of the alphabet. You were passing an empty object to click, give it a function instead.
I have following js code:
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
and form with data:
<form action="index.php?option=com_mycomp&layout=edit&id=1" method="post" name="newform" id="newform" class="form-validate">...
the form submits just fine and I can see changes but I get no logs,
thus cant execute actions that I need
form action is not supposed to give me any response back , it is simple post but shouldn't this work? Do I need to send the form to another file that will give me responses like json and submit my form like that ?
what am I doing wrong ?
Any help is appreciated. Thnx!
small update since post ,
I change the form to send data and receive response via json file but still no response messages. everything is being updated so submit works 100%.
right way is new Form.Request($('newform'),console.log(),{
window.addEvent('domready', function() {
var trigger = $('sendme');
trigger.addEvent( 'click', function(event){
event.preventDefault()
var sendform = new Form.Request($('newform'),console.log(), {
onSend: function(){
console.log('sending');
},
onComplete: function(){
console.log('sent');
}
});
sendform.send();
});
});
I use the modal window a fair bit in joomla and just found out that it doesn't work with ajax added links. What is the code I need to have the modal window work with those links?
I'm better at jquery than moo tools ...
Thanks,
Mat
I found this code but can't get it to work.
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({
ajaxOptions: {
evalScripts: true
}
});
//SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
window.addEvent('domready', function() {
window.addEvent('load', function(){
//alert('clicked!');
SqueezeBox.fromElement($('a.modal'));
});
});
</script>
I use Rokbox (Mootools) from Rockettheme available for free here : http://www.rockettheme.com/extensions-downloads/club/1005-rokbox
A must have :)