failing to add a close button into a jquery load function modal - javascript

I have a modal box that loads a full PHP page using the jQuery load() method,
I was wondering how can I add a close button that close to the modal after the call and refresh the load request every recall to the function.
the code:
$('body').on('click','#more',function(){
var i = $(this).data("info");
$('body').append("<div id='modal_box'></div>");
$('#modal_box').load('post.php?info='+i);
});

Related

addthis share button not working when I open the modal twice

I'm using addthis share button in my website, but the click of the button is in a modal that is loaded dynamically, so when the modal html is loaded, I call the script of addthis this way:
var addthisScript = document.createElement('script');
addthisScript.id = 'addthisscript';
addthisScript.setAttribute('src',
'//s7.addthis.com/js/300/addthis_widget.js#domready=1')
document.body.appendChild(addthisScript);
So, when I open the modal at first time, it works!
But, if I close the modal and open again and click the button to share again, it just reload the page.
After reloaded the page, starts to work again, but just once.
I already try remove the script from DOM and create again, but still doesn't work!!
When the modal is closed, I remove the entire HTML, this way:
$(`#${id_modal}`).on("hidden.bs.modal",() => {
$(`#${id_modal}`).remove();
}
And every time that I open the modal, I call the function addthis() that create the script above.
Any help?

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?

Bootstrap 3 - load modal with predefined body

I am running a JS function after which I want to show a modal asking the user a predefined question.
Since the modal will be loaded as a result of a previous AJAX success or error result, I am not launching the modal via a button click of some sorts, hence have nothing to attach the modal-body update to attach to. How would I do this?
Basically, I am trying to achieve this:
$("#myModal").on("show.bs.modal", function(e) {
$(this).find(".modal-body").html('<p>this is a test</p>');
});
in this way:
// show alert modal to inform user of
success: function(data) {
$('#mod_output').html(data);
drawVisualization();
// show alert modal to inform user of
$("#AlertModal").modal();
$("AlertModal").find(".modal-body").html('<p>this is a test</p>');
}
thanks

Making jquery Dialog working between two pages

I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");

jQuery UI Dialog - change the content of an open dialog (Ajax)

I've got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.
So, the site loads, you click a link, and it opens in a dialog. That's fine. You can close and open it as many times as you want.
While it's open, if you click on one of the links from the loaded content, it doesn't work.
An Ajax GET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebug shows the request)
The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)
The links look like this...
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
The click event is bound...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
The ajax_dialog function checks to see if there's a dialog, calls to create one if there isn't, calls to load the content, sets the title, and opens the dialog if it's not open.
function ajax_dialog(_this, _event){
var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
var linkTitle = $(_this).attr("title");
// Create dialog
if(!$('body').find('#ajaxDialog').size()){
$('body').append('not yet init<br />'); // This shows up the first click only.
init_dialog('#ajaxDialog');
}
// Load Dialog Content
load_dialog('#ajaxDialog', urlToLoad);
// Add title
$('#ajaxDialog').dialog('option', 'title', linkTitle);
// Open dialog (or reload)
if(!$('#ajaxDialog').dialog('isOpen')){
$('#ajaxDialog').dialog('open');
$('body').append('not yet open<br />'); // This shows up the first click only.
}
return false;
}
The init_dialog function creates the dialog if there isn't one...
function init_dialog(_this){
$('body').append('<div id="ajaxDialog"></div>');
// Set Dialog Options
$(_this).dialog({
modal:true,
autoOpen:false,
width:900,
height:400,
position:['center','center'],
zIndex: 9999,
//open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
close:function(){$(this).empty();}
});
}
The load_dialog function loads the desired content into the dialog.
function load_dialog(_this, urlToLoad){
$(_this).load(urlToLoad, function(){
$('body').append(urlToLoad + ' load function<br />'); // This shows up each click
$(_this).append("Hihi?"); // This shows up each click
});
// The loaded information only shows the first click, other times show an empty dialog.
}
Hah. As shown in the code, I was using $jQuery.load() and pulling the exact href of the link as the URL to request. All the URLs had fragments/anchors on the end, that is: ....html#id-of-div.
In this case, the script itself was working fine, but the #id-of-div didn't exist on the page yet. That's why I could see content returned, but the dialog just ended up blank. :-)

Categories