$.ajax success no executing JS in FF
Hello All,
Ik have a $.ajax set in the onclick of a button like this:
-
$(".search_button").click(function()
{
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
//INSTELLINGEN VOOR DE VALIDATIE
var settings = jQuery.extend({
allrules:allRules,
inlineValidation: true,
ajaxSubmit: false,
promptPosition: "topRight", // OPENNING BOX POSITION, IMPLEMENTED: topLeft, topRight, bottomLeft, centerRight, bottomRight
success : false,
failure : function() {}
}, settings);
if($.validationEngine.loadValidation("#search_box", settings)==false)
{
req = $.ajax({
type: "POST",
url: "Service1.asmx/GetMyUserControlHtml",
data: "visumnummer="+dataString,
dataType: "xml",
beforeSend: function(msg)
{
$("#insert_search").html('');
$("#flash").show();
$("#flash").html('<table width="100%" cellpadding="0" cellspacing="0"><tr><td><img src="images/ajax-loader.gif"/>Zoeken...</td></tr><tr><td><input type="button" class="abort_button" onclick="javascript:AbortSearch();" value="Zoakactie annuleren" /></td></tr></table>');
},
success: function(msg)
{
var res = $('string',msg).text();
alert(res);
$("#searchword").show();
$(res).appendTo("#searchword");
$("#flash").hide();
},
error: function(msg)
{
$("#insert_search").show();
$("#insert_search").html(msg.d);
$("#flash").hide();
}
});
}
return false;
});
I calls a webservice that gets a user control and then the success option of $.ajax displaus this webpage(user control inside a <div>.
In IE8 it works perfectly, but in FF the script inside the page are not executed.
The page that is bing inserted looks like this:
-
<%@ Control language="c#" Codebehind="WebUserControl2.ascx.cs" AutoEventWireup="true" Inherits="WebApplication3.WebUserControl2" TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<link type="text/css" href="css/jquery.tabs.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".tbltest tr:nth-child(odd)").addClass("odd");
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function()
{
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var currentTab = $(this).attr('href');
$('#tabs div').hide();
$(currentTab).show();
return false;
});
roundDiv('my_rounded_box_id2');
});
function roundDiv(id)
{
var tmp_width = $('#'+id+'').css("width"); //get the width of target el
$('#'+id+'').css("width",""); //clear width value (or else corners screws up)
$('#'+id+'').wrap('<div class="rounded_border" style="width: ' +tmp_width+ ';"></div>'); //apply border
$('#'+id+'').corner("round 3px").parent().css('padding', '1px').corner("round 5px"); //round box and border
}
</script>
<style>
TABLE.tbltest TR { BACKGROUND-COLOR: #aad7ff; HEIGHT: 30px; FONT-SIZE: 9px }
TABLE.tbltest TR.odd { BACKGROUND-COLOR: #f0f8ff; COLOR: #000 }
DIV.rounded_box { BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 1px; BACKGROUND-COLOR: #fff; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; COLOR: #000; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 1px }
DIV.rounded_border { PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; BACKGROUND: #aaaaaa; PADDING-TOP: 2px }
.lblInfoVisum { COLOR: #113761; FONT-SIZE: 14px; FONT-WEIGHT: bold }
</style>
</HEAD>
<body>
<div id="my_rounded_box_id2" class="rounded_box">
<div id="tabs">
<table height="31" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/tabs_left.jpg">
</td>
<td style="BACKGROUND-IMAGE: url(images/tabs_background.jpg); LINE-HEIGHT: 31px; BACKGROUND-REPEAT: repeat-x; VERTICAL-ALIGN: bottom">
<ul style="MARGIN:0px">
<li>
<a href="#tab-1">Visumgegevens</a></li>
<li>
<a href="#tab-2">Persoongegevens</a></li>
<li>
<a href="#tab-3">Overige Gegevens</a></li>
</ul>
</td>
<td>
<img src="images/tabs_right.jpg">
</td>
</tr>
</table>
<div id="tab-1">
<table class="tbltest" style="TEXT-ALIGN:left" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Geldig voor</td>
<td><asp:Label Runat="server" ID="lblVisumGeldigVoor" CssClass="lblInfoVisum" /></td>
<td colspan="2"> </td>
<td>Visumnummer</td>
<td colspan="2"><asp:Label Runat="server" ID="lblVisumVisumnummer" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Vanaf</td>
<td><asp:Label Runat="server" ID="lblVisumVanaf" CssClass="lblInfoVisum" /></td>
<td>Tot</td>
<td colspan="4"><asp:Label Runat="server" ID="lblVisumTot" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Type Visum</td>
<td><asp:Label Runat="server" ID="lblVisumType" CssClass="lblInfoVisum" /></td>
<td>Aantal Binnenkomsten</td>
<td width="100"><asp:Label Runat="server" ID="lblVisumAantalBinnenkomsten" CssClass="lblInfoVisum" /></td>
<td>Duur van het verblijf</td>
<td><asp:Label Runat="server" ID="lblVisumDuurVerblijf" CssClass="lblInfoVisum" /></td>
<td>dagen</td>
</tr>
<tr>
<td>Afgegeven te</td>
<td><asp:Label Runat="server" ID="lblVisumAfgegevenTe" CssClass="lblInfoVisum" /></td>
<td>Plaats 1e binnenkomst</td>
<td colspan="4"><asp:Label Runat="server" ID="lblVisumPlaatsEersteBinnenkomst" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Op</td>
<td><asp:Label Runat="server" ID="lblVisumOp" CssClass="lblInfoVisum" /></td>
<td>Paspoortnummer</td>
<td colspan="4"><asp:Label Runat="server" ID="lblVisumPaspoortnummer" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Naam, voornaam</td>
<td colspan="6"><asp:Label Runat="server" ID="lblVisumNaamVoornaam" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Bijzonderheden</td>
<td colspan="6"><asp:Label Runat="server" ID="lblVisumBijzonderheden" CssClass="lblInfoVisum" /></td>
</tr>
</table>
</div>
<div id="tab-2">
<table class="tbltest" style="TEXT-ALIGN:left" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Paspoortnummer</td>
<td colspan="5"><asp:Label Runat="server" ID="lblPaspoortPaspoortnummer" CssClass="lblInfoVisum" /></td>
<tr>
<td>Type</td>
<td><asp:Label Runat="server" ID="lblPaspoortType" CssClass="lblInfoVisum" /></td>
<td>Code</td>
<td><asp:Label Runat="server" ID="lblPaspoortCode" CssClass="lblInfoVisum" /></td>
<td>Nationaliteit</td>
<td><asp:Label Runat="server" ID="lblPaspoortNationaliteit" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Naam</td>
<td colspan="5"><asp:Label Runat="server" ID="lblPaspoortNaam" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Voornamen</td>
<td colspan="5"><asp:Label Runat="server" ID="lblPaspoortVoornamen" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Geboortedatum</td>
<td><asp:Label Runat="server" ID="lblPaspoortGeboortedatum" CssClass="lblInfoVisum" /></td>
<td>Paspoortnummer</td>
<td colspan="3"><asp:Label Runat="server" ID="lblPaspoortPersoonsnummer" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Geboorteplaats</td>
<td><asp:Label Runat="server" ID="lblPaspoortGeboorteplaats" CssClass="lblInfoVisum" /></td>
<td>Geslacht</td>
<td><asp:Label Runat="server" ID="lblPaspoortGeslacht" CssClass="lblInfoVisum" /></td>
<td>Lengte</td>
<td><asp:Label Runat="server" ID="lblPaspoortLengte" CssClass="lblInfoVisum" /></td>
</tr>
<tr>
<td>Afgiftedatum</td>
<td><asp:Label Runat="server" ID="lblPaspoortAfgiftedatum" CssClass="lblInfoVisum" /></td>
<td>Geldig tot</td>
<td colspan="3"><asp:Label Runat="server" ID="lblPaspoortGeldigtot" CssClass="lblInfoVisum" /></td>
</tr>
</table>
</div>
<div id="tab-3">
<table class="tbltest" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>test3</td>
<td>test3</td>
</tr>
<tr>
<td>test3</td>
<td>test3</td>
</tr>
</table>
</div>
<div id="tab-4">
<table class="tbltest" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</HTML>
Please help me...
arjen1984