asked on

Jquery .load does not work in Chrome or IE

Hello,
I have some html code that I would like to include in a another HTML file . I can see the widget but the action event does not work in FF and Chrome , It is working in Fire fox.

I see the alert when I press the search button in Firefox

SEARCHFORM. HTM

 <form class="navbar-form navbar-right" style="width:100%" role="search">
 <div class="input-group">
	<span class=" help input-group-addon"><i class="glyphicon glyphicon-question-sign" style="cursor:pointer"></i></span>
	
    <input type="text" id="q" class="form-control" placeholder="Search" title="search">
    <span class="input-group-btn" id="search" >
    	<button type="button" class="btn btn-default btn-primary logmgrbutton">Search</button>
    </span>
    <span class="input-group-btn" id="reset">
    	<button type="button" class="btn btn-default btn-primary  logmgrbutton">Reset</button>
    </span>
  </div>
</form>

Open in new window

Index. htm

$(document).ready(function() 
		{
			
		      $("#includedViewSearchContent").load("partialhtml/searchform.htm"); 
                      initialize()
		});

Open in new window

Initialize.js

$('#search').click(function()
	{
		alert("hello");
	});

Open in new window

Thanks for your help

Randy Poole

add a ; after initialize()
initialize();

Alexandre Simões

Where is the includedViewSearchContent element you're using in the selector?

SiemensSEN

ASKER

Sorry..
In the index.html

<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta charset="ISO-8859-1">
	<title>Log Manager</title>
	<link rel="stylesheet" type="text/css" media="screen" href="css/vendor/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="css/vendor/jquery/jquery-ui-1.10.0.custom.css" />
	<link rel="stylesheet" type="text/css" media="screen" 	href="css/logmanager.css" />
	<script type="text/javascript" src="js/vendor/jquery/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="js/globalscript.js"></script>
	<script type="text/javascript"	src="js/vendor/jquery/jquery-ui-1.10.4.custom.min.js"></script>
	<script type="text/javascript"	src="js/vendor/bootstrap/bootstrap.min.js"></script>
	<!-- Include the plugin's CSS and JS: -->
		<script type="text/javascript" src="js/vendor/generic/bootstrap-multiselect.js"></script>
		<link rel="stylesheet" href="css/vendor/Generic/bootstrap-multiselect.css" type="text/css"/>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="js/vendor/html5shiv.js"></script>
      <script src="js/vendor/respond.js"></script>
    <![endif]-->
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function() 
		{
		  [b]  $("#includedViewSearchContent").load("partialhtml/searchform.htm");[/b] 
			initialize();
		}); 
	</script>
</head>
<body id="body">
	[b] <div id="includedViewSearchContent"></div>[/b]
</body>
</html>

Open in new window

It work in FF but not IE or Chrome

Randy Poole

[b]  $("#includedViewSearchContent").load("partialhtml/searchform.htm");[/b] 
remove [b] and [/b]

Open in new window

SiemensSEN

ASKER

My code does not have <b></b>. I added to the EE to make the statement bold..

Thanks

Alexandre Simões

Ok, so now I'm only missing where is the initialize() function...

When it doesn't work do you get any javascript errors in the console?

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

another way, use this :

$("#includedViewSearchContent").on("click", '#search', function()
	{
		alert("hello");
	});

Open in new window