Develop Reference

Javascript automaticly runs onclick function

As I was making a gallery for a webpage I ran into a problem with js automatically running the (next_image) function, after some searching around I found out it was due to the () after the statement.
however, I can not for the life of me figure out how else to get the clicked_id to the next_image function.
So my question is: how can I make it so that the function runs only after clicking the button while still sending the clicked_id?
function opencase(clicked_id) {
document.getElementById("right_arrow").addEventListener("click", next_image(clicked_id));
}
function next_image(photoid){
console.log(photoid);
photoid++;
document.getElementById("disp").setAttribute("src", "images/image"+photoid+".jpg");
console.log(photoid);
}
Any help will be greatly appreciated :D

Instead of directly calling the function , call it from the addEventListener callback function
function opencase(clicked_id) {
document.getElementById("right_arrow").addEventListener("click", function() {
next_image(clicked_id)
});
}
function next_image(photoid) {
console.log(photoid);
photoid++;
document.getElementById("disp").setAttribute("src", "images/image" + photoid + ".jpg");
console.log(photoid);
}

jQuery function into ajax

I'm using jQuery for a while but it is the first time I need to create my own function. (I'm using noConflict)
I have a code who work like this :
jQuery(function()
{
jQuery("#tabs-3").dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
//etendre tt les noeuds
jQuery("#tabs-3").dynatree("getRoot").visit(function(dtnode){
dtnode.expand(true);
});
});
The code above is working, BUT, this part of code is in an ajax call, it worked for the first time when I called it, but not the second time or in future. when i call it with a function it gives error "jQuery.mytree is not a function". So what's wrong in my code. please help me .
(function(jQuery){
jQuery.fn.extend({
mytree: function (mytreename)
{
alert(mytreename);
jQuery(mytreename).dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
}
});
jQuery.mytree('#tabs-3');
})(jQuery);
Thanks!

That's because when you do jQuery.fn.extend, it extends your selector.
For example:
<div id = "tabs-3"></div>
<script type="text/javascript">
(function(jQuery){
jQuery.fn.extend({
mytree: function mytree() {
console.log("My tree ", this.attr("id"));
// Do your cool AJAX calls
}
});
jQuery("#tabs-3").mytree();
})(jQuery);
</script>
Will work. Inside mytree(), this is the result of your selector.

you have to call like,
jQuery("#tabs-3").mytree();

Arf I run into the next problem due to my construction I believe. The function is in a php lets call it 1.php.
1.php call in ajax 2.php
2.php contain a code who create a structure in ... (this part works).
In 2.php I call mytree, I don't get any error and the log works. But the dynatree doesn't work.
jQuery.fn.extend({
mytree: function mytree() {
console.log("My tree ", this.attr("id"));
jQuery(this.attr("id")).dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
}
});
Anything to do for it to work?
Thanks!

To call dynatree,
jQuery.fn.extend({
mytree: function mytree() {
console.log("My tree ", this.attr("id"));
jQuery("#"+this.attr("id")).dynatree({
checkbox: true,
onActivate: function(dtnode) {
alert("You activated " + dtnode);
}
});
}
});

