make modal appear with youtube - won't work... suggestions?

[rootKID]

hey w3s... so i have this code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="font-weight-bold text-center">WORK</h2>
            <div class="border"></div>
            <br />
        </div>
    </div>
</div>

<div class="container main_wrapper">
    <section>
        <div class="container">
            <div class="row" id="work-grid">
                <?php
                $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC";
                $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink));
                if( mysqli_num_rows($result_1) > 0 ) {
                    while( $row_1 = mysqli_fetch_array($result_1) ) {
                        $video_id = $row_1['video_id'];
                        $video_title = $row_1['video_title'];
                        $video_link = $row_1['video_link'];
                        $video_director = $row_1['video_director'];
                        $video_text = $row_1['video_text'];
                        ?>
                        <div class="col-sm-4 col-xs-12 work_panels">
                            <div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>">
                                <div class="panel-thumbnail">
                                    <a href="#" title="Video" class="thumb">
                                        <img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo">
                                    </a>
                                </div>
                                <div class="panel-body">
                                    <p class="work-name"><?php echo $video_director; ?></p>
                                    <p class="work-video-text"><?php echo $video_text; ?></p>
                                </div>
                            </div>
                        </div>
                        <?php
                    }
                } else { // hvis der ikke er EN række i udtrækket, vises en fejlbesked
                    echo 'Ingen videoer at vise i nu.';
                }
                ?>
            </div>
        </div>
    </section>
    
    <div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title customModal_2">Video Title 1</h3>
                    <button class="close" type="button" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <h4 class="customModal_3">Video Title 2</h4>
                    <p class="customModal_4">
                        Video in here.
                    </p>
                    <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>-->
                </div>
            </div>
        </div>
    </div><!-- //.modal-Youtube_1 -->
    
</div>

<script>
$('[class^=Panel_ModalVideoID-]').click(function(event) {
    event.preventDefault();
    
    // Step 1 - The Variables
    //-----------------------------------------------
    
    var e = $(this); // e = event of the function happening via class/id "class^=Panel_ModalVideoID-*" (working?)
    var modal = $('.customModal_1');
    var modalTitle = $('.customModal_2');
    var videoTitle = $('.customModal_3');
    var videoEmbed = $('.customModal_4');
    var modal_body = $('.modal-body');
    
    var INSERTDATA_modalTitle;
    $('a.thumb').click(function() {
        INSERTDATA_modalTitle = $(this).Attr( 'title' );
    });
    //var INSERTDATA_modalTitle = e.$('a.thumb').Attr("title"); // working?
    
    
    // Step 2 - Clear different areas
    //-----------------------------------------------
    
    modal_body.empty(); // empty area
    
    // Step 3 - insert data into different areas
    //-----------------------------------------------
    
    $(modalTitle).html(INSERTDATA_modalTitle);
    
    // Step 4 - show the modal
    //-----------------------------------------------
    
    $(".customModal_1").modal({ show: true; });
});
</script>

Currently i'm using bootstrap 4 and trying to make a modal appear. So far it is working BUT i am trying to edit the following inside of the modal:

Modal title, and the 2 <p> items inside modal-footer for youtube embed and youtube title etc.

All of the replacements at different areas should come from the "while loop" at the upper of the page coding with php.

Can you help me somehow? Not sure what to do with js/jquery really, a little bit of a newbie... even after years, i still dont get much of it :/

Hoping you guys can help me out a bit.

If more information is needed, please ask.

Using jQuery 3.2.1, included ALL of the bootstrap 4 bundle etc, so i know that is not the problem here.

Maybe it is the way i am using my JS/jQuery code. Thanks a lot.

And ohh... the title should be from the "a.thumb -> title attribute", saying video... will edit it later with php so that it will be dynamic.

Hope you can help. Thanks!

[dsonesuk]

<div class="panel panel-default Panel_ModalVideoID-<?php echo $video_id; ?>">

 

class^=Panel_ModalVideoID-

looks in class attribute for the value to begin with ''Panel_ModalVideoID-'

You need

