Results 1 to 9 of 9

Thread: Bootstrap: how to use "Save Changes" in Modal?

  1. #1

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    Question Bootstrap: how to use "Save Changes" in Modal?

    I cannot find any example or my google-fu is weak, can anyone help me out?

    TIA
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  2. #2
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Bootstrap: how to use "Save Changes" in Modal?

    Quote Originally Posted by dee-u View Post
    I cannot find any example or my google-fu is weak, can anyone help me out?

    TIA
    I think you should give more details regarding your query. Because I didn't understood what you are asking about!

    Are you asking how to include a button named "Save Changes" in a modal window(component of Bootstrap FW) and upon pressing that button, the textboxes insides the modal window needs to be send to the server and thereby you could save the data?


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  3. #3

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    Re: Bootstrap: how to use "Save Changes" in Modal?

    I already have the "Save Changes" button but I don't know how it is going to call my "save.php" file so it can save the data upon clicking it. I tried combing the net for any samples but I failed.
    Code:
    <div class="modal-footer">
    	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    	<button type="button" class="btn btn-primary">Save changes</button>
    </div>
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  4. #4
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    Re: Bootstrap: how to use "Save Changes" in Modal?

    Okay.

    You could simply enclose the contents inside a <FORM> tag, mentioning the page to which the data should be posted.

    Eg:

    Code:
    <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <form action="save.php" method="post">
            <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">Modal title</h4>
            </div>
            <div class="modal-body">
    
              <!-- input elements here -->
              Username: <input type="text" name="username" value="" />
              Email: <input type="text" name="email" value="" />
              <!-- /input elements here -->
    
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" type="submit">Save changes</button>
            </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    This is untested code. Hope it will work. So what it does is, it would POST the form data to the "save.php" file upon clicking the button.

    If you wish to do it without refreshing the page, then you should think about using AJAX. You could use the shorthand methods of jQuery like $.post() or $.get() or something. But you need to write some javascript/jquery code to bind click event to that "Save Changes" button, take the values from input boxes, initiate the ajax, etc.


    If my post was helpful to you, then express your gratitude using Rate this Post.
    And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video)
    My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet

    Social Group: VBForums - Developers from India


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  5. #5
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Bootstrap: how to use "Save Changes" in Modal?

    A lot of this really depends on how you're drawing the dialog. Is it static on the page? If so, you could just bind to the save changes button.

    Is it dynamically drawn? Then you may need to add the event handler after it has been drawn.

    If you're interested, I have a wrapper a co-worker wrote you could use. It has some nice features in it (including being able to link to an external source), but I don't have any real documentation for it. I could give you an example, but I'm sure there would be lots of features I would leave out.

  6. #6

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    Re: Bootstrap: how to use "Save Changes" in Modal?

    Quote Originally Posted by akhileshbc View Post
    Okay.

    You could simply enclose the contents inside a <FORM> tag, mentioning the page to which the data should be posted.

    Eg:

    Code:
    <div class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <form action="save.php" method="post">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
              <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
    
              <!-- input elements here -->
              Username: <input type="text" name="username" value="" />
              Email: <input type="text" name="email" value="" />
              <!-- /input elements here -->
    
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" type="submit">Save changes</button>
            </div>
          </form>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    This is untested code. Hope it will work. So what it does is, it would POST the form data to the "save.php" file upon clicking the button.

    If you wish to do it without refreshing the page, then you should think about using AJAX. You could use the shorthand methods of jQuery like $.post() or $.get() or something. But you need to write some javascript/jquery code to bind click event to that "Save Changes" button, take the values from input boxes, initiate the ajax, etc.

    Thanks, that will do for now though it looks like a hack.
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  7. #7

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    Re: Bootstrap: how to use "Save Changes" in Modal?

    Quote Originally Posted by kfcSmitty View Post
    A lot of this really depends on how you're drawing the dialog. Is it static on the page? If so, you could just bind to the save changes button.

    Is it dynamically drawn? Then you may need to add the event handler after it has been drawn.

    If you're interested, I have a wrapper a co-worker wrote you could use. It has some nice features in it (including being able to link to an external source), but I don't have any real documentation for it. I could give you an example, but I'm sure there would be lots of features I would leave out.
    I would guess it is 'static' as it is already drawn on the page only that it is displayed upon clicking an element. I may want to see the wrapper you mentioned. Was it designed for this Bootstrap thingy?
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

  8. #8
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,248

    Re: Bootstrap: how to use "Save Changes" in Modal?

    Yeah, it's all done through bootstrap 3. It just draws a modal window to the bottom of the body and removes it when the window is closed.

    Here is the dialog code:

    Code:
    var ModalWindow = function (options) {
        "use strict";
    	this.contentLoaded = false;
        this.rootDiv = $('<div/>');
    	
    	if (options.CallBack === undefined || options.CallBack === null) {
            this.callBack = function () {};
        } else {
            this.callBack = options.CallBack;
        }
    	
    	if (options.Disposed === undefined || options.Disposed === null) {
            this.disposed = function () {};
        } else {
            this.disposed = options.Disposed;
        }
    
        if (options.Title === undefined || options.Title === null) {
            throw "Title must be defined";
        }
        this.title = options.Title;
    
        if (options.Message === undefined || options.Message === null || options.length < 1) {
    		if(options.Url === undefined || options.Url === null) {
    			throw "You must specify a message or a URL.";
    		} else {
    			this.LoadContent(options.Url);
    		}
        }
        this.message = options.Message;
    
        if (options.Buttons === undefined || options.Buttons === null) {
            this.buttons = [ModalWindow.OkButton];
        } else {
            this.buttons = options.Buttons;
        }
    
        if (options.ExtraData === undefined || options.ExtraData === null) {
            this.ExtraData = null;
        } else {
            this.ExtraData = options.ExtraData;
        }
    
        if (options.AllowClickAway === undefined || options.AllowClickAway === null) {
            this.clickAway = true;
        } else {
            this.clickAway = false;
        }
    
        if (options.XOffSet !== undefined || options.XOffSet !== null) {
            if (Number(options.XOffSet) !== 'NaN') {
                this.rootDiv.attr('style', 'left:' + options.XOffSet);
            } else {
                throw "Xoffset must be a number";
            }
        }
    
        if (options.YOffSet !== undefined || options.YOffSet !== null) {
            if (Number(options.YOffSet) !== 'NaN') {
                this.rootDiv.attr('style', 'top:' + options.YOffSet);
            } else {
                throw "Yoffset must be a number";
            }
        }
    
        if (options.Center !== undefined && options.Center === true) {
            this.rootDiv.attr('style', 'top: 25%;');
        }
    
        if (options.BackDrop === undefined || options.BackDrop === null) {
            this.backdrop = true;
        } else {
            this.backdrop = options.BackDrop;
        }
    
        if (options.AllowKeyboardEsc === undefined || options.AllowKeyboardEsc === null) {
            this.keyboard = true;
        } else {
            this.keyboard = options.AllowKeyboardEsc;
        }
    
        if (options.ShowCloseButton === undefined) {
            this.showClose = true;
        } else {
            this.showClose = options.ShowCloseButton;
        }
    	
    	if (options.PostInit === undefined || options.PostInit === null) {
    		this.PostInit = function () {};
    	} else {
    		this.PostInit = options.PostInit;
    	}
    	
    	this.options = options;
    };
    	
    ModalWindow.prototype.DisplayWindow = function(){
    	this.GenerateHTML();
    	var uniqid = String.fromCharCode(65 + Math.floor(Math.random() * 26)) + Date.now(),
    		options = {};
    
    	this.rootDiv.attr('id', uniqid);
    	$('body').append(this.rootDiv);
    	if (!this.clickAway) {
    		options.backdrop = 'static';
    	}
    	if (!this.backdrop) {
    		options.backdrop = this.backdrop;
    	}
    	if (this.keyboard) {
    		options.keyboard = true;
    	} else {
    		options.keyboard = false;
    	}
    	options.show = true;
    	this.rootDiv.modal(options);
    	$(this.rootDiv).toggleClass('hide');
    	this.PostInit(this.rootDiv);
    }; //end DisplayWindow
    
    ModalWindow.prototype.LoadContent = function(url){
    	var content = "";
    	var self = this;
    	
    	$.ajax({
    		method: "GET",
    		url: url,
    		cache: false,
    		data: "text/html"
    	}).done(function (result) {
    		self.message = result;
    		self.DisplayWindow();
    	})
    	.fail(function (result) {
    		alert("There was an error loading the data: " + result);
    	});
    }; //end LoadContent
    
    ModalWindow.prototype.Show = function () {
        "use strict";
    	if(this.options.Url === undefined){
    		this.DisplayWindow();
    	} //end if
    };
    
    ModalWindow.prototype.Finished = function (eventData) {
        "use strict";
        var self = eventData.data.self;
    	
    	var form = self.rootDiv.find('form');
    	var formData = null;
    	
    	if(form !== undefined && form !== null){
    		formData = {};
    		formData["FormUrl"] = form.attr("action");
    		
    		form.serializeArray().map(function(item) {
    			formData[item.name] = item.value;
    		});
    	}
    	
    	var event = jQuery.Event( "click" );
    	self.callBack($(this).attr('data-result'), event, formData, self.ExtraData, self.rootDiv);
    
    	if (!event.isDefaultPrevented()) {
    		self.rootDiv.remove();
    		$('.modal-backdrop').remove();
    		$('body').toggleClass('modal-open');
    		self.disposed();
    	}
    };
    
    ModalWindow.prototype.GenerateHTML = function () {
        "use strict";
        var container = $('<div/>'),
    		header = $('<div/>'),
            headerText = $('<h4/>'),
            body = $('<div/>'),
            footer = $('<div/>'),
            closeButton = $('<button/>'),
            wrapper = $('<div/>'),
    		button,
            i;
    		
    	this.rootDiv.attr('class', 'modal hide fade');
    	container.attr('class','modal-content');
        header.attr('class', 'modal-header');
    	headerText.attr('class', 'modal-title');
    	
        if (this.showClose) {
            closeButton.attr('class', 'close');
            closeButton.attr('type', 'button');
            closeButton.attr('data-dismiss', 'modal');
            closeButton.attr('aria-hidden', 'true');
            closeButton.attr('data-result', 'closed');
            closeButton.bind('click', {
                self: this
            }, this.Finished);
            closeButton.html('&times;');
            header.append(closeButton);
        }
    
        headerText.html(this.title);
        header.append(headerText);
        body.attr('class', 'modal-body');
        body.html(this.message);
    
        footer.attr('class', 'modal-footer');
        for (i = 0; i < this.buttons.length; i = i + 1) {
            button = $('<a/>');
            button.attr('class', 'btn ' + this.buttons[i][0]);
            button.text(this.buttons[i][1]);
            button.attr('data-result', this.buttons[i][2]);
            button.bind('click', {
                self: this
            }, this.Finished);
            footer.append(button);
            button = null;
        }
    
        container.append(header);
        container.append(body);
        container.append(footer);
    
    	wrapper.attr('class', 'modal-dialog');
    	wrapper.append(container);
    	this.rootDiv.append(wrapper);
    };
    
    ModalWindow.OkButton = ['btn-primary', 'Ok', 'ok'];
    ModalWindow.YesButton = ['btn-success', 'Yes', 'true'];
    ModalWindow.YesDangerButton = ['btn-danger', 'Yes', 'true'];
    ModalWindow.NoButton = ['btn-primary', 'No', 'false'];
    ModalWindow.NoDangerButton = ['btn-danger', 'No', 'false'];
    And you can call it like so:

    Code:
     var modal = new ModalWindow({
                        Title: "Changes Made",
                        Message: "Leaving this page will discard any changes you've made. Do you want to continue?",
                        Buttons: [["btn-primary admin", 'No', 'false'], ["btn-danger admin", 'Yes', 'true']],
                        CallBack: function(result, event, formData, ExtraData, rootDiv) {
                            if (result === 'true') { // this is the value of the "Yes" button
                                alert("Clicked save!");
                            }
                        },
                        Center: true,
                        AllowClickAway: false
                    });
    
    
    
                    modal.Show();
    If you have a form in the modal window you're displaying, you can reference it from the callback formData variable. You can also call e.preventDefault() on the event to stop the form from closing.

    And an example picture:

    Name:  dialog.png
Views: 11003
Size:  7.1 KB

  9. #9

    Thread Starter
    Software Carpenter dee-u's Avatar
    Join Date
    Feb 2005
    Location
    Pinas
    Posts
    11,123

    Re: Bootstrap: how to use "Save Changes" in Modal?

    Cool, I will have to get back to you on this one!
    Regards,


    As a gesture of gratitude please consider rating helpful posts. c",)

    Some stuffs: Mouse Hotkey | Compress file using SQL Server! | WPF - Rounded Combobox | WPF - Notify Icon and Balloon | NetVerser - a WPF chatting system

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width