i have this example:
<script>
$('.myvideos').live('click', function() {
$('#myvideos').trigger('click');
var ide = '123';
function ajax_request() {
$('#placeholder').load("test.php?id=ide");
}
});
</script>
how can i trigger the ajax_request function after $('#myvideos').trigger('click'); happens and pass the ide var to load link?
any ideas?
thanks
Try:
<script>
$('.myvideos').live('click', function() {
var ide = '123';
ajax_request(ide);
});
function ajax_request(ide) {
$('#placeholder').load("test.php?id="+ide);
}
</script>
<script>
$('.myvideos').live('click', function() {
var ide = '123';
ajax_request(ide)
});
function ajax_request(ide) {
$('#placeholder').load("test.php?id=" + ide);
}
</script>
You don't really have to put the AJAX call inside a function
<script>
$('.myvideos').live('click', function() {
$('#myvideos').trigger('click');
var ide = '123';
$('#placeholder').load("test.php?id=" + ide);
});
</script>
Related
I'm having trouble triggering a function. I have the following code:
var dnfmomd;
dnfmomd = new function () {
//function content
}
$("#launch_button").on("click", dnfmomd.init);
Have you tried this?
var dnfmomd = function () {
//function content
}
$("#launch_button").on("click", dnfmomd());
I would recommend doing it this way
var dnfmomd = function() {
//function content
}
$("#launch_button").on("click", function() {
dnfmomd();
});
I am developing a JQuery plugin. I need to use OOP inside my plugin. However, the class not working as I expected. When I initiate a new instance of the class, it is only the first line of its code that is executing. What is wrong with this code and how to execute a constructor of this class on initiation?
(function ($) {
var FunClass;
FunClass = function () {
console.log("FunGlobal");
function FunClass() {
console.log("FunConstructor");
}
FunClass.prototype.letsFun = function () {
console.log("FunMethod");
}
}();
$.fn.fun = function () {
var funClass;
return this.each(function () {
funClass = new FunClass();
funClass.letsFun();
});
};
}(jQuery));
Here is the console output: Console Output
Thanks for help.
Seems you've forgot to return FunClass:
(function($) {
var FunClass;
FunClass = (function() {
console.log("FunGlobal");
function FunClass() {
console.log("FunConstructor");
}
FunClass.prototype.letsFun = function() {
console.log("FunMethod");
}
return FunClass; // you missed this line
})();
$.fn.fun = function() {
var funClass;
return this.each(function() {
funClass = new FunClass();
funClass.letsFun();
});
};
}(jQuery));
// Usage
$(function() {
$('body').fun();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm trying to make a complementary library to jQuery but not jQuery plugin, nor jQuery extension:
First Function:
function w(id) {
return $(id);
}
It works as jQuery plugin:
$.prototype.test = function(){
console.log("testing");
}
w("div").test(); // test
What I want is this, as a prototype function of w(), but doesn't works:
w.prototype.test = function(){
console.log("testing");
}
w("div").test(); // test
Thanks,
.........................................
It works with:
w.prototype = jQuery.prototype;
Thanks SLaks!
But when it does, doesn't works with:
w.prototype = {
test: function(){
console.log("testing");
}}
.......................
Now it's works;
function w(id) {
return $(id);
}
w.prototype = jQuery.prototype;
w.prototype.extend({
test:function(){
console.log("testing");
}
});
Thanks for help!!!
You want
w.prototype = jQuery.prototype;
I've written a basic page in html, putting this in the head:
<script type="text/javascript" src="scripts/main.js"></script>
and the contents of my main.js are extremely simple:
var main = {
onload : function() {
alert("HI");
}
showSurprise : function() {
alert("HI");
}
}
window.onload = main.onload;
however, it seems that having these two functions exist at the same time causes neither of them to work, whether I set window.onload to the onload or the showSurprise function. If I delete one of them, it works fine.
You have syntax error. It should be:
var main = {
onload: function() {
alert("HI");
},
showSurprise: function() {
alert("HI");
}
};
I hope this is what you are looking for
var main = {
onload: function() {
alert("HI");
},
showSurprise: function() {
alert("HI");
}
};
window.onload = main.onload();
You should pass it as a function.
I need to know how is possible to get a plugin variable outside the plugin, to test it with some test framework.
So this is my simplified plugin:
(function ($) {
$.fn.extend({
myPlugin: function (argumentOptions) {
var defaults = {
image: 'img/default.png',
};
this.textSend = '';
var options = $.extend(defaults, argumentOptions);
var globalHere = this;
return this.each(function () {
obj.mouseup(function(e) {
globalHere.textSend = 'test';
});
});
}
});
})(jQuery);
I need to the variable this.textSend outside the plugin.
I have tried in this way:
$(document).ready(function(){
var testfield = $('.txt');
testfield.myPlugin({
image:"../img/twitter.png"
});
testfield.focus();
testfield.trigger($.Event( "mouseup"));
console.log($.fn.myPlugin.textSend);
});
but the console.log return me undefined
How can i get that variable outside?
Thanks
You will want to make sure you are returning this like so:
(function($) {
$.fn.extend({
myPlugin: function(argumentOptions) {
var self = this;
self.textSend = 'something';
self.inc = 0;
self.mouseup(function(e) {
self.textSend = 'new thing #' + self.inc;
self.inc++;
});
return self;
}
});
})(jQuery);
var instantiated = $('button').myPlugin({});
$('input').val(instantiated.textSend);
$('button').click(function(e) {
$('input').val(instantiated.textSend);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Current textSend:</label>
<input />
<br/>
<button>Change textSend</button>
Hopefully will get you on the right track.
Update
Try new code.
You can store it inside the closed scope you created around your plugin and expose it through another function. Of course it'll need some refactoring, but this is the general idea:
(function ($) {
var whateverNameYouWant; //here
$.fn.extend({
myPlugin: function (argumentOptions) {
var defaults = {
image: 'img/default.png',
};
this.textSend = '';
whateverNameYouWant = this.textSend; //here
var options = $.extend(defaults, argumentOptions);
var globalHere = this;
return this.each(function () {
obj.mouseup(function(e) {
globalHere.textSend = 'test';
whateverNameYouWant = this.textSend; //here
});
});
}
});
$.extend({
getWhateverNameYouWant: function() {
return whateverNameYouWant;
}
})
})(jQuery);
var value = $.getWhateverNameYouWant();
At line console.log($.fn.myPlugin.textSend);
use testfield.textSend . now it has become proprty of selector via myplugin.