$("[class*='Panel_ModalVideoID-']").click(function() {

which looks for ''Panel_ModalVideoID-' anywhere within the value of class attribute.

Note: you can't use '~=' for end value because it must end ''Panel_ModalVideoID-' exactly, but it finally will end up being  ''Panel_ModalVideoID-ID_number'.

You also can't have two different element click events within each other.

preventDefault() is used to prevent the normal action of clicking specific element such as submit form buttons and links, div elements don't have such actions.

 

[rootKID]

Hello, thanks, cleared it a little more, thanks!

This is my new code, still won't work tho...

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="font-weight-bold text-center">WORK</h2>
            <div class="border"></div>
            <br />
        </div>
    </div>
</div>

<div class="container main_wrapper">
    <section>
        <div class="container">
            <div class="row" id="work-grid">
                <div class="card-columns">
                    <?php
                    $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC";
                    $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink));
                    if( mysqli_num_rows($result_1) > 0 ) {
                        while( $row_1 = mysqli_fetch_array($result_1) ) {
                            $video_id = $row_1['video_id'];
                            $video_title = $row_1['video_title'];
                            $video_link = $row_1['video_link'];
                            $video_director = $row_1['video_director'];
                            $video_text = $row_1['video_text'];
                            ?>
                                <div class="card">
                                    <a href="#" title="Video" class="thumb">
                                        <img class="card-img-top img-responsive img-rounded" src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" alt="Image" data-toggle="modal" data-target=".modalVideo">
                                    </a>
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo $video_title; ?></h5>
                                        <p class="card-text"><?php echo $video_text; ?></p>
                                    </div><!-- //.card-body -->
                                    <div class="card-footer">
                                        <small class="text-muted"><?php echo $video_director; ?></small>
                                    </div><!-- //.card-footer -->
                                </div><!-- //.card -->
                            <?php
                        }
                    } else {
                        echo 'Ingen videoer at vise i nu.';
                    }
                    ?>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title customModal_2">Video Main Title 1</h3>
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <h4 class="customModal_3">Video Main Title 2</h4>
                <p class="customModal_4">
                    Video in here.
                </p>
                <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>-->
            </div>
        </div>
    </div>
</div><!-- //.modal-Youtube_1 -->

<script>
$('[class*=Panel_ModalVideoID-]').click(function(event) {
    // Step 1 - The Variables
    //-----------------------------------------------
    
    // The Modal
    
    var modal = $('.customModal_1');
    var modalTitle = $('.customModal_2');
    var videoTitle = $('.customModal_3');
    var videoEmbed = $('.customModal_4');
    var modal_body = $('.modal-body');
    
    // The Cards
    
    var INSERTDATA_modalTitle = $("a.thumb").attr( 'title' );
    
    // Step 2 - Clear different areas
    //-----------------------------------------------
    
    //modal_body.empty(); // empty area (needed?)
    
    // Step 3 - insert data into different areas
    //-----------------------------------------------
    
    $(modalTitle).html(INSERTDATA_modalTitle);
    //$(modalTitle).text(INSERTDATA_modalTitle);
    
    // Step 4 - show the modal
    //-----------------------------------------------
    
    $(modal).modal({ show: true; });
});
</script>

Did i misunderstand anything? I have removed the preventDefault, tried to catch the title attribute which apparently still aint working, put my <script> in the bottom of my code, include jquery 3.2.1 in the top of my header, so no sure as to why :/

Ideas?

[dsonesuk]

There is no 'Panel_ModalVideoID-' class element anymore?

Remember it has to target only the element that triggered the event to target specific anchor link title, at the moment it targets all of what will be many.

 

Edited March 5, 2018 by dsonesuk

[rootKID]

ohh.... lol haha, forgot to add it, right here it is:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="font-weight-bold text-center">WORK</h2>
            <div class="border"></div>
            <br />
        </div>
    </div>
</div>

