I am trying to attach a click event to a button in wordpress, which needs to be dynamically scripted because different posts have different numbers of images in their gallery. I tried the following code without success, I think the this parameter handed to the function might refer to the '#primary' element rather than to the #nextPicButton (whose name atribute contains an index value) being clicked:
jquery('#primary').on("click", '#nextPicButton', function(){ nextPic(this,picMax); });
Does anyone know how I can make the 'this' argument refer to the '#nextPicButton' rather than anything else?
Related
I have an onclick function to navigate from one "page" to another (it's not actually navigating, just imitates it):
$('.button').on('click', function(){
$('.home').css('display','none');
var newPage = $('.'+this.id);
goTo(newPage);
});
goTo simplified for reference:
function goTo(page){
$(page).css('display', 'block');
}
This works perfectly fine. All of the navigation buttons have the class of button, and also an ID that matches the class name of the different "pages". Click #page1, display .page1, etc.
My problem is now I'm having to rewrite my code to do the same thing for other elements - trying to rewrite this with arguments doesn't work for this in particular.
Here's what I'm trying:
function goToPage(link, destination){
link.click(function(){
$('.home').css('display','none');
goTo(destination);
}
}
and calling it as:
goToPage($('#page1'), $('.page1'));
works fine, however:
goToPage($('.button'), $('.'+this.id));
doesn't.
I suppose I'm misunderstanding how "this" is working in this context. I thought it would only determine what "this" is when the argument is called.
So my question is: can "this" be used as an argument in this way, am I slightly off with the logic or am I a complete idiot?
Fiddle: https://jsfiddle.net/hek0ptca/13/
To explicitly answer your question, no, this cannot be used as an argument in this case because it points to nothing.
goToPage($('.button'), $('.'+this.id));
In this context, this points to "undefined". Try running console.log(this.id);at the same scope of the code mentioned above and check your browser's console. It returns "undefined".
A good way to think about this is that you need something for it to reference. Scope matters. If there is nothing for this to reference, you will always get "undefined" as a value. Typically this is used inside a function where an object has already been referenced, for example, inside your event handler:
$('.button').click(function(){
$('#home').css('display', 'none');
goTo($('.'+this.id));
});
This will work in this case because this will refer back to the object that is being operated on, the .button class.
I apologize if the following are stupid questions, this is my first time trying something with OO JS which goes beyond the very basic tutorials out there.
If I get to understand the following questions, it would constitute something like a person breakthrough:-)
Basically, I want to create an element- a div with a background pic- on click and append it to the button.(Later on i want to create an additional button which will replace the above pic with another one).
The pictures are stored in an Array.
If i run this with the commented out lines 37-57, it all works, but i do not want to write that function every time to create the next element.
So I have created the function object "Nation"(lines 4 to 30) and want to pass 2 arguments on call, "land"(name of nation) and "imageIndex"(index of picture in the array).
Here is where the problems start. I want to call new Nation on click(line, but it is executed straight on page load instead. How to fix that?
And I have not passed the second argument now, as I could not figure out how to do it, so I just used line 13 to set the BG pic. But the goal would be to set the BG pic by passing a second argument to the function.
var croats = new Nation("croatia");
document.getElementById("newDom")
.addEventListener("click", croats.create("croatia"));
That is the event handling and the code is here:
http://codepen.io/damianocel/pen/gPggLB
Thank you very much.
You should simply pass a function as 2nd argument of the addEventListener:
document.getElementById("newDom").addEventListener("click", function () {
croats.create("croatia")
});
See for example: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Example
As your code is currently set, it executes croats.create() when attaching the listener, instead of storing a reference to a function (called "listener" or "callback") to be executed when the event occurs.
Updated CodePen: http://codepen.io/anon/pen/KVqgdP
I'm not sure how to handle the issue to get a value of the control if its ID was passed to a function from code behind.
I have a function called StateSelect that is added to a control in code behind. It has parameters. The last parameter is txtCity.ClientID.ToString()
In my html, I have this function defined as
function StateSelectedp(city, state, ddlZipName, txtCityID)
{
alert($.trim($('#txtCityID').value)); //not sure how to do it
}
I need to get a value of the txtCityID control. How can I reference it with jQuery?
Thank you
To get the value of an element with a variable ID, you can do something along the lines of the following...
function StateSelectedp(city, state, ddlZipName, txtCityID)
{
alert($('#' + txtCityID).val());
}
txtCityID is a string representing the whole ID of a given element. For jQuery to search by id, the id must be prepended by the '#' character. After the element has been selected, the val() function will return the value of the first (I think it's only first, anyways) element in the selected set of elements. There should only be one anyways, as only one element should have a given id.
Keep in mind, though, that this is all happening on the client side. Your reference to code-behind (a Web Forms term) implies that you might be intending to do something with this on the server-side, so this may or may not be the path you're really looking for.
Does anyone know how can I access an event target?
i.e, say I have a function:
func(event){...}
so that parameter "event" is a string which describes the event name (such as "onclick"/"onload" etc.), how can I get the target of this?
Suppose the given parameter is "onclick" and the click that happened was on a button called "button1", how can I get button1 as a returned value?
Thanks!
Unless you edited the function context (as with $.proxy), then you can use this to get the current element (and $(this) will return the jquery object).
Regardless if you did edit the context, you can always use event.currentTarget (or $(event.currentTarget) for the jQuery object, again)
Amongst other things, I have read:
what-does-this-mean
you-must-remember-this
mythical-methods
but they haven't solved 'this' problem I'm having with a piece of JavaScript.
I have a Section object that gets passed some XML which it uses to populate the section. In the Section object I append a div which has a specified index. The resulting jQuery object is pushed into a sections Array. The following code is from the Section object code:
sections.push($('#section' + p_sectionIndex));
this.showSection = function() {
this.show();
}
this.hideSection = function() {
this.hide();
}
sections[sections.length-1].on('show', this.showSection.call(sections[sections.length-1]));
sections[sections.length-1].on('hide', this.hideSection.call(sections[sections.length-1]));
Elsewhere I call sections[index].trigger('hide'); and sections[index].trigger('show');
The first of the links I mentioned above seemed to suggest this in a function depends on HOW it's called and that you could pass a reference to this into the function by using call. I know the showSection and hideSection function ARE being triggered - I just can't get the this in those functions to refer to the jQuery objects in the sections Array.
I have tried multiple variations of the above (excluding the call, using $(this) in the functions, adding the showSection and hideSection functions to the jQuery object - amongst others) but I'm kind of out of ideas.
Any help much appreciated!
this in an event handler is the element node that the event was bound to. If you want a jQuery object wrapping that node, use $(this)
Demo: http://jsfiddle.net/b36M6/
This of course assumes you revert back to the correct way of passing a function to the event binding.
When you use .call(), you're invoking the function immediately.
Since you want this to refer to the element, bound, just pas the function itself.
sections[sections.length-1].on('show', this.showSection);
sections[sections.length-1].on('hide', this.hideSection);
Now this in the showSection and hideSection methods will refer to the sections[] member to which it was bound.
I assume "show" and "hide" are some sort of custom events.