Array parsed as a String on function call

Question

The webpage I am writing will be used to display slides images, their names, as well as a description. This is entered in a different page. The problem I am facing though is that the array I have created for the slide names, is seen as a string. So it does not return the slide name but rather just a single digit. Any help would be appreciated

This is my code. I used an alert to get the length of the value and that is when I saw the array is parsed as a single string

<body >
        <?php
        $sql_pres_slide = new CGenRs("SELECT * FROM presentation where pres_code='" . pg_escape_string($_GET['show']) . "'", $cao);
        $sql_pres_slide->first();
        $sql_pres_select = new CGenRs("SELECT * FROM slide where presentation_id='" . $sql_pres_slide->valueof('pres_id') . "' order by slide_no ASC", $cao);
        $sql_pres_select->first();
        ?>
        <table border="1" align="center">
            <tr>
                <td></td>
                <td><p align="center" ><h1 align="center"><?php echo $sql_pres_slide->valueof('pres_name'); ?> </h1><p></td>
                <td></td>
            </tr>
            <tr>
                <td rowspan="2" ><button onclick="prevSlide(slide_no)" style="color: #999; font-size: 25px" class="glyphicon glyphicon-menu-left" ></button></td>
                <td rowspan="2"> 
                    <div class="backgrund_img" >
                        <img src="../administration/file_manager/files/samsungS4-portrait-white.png" alt="" class="background_img" style="height:786px; width:406px;" />
                        <div id="inside_img"><img src="<?php echo $sql_pres_select->valueof('file_location') ?>" id="display" style="width: 360px; height:640px;"/></div>
                    </div>  
                </td>
                <td rowspan="2"><button onclick="nextSlide(slide_no)" style="color: #999; font-size: 25px" class="glyphicon glyphicon-menu-right" ></button></td>
                <td rowspan="2" class="info"><div id="func_slide_name"><font color="red" > <?php echo $sql_pres_select->valueof('slide_name') ?></font></div><div id="func_slide_desc" class="slide_select"><?php echo $sql_pres_select->valueof('description') ?></div></td>
            </tr>
            <tr rowspan="2" >
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div ><?php
                        while (!$sql_pres_select->eof()) {
                            echo "<a href=''>" . $sql_pres_select->valueof('slide_no') . "</a>" . " ";
                            $sql_pres_select->next();
                        }
                        ?> </div></td>
                <td></td>
            </tr>
        </table>
        <?php $sql_pres_select->first(); ?>
    </body>   
    <?php
    $slide_img_array = array();
    $slide_desc_array = array();
    $slide_name_array = array();

    while (!$sql_pres_select->eof()) {
        array_push($slide_img_array, $sql_pres_select->valueof('file_location'));
        array_push($slide_desc_array, $sql_pres_select->valueof('description'));
        array_push($slide_name_array, $sql_pres_select->valueof('slide_name'));
        $sql_pres_select->next();
    }

    ?>
    <script>

        var slide_no = 0;
        var slides = <?php echo json_encode($slide_img_array); ?>;
        var desc = <?php echo json_encode($slide_desc_array); ?>;
        var name = <?php echo json_encode($slide_name_array); ?>;



        function nextSlide() {
            if (slide_no < slides.length) {
                slide_no++;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
              document.getElementById("func_slide_name").innerHTML = name[slide_no];
              alert(name.length);
            }
        }
        function prevSlide() {
            if (slide_no > 0) {
                slide_no--;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
                document.getElementById("func_slide_name").innerHTML = name[slide_no];
            }
        }
    </script>

The second attempt

<body >
    <?php
    $sql_pres_slide = new CGenRs("SELECT * FROM presentation where pres_code='" . pg_escape_string($_GET['show']) . "'", $cao);
    $sql_pres_slide->first();
    $sql_pres_select = new CGenRs("SELECT * FROM slide where presentation_id='" . $sql_pres_slide->valueof('pres_id') . "' order by slide_no ASC", $cao);
    $sql_pres_select->first();
    ?>
    <table border="1" align="center">
        <tr>
            <td></td>
            <td><p align="center" ><h1 align="center"><?php echo $sql_pres_slide->valueof('pres_name'); ?> </h1><p></td>
            <td></td>
        </tr>
        <tr>
            <td rowspan="2" ><button onclick="prevSlide(slide_no)" style="color: #999; font-size: 25px" class="glyphicon glyphicon-menu-left" ></button></td>
            <td rowspan="2"> 
                <div class="backgrund_img" >
                    <img src="../administration/file_manager/files/samsungS4-portrait-white.png" alt="" class="background_img" style="height:786px; width:406px;" />
                    <div id="inside_img"><img src="<?php echo $sql_pres_select->valueof('file_location') ?>" id="display" style="width: 360px; height:640px;"/></div>
                </div>  
            </td>
            <td rowspan="2"><button onclick="nextSlide(slide_no)" style="color: #999; font-size: 25px" class="glyphicon glyphicon-menu-right" ></button></td>
            <td rowspan="2" class="info"><div id="func_slide_name"><font color="red" > <?php echo $sql_pres_select->valueof('slide_name') ?></font></div><div id="func_slide_desc" class="slide_select"><?php echo $sql_pres_select->valueof('description') ?></div></td>
        </tr>
        <tr rowspan="2" >
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><div ><?php
                    while (!$sql_pres_select->eof()) {
                        echo "<a href=''>" . $sql_pres_select->valueof('slide_no') . "</a>" . " ";
                        $sql_pres_select->next();
                    }
                    ?> </div></td>
            <td></td>
        </tr>
    </table>
    <?php $sql_pres_select->first(); ?>