<div class="container main_wrapper">
    <section>
        <div class="container">
            <div class="row" id="work-grid">
                <div class="card-columns">
                    <?php
                    $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC";
                    $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink));
                    if( mysqli_num_rows($result_1) > 0 ) {
                        while( $row_1 = mysqli_fetch_array($result_1) ) {
                            $video_id = $row_1['video_id'];
                            $video_title = $row_1['video_title'];
                            $video_link = $row_1['video_link'];
                            $video_director = $row_1['video_director'];
                            $video_text = $row_1['video_text'];
                            ?>
                                <div class="card Panel_ModalVideoID-<?php echo $video_id; ?>">
                                    <a href="#" title="Video" class="thumb">
                                        <img class="card-img-top img-responsive img-rounded" src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" alt="Image" data-toggle="modal" data-target=".modalVideo">
                                    </a>
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo $video_title; ?></h5>
                                        <p class="card-text"><?php echo $video_text; ?></p>
                                    </div><!-- //.card-body -->
                                    <div class="card-footer">
                                        <small class="text-muted"><?php echo $video_director; ?></small>
                                    </div><!-- //.card-footer -->
                                </div><!-- //.card -->
                            <?php
                        }
                    } else {
                        echo 'Ingen videoer at vise i nu.';
                    }
                    ?>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title customModal_2">Video Main Title 1</h3>
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <h4 class="customModal_3">Video Main Title 2</h4>
                <p class="customModal_4">
                    Video in here.
                </p>
                <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>-->
            </div>
        </div>
    </div>
</div><!-- //.modal-Youtube_1 -->

<script>
$("[class*='Panel_ModalVideoID-']").click(function(event) {
    // Step 1 - The Variables
    //-----------------------------------------------
    
    // The Modal
    
    var modal = $('.customModal_1');
    var modalTitle = $('.customModal_2');
    var videoTitle = $('.customModal_3');
    var videoEmbed = $('.customModal_4');
    var modal_body = $('.modal-body');
    
    // The Cards
    
    var INSERTDATA_modalTitle = $("a.thumb").attr( 'title' );
    
    // Step 2 - Clear different areas
    //-----------------------------------------------
    
    //modal_body.empty(); // empty area (needed?)
    
    // Step 3 - insert data into different areas
    //-----------------------------------------------
    
    $(modalTitle).html(INSERTDATA_modalTitle);
    //$(modalTitle).text(INSERTDATA_modalTitle);
    
    // Step 4 - show the modal
    //-----------------------------------------------
    
    $(modal).modal({ show: true; });
});
</script>

as you see i have added it to a <div>... still not working tho.. because it's a div and not an <a> element Oo?

[dsonesuk]

Remember it has to target only the element that triggered the event to target specific anchor link title, at the moment it targets all of what will be many.

 

Edited March 5, 2018 by dsonesuk

[rootKID]

but i need the div/wrapper tho right? to get all the data to the js? That is why i picked the one div-block that surrounded the whole area with information :/

I mean how else would you do it? Not sure how...

[dsonesuk]

From what understand it will possibly produce multiple  'card Panel_ModalVideoID-xxxxx' elements with details about movie, tile, director etc.

By clicking Panel_ModalVideoID-xxxxx you hope to gather the data within this element to place in modal yes! but you need to target that specific element children that have the data you require, that is why $(this) is used, it targets the element that triggered the event and the children that holds the data only. Otherwise it get each specific targeted element details one at a time overwriting each to it gets to last one, which is the details you will end up with each time.

$(this) will have to be used for each element to want to retrieve the data from current selected element that triggered the event.

[dsonesuk]

$(this) will target the element that triggered the event, then you transverse to current anchor element

$(this).find('a.thumb').attr('title');

You update the other modal details by referring with $(this) then the element you which to target each time.

$('.customModal_3').html($(this).find('.card-title').html());

and so on

Edited March 5, 2018 by dsonesuk

[rootKID]

ok, that is how i select the different elements, that part i get now...

so to output it into the modal, i would assume i could do this now:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="font-weight-bold text-center">WORK</h2>
            <div class="border"></div>
            <br />
        </div>
    </div>
</div>

