how to retrieve repeater Id and export it to JS (gallery)

[wishbone]

Hi,

I'm struggling with the syntax...

multiple galleries, created as repeaters, need an ID to export to JS - to call a gallery script.

Everything works so far except the repeater Id, which I don't know how to concatenate to form the #galleryId.

This is my hopeless attempt:

$repeaterId = $pages->get($repeaterPageID);
$galleryId = gallery.$repeaterId;
echo "<div id='$galleryId'>";
foreach 
...
...

[Nico Knoll]

Should be more like:

$mainPage = $pages->get('1234'); // some id of the page containing the repeater field
$repeaterPage = $mainPage->repeaterField->first();  // repeaterField is the name of your field

echo "<div id='".$repeaterPage->id."'>";

or

$mainPage = $pages->get('1234'); // some id of the page containing the repeater field
$repeaterPages = $mainPage->repeaterField;  // repeaterField is the name of your field

foreach($repeaterPages as $repeaterPage) {
echo "<div id='".$repeaterPage->id."'>";
}

[wishbone]

it's this page...

$repeaterPage = $page->get($name_of_repeaterfield);
$repeaterPageId = $repeaterPage->id;
echo "<div id='$repeaterPageId' class='gallery'>";

doesn't work ((

[Wanze]

it's this page...

$repeaterPage = $page->get($name_of_repeaterfield);
$repeaterPageId = $repeaterPage->id;
echo "<div id='$repeaterPageId' class='gallery'>";

doesn't work ((

$pages->get($name_of_repeaterfield);

What does $name_of_repeaterfield contain?

[wishbone]

$pages->get($name_of_repeaterfield);

What does $name_of_repeaterfield contain?

The name of the repeater field

I was trying to get the ID of the repeater as an identifier for the gallery.

Now "0" for the repeaterPageId is thrown...

[Soma]

Nico already showed how to get it.

$repeaterPage = $page->get("name_of_repeaterfield")->first(); // gets first repeater
$repeaterPageId = $repeaterPage->id;
echo "<div id='$repeaterPageId' class='gallery'>";

 

Is same as:

$repeaterPage = $page->name_of_repeaterfield->first(); // gets first repeater
$repeaterPageId = $repeaterPage->id;
echo "<div id='$repeaterPageId' class='gallery'>";
 

Or loop through repeater as if they're pages (they are)

foreach($page->name_of_repeaterfield as $repeaterPage){
   $repeaterPageId = $repeaterPage->id;
   echo "<div id='$repeaterPageId' class='gallery'>";
}
 

[wishbone]

Or loop through repeater as if they're pages (they are)

that was it!! thx!! The "first()" had confused me...

Now, can I pass this variable (repeaterPageId) to a jquery script?

[Pete]

Yep. Just add PHP inside Javascript on your page like so:

<script>
var varname = '<?php echo $phpvalue; ?>';
</script>

If you put this in a template file, since you're declaring a global variable there it should be available to external .js files too. You might want to wrap the jQuery documentready bit around the JS though.

Remember - PHP is server-side, so that line of PHP will be parsed into a real value before it hits the browser, therefore if your $phpvalue was hello (for the sake of arcument) then your source code when viewed in a browser would look exactly like this:

<script>
var varname = 'hello';
</script>

[wishbone]

sounds so really easy... but I can#t bring it to function...

<script language="javascript" type="text/javascript">
	(function(window, $, PhotoSwipe){
			$(document).ready(function(){
				var galleryId = <?php echo $repeaterPageId; ?>; 
				console.log(repeaterPageId);
				var options = {};
				$("#galleryId a").photoSwipe(options);
			});
		}(window, window.jQuery, window.Code.PhotoSwipe));
</script>

throws me

ReferenceError: repeaterPageId is not defined

console.log(repeaterPageId);

The JS is in the same template

[diogo]