</body>   
<?php
$slide_img_array = array();
$slide_desc_array = array();
$slide_name_array = array();

while (!$sql_pres_select->eof()) {
    array_push($slide_img_array, $sql_pres_select->valueof('file_location'));
    array_push($slide_desc_array, $sql_pres_select->valueof('description'));
    array_push($slide_name_array, $sql_pres_select->valueof('slide_name'));
    $sql_pres_select->next();
}
?>
<script>

    var slide_no = 0;
    var slides = <?php echo json_encode($slide_img_array); ?>;
    var desc = <?php echo json_encode($slide_desc_array); ?>;
    var name = new Array("<?php echo implode('","', $slide_name_array); ?>");
    alert(name.length);


    function nextSlide() {
        if (slide_no < slides.length) {
            slide_no++;
            document.getElementById("display").src = slides[slide_no];
            document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
            document.getElementById("func_slide_name").innerHTML = name[slide_no];

        }
    }
    function prevSlide() {
        if (slide_no > 0) {
            slide_no--;
            document.getElementById("display").src = slides[slide_no];
            document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
            document.getElementById("func_slide_name").innerHTML = name[slide_no];
        }
    }
</script>

As you will be able to see, the var name array differs from the rest. This is just because I tried a different method to see if it solves the problem. It in fact does not.

If anyone can point me in the right direction here, it would be much appreciated I should add that the first result displays correctly, it is only as soon as the function is called that the error comes forth

The script I got from viewing the element in my browser.

<script>

        var slide_no = 0;
        var slides = ["..\/administration\/file_manager\/presentation\/Slides\/30_chair.jpg","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_1.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_2.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_3.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_4.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_5.png"];
        var desc = ["This is the the new 1st slide","Slide one","Slide two","Slide the third","Slide the fourth","Slide the fifth"];

        var name1 = 'The new slide 1,Slide 1,Slide 2 ,Slide 3,slide 4,Slide 5';
        var name = name1.split(",");



        function nextSlide() {
            if (slide_no < slides.length) {
                slide_no++;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
              document.getElementById("func_slide_name").innerHTML = name[slide_no];
              alert(name.length);
            }
        }
        function prevSlide() {
            if (slide_no > 0) {
                slide_no--;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
                document.getElementById("func_slide_name").innerHTML = name[slide_no];
            }
        }
    </script>

Note that var name1 is equal to one long string, this should not happen.

When using json_encode I achieved the following result in my browser script

<script>

        var slide_no = 0;
        var slides = ["..\/administration\/file_manager\/presentation\/Slides\/30_chair.jpg","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_1.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_2.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_3.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_4.png","..\/administration\/file_manager\/presentation\/Slides\/30_RTAC20150901_5.png"];
        var desc = ["This is the the new 1st slide","Slide one","Slide two","Slide the third","Slide the fourth","Slide the fifth"];
        var name = ["The new slide 1","Slide 1","Slide 2 ","Slide 3","slide 4","Slide 5"];




        function nextSlide() {
            if (slide_no < slides.length) {
                slide_no++;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
              document.getElementById("func_slide_name").innerHTML = name[slide_no];
              alert(name.length);
            }
        }
        function prevSlide() {
            if (slide_no > 0) {
                slide_no--;
                document.getElementById("display").src = slides[slide_no];
                document.getElementById("func_slide_desc").innerHTML = desc[slide_no];
                document.getElementById("func_slide_name").innerHTML = name[slide_no];
            }
        }
    </script>

naoxink · Accepted Answer · 2015-12-02 08:54:00Z

1

You can try json_encode with your array:

var name = <?php echo json_encode($slide_name_array); ?>;

UPDATE

I've changed name for names and it works :/

http://jsbin.com/tojase/1/edit?js,console

edited Dec 2, 2015 at 8:54

answered Dec 2, 2015 at 8:24

naoxink

5971 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

naoxink Over a year ago

which result did you get?

Albertus Brand Venter Over a year ago

See post,I posted the browser result at the bottom

naoxink Over a year ago

I've changed name for names and it works :/ jsbin.com/tojase/1/edit?js,console

kostova · Accepted Answer · 2015-12-02 07:46:32Z

0

Try this:

var name1 = '<?php implode(",",$slide_name_array); ?>'; var name = name1.split(",");

edited Dec 2, 2015 at 7:46

answered Dec 2, 2015 at 7:39

kostova

614 bronze badges

9 Comments

kostova Over a year ago

try to print $slide_name_array maybe it`s empty

Albertus Brand Venter Over a year ago

Stil no luck... Its not empty, its just parsed into a string. So when I check the length of var name it returns 56, which is the total of all the names together.

Albertus Brand Venter Over a year ago

Se my original post for the returned code from my browser.I used your advice and it returned that result

kostova Over a year ago

I know that it isn't a smart solution, it is better to try with json_encode

Albertus Brand Venter Over a year ago

If i had the reputation I would put a bounty on this question. My superior looked it over and is stumped aswell

|

Albertus Brand Venter · Accepted Answer · 2015-12-02 09:02:32Z

0

After tirelessly experimenting with various other methods, it all came down to renaming the variable from

var name= <?php  echo json_encode($slide_name_array); ?>;

To

var names = <?php  echo json_encode($slide_name_array); ?>;

And adjusting all the other instances of this variable. Let it be a lesson guys. Rather use your own variables!

answered Dec 2, 2015 at 9:02

Albertus Brand Venter

3771 gold badge5 silver badges17 bronze badges

Collectives™ on Stack Overflow

Array parsed as a String on function call

3 Answers 3

3 Comments

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related