Aaaaaaaaaaaand I missed the "#" ;)
Ok, now It works like earlier, the first time I call the ajax everything is all right.
But when I click back on the link who call the ajax I get the ul li part not on dunatree. I have the log so it pass in the function. I can't figure why it doesn't make ul li in dynatreee. :(

Got the answer here!
I call now the function on the success call ajax on 1.php. (I think it's best coding just for that)
But before i check may tabs content, if it's not empty (previous tree) i destroy it before recreate it.
success : function(msg)
{
if(msg!="")
{
//jQuery("#tabs-3").html(msg);
(function(jQuery){
//alert('Pass!'+jQuery("#tabs-3").text());
if(jQuery("#tabs-3").text()!="")
{
jQuery("#tabs-3").dynatree("destroy");
}
jQuery("#tabs-3").html(msg);
jQuery("#tabs-3").mytree();
})(jQuery);
}
}
Maybe not the more efficient but the best i found ;)
Special thanks to arun kumar!

update a JQuery progress bar added at runtime

I'm having some problems updating a jquery progress bar. This progress bar isn't in the document during the page load, I'm adding it just when the user click on a button, ding something like this:
$(this).parent().append('<div class="progressbar"></div>');
$(this).parent().children('div.progressbar').show();
$(this).parent().children('div.progressbar').progressbar({value: 20});
then, using a timeout, I'm trying to update it
function updateProgressBar() {
$('.progressbar').each(function() {
myNewValue = getNewValue();
$(this).progressbar('value', 50);
});
setTimeout('updateProgressBar()', 5000);
}
setTimeout('updateProgressBar()', 5000);
the debug console complains saying: "Uncaught: cannot call methods on progressbar prior to initialiaztion: attempted to call method 'value'"
Googling here I found that the problem could be related to the inizialization of the progress bar after the loading of the page
Could someone help me?
Thanks in advance
-- edit --
thanks Bryan, I'm trying your solution but i doesn't work for me
Now I've this code
function startProgress() {
$(this).parent().append('<div class="progressbar"></div>');
$(this).siblings('.progressbar').show();
$(this).siblings('.progressbar').progressbar({value: 0});
function updateProgress() {
$('.progressbar').each(function() {
myNewValue = getNewValue($(this).parent().parent().attr('id'));
$(this).progressbar('value', myNewValue);
});
setTimeout('updateProgress', 5000);
}
setTimeout('updateProgress', 5000);
}
The console is sayng there's no updateProgress defined
-- edit --
many many thanks!!!
Now i've a quite definitive version that works...
Here my current code
if($(this).siblings('.progressbar').size() == 0) {
$(this).parent().append('<div class="progressbar"/>');
$(this).siblings('.progressbar').progressbar({value: 0});
}
$(this).siblings('.progressbar').show();
function updateProgress() {
$('.progressbar').each(function() {
myParams = 'service=' + $(this).parent().parent().attr('id') + '&content=' + $(this).parent().attr('id')
myUrl = '/datacast/content_progress/?' + myParams;
theValue = $(this).progressbar('value');
$.get(myUrl, {}, function(aReply) {
myData = aReply.split(' ');
myItemId = myData[0];
myValue = parseInt(myData[1]);
try {
$(".item[id = " + myItemId + "]").children(".progressbar").progressbar('value', myValue);
}
catch(myError) {
//alert(myError);
}
})
});
setTimeout(updateProgress, 5000);
}
setTimeout(updateProgress, 5000);
As you can see I've add a control if there is already a progress bar as i pass thorough that code several times.
The progress bar is updated every time, but the console complains saying "TypeError: Cannot call method 'apply' of undefined", so I had to add the try block with an empty catch body to drop the error. The page works but it could be interesting if you have an idea why there's that error

Had the same problem
Apparently you must use the format progressbar({value:30}) the first time
If you use progressbar(value,30) the first time then you get this exception.

Ok, I can't believe I missed that. The problem is that you're passing a string to the setTimeout function. This will cause it to lookup the name of the function in global scope, which it's not.
Change both of these calls:
setTimeout('updateProgress', 5000);
to
setTimeout(updateProgress, 5000);

Make sure that you're using the exact same selector in your update method as in the initialization method.
In the provided code, you're doing something like $(this).parent().children().find('.progressbar') and then in the update you're just doing $('.progressbar'). That second call could potentially return items that the first one didn't, and those items wouldn't have a progress bar initialized.
This code worked fine for me:
$(function(){
$('body').append('<div class="progress"></div>');
var val = 10;
$('.progress').progressbar({value:val});
function updateProgress() {
val += 10;
$('.progress').progressbar('value', val);
if(val < 100)
setTimeout(updateProgress, 1000);
}
setTimeout(updateProgress, 1000);
});
Also, remember that you don't actually need that call to each() as jquery methods should automatically apply to all elements matched with that selector.
Example:
$('.red').each(function(){ $(this).css({color:'red'}); });
is redundant, and the same can be achieved with:
$('.red').css({color:'red'});
Oh, and here's a freebie:
$(this).parent().children().find('.progressbar')
can be shortened to: $(this).siblings('.progressbar')

Javascript function call causes error

I am trying to call a function "makeQuery" and it's not working, FireBug is telling me:
missing ; before statement
[Break on this error] makeQuery(this.id){\n
I don't quite understand where it wants me to put the ";"
$(".predicate").click(function () {
makeQuery(this.id){
alert(this.id);
}
});
function makeQuery(value){
queryString = queryString+"val="+value+"&";
variables = variables+1;
alert(queryString);
alert(variables);
}

replace
makeQuery(this.id){
alert(this.id);
}
with
makeQuery(this.id);
alert(this.id);

You have an extra curly brackets at wrapping the alert which doesn't make sense:
makeQuery(this.id){\
Should be:
$(".predicate").click(function () {
makeQuery(this.id);
alert(this.id);
});
The makeQuery requires the ; since you are calling a function.

How to — callback functions

I have a big problem writing a small piece of code using JS/jQuery (don't know which of these is causing the problem). Anyhow, here we go:
$('#themePicker').unbind().click(function() {
var t = $(this);
modalwindow2(t, function() {
console.log(1);
}, function(w) {
console.log(w);
});
return false;
});
and the function itself:
function modalwindow2(w, callbackOnSHow, callbackOnHide) {
if (typeof(callbackOnSHow) == 'function') {
callbackOnSHow.call();
}
// do some stuff //
$('form').submit(function() {
ajaxSubmit(function(data) {
if (typeof(callbackOnHide) == 'function') {
console.log('---------------');
console.log(data);
console.log('---------------');
callbackOnHide.call(data);
}
});
return false
});
}
The function is called modalwindow2 and I want to call a function when the modal is shown and another function when the modal will be hidden.
The first is not a problem.
The second… Well… Let's just say it's a problem. Why?
I want a parameter sent to the second function. The paramenter is an ajax response, similar to other jQuery stuff (ajax action, sortable, etc).
I hope I made myself clear enough.
Thanks!
Edit:
I'm using jQuery 1.1.2 (or 1.1.3) and upgrading or using jQuery UI is NOT a solution. I have some dependencies (interface is one of them) and i don't have enough time (nor motivation) to upgrade to 1.3 & UI 1.7.

I noticed that you have a typo on .submit:
$('form').submti(function(){
Was that just an entry error to SO?
EDIT:
Ok, so after looking at your code and doing a short test, I've come up with this (pardon the pun):
function modalwindow2(w, callbackOnShow, callbackOnHide) {
if(typeof callbackOnShow == 'function') {
callbackOnShow.call();
}
$('form').submit(function() {
if(typeof callbackOnHide == 'function') {
callbackOnHide.call(this, "second");
}
});
}
$(document).ready(function (){
$('#themePicker').click(function(){
var t=$(this);
modalwindow2(t, function() { alert("first"); }, function(x) { alert(x); });
return false;
});
});
It looks like you may have just been missing the "this" in your call() statement. Try using callbackOnHide.call(this, data);
Let me know if that works any better!

I understand what you are trying to do, but you will need to store the newly created window so that you can access it on the close callback function.
You might want to look at jQuery UI Dialog. It provides some really basic functionality for dialog windows (modal and otherwise) and handles some of the callback implementation.