0

I am looking for some help with merging two jquery scripts. Both attached examples are working with basic functionality, but I do not have enough experience in order to combine them into one script. What I would like to achieve is that a message dialog from attached code B would replace window.alert(str); from code A.

I think that function renaming will be required, but have no idea how to copy/adopt it.

Please find attached both codes examples bellow.

Code 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. [email protected]" ); 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="[email protected]" 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>

Code B - also working jquery dialog that I would like to copy into 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>

I have no more than two days experience with js/jquery so any help is most welcome.

Thanks in advance...

Improve this question

2 Answers 2

Reset to default
3

I would consider creating your own function instead of alert(). Consider the following:

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"; } } }); }

You can then replace window.alert(str) with alertDiag(str). This should create and launch the dialog. Since you're changing the location and loading a new page, closing the dialog is not needed.

alertDiag() will accept c as the HTML Content. Optionally, it will accept t as the Title. If you have a specific title you want to use, it is done like so:

alert(str, "Usuwanie produktu");

If no t is defined, it will simply say "Alert". You can change this to your preferred default.

Update

You can also increase the functions ability. Consider the following:

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); } } }); }

Then use like:

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

Example: https://jsfiddle.net/Twisty/pnowcdrg/

Hope this helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Your solution is perfect. This is what I needed. Thank you for your help.
I thought of something similar, but you were first... :). Thank you for your update.
0

Twisty provided ideal solution. The following function has been added to the script:

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"; } } }); }

and the way that dialog has been called has been changed from this:

window.alert(str);

to this:

alertDiag(str, "Usuwanie produktu");

Many thanks Twisty for your help.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.