Show a custom prompt dialog box using jQuery in php

Hi,

I want to display a custom confirmation prompt dialog box instead of the regular jQuery confirmation prompt dialog box. My current code is below.

The below is the html code used in the php file:
<button type="submit"  name="submit" class="delete" style="margin-left: 20px;">Delete</button>

Open in new window


When I click that button it displays the regular jQuery confirmation dialog box screenshot attached, for that I am using the below jQuery code:
$("button.delete").click(function(e){
        if(!confirm('Are you sure? (Once deleted the record cannot be Retreived)')){
            e.preventDefault();
            return false;
        }
        return true;
    });

Open in new window


Default Prompt box
Now instead of using the regular prompt box I want to display a custom prompt box, in which it will display custom text defined by me, and two buttons on pressing one will submit the page and on pressing the other will just close the dialog box and do nothing. Kindly help with the Jquery code for the same, as I have very less idea about jQuery.

Kindly let me know if any more information is required.

Regards,
Vipin
LVL 1
Vipin KumarSr. Network EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Have you had a look at the JQueryUI dialog? (http://jqueryui.com/dialog/)

It has what you need.

If you are interested in doing your own then post back and I will post some code to demonstrate how to create a popup dialog in JQuery
0
Vipin KumarSr. Network EngineerAuthor Commented:
Hi Julian,

I am intrested in doing my own, kindly post code through which I can achieve the result.

Thanks
0
Julian HansenCommented:
Do you want a dialog that just displays a message or one that activates a callback depending on what button is pressed?
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

Vipin KumarSr. Network EngineerAuthor Commented:
I want a dialog box which will display a warning that if Do you want to delete the ticket permanently and then it will have two buttons say yes and no. If yes is pressed then delete button is submitted and rest action follows as per the PHP code, if no is pressed then nothing must happen and dialog box must close.
0
Julian HansenCommented:
Here is some sample code (working version here http://www.marcorpsa.com/ee/t763.html)
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
.overlay {
  background: rgba(0,0,0,.75);
  left: 0;
  top: 0;
  position: absolute;
  width: 100%;
  z-index: 10000;
}
.dialog {
  position: absolute;
  max-width: 50%;
  min-width: 25%;
  left: -999px;
  z-index: 10001;
}

</style>
</head>
<body>
<div class="row">
  <div class="col-sm-6"><a href="#" data-title="Title #1">This is a dialog test</a></div>
  <div class="col-sm-6"><a href="#" data-title="Title #2">This is another dialog test</a></div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$(function() {
  $('a').click(function(e) {
    e.preventDefault();
    popup($(this).html(), $(this).data('title'));
  });
});
function popup(prompt, title)
{
  // CREATE THE BACKGROUND OVERLAY
  var overlay = $('<div/>').addClass('overlay').height($(document).height());
  $('body').append(overlay);
  
  // CREATE THE DIALOG

//  var popup = $('<div/>').addClass('dialog')
  
  var popup = $('<div/>').addClass('panel panel-default dialog');
  var title = $('<div/>').addClass('panel-heading').html(title);
  var body = $('<div/>').addClass('panel-body').html(prompt);
  var footer = $('<div/>').addClass('panel-footer text-right');
  
  // ADD THE BUTTONS
  var buttons = $('<div/>').addClass('row text-right');
  var okButton = $('<button/>').addClass('btn btn-primary dialog-button').html("Ok");
  var cancelButton = $('<button/>').addClass('btn btn-danger dialog-button').html("Cancel");
  buttons.append(cancelButton).append(okButton);
  footer.append(buttons);
  
  popup.append(title).append(body).append(footer);

  $('body').append(popup);

  // POSITION THE DIALOG
  var top = (($(window).height() - popup.outerHeight()) >> 1) + $(window).scrollTop();
  var left = ($(window).width() - popup.outerWidth() >> 1);
  popup.css({top: top + 'px', left: left + 'px'});
  
  // ADD EVENT HANDLERS FOR THE BUTTONS
  $(popup).on('click','.dialog-button', function(e) {
    if ($(this).hasClass('btn-primary')) {
      alert('HANDLE OK EVENT HERE');
    }
    popup.remove();
    $('.overlay').remove();
  });
}
</script>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Vipin KumarSr. Network EngineerAuthor Commented:
Hi Julian,

As I can check when I click the OK button, it shows an alert as HANDLE OK EVENT HERE. As I am poor with jQuery, can u tell me what should I enter here instead of the alert so that it processes my submit button and execute the php code.

I hope i have cleared my self. If not then let me know what else you require.
0
Julian HansenCommented:
You need to put the code that will do whatever you were asking the user about - based on your initial post I am assuming that is the code to delete a record. However, in your original post you did not post any code other than the alert so without knowing more about your application I cannot say how you should implement what you want to do.

In a nutshell though, where you see the alert HANDLE EVENT HERE - replace that with the javascript / jquery code you want to execute if the user click's Ok on the dialog button.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.