Jquery eddited as suggested and the problem is still the same FireFox just doesnt accept these Jquery
When using chrome everything works fine but with FireFox the buttons does not fire query function when clicked. Here is one button example in my web app that is not firing when using FireFox:
Inside Inquiry div there is a button with id "izprati" and when it is clicked it sends some data to a mail the code is inside the .cs page but also when its clicked using Jquery it closes the div with id "inquiry" and FadesIn the div with id "inquiryAnswer".When using chrome everything works as expected but when using FireFox the Inquery div doesnt FadeOut on click and the InqueryAnswer div is not fading In.
the "izprati" asp.net button is inside updatePanel with asyncPostBackTrigger
HTML:
<div id="Inquiry" class="inquiry">
<img id="closeY" class="close" src="Logos/closeY.png" />
<table style="width:60%;">
<tr>
<td>
<asp:Label runat="server" ID="l1" style="font-size:30px;"> Запитване </asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID="l2" runat="server" style="font-size:22px;width:100px;">Имейл</asp:Label>
</td>
<td><asp:TextBox ID="t1" runat="server" style="font-size:22px;width:300px;"></asp:TextBox></td>
<td><asp:Label ID="Label1" runat="server" style="color:red"></asp:Label></td>
</tr>
<tr>
<td><asp:Label ID="l6" runat="server" style="font-size:22px;width:100px;">Име*</asp:Label> </td>
<td><asp:TextBox runat="server" ID="t6" style="font-size:22px;width:300px;"></asp:TextBox></td>
</tr>
<tr>
<td>
<asp:Label ID="l3" runat="server" style="font-size:22px;width:100px;">Тема</asp:Label>
</td>
<td><asp:TextBox runat="server" ID="t2" style="font-size:22px;width:300px;"></asp:TextBox></td>
<td><asp:Label ID="Label2" runat="server" style="color:red"></asp:Label></td>
</tr>
<tr>
<td>
<asp:Label ID="l4" runat="server" style="font-size:22px;width:100px;">Текст</asp:Label>
</td>
<td><textarea runat="server" id="TextArea" style="height:200px;width:300px;max-height:200px;max-width:300px;"></textarea></td>
<td><asp:Label ID="Label3" runat="server" style="color:red"></asp:Label></td>
</tr>
<tr>
<td>
<asp:Label runat="server" ID="l5" style="font-size:22px;width:100px;">Телефон</asp:Label>
</td>
<td>
<asp:TextBox ID="telephone" runat="server" style="font-size:22px;width:300px"></asp:TextBox>
</td>
</tr>
<tr>
<td></td>
<td><asp:Button id="izprati" runat="server" style="width:300px;height:50px" OnClick="izprati_Click" Text="Изпрати" /></td>
<td><asp:Label runat="server" ID="answer"></asp:Label></td>
</tr>
</table>
<img src="Logos/q.jpg" style="position:absolute;right:50px;top:20px;height:200px;width:300px;" />
</div>
<div class="inquiryAnswer" id="inquiryAnswer">
<img id="inquiryAnswerClose" class="close" src="Logos/closeY.png" />
<div style="position:absolute;bottom:40px;right:15px;left:15px;" id="ThankYou" runat="server">
Благодарим Ви за запитването! Член на нашият екип ще се свърже с Вас до 24 часа.
</div>
</div>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="izprati" EventName="Click" />
</Triggers>
CSS:
.inquiry {
position:fixed !important;
position:absolute;
top:10vh;
right:0;
bottom:0;
left:10vw;
width:80vw;
height:80vh;
background-color:white;
padding:10px;
z-index:10;
display:none;
-webkit-box-shadow: 0 0 3px 1px black;
box-shadow: 0 0 3px 1px black;
}
.inquiryAnswer {
position:fixed !important;
position:absolute;
top:30vh;
right:0;
bottom:0;
left:35vw;
width:30vw;
height:15vh;
background-color:white;
padding:25px;
z-index:10;
display:none;
-webkit-box-shadow: 0 0 3px 1px black;
box-shadow: 0 0 3px 1px black;
text-align:center;
font-size:21px;
font-weight:bold;
}
Jquery:
<script>
$(document).ready(function () {
$("#izprati").click(function () {
$("#inquiryAnswer").fadeIn(1000);
$(".inquiry").fadeOut(1000);
$("#answer").text("Благодарим Ви за запитването! Член на нашият екип ще се свърже с Вас до 24 часа.");
$('<%=t1.ClientID %>').val("");
$('<%=t2.ClientID %>').val("");
$('<%=t6.ClientID %>').val("");
$('<%=TextArea.ClientID %>').val("");
$('<%=telephone.ClientID %>').val("");
});
$("#inquiryAnswerClose").click(function () { $(".inquiryAnswer").fadeOut(1000); });
});
</script>
Eddited Jquery to :
<script>
function BindControlEvents() {
$('#StayOpen1').click(function () {
$("#situationalpanel").fadeOut(1000);
$('#DeluxeR').fadeOut(1000);
$('#OneBedR').fadeOut(1000);
$('#standartR').fadeIn(1000);
});
$('#StayOpen2').click(function () {
$("#situationalpanel").fadeOut(1000);
$('#standartR').fadeOut(1000);
$('#OneBedR').fadeOut(1000);
$('#DeluxeR').fadeIn(1000);
});
$('#StayOpen3').click(function () {
$("#situationalpanel").fadeOut(1000);
$('#standartR').fadeOut(1000);
$('#DeluxeR').fadeOut(1000);
$('#OneBedR').fadeIn(1000);
});
$(
'#AboutUs , #NavButton1 , #NavButton2 , #NavButton7, #NavButton3 , #NavButton4 , #NavButton5 , #NavButton6 , #NavButton7, #LinkButton4 , #LinkButton5, #LinkButton6, #LinkButton7, #LinkButton8, #LinkButton9, #LinkButton10, #LinkButton11, #LinkButton12, #LinkButton13, #LinkButton14, #LinkButton15, #LinkButton16, #LinkButton17, #LinkButton18, #LinkButton19, #LinkButton20'
).click(function () {
$('#standartR , #DeluxeR , #OneBedR').fadeOut(1000);
});
$("#LinkButton4").click(function () {
$("#map1").fadeIn(500);
});
$("#AboutUs , #NavButton3 , #NavButton4 , #NavButton5 , #NavButton6 , #StayOpen1 , #StayOpen2 , #StayOpen3 , #LinkButton17").click(function () {
$("#map1").fadeOut(100);
});
$("#izprati").click(function () {
$("#inquiryAnswer").fadeIn(1000);
$(".inquiry").fadeOut(1000);
$("#answer").text("Благодарим Ви за запитването! Член на нашият екип ще се свърже с Вас до 24 часа.");
$('<%=t1.ClientID %>').val("");
$('<%=t2.ClientID %>').val("");
$('<%=t6.ClientID %>').val("");
$('<%=TextArea.ClientID %>').val("");
$('<%=telephone.ClientID %>').val("");
});
$("#inquiryAnswerClose").click(function () { $(".inquiryAnswer").fadeOut(1000); });
}
//Initial bind
$(document).ready(function () {
BindControlEvents();
});
//Re-bind for callbacks
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
});
</script>
