Ajax page load with get parameter in Laravel 5.6 - development

Ajax page load with get parameter in Laravel 5.6

I am new laravel learner. I started a small project for my personal website. I am facing a problem. First i am giving my source code
Route:

Route::get('/p/{id}','mainController@portfolio');

Controller method:

public function portfolio($id)
{

    $project = PortItems::where('id',$id)->first();

    return view('kafi.p',['project' => $project]);
}

Link to Ajax File:

@foreach($projects as $project)

                    <figure class="item" data-groups='["all"]'>
                      <a class="ajax-page-load" href="">
                        <img src="" alt="">
                        <div>
                          <h5 class="name"></h5>
                          <small></small>
                          <i class="pe-7s-icon pe-7s-display2"></i>
                        </div>
                      </a>
                    </figure>

                    @endforeach

Blade File (p.blade.php):

<div id="ajax-page" class="ajax-page-content">
    <div class="ajax-page-wrapper">
        <div class="ajax-page-nav">
            <div class="nav-item ajax-page-prev-next">
                <a class="ajax-page-load" href="portfolio-5.html"><i class="pe-7s-icon pe-7s-angle-left"></i></a>
                <a class="ajax-page-load" href="#"><i class="pe-7s-icon pe-7s-angle-right"></i></a>
            </div>
            <div class="nav-item ajax-page-close-button">
                <a id="ajax-page-close-button" href="#"><i class="pe-7s-icon pe-7s-close"></i></a>
            </div>
        </div>

        <div class="ajax-page-title">
            <h1></h1>
        </div>

        <div class="row">
            <div class="col-sm-7 col-md-7 portfolio-block">
                <div class="owl-carousel portfolio-page-carousel">
                    <div class="item">
                        <img src="" alt="">
                    </div>
                    <div class="item">
                        <img src="" alt="">
                    </div>
                    <div class="item">
                        <img src="" alt="">
                    </div>
                </div>

                <script type="text/javascript">
                    function customAjaxScroll() {
                        var windowWidth = $(window).width();
                        if (windowWidth > 991) {
                            // Custom Ajax Page Scroll
                            $("#ajax-page").mCustomScrollbar({
                                scrollInertia: 8,
                                documentTouchScroll: false
                            });
                        } else {
                            $("#ajax-page").mCustomScrollbar('destroy');
                        }
                    }

                    jQuery(document).ready(function($){

                        // Ajax Loaded Page Scroll
                        customAjaxScroll();


                        $('.portfolio-page-carousel').owlCarousel({
                            smartSpeed:1200,
                            items: 1,
                            loop: true,
                            dots: true,
                            nav: true,
                            navText: false,
                            margin: 10
                        });

                    });

                    jQuery(window).on('resize', function() {
                        customAjaxScroll();
                    });
                </script>
            </div>

            <div class="col-sm-5 col-md-5 portfolio-block">
                <!-- project Description -->
                <div class="block-title">
                    <h3>Description</h3>
                </div>
                <ul class="project-general-info">
                    <li><p><i class="fa fa-user"></i> </p></li>
                    <li><p><i class="fa fa-globe"></i> <a href="" target="_blank"></a></p></li>
                    <li><p><i class="fa fa-calendar"></i> </p></li>
                </ul>

                <p class="text-justify"></p>
                <!-- /project Description -->

                <!-- Technology -->
                <div class="tags-block">
                    <div class="block-title">
                        <h3>Technology</h3>
                    </div>
                    <ul class="tags">
                        @foreach (explode(', ', $project->usedCodes) as $usedCodes)
                        <li><a></a></li>
                        @endforeach
                    </ul>
                </div>
                <!-- /Technology -->

                <!-- Share Buttons -->
                <div class="btn-group share-buttons">
                    <div class="block-title">
                        <h3>Share</h3>
                    </div>
                    <a href="#" target="_blank" class="btn"><i class="fa fa-facebook"></i> </a>
                    <a href="#" target="_blank" class="btn"><i class="fa fa-twitter"></i> </a>
                    <a href="#" target="_blank" class="btn"><i class="fa fa-dribbble"></i> </a>
                </div>
                <!-- /Share Buttons -->
            </div>
        </div>
    </div>
</div>

and here is my problem: http://ccnboalmari.com/test/#portfolio

I sent get parameter (id) from database correctly. but when I’m trying to open 2nd content or third, it shows only first id’s content. Sorry for my bad English.

thanks in advance.

from Laravel Questions and Answers https://laravelquestions.com/php/ajax-page-load-with-get-parameter-in-laravel-5-6/
via Lzo Media