<script language="javascript" type="text/javascript">
    (function(window, $, PhotoSwipe){
        $(document).ready(function(){
            var galleryId = '<?php echo $repeaterPageId; ?>'; // <- the quotation marks were missing here
            console.log(galleryId); // <- I assume here you want to log "galleryId" and not "repeaterPageId"
            var options = {};
            $("#galleryId a").photoSwipe(options); // I'm confused, do you have an HTML element with the id "galleryId" in your code?
       });
    }(window, window.jQuery, window.Code.PhotoSwipe));
</script>

I corrected two things in your code that were definitely wrong, but even with them corrected I don't really understand what's going on there because your not really using the variable that you defined with the help of PHP. What you are using that seems similar, is this element "#galleryId", but this is not the same thing, because "galleryId" is a javascript variable while "#galleryId" is the way that jQuery calls the id of an html element. Two completely distinct things.

[wishbone]

thx for struggling through my "intuitive" code... since I'm a non coder I can only try to adapt examples to my needs...

I changed to

var repeaterPageId = '<?php echo $repeaterPageId; ?>'; // <- the quotation marks were missing here 
            console.log(repeaterPageId); // <-with or without quotations it now logs the id as a number... 
            var options = {};
            $("#repeaterPageId a").photoSwipe(options);

to be used in the above call

echo "<div id='$repeaterPageId' class='gallery'>";

but how do I use the JS variable to let Jquery call the id of the element with that selector? in other words, how can I feed the repeaterPageId into the #'repeaterPageId' ? (I already tried quotations...)

Anyway, I found another solution without passing the Id...

but I'd like to learn how to do this!

Yes, it's not  processwire problem...

[Soma]

Add photoswipe init once through a class you then give to all galleries and be done.

<script language="javascript" type="text/javascript">
    (function(window, $, PhotoSwipe){

            $(document).ready(function(){
                var options = {};
                $(".gallery a").photoSwipe(options);
            });

    }(window, window.jQuery, window.Code.PhotoSwipe));
</script>

No need to create a javascript code with an unique id for each gallery you add in html.

[Soma]

Ah se you already found a solution...

Here how it would be done. Simple.

// html output
echo "<ul id='$repeaterPageId' class='gallery'>";
...

<script>
   $(function(){
      var options = {};
      $("#<?php echo $repeaterPageId;?> a").photoSwipe(options);
   });
</script>

[wishbone]

Add photoswipe init once through a class you then give to all galleries and be done.

<script language="javascript" type="text/javascript">
    (function(window, $, PhotoSwipe){

            $(document).ready(function(){
                var options = {};
                $(".gallery a").photoSwipe(options);
            });

    }(window, window.jQuery, window.Code.PhotoSwipe));
</script>

No need to create a javascript code with an unique id for each gallery you add in html.

that's exactly what I came up with ;-) thx!!!

[wishbone]

Here how it would be done. Simple.

omg is it that simple?? (Once one knows....)

but why didn't it want to use my variable

var repeaterPageId = '<?php echo $repeaterPageId; ?>';

as id in the jquery call?

well that's only for learning I don't want to take your time for lessons ;-)

Thanksa lot!

In this forum, up to now, I have never been left without a solution!!!

modX community is very good, too - but no comparison to here!!

[diogo]

This happens because "repeaterPageId" is a variable, and "#repeaterPageId a" is a string (notice that it is inside quotes on your code). Javascript has no way to know that it should use "repeaterPageId" as a variable instead as part of the string. What you would have to do here would be add the string "#" plus the string that "repeaterPageId" is holding plus the string " a" by concatenating them:

$("#" + repeaterPageId + " a") // <-the space inside the quotes before the "a" is important

This will result in:

$("#1234 a")

edit:

Javascript has no way to know that it should use "repeaterPageId" as a variable instead as part of the string

This may be confusing when you can use variables inside of double quotation marks in PHP like 

echo "this $variable will work";

, but PHP has a way of knowing that $variable should be treated as a variable because of the $. So what we are doing there is exactly the same as doing 

echo 'this ' . $variable . ' will work';

 in PHP.

[wishbone]

ahhh... concatenate, of course...

thx a lot!