jquery dialogs conflicting - if I open and close dialog 1 it interfeers with the look of dialog 2 when opened (and vise-versa)
I have two buttons on my page. One to open a dialog to add new contacts. The second button opens a different dialog to edit contacts.
I can open and close the "Add Contacts" dialog no problem but when I click on the "Edit Contact" button the edit dialogue content is no longer displayed under tabs correctly.
If I refresh the page, I can open and close the "Edit Contact" dialog repeated times not problem but when I open the "Add Contacts" dialog the tabs in the add contact dialog this time no longer display correctly. - So the problem works either way.
The add dialog code is:
form html is :
The dialog form content uses ajax tabs like the following example:
It's as if opening one dialog prevents the css or javascript running correctly in the other to display the tabs.
Thanks
I can open and close the "Add Contacts" dialog no problem but when I click on the "Edit Contact" button the edit dialogue content is no longer displayed under tabs correctly.
If I refresh the page, I can open and close the "Edit Contact" dialog repeated times not problem but when I open the "Add Contacts" dialog the tabs in the add contact dialog this time no longer display correctly. - So the problem works either way.
The add dialog code is:
$("#addagencyref-window").dialog(
{
autoOpen: false,
maxWidth:850,
maxHeight: 700,
width: 850,
height: 700,
draggable: true,
modal: true,
buttons: {
"Save": function ()
{
$.post("./add_agencyreferral_process.php", $("#addagencyrefForm").serialize(), function(response)
{
if(!response)
{
location.reload(true);
$(this).dialog("close");
}
$("p#errors6").html(response);
});
},
"Cancel": function ()
{
$("p#errors6").empty();
$(this).dialog("close");
}
}
});
$( "#addReferral" ).click(function() {
var id = $(this).attr("file-id");
var dataString = id;
$.ajax({
type: "POST",
url: "./add_agencyreferral.php",
data: dataString,
cache: false,
success: function(data) {
$("#addagencyref-window").dialog("open");
$("#addagencyrefFormBody").html(data);
}
});
});form html is :
<div id="addagencyref-window" title="Add Agency Referral">
<div align="center">
<p id="errors6"></p>
</div>
<form id="addagencyrefForm" name="addagencyrefForm" action="" method="post">
<div id="addagencyrefFormBody"></div>
</form>
</div>The dialog form content uses ajax tabs like the following example:
<html>
<head>
<script type="text/javascript" src="tabcontent.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<link rel="stylesheet" type="text/css" href="tabcontent.css" />
<h3>Demo #1- Basic implementation</h3>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:900px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</html>It's as if opening one dialog prevents the css or javascript running correctly in the other to display the tabs.
Thanks
Can you provide a link to a live page or to a jsfiddle in orddr to actually see the issue?
Where is the code for the edit button?
ASKER
Hi
The edit button is within an iframe, so the following jquery event is within the iframe
In the parent window, with the "Add Contact" function, the edit dialog is declared and displayed as
I've created a fiddle showing how the tabs work
https://jsfiddle.net/mattOfEICT/uy3ysmL9/#&togetherjs=heS6QMaK0r
basically the tabs stop working once I load a different dialog which also has the tabs.
I hope this makes sense?
The edit button is within an iframe, so the following jquery event is within the iframe
$( "a.openerEdit" ).click(function() {
var id = $(this).attr("file-id");
var dataString = id;
$.ajax({
type: "POST",
url: "./edit_agencyreferral.php",
data: dataString,
cache: false,
success: function(data) {
window.parent.$("#editagency-window").dialog("open");
window.parent.$("#editagencyFormBody").html(data);
}
});
});In the parent window, with the "Add Contact" function, the edit dialog is declared and displayed as
$("#editagency-window").dialog(
{
autoOpen: false,
maxWidth:850,
maxHeight: 700,
width: 850,
height: 700,
draggable: true,
modal: true,
buttons: {
"Save": function ()
{
$.post("./edit_agencyreferral_process.php", $("#editagencyForm").serialize(), function(response)
{
if(!response)
{
location.reload(true);
$(this).dialog("close");
}
$("p#errors2").html(response);
});
},
"Cancel": function ()
{
$("p#errors").empty();
location.reload(true);
}
}
});
<div id="editagency-window" title="Edit Agency Referral">
<div align="center">
<p id="errors2"></p>
</div>
<form id="editagencyForm" name="editagencyForm" action="" method="post">
<div id="editagencyFormBody"></div>
</form>
</div>
I've created a fiddle showing how the tabs work
https://jsfiddle.net/mattOfEICT/uy3ysmL9/#&togetherjs=heS6QMaK0r
basically the tabs stop working once I load a different dialog which also has the tabs.
I hope this makes sense?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I am still in the dark as to how to reproduce this problem.
Can you give us some steps to follow in the Fiddle and what to look out for.
Can you give us some steps to follow in the Fiddle and what to look out for.
ASKER
The Edit Dialog and the Add Dialog loaded their form content which includes the tabs from seperate pages.
The problem was indeed with both pages using the same ids. I didn't realise that when the second dialog is loaded the first was still within the DOM and was therefore conflicting.
It's obvious really. Either refreshing the page using location.reload(true); or better still changing the ids on the one of the forms content pages fixes this.
Thanks for your help
The problem was indeed with both pages using the same ids. I didn't realise that when the second dialog is loaded the first was still within the DOM and was therefore conflicting.
It's obvious really. Either refreshing the page using location.reload(true); or better still changing the ids on the one of the forms content pages fixes this.
Thanks for your help
which plug-in are you using for the tabs is jQuery also or bootstrap ?