simple dynamic function name with javascript 3

[d2ned]

Hi!

Id need ANY help you guys could spare on this matter: I'd need to do a dynamic script with the idea that i'd loop trough an list of items and create a ready popup window for each item. But I simply can't seem to get the function name to work. Is there ANY way to create the function name in the style of "function name+1();" ?

What i'm doing is this:

<script>
 function detail_popup() {
detail_popup = window.open('','name','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
detail_popup.document.write('detail line 1');
detail_popup.document.write('detail line 2');
return false;
}
</script>

And later on, I could call on the popup functions as:

<a href="#" onclick="detail_popup+1();">

Can this even be done (simply)? I've only just begun working with scripts, so I'd appreciate every bit of info you could spare thank you!!

 

[trollacious]

Try something like this:

<script>
var popups = new Array();
var pcounter=0;
 function detail_popup() {
popups[pcounter] = window.open('','popups[' + pcounter + ']','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
popups[pcounter].document.write('detail line 1');
popups[pcounter].document.write('detail line 2');
pcounter++;
return false;
}
</script>

and

<a href="#" onclick="detail_popup();">

Lee

 

[d2ned]

Hi mate,

looks like your code in itself works, but it seems it still creates a problem, as the function names are the same, so it just calls the last script it creates, no matter what link you click - as all of the links created are onclick="detail_popup();"

Here's the HTML it generates:

<!-- item 1 -->

<script>
function detail_popup() {
popups[pcounter] = window.open('','popups[' + pcounter + ']','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
popups[pcounter].document.write('<img src="/image_path/image1.jpg" width="100" height="67" alt="">');
popups[pcounter].document.write('detail line 2');
pcounter++;
return false;
}
</script>
		
<a onclick="detail_popup();"><img src="/image_path/image1.jpg">Link</a></p>

<!-- item 2 -->

<script>
function detail_popup() {
popups[pcounter] = window.open('','popups[' + pcounter + ']','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
popups[pcounter].document.write('<img src="/image_path/image2.jpg" width="100" height="67" alt="">');
popups[pcounter].document.write('detail line 2');
pcounter++;
return false;
}
</script>
		
<a onclick="detail_popup();">link</a></p>

So the counter thing does work, can I use it to call on a specific function?

This really seems like an elegant solution, and I'd be very happy to get this one to work! Thank you so much for your help so far!

-J

 

[monksnake]

Without using server side scripting (such as ASP), I'm pretty sure this isn't possible (creating dynamic function names). From what you wrote though, you have no need to have a different javascript function for each popup.

Just pass an argument with the function and put some conditionals within your function based on what anchor you clicked on. Example:

function detail_popup(from) {
   detail_popup = window.open  ('','name','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
[!]
   if (from == "cheese") { 
      detail_popup.document.write('cheese detail line 1');
      detail_popup.document.write('cheese detail line 2');
   }
   else if (from == "steak") {
      detail_popup.document.write('steak detail line 1');
      detail_popup.document.write('steak detail line 2');
   }
[/!]
   return false;
}

Your function calls would look like this:

<a href="#" onclick="detail_popup([!]'cheese'[/!])">Cheese</a>
<a href="#" onclick="detail_popup([!]'steak'[/!])">Steak</a>

<.

 

[trollacious]

Why do you think you need different functions? If you want to send pages to different URLs, you can pass that information in the function call. But you didn't say anything about that in your original post.

I'd guess that your problem is that all the popups open in the same window, which means naming the popups themselves differently (the second parameter in window.open) as in my example should take care of that.

the function names are the same, so it just calls the last script it creates

doesn't mean anything. What is it you're trying to say there?

Lee

 

[monksnake]

Yeah that is the one problem with my example, as trollacious said, you need different window names, that's as simple as setting the name equal to the parameter passed to the function.

<.

 

[d2ned]

Trollacious, sorry for being unclear: i meant excactly what you thought - what I was trying to do was create different function for each popup, and that causes the problem when each popup function is generated with the same name.

I actually don't know if that's even wise but I'll explain a bit further: on this website each article can have 1-3 additional pictures, which have to open to a popup window (3 being the absolute maximum, that's why I figured generating 3 functions wouldn't be a problem, and would be the neatest solution).

And Monksnake, I'll try passing the argument, I think I could manage using Trollacious' counter for generating the looping naming. Would it work something like this or am I totally in the woods?

function detail_popup(from) {
   detail_popup = window.open  ('','name','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');

   if (from == "popups[pcounter]") {
      detail_popup.document.write('detail line 1');
      detail_popup.document.write('detail line 2');
   }
   else if (from == "popups[pcounter]") {
      detail_popup.document.write('detail line 1');
      detail_popup.document.write('detail line 2');
   }

   return false;
}

 

[trollacious]

Try this then:

var popups = new Array();
var pcounter=0;
function detail_popup(URL, detail1, detail2) {
popups[pcounter] = window.open(URL,'popups[' + pcounter + ']','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
popups[pcounter].document.write(detail1);
popups[pcounter].document.write(detail2);
popups[pcounter].document.close();
pcounter++;
return false;
}

and

<a href="#" onclick="detail_popup('number1.jpg', 'This is detail line #1 for number1.jpg', 'This is detail line #2 for number1.jpg');">

<a href="#" onclick="detail_popup('number2.jpg', 'This is detail line #1 for number2.jpg', 'This is detail line #2 for number2.jpg');">

You don't need multiple functions. You don't need multiple if statements. Just send the relevant information in the function call.

Lee

 

[monksnake]

In my example, there is no need for the loop within the function. I would just do this:

First, rename the name of the popup window, you don't want it the same name as the function.

Second, just hard code the value that is checked with the passed variable 'from'.

function detail_popup(from) {
   detail_popup[!]_window[/!] = window.open  ('','name','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');

   if (from == [!]"whateverYouWant"[/!]) {
      detail_popup[!]_window[/!] .document.write('detail line 1');
      detail_popup[!]_window[/!] .document.write('detail line 2');
   }
   else if (from == [!]"whateverYouWant"[/!]) {
      detail_popup[!]_window[/!] .document.write('detail line 1');
      detail_popup[!]_window[/!] .document.write('detail line 2');
   }

   return false;
}

*Note that "whateverYouWant" will be the corresponding value passed from the function call.

<a href="#" onclick="detail_popup('steak')">Steak</a>

In this example, I just used the word steak, so in your function, you will compare the value contained in the variable 'from' with the word "steak".

<.

 

[trollacious]

In my experience, the second parameter of window.open must be different each or there will be only one window opened and subsequent calls to the function will replace the original contents with the new contents.

Lee

 

[monksnake]

ARRRRGGHHH damn, ok let me do this again:

function detail_popup(from) {
   detail_popup_window = window.open  ('',[!]from[/!],'height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');

   if (from == "whateverYouWant") {
      detail_popup_window .document.write('detail line 1');
      detail_popup_window .document.write('detail line 2');
   }
   else if (from == "whateverYouWant") {
      detail_popup_window .document.write('detail line 1');
      detail_popup_window .document.write('detail line 2');
   }

   return false;
}

An eye for an eye troll, here have a star.



<.

 

[trollacious]

Thanks. #

Lee

 

[d2ned]

hey guys,

i'm going to have one more go at this, it seems this can't be done that simply. at least the problem seems to be inserting the JSTL tags i'd need for the text lines (for finding the correct image, image description texts & such). what i've been trying now is:

<script>
var popups = new Array();
var pcounter=0;
function detail_popup(l1, l2, l3) {
detail_popup = window.open('','popups[' + pcounter + ']','height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
detail_popup.document.write(detail1);
detail_popup.document.write(detail2);
detail_popup.document.close();
return false;
}
</script>

(I with that because i just couldn't get popups[pcounter].document.write(detail1); to open a window)

And while looping trough the items i tried this, have no idea if it even should work:

<script>
var line1 = '<p class="detail">';
var line2 = '<img src="/path/<owntag:imgname='bigimg'/>' />"
var line3 = '<owntag:imgdet='description'/>';
pcounter++;
</script>

<a href="#" onclick="detail_popup(line1, line2, line3);">
<img src="/path/<owntag:imgname='thumbnail'/>"
</a>

 

[trollacious]

You rather butchered the code you were given. You use the parameters l1, l2, and l3, but refer to the variables detail1 and detail2 in the function. And you're still using the same value as the second parameter in window.open.

And that's just a start with how things got changed around to NOT work.

Lee

 

[d2ned]

oh, sorry again Lee, that was silly of me, that would never work, i've tried literally dozens of versions during the last few days so getting a bit desperate. but as you said, there's probably many things wrong with it.

but, i really tried with excactly as you kindly adviced, and with my little experience i can't really describe what part of it isn't working i somehow figured it must be the popups[pcounter].document.write, so it should be as the whole function is named. anyhow, a huge thanks to you both, i guess i kind of started at the wrong end of learning JS.

thanks again for being patient with a newbie, throwing stars your way again!

-J

 

[trollacious]

Try this, which I've tested in another function:

var pcounter = 0;

function detail_popup(l1, l2, l3)
{
window['popup' + pcounter]
 = window.open(l1,'popup' + pcounter,'height=600,width=500,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no');
window['popup' + pcounter].document.write(l2);
window['popup' + pcounter].document.write(l3);
window['popup' + pcounter].document.close();
pcounter++;
return false;
}

In this case, l1 MUST be the image or URL you want to open, l2 is the first line you want to write to the page, and l3 is the second line you want to write to the page.

In this forum you need to use ONLY client-side HTML if you want quick responses to your questions, not something like <owntag:imgname='thumbnail'/>, which itself is not a valid URL.

Lee

 

[d2ned]

well guys, can't really thank you enough, the script is working like a charm. my initial mistake was in presuming that the window.open would actually work without the first parameter.

i ended up using a sort of dynamic variable, if you will, instead of redoing the function every time i need a popup, i just declared them on the fly like so, adding a part of the variable name with JSTL:

var line1_<c:out value="${t1}" /> = 'image.jpg';

and the results are line1_1, line 1_2 etc. and a set of variables is created while looping through the list of items.

but kudos to you, i've learned more from this single thread than by reading page after page of JS tutorials. thanks!