Как заменить window.alert ('') на диалоговое окно jQuery UI - объединение двух скриптов - PullRequest
Новая
       18

Как заменить window.alert ('') на диалоговое окно jQuery UI - объединение двух скриптов

0 голосов
/ 02 февраля 2019

Мне нужна помощь в объединении двух скриптов jquery.Оба прилагаемых примера работают с основными функциями, но у меня недостаточно опыта, чтобы объединить их в один скрипт.Я хотел бы добиться, чтобы диалоговое окно сообщения из присоединенного кода B заменило window.alert (str);из кода A.

Я думаю, что потребуется переименование функции, но не знаю, как ее скопировать / принять.

Ниже приведены примеры обоих кодов.

Код A 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<link rel="stylesheet" href="css/login.css">
<script src="js/produkty.js" defer></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  $( function() {
    var dialog, form,

      emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
      name = $( "#name" ),
      email = $( "#email" ),
      password = $( "#password" ),
      allFields = $( [] ).add( name ).add( email ).add( password ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
      tips
        .text( t )
        .addClass( "ui-state-highlight" );
      setTimeout(function() {
        tips.removeClass( "ui-state-highlight", 1500 );
      }, 500 );
    }

    function checkLength( o, n, min, max ) {
      if ( o.val().length > max || o.val().length < min ) {
        o.addClass( "ui-state-error" );
        updateTips( "Length of " + n + " must be between " +
          min + " and " + max + "." );
        return false;
      } else {
        return true;
      }
    }

    function checkRegexp( o, regexp, n ) {
      if ( !( regexp.test( o.val() ) ) ) {
        o.addClass( "ui-state-error" );
        updateTips( n );
        return false;
      } else {
        return true;
      }
    }

    function addUser() {
      var valid = true;
      allFields.removeClass( "ui-state-error" );

      valid = valid && checkLength( name, "username", 3, 16 );
      valid = valid && checkLength( email, "email", 6, 80 );
      valid = valid && checkLength( password, "password", 5, 16 );

      valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
      valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
      valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

      if ( valid ) {

            $.ajax({
                method: "POST",
                url: "registerEngine.php",
                data: {"name": name.val(), "email": email.val(), "password": password.val()},
             }).done(function( data ) {
                var result = $.parseJSON(data);

                var str = '';
                if(result == 1) {
                        str = 'Nowe konto zarejestrowane prawidłowo.';
                        window.alert(str);
                        window.location.href = "login.php";

                }else if( result == 2) {
                        str == 'Wymagane jest wypełnienie wszystkich pól.';
                        window.alert(str);
                        window.location.href = "register.php";
                } else{
                        str = 'Błąd rejestracji danych. Spróbuj ponownie.';
                        window.alert(str);
                        window.location.href = "register.php";
                }
          });

        dialog.dialog( "close" );

      }
      return valid;
    }

    dialog = $( "#dialog-form" ).dialog({
      autoOpen: true,
      height: 400,
      width: 350,
      modal: true,
      buttons: {
        "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
          window.location.href = "index.php";
        }
      },
      close: function() {
        form[ 0 ].reset();
        allFields.removeClass( "ui-state-error" );
      }
    });

    form = dialog.find( "form" ).on( "submit", function( event ) {
      event.preventDefault();
      addUser();
    });

  } );
</script>

<title>Jadłospis - Logowanie</title>
</head>
<body>

<div id="dialog-form" title="Create new user">
  <p class="validateTips">All form fields are required.</p>

  <form>
    <fieldset>
      <label for="name">Name</label>
      <input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
      <label for="email">Email</label>
      <input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
      <label for="password">Password</label>
      <input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">
      <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

</body>
</html>

Код B - также работает диалоговое окно jquery, которое я хотел бы скопировать в Coda A. 

<html>
<head>
<meta charset="utf-8" />

<title>Usuwanie produktu</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
$( function() {
        $( "#dialog-message" ).dialog({
                modal: true,
                buttons: {
                        Ok: function() {
                        $( this ).dialog( "close" );
                        window.location.href = "glowny.php?akcja=produkty";
                        }
                }
        });
        } );
</script>

</head>
<body>

<div id="dialog-message" title="Usuwanie produktu">
        <p>
                <span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
                Wybrany produkt został pomyślnie usunięty z bazy danych.
        </p>
        <p>
                Naciśnij OK aby kontynuować.
        </p>
</div>

</body>
</html>

У меня не более двух дней опыта работы с js / jquery, поэтомулюбая помощь приветствуется.

Заранее спасибо ...

Ответы [ 2 ]

0 голосов
/ 03 февраля 2019

Twisty предоставил идеальное решение.Следующая функция была добавлена ​​в сценарий: 

function alertDiag(c, t){
  if(t == undefined){
    t = "Alert";
  }
  var diag = $("<div>", {
    title: t
  }).html("<p>" + c + "</p>").dialog({
    modal: true,
    buttons: {
      Ok: function() {
        window.location.href = "glowny.php?akcja=produkty";
      }
    }
  });
}

, и способ вызова этого диалогового окна был изменен с: 

window.alert(str);

на этот: 

alertDiag(str, "Usuwanie produktu");

Большое спасибо Twisty за вашу помощь.

0 голосов
/ 03 февраля 2019

Я бы рассмотрел создание вашей собственной функции вместо alert().Рассмотрим следующее: 

function alertDiag(c, t){
  if(t == undefined){
    t = "Alert";
  }
  var diag = $("<div>", {
    title: t
  }).html("<p>" + c + "</p>").dialog({
    modal: true,
    buttons: {
      Ok: function() {
        window.location.href = "glowny.php?akcja=produkty";
      }
    }
  });
}

Затем можно заменить window.alert(str) на alertDiag(str).Это должно создать и запустить диалог.Поскольку вы меняете местоположение и загружаете новую страницу, закрывать диалоговое окно не нужно.

alertDiag() примет c в качестве содержимого HTML.По желанию, он примет t в качестве заголовка.Если у вас есть определенный заголовок, который вы хотите использовать, это делается так: 

alert(str, "Usuwanie produktu");

Если t не определено, он просто скажет «Предупреждение».Вы можете изменить его на предпочитаемый по умолчанию.

Обновление

Вы также можете увеличить возможности функций.Рассмотрим следующее: 

function goto(url){
  if(url === undefined || url === false){
    return false;
  }
  window.location.href = url;
}

function alertDiag(c, t, u){
  if(t === undefined){
    t = "Alert";
  }
  if(u === undefined){
    u = false;
  }
  var diag = $("<div>", {
    title: t
  }).html("<p>" + c + "</p>").dialog({
    modal: true,
    buttons: {
      Ok: function(){
        goto(u);
      }
    }
  });
}

Затем используйте как: 

alertDiag(str, title, "glowny.php?akcja=produkty");

Пример: https://jsfiddle.net/Twisty/pnowcdrg/

Надеюсь, это поможет.

...