<div class="container main_wrapper">
    <section>
        <div class="container">
            <div class="row" id="work-grid">
                <div class="card-columns">
                    <?php
                    $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC";
                    $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink));
                    if( mysqli_num_rows($result_1) > 0 ) {
                        while( $row_1 = mysqli_fetch_array($result_1) ) {
                            $video_id = $row_1['video_id'];
                            $video_title = $row_1['video_title'];
                            $video_link = $row_1['video_link'];
                            $video_director = $row_1['video_director'];
                            $video_text = $row_1['video_text'];
                            ?>
                                <div class="card Panel_ModalVideoID-<?php echo $video_id; ?>">
                                    <a href="#" title="Video" class="thumb">
                                        <img class="card-img-top img-responsive img-rounded" src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" alt="Image" data-toggle="modal" data-target=".modalVideo">
                                    </a>
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo $video_title; ?></h5>
                                        <p class="card-text"><?php echo $video_text; ?></p>
                                    </div><!-- //.card-body -->
                                    <div class="card-footer">
                                        <small class="text-muted"><?php echo $video_director; ?></small>
                                    </div><!-- //.card-footer -->
                                </div><!-- //.card -->
                            <?php
                        }
                    } else {
                        echo 'Ingen videoer at vise i nu.';
                    }
                    ?>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title customModal_2">Video Main Title 1</h3>
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <h4 class="customModal_3">Video Main Title 2</h4>
                <p class="customModal_4">
                    Video in here.
                </p>
                <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>-->
            </div>
        </div>
    </div>
</div><!-- //.modal-Youtube_1 -->

<script>
$("[class*='Panel_ModalVideoID-']").click(function(event) {
    // Step 1 - The Variables
    //-----------------------------------------------
    
    // The Modal
    
    var modal = $('.customModal_1');
    var modalTitle = $('.customModal_2');
    var videoTitle = $('.customModal_3');
    var videoEmbed = $('.customModal_4');
    var modal_body = $('.modal-body');
    
    // The Cards
    
    var INSERTDATA_modalTitle = $(this).find('a.thumb').attr( 'title' );
    
    // Step 2 - Clear different areas
    //-----------------------------------------------
    
    //modal_body.empty(); // empty area (needed?)
    
    // Step 3 - insert data into different areas
    //-----------------------------------------------
    
    $(modalTitle).html(INSERTDATA_modalTitle); // output of main title
    //$(modalTitle).text(INSERTDATA_modalTitle);
    
    // Step 4 - show the modal
    //-----------------------------------------------
    
    $(modal).modal({ show: true; });
});
</script>

? And then i just... assume... to repeat it? The output of the main title and in this case i would do exactly same thing and just repeat for whereever i need to output the elements inside of the modal?

Also what i am trying to achieve is to put an embedded youtube video inside of the modal, hence the iframe.. not sure if it's needed, but do you have any idea how to put it inside of say "customModal_4", since that is where it should go... i did see a tutorial somewhere online (forgot link), that i should save the URL and pass it to the modal, just like i do with the elements now, and then i should simply somehow insert a new attribute to the iframe with a src/source, containing the link of the youtube video..

but like i said, that is only what i remember

[rootKID]

just tested what you wrote... still won't replace the damn main title :/

other ideas.... because i did locate the a.thumb :/

[dsonesuk]

The image uses php $video_link to get movie id such as 'tgbNymZ7vqY' to get movie jpg which is also movie id, add a data attribute to this image to hold this id.

example

<img src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" class="img-responsive img-rounded" data-toggle="modal" data-target=".modalVideo" data-videoID="<?php echo $video_link; ?>">

which will show as

data-videoID="tgbNymZ7vqY"

Now retrieve this value to update the src of iframe

                            <div class="embed-responsive embed-responsive-16by9">
                                <iframe class="embed-responsive-item" src=""></iframe>
                            </div>

Add this to to event trigger code

$('.embed-responsive-item').attr('src', 'https://www.youtube.com/embed/' + $(this).find('a.thumb > img').attr('data-videoID'));

it should on selection gather this code from data-videoID on image, add it to partial youtube url and sett the src attribute of iframe to this complete link

[rootKID]

Thanks a lot! I have added the code... this is how it looks now, still won't work, not sure what i'm doing wrong here :/

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2 class="font-weight-bold text-center">WORK</h2>
            <div class="border"></div>
            <br />
        </div>
    </div>
</div>

