We Keep Coding

How do we 'dispose' a Bootstrap modal?

I have a small application I am developing to learn AJAX and JavaScript. In this I have method saveData() that is triggered when a save button is clicked. All is working fine, but I realized that the page was refreshing so I searched the web and found the JavaScript method event.preventDefault(). This method worked fine. But that got me into problem, my modal dialog was staying open instead of closing. Again, I found hide method to "close" the modal. That solved it, BUT when I click the to open the modal it is bringing me the recent data I sent to the DB. I am from Java background and I began to think that hidedid not kill the modal.
My question: Is there a method to completely destroy the modal the way is done with JFrame.dispose()method in Java?
The code I was using is below:
function saveData(){
var name=$('#nm').val();
var email=$('#em').val();
var phone=$('#hp').val();
var address=$('#al').val();
event.preventDefault();//prevent the page from refresh
$.ajax({
type:"post",
url:"server.php?p=add",
data:{nm:name,em:email,hp:phone,al:address},
success: function(data){
viewData();
$('#addData').modal('hide');//close the modal.
}
});
}

You can just clear the values in your input tag every time you open the modal.

I already faced this problem with the modal for clear all value.but i using the follow code after hiding the modal.
My modal id is #modal
$('#modal').hide();
$('#modal')
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
if you have any prolem then you can refer the link that may help you : How to clear all input fields in bootstrap modal when clicking data-dismiss button?

How to hide custom Onsen dialog

I have a custom Onsen Dialog with two buttons, and these buttons have onclick code in their html. I create this dialog using a template, and later when I try to hide this dialog with method like this
var dialog = document.getElementById("dialogSearchFriend");
dialog.hide();
I get an error "hide() is not a function".
I debugged this, and the dialog variable seems to be a template, rather than a dialog.
How can I solve this?

window.onload=function(){
$("#dialogSearchFriend").fadeOut();
}

UI Dialog moving outside of <form> tag

I have a form which contains multiple fields.
It also contains some fields which pop opens in Ui Dialog Box, when i fill those fields and close dialog box, the dialog take my fields and put it outside of the form right before </body> tag.
Look at this :
How can I keep it in form tag ? Because I need those fields in my form for posting.
I have some dynamically generated fields in this popup like add more fields.
Now if check this fiddle : http://jsfiddle.net/xpkFf/258/
And check in firebug after opening and closing the popup, the form tag will appear empty.
Any solution please ?
I am posting data on another page using $_POST using php
Here is the example code :
HTML:
<form>
<div id="dialog">
<input type="text" name="first_name">
</div>
</form>
Open dialog
JS:
$('#open').click(function() {
$('#dialog').dialog('open');
});
$('#dialog').dialog({
autoOpen: false,
modal: false
});

How are you sending that form data to the server? If you are just using a $.post, you can .serialize() the form data and then just get the values of the items in the dialog and add them to it:
$.post('submitit.php', { $("#myform").serialize() + "&anotherItem=" + $("#dialogItem").val () }, function (results) {
// do something with results
}, "json");

jQuery plugin for submiting Forms

I have a Form like this in asp Classic ..
<form method="post" name="AddItemForm" id="AddItemForm" action="/files/includes/CartControl.asp" style="display:inline;">
// bunch of Hidden Fields.
Then a SUBMIT button.
action of the form takes all the hidden fields and then after processing them redirects user to a CART page.
now what I want to do is....I want user to click on ADD TO CART button, however I want user to stay on the product page while form submits to a new window (not a javascript new window...something like lightbox/colorbox/fancybox DIV etc).
I looked into many jQuery plugins but could not get a satisfied answer...which plugin is BEST for my case? any simple example?
basicly I want to submit to a new overlay div and within that DIV redirect user to a new page to show Product Info.
Thanks

It seems that you are looking for some functionality for asynchronous form submission. There is this jQuery AJAX Form plugin that provides AJAX functionality for forms. You will have something like:
$('#AddItemForm').submit( function() {
// Submit asynchronously
$( this ).ajaxSubmit( function() {
// Form processing is done
// Redirect to the shopping cart page
});
// Show a modal or a fancy "please wait" message
// Prevent default submission
return false;
});

You can find some info in this answer, the code from one of the answers:
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
In "do something with response" you can take the data or url and load it into an overlay div.
If it's a URL, you can use jquery .load :
$('#result').load('ajax/test.html');
If it's html (or data which you wrap in html), just do
$('#result').html(theHTML)

the simplest way (in my view) is to add target attribute to the form which will open new window while the current page won't chage...

Show modal when using javascript confirm

I have the following function that will show a modal:
confirmModal: function (message) {
// CODE TO SHOW MODAL HAS BEEN REMOVED FOR THIS QUESTION //
}
And because it's been namespaced it's called like: uiModal.confirmModal('Test message');
Inside the modal I have two buttons:
<button class="cancel">Cancel</button>
<button class="ok">Ok</button>
Now what I want to do is two things:
When I do something like: onsubmit="confirm('Are you sure?');" or onclick="confirm('Are you sure?');" it will show the modal instead of an alert box. Note that it needs to work for both links and form submits.
The two buttons in the modal need to either cancel or allow the request to happen. I have already got the cancel to close the modal fine so it's just a case of allowing or denying the request to happen.
Can anyone help? I've looked at some other questions on here and seen bits about using window.location($(this).attr('href')) but that would only work on links and not for the submit of a form.
I've also looked at doing window.confirm = uiModal.confirmModal('message'); but how would I use that in my example of an onclick or onsubmit
Thanks

This doesnt work because confirm is a blocking call (the javascript won't continue when the box is open), while your modal dialog isn't.
You can solve it by doing something like:
// have some temp var that holds confirmation state
var isConfirmed = false;
$("form").submit(function () {
// when someone tries to submit the form, verify whether it's confirmed
if (!isConfirmed) {
// show modal dialog
// prevent direct submit
return false;
}
});
// when hitting the OK button in the modal, change the confirmation state
$(".modal .ok").click(function () {
isConfirmed = true;
// and re-submit the form
$("form").submit();
});