BootstrapDialog Alert в контроллере Codeigniter

Я хочу использовать предупреждение bootstrapDialog ( https://nakupanda.github.io/bootstrap3-dialog/) вместо стандартного окна оповещения браузера в моем контроллере, но оно не работает.

Я включил эти скрипты, которые я получил из папки github dist в нижней части окна

<link rel="stylesheet" href="assets/css/bootstrap-dialog.min.css" />
<script src="assets/js/bootstrap-dialog.min.js"></script>

контроллер

function student(){

  if ($student_status == 'paid'){
    echo '<script type="text/javascript">';
    echo 'BootstrapDialog.alert('Your Registration was successful')';
    echo '</script>';
  }
 else {
    //  redirect url
  }
}

Я также попытался отобразить файлы css и js в контроллере, но не смог. Если я отображаю стандартное окно оповещений, оно работает, пожалуйста, что я могу сделать не так?

4 ответа

Решение

Диалог начальной загрузки построен на Bootstrap, поэтому вы должны включить начальной загрузки css и начальной загрузки js, а затем bootstrapDialog css и js

 <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

http://jsfiddle.net/mreis1/YJdB7/1/

Например

Посмотреть:

<!DOCTYPE html>
<html>
<head>

  <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>

  <title>Bootstrap Dialog Test</title>
</head>

<body>
<!-- IF SUCCESSFUL -->
<?php $alert= ''; ?>
<?php   if ($alert == 'success'): ?>

<script type = "text/javascript">
BootstrapDialog.alert('Your Registration was Successful');
</script>

<?php endif; ?>

<!-- IF FAILED -->

<?php   if($alert == 'failed'): ?>

<script type = "text/javascript">
BootstrapDialog.alert({
            title: 'An Error Occured',
            message: 'Your Registration failed',
            type: BootstrapDialog.TYPE_DANGER,
            buttonLabel: 'Close'

        });

</script>
<?php endif; ?>

</body>
</html>

контроллер:

function student(){

  if ($student_status == 'paid'){
    $data['alert'] = 'success';
  }
 else {
    $data['alert'] = 'failed';
  }
  $this->load->view(view_page, $data);
}

Выход:

Оповещение об успехе

Ошибка оповещения

первое - у вас есть ошибки:

  • вам нужно избегать ваших одинарных кавычек предупреждения:

    echo 'BootstrapDialog.alert(\'Your Registration was successful\')';
    

    или вы можете использовать сочетание одинарных и двойных кавычек, таких как:

    echo 'BootstrapDialog.alert("Your Registration was successful")';
    
  • вам также может понадобиться загрузить ваш скрипт и CSS с косой чертой, например:

    <link rel="stylesheet" href="/assets/css/bootstrap-dialog.min.css" />
    <script src="/assets/js/bootstrap-dialog.min.js"></script>
    
  • вы загружаете свою таблицу стилей как скрипт, <script src="assets/css/bootstrap-dialog.min.css"></script>; неверно, используйте <link rel="stylesheet" href="your.css">

во-вторых, смешивать javascript и php так, как вы это делаете, не очень хорошая идея; вы не можете вызывать функцию jquery из php, вы можете генерировать только html, который затем выполняется во время выполнения. Это будет работать:

  if ($student_status == 'paid'){
    $str='  <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
           <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
           <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
           <script type="text/javascript">
               setTimeout(function() { 
                  BootstrapDialog.alert(\'Your Registration was successful\') 
               },10);
           </script>';
    echo $str;
  }

Обратите внимание setTimout() функции, нужно дать немного времени, чтобы убедиться, что все ваши файлы загружены.

третий - правильный способ использовать вместо этого ajax: см. документацию:

  • JQuery AJAX вызывает ваш студент функции PHP.

  • Функция Student возвращает true или false.

  • В обратном вызове ajax success вы добавляете свой bootstrapDialog.alert
echo "BootstrapDialog.alert('Your Registration was successful')" 

Вы должны либо избегать кавычек, либо использовать двойные кавычки.

Попробуйте этот код

<link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap-dialog.min.css" />
<script src="<?php echo base_url();?>assets/js/bootstrap-dialog.min.js"></script>
Другие вопросы по тегам