<div class="container main_wrapper">
    <section>
        <div class="container">
            <div class="row" id="work-grid">
                <div class="card-columns">
                    <?php
                    $query_1 = "SELECT * FROM admvideo ORDER BY video_id DESC";
                    $result_1 = mysqli_query($dblink, $query_1) or die(mysqli_error($dblink));
                    if( mysqli_num_rows($result_1) > 0 ) {
                        while( $row_1 = mysqli_fetch_array($result_1) ) {
                            $video_id = $row_1['video_id'];
                            $video_title = $row_1['video_title'];
                            $video_link = $row_1['video_link'];
                            $video_director = $row_1['video_director'];
                            $video_text = $row_1['video_text'];
                            ?>
                                <div class="card Panel_ModalVideoID-<?php echo $video_id; ?>">
                                    <a href="#" title="Video" class="thumb">
                                        <img class="card-img-top img-responsive img-rounded" src="https://img.youtube.com/vi/<?php echo $video_link; ?>/0.jpg" alt="Image" data-toggle="modal" data-target=".modalVideo" data-videoID="<?php echo $video_link; ?>">
                                    </a>
                                    <div class="card-body">
                                        <h5 class="card-title"><?php echo $video_title; ?></h5>
                                        <p class="card-text"><?php echo $video_text; ?></p>
                                    </div><!-- //.card-body -->
                                    <div class="card-footer">
                                        <small class="text-muted"><?php echo $video_director; ?></small>
                                    </div><!-- //.card-footer -->
                                </div><!-- //.card -->
                            <?php
                        }
                    } else {
                        echo 'Ingen videoer at vise i nu.';
                    }
                    ?>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="modal fade customModal_1 modalVideo" tabindex="-1" role="dialog" aria-labelledby="modalVideo_LabelledBy" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title customModal_2">Video Main Title 1</h3>
                <button class="close" type="button" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <h4 class="customModal_3">Video Main Title 2</h4>
                <p class="customModal_4">
                    Video in here.
                </p>
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src=""></iframe>
                </div>
                <!--<iframe width="100%" height="350" src="" frameborder="0" allowfullscreen></iframe>-->
            </div>
        </div>
    </div>
</div><!-- //.modal-Youtube_1 -->

<script>
$("[class*='Panel_ModalVideoID-']").click(function() {
    // Step 1 - The Variables
    //-----------------------------------------------
    
    // The Modal
    
    var modal = $('.customModal_1');
    var modalTitle = $('.customModal_2');
    var videoTitle = $('.customModal_3');
    var videoEmbed = $('.customModal_4');
    var modal_body = $('.modal-body');
    
    // The Cards
    
    var INSERTDATA_modalTitle = $(this).find('a.thumb').attr( 'title' );
    
    // Step 2 - Clear different areas
    //-----------------------------------------------
    
    //modal_body.empty(); // empty area (needed?)
    
    // Step 3 - insert data into different areas
    //-----------------------------------------------
    
    $(modalTitle).html(INSERTDATA_modalTitle); // output of main title
    //$(modalTitle).text(INSERTDATA_modalTitle);
    
    $('.embed-responsive-item').attr('src', 'https://www.youtube.com/embed/' + $(this).find('a.thumb > img').attr('data-videoID'));
    
    // Step 4 - show the modal
    //-----------------------------------------------
    
    $(modal).modal({ show: true; });
});
</script>

as you see, i have added the code, still nothing happens on the modal :/

This is the code on a file that i include (PAGE_work1.php)... the page on ROOT is called (work.php) and is the main file, this is the code, if it helps:

<?php
ob_start();
session_start();
define("DEFINED_FILE:DEFINES_1", TRUE);
require_once("include/files/www-files/random_uncategorized_useful_files/defines.php"); // Defines
require_once("include/files/www-files/random_uncategorized_useful_files/report_methods.php"); // Reportings
require_once("database/connection.php");
DB_open_main_connection(); // $dblink
DB_open_another_connection("dblink_1", "localhost", "rooted", "xXx_oh", "xXx_Youty", "UTF8"); // $dblink_1

