[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3932
  • Last Modified:

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
0
SiemensSEN
Asked:
SiemensSEN
  • 2
  • 2
  • 2
  • +1
1 Solution
 
Randy PooleCommented:
add a ; after initialize()
initialize();
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Where is the includedViewSearchContent element you're using in the selector?
0
 
SiemensSENAuthor Commented:
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
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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

Open in new window

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

Thanks
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
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?
0
 
leakim971PluritechnicianCommented:
$(document).ready(function() {
     $("#includedViewSearchContent").load("partialhtml/searchform.htm", initialize);  // initialize once the content is loaded           
});

Open in new window


load is an asynchronous ajax, that mean it will take time to load the data.
so imagine a slow connexion and a slow server, your form take four second to be loaded in #includedViewSearchContent
if you run immediatly the initalize function, it will not be able to attach the onclick element because the content is not yet available.
0
 
leakim971PluritechnicianCommented:
another way, use this :
$("#includedViewSearchContent").on("click", '#search', function()
	{
		alert("hello");
	});

Open in new window

0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now