Not sure what is the problem , this the second post looking for the answer.. but this time with a with the example .
What i'm doing : I 'm implementing a gallery that is getting a xml, and then build me using some javascript code. the problem i tried to call twice gallery.init like :
$(document).ready(function(){
galleryXML.init({
id: "#gallery1"
});
galleryXML.init({
id: "#gallery"
});
})
I expected to have one in #gallery1 other in #gallery. Can someone tell me what the problem(it only happen when i had the loadXml() , so probably something with asynchronous call not sure )?
I think your problem can be that you are using the same variable _P for (what you expect to be) 2 different instances of the galleryXML.
The _P variable is created and initialized when the javascript code is parsed, because of the () after the var galleryXML = function() {...}.
So I guess your problem is going to be solved if you just put the variable inside the init of galleryXML. You can see the code here: jsfiddle.net/rpNab/3/ (notice that now each li is inside each gallery, instead of both li in the last gallery)
EDIT: And I realize that now with my modification the galleryXML module seems ugly (because it only has one method and no variables), so I made a minor refactoring in order to have more methods inside that class, but the methods now must receive the parameter because the class itself continue to be "static", but the parameters can make it act for different contexts. Hope it helps: jsfiddle.net/rpNab/4/
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'm trying to do something deceptively simple -- adding a class to the active backbone element. The code I want to use is:
this.$el.addClass('classIWant');
However, this doesn't work all the time. Sometimes it seems to, but not all the time. However, this always works.
var id = this.$el.attr('id');
$('#' + id).addClass('classIWant');
Obviously I don't want the second example, as it relies so heavily on HTML and the DOM. Is there any reason why the first shouldn't work, or am I missing something else?
Seems this points to something wrong. If you are running this code in function myFunc, then just add to initialize next line:
_.bindAll(this, 'myFunc');
And got with you first approach, this.$el.addClass('classYouWant').
This code should work:
this.$el.addClass('classIWant');
but only if it is present within your onRender() function or any functions that are called after onRender() is. If you have this code in your initialize function then it will not work as the dom for that view has not yet been generated
I have javascript function sample('textValue') and have to call at server side on anchor click. I tried below code
string text="xyz";
anchor.Attributes.Add("onclick","javascript:sample('"+text+"');
but the value of the text is not assigning correctly. Encoded string gets added. The result in view source looks like
javascript:sample('xyz')
But i need javascript:sample('xyz')
What server/backend language do you use? PHP? Do you use any framework (Zend, CakePHP...)?
On the JS side do something like this:
Option 1
Test
Option 2
Test
<script type="text/javascript">
document.getElementById('clicky-clack-link').onClick = function() {
sample('test');
};
</script>
Note: Also check out jQuery if you haven't.
I wonder if you could just do this:
string text="xyz";
anchor.Attributes.Add("onclick", function(){ sample(text); } );
What does it do? Well, the onclick handler takes a function with no arguments, right? That is, what to do if somebody clicks the link. If you're coding this by hand in HTML, you can use the javascript:a_statement_goes_here to describe the code to run. I expect the browser will just create a function out of that. Since you're assigning this in JavaScript, you have to do that yourself (unless you write out to the document - that might work) and assign the function. But you don't have such a function yet - you have one sample that takes an argument - hence the anonymous function closing the text argument.
This is based on the assumption, that the above is actually client-side code. I'd be very surprised, if JS didn't allow you to assign a function to an attribute. In fact, I think the problem you are running into, is JavaScript trying to be very smart and make sure assigning a string, will stay a string - that is why your ' got encoded.
Have a go, tell me how it went. Ta!
I'm having an issue trying to fix a conflict between both libraries and have used the noConflict in some sections, however I keep getting the $active is null error
I'm specialized in server-side scripting and not in Javascript (nor have time to read some documentation) so would appreciate any help.
Here is my code:
First (I'm just guessing here) jQuery adds a class which will be used later
jQuery(".paging a:first").addClass("active");
Now, it's time to use that class
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
Since the code is for a slider the error appears every time this line is reached so my question is... Is there any way I can remove the $ and still use jQuery in that line?
P.S: I'm using jQuery 1.6.1 min and MooTools 1.2 although I doubt this is relevant I know they have conflicts so probably the source of this error.
To select an element by it's class in jQuery you need to use CSS style notation in a jQuery object, which in your example would be jQuery(".active"). Try this:
var triggerID = jQuery(".active").attr("rel") - 1; //Get number of times to slide
To use your original code, you'd need to assign the $active variable to be the jQuery object containing the element, like this:
var $active = jQuery(".paging a:first").addClass("active");
var triggerID = $active.attr("rel") - 1; // This will now work, assuming it's in the same scope as the above.
$active has nothing to do with jQuery in this case (though it might be a jQuery variable). In javascript you can name variables "$something" without a problem, and it doesn't collide with something named simply "$", which is another variable-name altogether. It's like saying you have removed all references to the variable "car", but don't understand why you get an error complaining about the lack of a "carpet". They're totally independent, thus the code you have posted is insufficient to see what is wrong.
[Edit]
If this sounded harsh in some way it's just me having a problem formulating myself in an understanding way on this matter, as I was simply trying to educate, not implying that this is something that you should know. It's an error a lot of peoples do in javascript (at least several I know of).
It should just be a matter of replacing $ with jQuery wherever you would normally use $.
So, instead of the typical:
$('.active').attr('rel')
use:
jQuery('.active').attr('rel')
$active is a javascript variable (they chose to put the $ in front of it to help them remember it stores a jQuery object, but the behavior is the same).
So, replacing every instance of $active by active should still work. I don't know ifit will solve your problem though.
One other thing you should try is putting your code in a closure:
(function($){
// your code
})(jQuery);
That way, inside of the closure, $ will only reference jQuery
I'm communicating with sqlite database in firefox extension. First, I used this synchronous code. Then I changed it to this asynchronous code but it ended with error
anchors[i] is undefined, Line 95
This change didn't help.
There seems to be some problem with variable scope.
thank you for help
One problem is that anchors is apparently a node collection as returned by document.anchors. As such it isn't a fixed list, it will change if the document changes. It might happen that an anchor is removed from the document while your database query is running. To prevent an issue like this you can make a copy of the collection:
var anchors = Array.prototype.slice.apply(document.anchors);
This will make anchors a regular array that won't change unexpectedly.
The other issue is that all your closure functions use the same variable i (see https://developer.mozilla.org/en/JavaScript/Guide/Closures for more info). When handleResult executes i will have the value anchors.length because the loop is already finished. To prevent this you need to capture the "current" value of i, e.g. in the object property like this:
statement.executeAsync({
anchorIndex: i,
handleResult: function(aResultSet) {
...
anchors[this.anchorIndex]
...
}