How to run Custom Javascript code in specific page of codeigniter?-CodePudding

I have Model Box which I want to open on a specific page of the codeigniter page (How it work).

In My View, the following code is for the model box:

<!-- Model -->
<div  id="how_its_modal" role="dialog" style="display: none;">
    <div >
        <!-- Modal content-->
        <div >
            <div >
                
                <h4 >How Its Work Video</h4>
            </div>
            <div >
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/DIx_xxxxx">
                </iframe>
            </div>
            <div >
                <button type="button"  data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<?php
    $custom_js = "$('#how_its_modal').modal('show');";
    //$custom_js = "This is okay";
?>

In my Controller, the following code:

public function privacy_policy()
    {
        $this->load->view('header');
        $this->load->view('privacy-policy');
        $this->load->view('footer');
    }
    public function help_center()
    {
        $this->load->view('header');
        $this->load->view('help-center');
        $this->load->view('footer');
    }
    public function how_it_works()
    {
        $this->load->view('header');
        $this->load->view('how-it-works');
        $this->load->view('footer', ['custom_js' => $custom_js]);
    }
    public function mart()
    {
        $this->load->view('header');
        $this->load->view('mart');
        $this->load->view('footer');
    }

So here I have multiple pages. So now I want to run the following code in only the how_it_works function means on the page How it Works.

<script>
    $('#how_its_modal').modal('show')
</script>

My Footer Code

<script src="<?php echo SITE_PATH; ?>/front/js/jquery.min.js"></script>
<script src="<?php echo SITE_PATH; ?>/front/js/bootstrap.min.js"></script>
<script src="<?php echo SITE_PATH; ?>/front/js/bootstrap.bundle.min.js"></script>
<script src="<?php echo SITE_PATH; ?>/front/js/owl.carousel.min.js"></script>
<script src="<?php echo SITE_PATH; ?>/front/js/aos.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.16.0/sweetalert2.min.js" type="text/javascript"></script>
<?php echo $custom_js; ?>
<?php if(isset($custom_js)) { ?>
    <script><?php echo $custom_js; ?></script>
<?php }else{
    echo "Nothing Run";
} ?>

I can not put this script in the footer because if I will put then it will run on all pages which I do not want.

CodePudding user response：

Best practice would be to define $custom_js in the controller and then pass it to the footer:

  public function how_it_works()
  {
    $custom_js = <<<'CUSTOM_JS'
      $('#how_its_modal').modal('show');
    CUSTOM_JS;
    
    $this->load->view('header');
    $this->load->view('how-it-works');
    $this->load->view('footer', ['custom_js' => $custom_js]);
  }

If you'd rather set $custom_js in the modal view and use it in footer, you can do so like this:

<!-- Model -->
<div  id="how_its_modal" role="dialog" style="display: none;">
    <div >
        <!-- Modal content-->
        <div >
            <div >
                
                <h4 >How Its Work Video</h4>
            </div>
            <div >
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/DIx_xxxxx">
                </iframe>
            </div>
            <div >
                <button type="button"  data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<?php
    $this->load->vars(array('custom_js'=>"$('#how_its_modal').modal('show');"));
    //$custom_js = "This is okay";
?>

And then there's no need to define it in the controller anymore:

public function how_it_works()
{
    $this->load->view('header');
    $this->load->view('how-it-works');
    $this->load->view('footer');
}

CodePudding user response：

Why you not try to put your script modal inside your page how-it-works? then move your jquery to header. easy, but it's better you make one view for modal so you have.

$this->load->view('header');
$this->load->view('help-center');
$this->load->view('footer');
$this->load->view('modal');