# List of Queries
// $query_1 = ROOT/include/files/www-files/carousel_1.php (images & pictures)
?>
<!DOCTYPE html>
<html lang="da">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Vores Arbejde</title>
    
    <!-- Bootstrap V.4.0.0 CSS files -->
    <link rel="stylesheet" href="include/css/bootstrap.min.css" />
    
    <!-- My Custom CSS Files -->
    <link rel="stylesheet" href="include/css/2.css" />
    <link rel="stylesheet" href="include/css/navigation_menu_2.css" />
    
    <!-- other css files -->
    <link rel="stylesheet" href="include/css/fontawesome-all.min.css">
    
    <!-- Jquery (necessary for Bootstrap's JavaScript plugins) and Bootstrap V.4.0.0 JS Script files -->
    <script src="include/js/jquery-3.2.1.js"></script>
    <script src="include/js/bootstrap.min.js"></script>
    <script src="include/js/bootstrap.bundle.js"></script>
    <script src="include/js/2.js"></script>
</head>
<body>
    
    <?php
    # Require Navigation Menu
    require_once("include/files/www-files/nav-menu.php");
    
    # Including PAGE_work1.php
    include_once("include/files/www-files/PAGE_work1.php");
    ?>
    
    <div class="mt-3"></div>
    <?php
    # Require Footer
    require_once("include/files/www-files/footer.php");
    
    // close connection
    $dblink->close(); // MAIN Connection
    // close connection
    $dblink_1->close(); // Another Connection
    ?>
    
</body>
</html>

as you see, nothing should be wrong :/

ideas?

[dsonesuk]

I think you should concentrate on getting a bootstrap modal to work first, once you got that working you will know what is required to function correctly, I've looked at bootstrap modal, and it not exactly how you have it. I'm not going to reinvent something that works if done right!

[rootKID]

hmm... i am using bootstrap 4, looks the same to me, or just about anyways.. not sure how else to controle it :/

[rootKID]

funny thing, tried to add your code and in the iframe src, it says "src(unknown)"... it's like it dosen't get the data.

Is it possible i need to set the script somewhere else on the page?

[dsonesuk]

IS

$video_link = $row_1['video_link'];

a whole link to youtube file such as ' https://www.youtube.com/embed/tgbNymZ7vqY'

OR just

'tgbNymZ7vqY'

The way the image src is set up, it should be the later without quotes. Now for a test do this

while( $row_1 = mysqli_fetch_array($result_1) ) {
                            $video_id = $row_1['video_id'];
                            $video_title = $row_1['video_title'];
                            $video_link = $row_1['video_link'];
                            $video_director = $row_1['video_director'];
                            $video_text = $row_1['video_text'];
                            ?>
$video_link = "tgbNymZ7vqY";

All the images should be the same and when you click them it should retrieve the data-videoID (show the movie of muppets singing Bohemian Rhapsody),.

if it works then the data from database table is not correct or not being retrieved. the movie on mine using your html is hiding in background, so i don't know what's going on. That's why I suggested you produce the result you require all in html, nothing dynamically using php with two youtube movies only. Once the correct layout, and the modal appears as it should, you can transfer the working example to the php page, knowing everything is working as it should, and you just have repeat the single layout for image, title description etc.

[rootKID]

it is like this:

Aml0d-e6czg

okay will try on a normal html page. But i assume even if i try on a normal html/php page, the <script> code would be the same correct? Just to see if it actually acts dynamically

And sorry for me being stupid... still not sure how to work on the jQuery hahaha

But will try and if it won't work ill post either here or making a new thread tomorrow

[rootKID]

in case you wanna see a live version, this is the website i'm currently working on (DEMO VERSION)

https://callbackcasting.dk/demo/work.php

if you can see something that i cannot, please tell

Will write to you in the morning if i got something

thanks for getting me this far.. talk tomorrow

[dsonesuk]

using text() is your problem! using it on a void element returns "", it requires a container element such as div or span 

<div> .text() can read this <span> and including this</span> as well as this</div>

So remove it completely

var INSERTDATA_modalTitle = $(this).find('a.thumb').attr('title').text();

[rootKID]

i have done now, still won't work :/

This is driving me nuts -.-'...

tried to add the text after we spoke, just to see if anything... and i got nada

 

[dsonesuk]

remove semi-colon

$(modal).modal({show: true; });

to

$(modal).modal({show: true });

[rootKID]

SWEET MOTHER OF GOD! IT'S ALIVE!

Thanks!

One last question tho... whenever i close the modal, it won't stop playing unless i re-enter the modal... possible to stop the play on close? Also how to auto-play on modal showing?

Thanks a lot!

[dsonesuk]

Been looking up in that, the only way is to reset the src again with same movie code, whenever the modal close button is clicked OR the modal class element is clicked, but you have to take into account of bubbling as clicking anywhere inside modal element (container header footer, and movie itself) will trigger it as well, so you need to test on what the event.target (the modal class element is what to check for) is with if condition, before resetting.

Edited March 6, 2018 by dsonesuk