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() {
Related
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();
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 trying to get the Inputs from Input Text-Fields in an Dialog window to use them for a SQL query.
My Problem is that i cant use the array in PHP. Im getting no error or sucess message.
In the Network log of Firefox i can see the Post method with the right Values.
Heres a snippet of my js code:
<script>
// open popup window "dialog"
$(function() {
$( "#dialog" ).dialog({
autoOpen: false ,
width: 1000,
buttons: {
"Quelle hinzufügen": function() {
var out = [document.getElementById("titelin"),document.getElementById("autorin"),document.getElementById("tagsin"),document.getElementById("linkin")];
var outv = [out[0].value,out[1].value,out[2].value,out[3].value];
ajax(outv);
},
Abbrechen: function() {
$( this ).dialog( "close" );
}
}
});
$( "#opener" ).click(function(e) {
e.preventDefault();
$( "#dialog" ).dialog("open");
});
});
// posting to PHP
function ajax(outv){
$.ajax({
type:"POST",
url:"quellenverzeichnis.php",
data: {output: outv},
sucess: function(){
alert("works");
},
error: function(){
alert("fail");
}
});
};
</script>
Heres my PHP code:
<?php
if (isset($_POST['output'])){
hinzufuegen();
};
printf($_POST['output']);
?>
Don´t know what I am doing wrong and sorry for my bad english and the German words in the code.
Thanks for your help
Use below code snippets
buttons: {
"Quelle hinzufügen": function() {
var out = [];
out.push(document.getElementById("titelin").value);
out.push(document.getElementById("autorin").value);
out.push(document.getElementById("tagsin").value);
out.push(document.getElementById("linkin").value);
ajax(out);
},
And
function ajax(info){
$.ajax({
type:"POST",
url:"quellenverzeichnis.php",
data: {output: info},
success: function(data){
alert("works"+data);
},
error: function(){
alert("fail");
}
});
};
And
$_POST['output']
I have seen this similar closing jquery modal dialog is slow question, but in this example, it does not use buttons attribute which is my issue. How can I close the dialog without using $( this ).dialog( "close" ) after a function is called?
see this FIDDLE for demo
var begin = new Date();
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
// $( this ).dialog( "close" ); too slow
foo();
},
Cancel: function() {
$( this ).dialog( "close" ); too slow
foo();
}
}
});
});
u can trigger close just after putting your close code post callling foo(); or better can use callback functions.
see below code , hope it helps.
var begin = new Date();
$(function() {
$("#dialog-confirm").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"Delete all items": function() {
// $( this ).dialog( "close" );
foo();
},
Cancel: function() {
foo(clsPopUp);
}
}
});
});
function clsPopUp() {
$("#dialog-confirm").dialog("close");
}
function foo(callback) {
var end = new Date();
alert((end - begin) / 1000);
callback();
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<body>
<div id="dialog-confirm">
<p>Are you sure?</p>
</div>
</body>
Try:
$( "#dialog-confirm" ).parent().hide();
Instead of:
$( this ).dialog( "close" );
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" );
}
}
});
});
}