i already got it to work but the problem is when i remove the content the main page content is removed as well because have the same class name. how can i control only the modal content and remove certain classes without removing them from the parent page.
var $modalDialog = $('<div/>', {
'class': 'exampleModal',
'id': 'exampleModal1'
})
.appendTo('body')
.dialog({
resizable: true,
title:'Approval',
autoOpen: false,
width:'auto',
height:'auto',
show: 'fold',
position: { my: "right top", at: "top" },
modal: true,
close: function(event, ui) {
location.reload();
}
}).css("overflow", "auto");
$(function () {
$('a.exampleLink').on('click', function (e) {
e.preventDefault();
// TODO: Undo comments, below
var url = $(this).attr('href');
$modalDialog.load(url, function(){
$( ".ewMenu" ).hide(); $( ".ewHeaderRow" ).hide(); $('h4').hide();
$( "#btnCancel" ).hide(); $( ".ewToolbar" ).hide(); $( ".ewFooterRow" ).hide();
});
$modalDialog.dialog("open");
});
});
Try this (example for btnCancel):
$modalDialog.find("#btnCancel").hide();
Related
I have an ajax call:
$('#opt').change(function() {
var option = $("#cdc").val();
$.ajax({
type: "POST",
url: "orari_pause/select_spaccato.php",
data: 'option=' + option,
success: function(whatigot) {
$('#spaccato').html(whatigot);
}, //END OF SUCCESS
complete: function() {
$.getScript("orari_pause/script_opener.js", function() {
});
} //END OF COMPLETE
});
});
script_opener.js
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
title: 'Dettaglio sessioni',
height: 600,
width:800,
modal:true,
resizable: false
});
$( ".opener" ).click(function() {
var id = $(this).attr('id');
$( "#dialog" ).load( "orari_pause/dettaglio_sessioni.php?id="+id );
$( "#dialog" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
$( "#dialog2" ).dialog({
autoOpen: false,
title: 'Inserimento sessione',
height: 380,
width:300,
modal:true,
resizable: false
});
$( ".opener_session" ).click(function() {
var id = $(this).attr('id');
$( "#dialog2" ).load( "orari_pause/form_nuova_sessione.php?id="+id );
$( "#dialog2" ).dialog( "open" );
$('.ui-widget-overlay').css('background', 'silver');
});
});
In select_spaccato.php I have a button with class opener_session. When I click on it, the event doesn't fire (but the script is loaded correctly). I think is a problem with DOM... I also try to search into Stackoverflow forum with no results.
Can you help me?
EDIT
I try to load the JavaScript code inside whatigot variable, same results. The JS code is loaded, but the events not work.
Use event delegation
$('body').on('click',".opener",function() {
$('body').on('click',".opener_session",function() {
I am trying to use a dialogue box modal for displaying terms and condition on my webpage. But at button disagree the webpage doesnot close while calling function window.close. I want to close the recent page after clicking the button disagree
Below pasted is the sample code I am having problem at.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog( window.close() );
}
}
});
});
</script>
Thank you in advance.
You do it like this:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog("close");
}
}
});
});
</script>
You can either close the dialog itself using the code above or you can close the window if it's a popup window opened previously via JavaScript.
In which case you'll need the reference of that to invoke the close method.
However you can't close an entire webpage/tab with JavaScript which is a javaScript limitation. As I mentioned, you can only close it if it was previously opened with JavaScript.
I am somewhat new to javascript and need to integrate couple plugins for one project. Is there a way to get customer_id (that was gotten when the dialog window was opened, and suggested by autocomplete) into "Create new job" button location.
I want to close first dialog after user clicks "Create new job" and then open new dialog window, but I want to pass customer_id from the first dialog window into second dialog window. There might be some dialog and autocomplete interaction that I might not understand, I just can't get customer_id before I call new_job() function.
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
// I am able to get customer_id here,
//now I need to pass it to the function below.
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
$( this ).dialog( "close" );
cust_name = (name.val());
// is there any way to get "customer_id" at this location
// before I call new_job() function after the user selects customer
// from the database and clicks "Create new job"?
new_job(customer_id, cust_name);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
By default the select event ui parameter only contains a "label" and "value" property
JQuery UI Autocomplete Success Event
In order to access a custom property you would need to explicitly add it after you retrieve your data via an ajax call. Similar to this post.
I guess I answer the question myself after some thinking. If someone else is working on jQuery autocomplete and dialog interaction, and if you need to open the new dialog window (in new_job(customer_id))with the id value from the previous dialog window and close that previous dialog window on success:
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
new_job(customer_id);
$(this).val(''); return false;
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
alert('Please select customer or click "Add New" customer');
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
I need to access a hidden field named 'partnerId' in my form data from this js code:
$(document).ready(function() {
showPartnerSettings = function(e) {
e.preventDefault();
var $dialogForm = $("<div />")
.attr("id", "partner-settings-form")
.append($loading.clone())
.load(envPath + "/partner/settings?partnerid="+e.data.partnerId, null, function(){ $("#partner-settings-form").css("display", "block"); })
.dialog({
title: "Partner Settings",
modal: false,
resizable: false,
width: 580, //CPB 04.11.13
position:['middle',130],
"close" : function(){
var dialogid=$(this).parent("div").attr("id");
$("#Tabs ul li."+dialogid).remove();
$(this).remove();
$("#alertmod").remove();
//$link.removeClass('preventclick');
},
})
.dialog("open")
.css("display", "block");
return false;
};
Is there any way to retrieve this value from the event object passed to showPartnerSettings()?
You're going to need to access it after it has been loaded into the DOM.
var $dialogForm = $("<div />")
.attr("id", "partner-settings-form")
.append($loading.clone())
.load(envPath + "/partner/settings?partnerid="+e.data.partnerId,
null,
function(){
/* access field here ... */
var field = $('#partnerId');
$("#partner-settings-form").css("display", "block");
}
).dialog({
title: "Partner Settings",
modal: false,
resizable: false,
width: 580, //CPB 04.11.13
position:['middle',130],
"close" : function(){
var dialogid=$(this).parent("div").attr("id");
$("#Tabs ul li."+dialogid).remove();
$(this).remove();
$("#alertmod").remove();
//$link.removeClass('preventclick');
},
})
.dialog("open")
.css("display", "block");
I am added div content into the dialog box using jquery.I am using the same div content to display in my page.Now i want to decrease the size of content by percentage which i am pushing in dialog.But it should apply only for the content of dialog not for the content on my page.So how can i do that using jquery?help me
$(function() {
$( "#maincontainer" ).dialog({
autoOpen: false,
width:50%,
height:400,
autoClose: false,
show: "fold",
hide: "core"
});
$( "#previewBtn").click(function() {
$( "#maincontainer" ).dialog( "open" );
return false;
});
});
you 'height:auto' property; this may work