Solved

JQeuery confirm modal on confirmation closure does not replace orginal html content with confirmation html content

Posted on 2016-09-12
15
50 Views
Last Modified: 2016-09-15
Hello all,

I'm very new to jquery/ajax, so my inexperience is clearly showing here.

I've installed jquery-confirm; http://craftpip.github.io/jquery-confirm/ into my required php page and the confirm model is firing fine :) - successfully calling the confirmed page, as I get the required confirmation email - but the confirmation html output does not replace the page underneath the confirm modal when the modal closes, even though firebug shows the html is being generated and me receiving the confirmation email.

    var bootstrap_confirm_delete = function ( element, options )
    {
        this.element = $( element );
        this.settings = $.extend(
            {
                debug: false,
                heading: 'Delete',
                message: 'Are you sure you want to delete this item?',
                data_crud: null,
                data_type: null,
                data_mess: null,
                callback: null,
                delete_callback: null,
                cancel_callback: null,
                container: 'showdata'
            }, options || {}
        );

On clicking confirmation, I need the confirmation text the appear in; echo '<div id="showdata"></div>'

Any help is greatly appreciated.

Many thanks

Jamie
0
Comment
Question by:Jamie
  • 8
  • 7
15 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Please post a link or more of your code - not enough here to work on a solution.
0
 

Author Comment

by:Jamie
Comment Utility
Hello Julian,

Many thanks for your reply - apologies for my  delay in replying and not including a link to my test pages;

http://testing.village6675.co.uk/testconfirm.php

Regards

Jamie
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
The library you are using is for confirming the delete of something - the code that fires when you click Book is from this library utils/confirm-delete/bootstrap-confirmit.js and is shown below.

Firstly, it is doing a DELETE request to the server - rather than a POST - still works but semantically it is not correct.

Secondly look at the success function (Lines: 14-16) - all it is doing is trying to remove the closest row of a table to the button clicked. Which in the context of your application does nothing.

Before going any further can you explain exactly what you need to do - I think you are using the wrong tool for the job here - if I know more about what you want to do I can provide more input.

    $( '.delete-user-row-with-ajax-button' ).bootstrap_confirm_delete(
        {
            callback: function( event )
            {
            
            var link = event.data.originalObject;
            
                $.ajax(
                {
                    url: link.attr('href'),
                    type: 'DELETE',
                    success: function( result )
                    {
                        var button = event.data.originalObject;

                        button.closest( 'tr' ).remove();
                    }
                } );
            }
        }

Open in new window

0
 

Author Comment

by:Jamie
Comment Utility
Hi Julian,

Oh dear, my lack of knowledge is clearly showing here - I tried to adapt the script to suit my needs, but as you say, the script was never intended for the purpose I'm trying to us it for.

I'm looking for a jquery confirm modal script, that works, in look and feel exactingly like my test page does - and also allows me to pass parameters to  it, so I can customise what text is displayed in  the model via php - and on pressing;

1. Cancel or any space around it - close modal, but do nothing else.

2. Confirm - close model, fire another specified php page, process the page and display the html output of that page to
echo '<div id="showdata"></div>'

Open in new window


Many thanks for your help with this.

Regards

Jamie
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You don't need a plugin for that - bootstrap has all you need. I am still not clear though on what you want to do.

I get the part where you click the link. This opens the modal and displays a book / cancel and a custom message.

When you click Book that does an AJAX DELETE to confirmemail.php - but with no parameters.
The confirmemail.php sends back a string
!!!!!!!!!!!!!!!!!!!!!!Confirmed - Email Sent!!!!!!!!!!!!!!!!!!!!!!

Open in new window

Which I am assuming you want to do something with - what do you want to do with the above.
0
 

Author Comment

by:Jamie
Comment Utility
Hi Julian,

I'm looking to use this confirm modal in a number of my pages, so the link I provided was a generic example as I'm fine with passing parameters and the called page php code.

But, as you say, in my example, it only displays a message - below is the code I intend to use in my project - but I thought this may cloud my issues further?

$crudtypemess = "Appointment with Jamie<br />" . $_SESSION["atcservtext"] . ' on<br />' . $whatdaytext . ' @ ' . date("g:ia",$showbooktime);

If ($daycolorcode == "A") {
echo '<div class="col-xs-12 col-sm-3 col-md-2">';
echo '<a id="day-time" class="day-time delete-user-row-with-ajax-button" data-crud="book" data-type="appointment" data-mess="' . $crudtypemess . '" style="background-color: ' . $daycolor . '" href="247bookslot.php?slot=' . $whatslotday . "@" . date("H:i",$showbooktime) . '">';
echo '<div class="shadow">';
echo '<span>';
echo "Jamie @<br />" . date("g:i a",$showbooktime);
echo '</span>';
echo '</div>';
echo '</a>';
echo '</div>';
$whatrec = $whatrec + 1;
}

Open in new window


I was looking for 1 modal script, which would allow me to;

1. Act as a confimation prompt and redirect on confirm to another page, with it's content outputted in a specified tag.

2. Act as a conform prompt for a row delete action.

Many thanks

Jamie
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
Act as a confimation prompt and redirect on confirm to another page, with it's content outputted in a specified tag.
That is the bit I am puzzled about.
You can redirect with JavaScript - but you cannot set the content on the redirected page - that would have to be done by the page itself.

In other words - you can do the confirm, redirect - but the page you redirect to will have to be responsible for showing the message. You can pass that as a parameter in the URL if necessary but you can't set it with JavaScript.

I would simply redirect to a PHP confirmation page that displays the message so in your success
$.ajax({
...

}).done(function(resp) {
   // assumes resp is URL to redirect to
  window.location = resp;
});

Open in new window

I can put sample code together but need to understand the requirement a bit more. Confirmation - fine, redirect and message - need clarification in light of above.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:Jamie
Comment Utility
Hi Julian,

Your understanding is correct;

1. The parameters I set in javascript, e.g below are what I use to customise the message that appears in the modal popup;

echo '<a id="day-time" class="day-time delete-user-row-with-ajax-button" data-crud="book" data-type="appointment" data-mess="' . $crudtypemess . '" style="background-color: ' . $daycolor . '" href="247bookslot.php?slot=' . $whatslotday . "@" . date("H:i",$showbooktime) . '">';

Open in new window


2. Totally understand can only pass parameter(s) to the redirected page via URL and not javascript. I'm fine with this and this doesn't cause me any problems.

Can code be added to the existing modal script I use, as it's look/feel is perfect for my needs - or will I need a totally new script?

Many thanks

Regards

Jamie
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
You can add to it - but that is effectively rewriting it - there is not much there.

What you can do is
1. Change the TYPE in the AJAX call from DELETE to POST
2. In the success function do your redirect - remove the code
var button = event.data.originalObject;
button.closest( 'tr' ).remove();

Open in new window

And add your redirect
That's pretty much it

Here is a quick and dirty I knocked together
The plugin
(function() {
  var template = '<div class="modal fade" tabindex="-1" role="dialog" style="display: none" id="template">' +
                   '<div class="modal-dialog" role="document">' +
                     '<div class="modal-content">' +
                       '<div class="modal-header">' +
                         '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' +
                           '<span aria-hidden="true">&times;</span>' +
                         '</button>' +
                         '<h4 class="modal-title"></h4>' +
                       '</div>' +
                       '<div class="modal-body"></div>' +
                       '<div class="modal-footer">' +
                         '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>' +
                         '<button type="button" class="btn btn-primary action"></button>' +
                       '</div>' +
                     '</div>' +
                   '</div>' +
                 '</div>';

  jQuery.fn.confirmDialog = function(settings) {
    var self = this;
    var dialog = $(template);
    var config = {
      title: 'The Title',
      content: 'The Content',
      action: 'Ok',
      callback: function() {
        alert("Don't touch me");
      }
    }
    $.extend(config, settings);
    $(this).each(function(i,e) {
      $(e).on('click', function(e) {
        e.preventDefault();
        self.show();
      });
    });
    
    self.show = function() {
      $('.modal-title', dialog).html(config.title);
      $('.modal-body', dialog).html(config.content);
      $('.action', dialog)
        .html(config.action)
        .click(function() {
        config.callback();
        self.remove();
      });
      dialog.modal('show');
    }
    
    self.remove = function() {
      dialog.modal('hide');
    }
  };
})(jQuery);

Open in new window

The HTML to invoke it
<button class="btn btn-default mybutton">Test1</button>

Open in new window

This is the jQuery for configuring it
$(function() {
  $('.mybutton').confirmDialog({
    content: 'This is the content',
    action: 'Book',
    callback: function() {
      console.log('This is what I want to do when it closes!') 
    }
  });
});

Open in new window

Working sample here
0
 

Author Comment

by:Jamie
Comment Utility
Hi Julian,

Many thanks for your reply and working sample, very useful and helps me greatly.

In regard to the original script;

1. Change the TYPE in the AJAX call from DELETE to POST  - this I understand :)

2. In the success function do your redirect - remove the code

I understand the code removal, but not the redirect, as the confirm action already does this, but the resulting html is not showing;

            callback: function( event )
            {
            
            var link = event.data.originalObject;
            
                $.ajax(
                {
                    url: link.attr('href'),
                    type: 'POST',
                    success: function( result )
                    {
                    $("#showdata").html(result);  
                    }
                } );
            }

Open in new window


Clearly I'm still doing something wrong.

Regards

Jamie
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
but not the redirect, as the confirm action already does this
Where is the redirect in the code - can you show me that?

Where is #showdata defined?
0
 

Author Comment

by:Jamie
Comment Utility
Hi Julian,

Apologies, I started looking at this at 5:00am this morning and was working on a different test directory but mistake, I've updated the correct directory now;

http://testing.village6675.co.uk/utils/confirm-delete/bootstrap-confirmit.js - the redirect code is here, but I suspect I've done it totally wrong?!

http://testing.village6675.co.uk/testconfirm.php - has the showdata tag in it.

Regards

Jamie
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
I am not seeing any redirect code and when I click book on that second link the text is changing - so I am confused.Screenshot
0
 

Author Closing Comment

by:Jamie
Comment Utility
Hi Julian,

All sorted and working now! As you said, the test page was all sorted, with a coding error on my other page, which your thoughts and comments guided me to.

I would never have been able to get this to work without all your hard work,  dedication, perseverance and patience - it is very much appreciated.

I have learned a great deal from this experience - in particular, that I ensure that my test environment is setup and maintained correctly, as this caused confusion all around.  

Many, many thanks

Best regards

Jamie
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are most welcome, Jamie.
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now