Fix a little php/script WordPress
- SOLVED
Hi!
I'm sure I'm nearly there on this but tired eyes can't see it.
Can you please get this working? :)
Below should be fairly self explanatory, but is an ACF repeater, looking to append the output for each row into the onebot class. On the front end the script spits out the correct content as expected for the sub field but isn't adding it into the div. If I use standard text then it seems to work.
Got a fix?
Thank you!
<?php
$rows = get_field('my_repeater');
if($rows)
{
foreach($rows as $row)
{
echo '<div class="onebot"></div>';
?>
<script>
var str = '<?php echo $row['my_sub_field']; ?>';
var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.onebot').each(function (i) {
$(this).delay(100 * i).css({
display: 'inline',
opacity: 0
}).animate({
opacity: 1
}, 100);
});
</script>
<?php
}
}
?>
Answers (4)
Rempty answers:
It would help if you linked to your site so we can check for errors, or send me a private message
I tested your code and work.
Can u add print_r and copy what appears
<?php
$rows = get_field('my_repeater');
/*Add this*/
print_r($rows);
if($rows)
{
foreach($rows as $row)
{
echo '<div class="onebot"></div>';
?>
<script>
var str = '<?php echo $row['my_sub_field']; ?>';
var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.onebot').each(function (i) {
$(this).delay(100 * i).css({
display: 'inline',
opacity: 0
}).animate({
opacity: 1
}, 100);
});
</script>
<?php
}
}
?>
elle007 comments:
Unfortunately I can't but here's what it spits out with that (have just removed the content it spits out as this would get very very long)...
Array ( [0] => Array ( [my_sub_field] =>
"the correct content of the row here"
) [1] => Array ( [my_sub_field] =>
"the correct content of the row here"
) [2] => Array ( [my_sub_field] =>
"the correct content of the row here"
...and on and on until the closing brackets :)
) )
Errors on initial code is - SyntaxError: Unexpected EOF (multiple, for each row). Could it be a multi-line string issue? The content of each row is a number of lines long.
Rempty comments:
You can't have break lines inside javscript code
//if your repeater field have break lines will generate something like this, and generate javascript error
Var test ='texttext
Text text';
Rempty comments:
A solución can be using json_encode
echo json_encode($row['myfield']);
elle007 comments:
That's great - good pick up. Hadn't remembered the client could enter break lines on their end.
That's picking up in the onebot div now as expected (spanning each letter) but it's picking up more than one row of the repeater. Any ideas why?
Rempty comments:
Hi elle007
Sorry for late response, the problem is your javascript, append the spans to all onebot divs. Try this, i added a class called "paragraph" + a identifier ($i).
<?php
$rows = get_field('repeater');
if($rows)
{
$i=0;
foreach($rows as $row)
{
echo '<div class="onebot paragraph'.$i.'"></div>';
?>
<script>
var str = '<?php echo json_encode($row['my_sub_field']); ?>';
var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.paragraph<?php echo $i;?>').each(function (i) {
$(this).delay(100 * i).css({
display: 'inline',
opacity: 0
}).animate({
opacity: 1
}, 100);
});
</script>
<?php
$i++;
}
}
?>
Hai Bui answers:
Like Rempty said, you need to use php json_encode to create a javascript safe string, here's the full solution:
<?php
$rows = get_field('my_repeater');
if($rows)
{
foreach($rows as $row)
{
echo '<div class="onebot"></div>';
?>
<script>
var str = <?php echo json_encode($row['my_sub_field']); ?>;
var spans = '<span>' + str.split('').join('</span><span>') + '</span>';
$(spans).hide().appendTo('.onebot').each(function (i) {
$(this).delay(100 * i).css({
display: 'inline',
opacity: 0
}).animate({
opacity: 1
}, 100);
});
</script>
<?php
}
}
?>
Sébastien | French WordpressDesigner answers:
<blockquote>it's picking up more than one row of the repeater.</blockquote>
...and ? it's not what you want ?
elle007 comments:
Rather than outputting 1 repeater row per <div class="onebot"></div>'; it's outputting numerous varying ones in each.
Sébastien | French WordpressDesigner comments:
could you paste the code outputting
and the code you want