Improve company productivity with a Business Account.Sign Up

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

jquery issues with <script> in above header

Hi,
im having an issue with some jquery plugins not working which my page.

here is the info:

im using php includes.

in my nav.php i have all the jquery scripting that i need. for example:

<script src="http://xxx.com/public/js/jquery-1.7.2.min.js"></script>
<script src="http://xxx.com/public/js/jquery-ui-1.8.21.custom.min.js"></script>

in my content.php i have the datepicker and time picker plugins.
However they do not work unless i put the jquery script on that page.


If i view the source of the entire page, it does show the jquery script and they are accessible, but for some reason or another they arent loading the plugin unless i had the jquery script just above where the jquery plugin is on my content.php page

any ideas?
0
Brad Nelson
Asked:
Brad Nelson
  • 5
  • 4
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
That's exactly how it is supposed to work.  jQuery itself must come first followed by any other libraries followed by the plugins that you want to use.
0
 
Brad NelsonOwnerAuthor Commented:
i may have confused you. im using php includes to call nav.php and content.php

in my nav.php i have all the jquery support such as:
<script src="./js/jquery-1.7.2.min.js"></script>


then in my content.php
i have

<div class="control-group">
<label class="control-label" for="endTime">End time</label>
   <div class="controls">
   <input class="timepicker" id="endTime" name="endTime" type="text" value="">
   </div>
</div>

when i view page source it looks correct which the jquery code in the header area but it doesnt work.

i have to add the jqeury code to the content.php to get it to work.
0
 
Dave BaldwinFixer of ProblemsCommented:
Using PHP includes to include both of those in one PHP page should not do that and does not do it in my pages.  I suggest you look at the "View Source" to see if the main jQuery file is actually there.  PHP includes make all those files into one program that sends one HTML page to the browser.

Please show us the "View Source" for the page that doesn't work so we can help you figure it out.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Brad NelsonOwnerAuthor Commented:
Here is the pagesource. Its line 413-435 thats not working.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XXX | Admin Panel</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Styles -->
<link href="http://xxx.com/public/css/bootstrap.css" rel="stylesheet">
<link href="http://xxx.com/public/css/bootstrap-responsive.css" rel="stylesheet">
<link href="http://xxx.com/public/css/bootstrap-overrides.css" rel="stylesheet">
<link href="http://xxx.com/public/css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href="http://xxx.com/public/js/plugins/timepicker/jquery.ui.timepicker.css" rel="stylesheet">
<link href="http://xxx.com/public/css/slate.css" rel="stylesheet">
<link href="http://xxx.com/public/css/slate-responsive.css" rel="stylesheet">

<link href="http://xxx.com/public/js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
<link href="http://xxx.com/public/js/plugins/smartwizard/smart_wizard.modified.css" rel="stylesheet">
<link href="http://xxx.com/public/css/pages/invoice.css" rel="stylesheet">
<link href="http://xxx.com/public/css/pages/ui-elements.css" rel="stylesheet">
<!-- Javascript -->
<script src="http://xxx.com/public/js/jquery-1.7.2.min.js"></script>
<script src="http://xxx.com/public/js/jquery-ui-1.8.21.custom.min.js"></script>
<script src="http://xxx.com/public/js/bootstrap.js"></script>
<script src="http://xxx.com/test/js/plugins/timepicker/jquery.ui.timepicker.min.js"></script>
<script src="http://xxx.com/test/js/plugins/colorpicker/js/bootstrap-colorpicker.js"></script>
<script src="http://xxx.com/test/js/demos/demo.ui-elements.js"></script>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load("jquery", "1");
</script>

<script type="text/javascript">// <![CDATA[
    $(document).ready(function(){
        $('#location').change(function(){
            //$("#equipment > option").remove();
            var lid = $('#location').val();
            $.ajax({
                type: "POST",
                url: "/Reports/getEquipment/"+lid,

                success: function(equipment)
                {
                    $.each(equipment,function(id, description)
                    {
                        var opt = $('<option />');
                        opt.val(id);
                        opt.text(description);
                        $('#equipment').append(opt);
                    });
                }
            });
        });
    });
    // ]]>
</script>

<script type="text/javascript">
	window.onload = function(){
		new JsDatePick({
			useMode:2,
			target:"date",
			dateFormat:"%m-%d-%Y"
		});
	};
</script>

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>

<div id="header">

	<div class="container">

		<h1><a href="http://xxx.com/Home">Logic Panel</a></h1>

		<div id="info">

			<div id="info-menu">

				<div class="info-details">

					<h4>Welcome back, Brad Nelson</h4>

						You have <a href="javascript:;">0 messages.</a>
						<p>[<a href="http://xxx.com/User/logout">Logout</a>]</p>


				</div> <!-- /.info-details -->

				<div class="info-avatar">

					<img src="http://xxx.com/public/img/avatar/avatar_1.jpg" alt="avatar">

				</div> <!-- /.info-avatar -->

			</div> <!-- /#info-menu -->

		</div> <!-- /#info -->

	</div> <!-- /.container -->

</div> <!-- /#header -->
<div id="nav">

		<div class="container">

				<a href="javascript:;" class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
						<i class="icon-reorder"></i>
				</a>

				<div class="nav-collapse">

						<ul class="nav">

								<li class="nav-icon">
										<a href="http://xxx.com">
												<i class="icon-home"></i>
												<span>Home</span>
										</a>
								</li>

								<li class="dropdown active">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
												<i class="icon-th"></i>
												Company
												<b class="caret"></b>
										</a>

										<ul class="dropdown-menu">
												<li><a href="http://xxx.com/Company">List Companies</a></li>
												<li><a href="http://xxx.com/Contacts">List Contacts</a></li>
												<li><a href="http://xxx.com/grid.html">Agreements</a></li>
												<li><a href="http://xxx.com/Equipment">Equipment</a></li>
												<li><a href="http://xxx.com/Company/add">Add Company</a></li>
												<li><a href="http://xxx.com/Contacts/add">Add Contact</a></li>
										</ul>
								</li>

								<li class="dropdown">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
												<i class="icon-copy"></i>
												Work Orders
												<b class="caret"></b>
										</a>

										<ul class="dropdown-menu">
												<li><a href="http://xxx.com/Workorders/open">Open Work Orders</a></li>
												<li><a href="http://xxx.com/Workorders/closed">Closed Work Orders</a></li>
												<li><a href="http://xxx.com/Workorders">Pending Work Orders</a></li>
												<li><a href="http://xxx.com/Workorders">New Work Orders</a></li>
										</ul>
								</li>

								<li class="dropdown">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
												<i class="icon-question-sign"></i>
												Help Desk
												<b class="caret"></b>
										</a>

										<ul class="dropdown-menu">
												<li><a href="http://xxx.com/login.html">List Tickets</a></li>
												<li class="dropdown">
														<a href="javascript:;">
																Dropdown Menu
																<i class="icon-chevron-right sub-menu-caret"></i>
														</a>

														<ul class="dropdown-menu sub-menu">
																<li><a href="javascript:;">Dropdown #1</a></li>
																<li><a href="javascript:;">Dropdown #2</a></li>
																<li><a href="javascript:;">Dropdown #3</a></li>
																<li><a href="javascript:;">Dropdown #4</a></li>
														</ul>
												</li>
										</ul>
								</li>
								<li class="dropdown">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
												<i class="icon-envelope"></i>
												Marketing
												<b class="caret"></b>
										</a>

										<ul class="dropdown-menu">
												<li><a href="http://xxx.com/login.html">List Tickets</a></li>
												<li class="dropdown">
														<a href="javascript:;">
																Dropdown Menu
																<i class="icon-chevron-right sub-menu-caret"></i>
														</a>

														<ul class="dropdown-menu sub-menu">
																<li><a href="javascript:;">Dropdown #1</a></li>
																<li><a href="javascript:;">Dropdown #2</a></li>
																<li><a href="javascript:;">Dropdown #3</a></li>
																<li><a href="javascript:;">Dropdown #4</a></li>
														</ul>
												</li>
										</ul>
								</li>
								<li class="dropdown">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
												<i class="icon-money"></i>
												Finance
												<b class="caret"></b>
										</a>

										<ul class="dropdown-menu">
												<li><a href="http://xxx.com/login.html">Pending Work Orders</a></li>
												<li><a href="http://xxx.com/login.html">Unpaid Invoices</a></li>
												<li><a href="http://xxx.com/login.html">Paid Invoices</a></li>
												<li class="dropdown">
														<a href="javascript:;">
																Dropdown Menu
																<i class="icon-chevron-right sub-menu-caret"></i>
														</a>

														<ul class="dropdown-menu sub-menu">
																<li><a href="javascript:;">Dropdown #1</a></li>
																<li><a href="javascript:;">Dropdown #2</a></li>
																<li><a href="javascript:;">Dropdown #3</a></li>
																<li><a href="javascript:;">Dropdown #4</a></li>
														</ul>
												</li>
										</ul>
								</li>
								<li class="">
										<a href="./">
												<i class="icon-book"></i>
												Knowledgebase
										</a>
								</li>

						</ul>
						<div class="nav pull-right">
								<div class="info-details" style="color: #ffffff;">
										<p>Sunday, May 19th, 2013  04:01 PM</p>
								</div>
						</div>
				</div> <!-- /.nav-collapse -->
		</div> <!-- /.container -->
</div> <!-- /#nav -->
<div id="content">
<script>
      $(function() {
                        $(".timepicker").timepicker ({
                            hourGrid: 4,
                            minuteGrid: 10,
                            timeFormat: 'hh:mm tt'})
                        });
  </script><!-- Javascript -->
  <div class="container">
    <div class="row">
      <div class="span10">
      <div id="pickers" class="widget widget-form">
        <div class="widget-header">
        <i class="icon-print"></i>
          <h3>Add Service Report</h3>
        </div><!-- /widget-header -->

        <div class="widget-content">
          <form class="form-horizontal" method="post" action=
          "%3C?php%20echo%20SITE_URL;%20?%3E/Reports/addSr">
            <fieldset>
              <div class="control-group">
                <label class="control-label" for="company">Company</label>

                <div class="controls">
                  <input class="input-medium" id="company" name="company" type="text" value=
                  "Acme" readonly>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="status">Status</label>

                <div class="controls">
                  <select id="status" name="status">

                    <option value="1">
                      Open                    </option>
                    <option value="2">
                      Assigned                    </option>
                    <option value="3">
                      Pending                    </option>
                    <option value="4">
                      Ready to Bill                    </option>
                    <option value="5">
                      Scheduled                    </option>
                    <option value="6">
                      On Hold                    </option>
                    <option value="7">
                      Cancelled                    </option>
                    <option value="8">
                      Closed                    </option>
                    <option value="9">
                      Completed                    </option>                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="tech">Assigned technician</label>

                <div class="controls">
                  <select id="tech" name="tech">

                    <option value="44">
                      Brad Nelson                    </option>
                    <option value="41">
                      Kevin Nelson                    </option>
                    <option value="45">
                      Michael Stensrud                    </option>                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="contact">Contact</label>

                <div class="controls">
                  <select id="contact" name="contact">

                    <option value="3">
                      Kevin Nelson                    </option>
                    <option value="9" selected="selected">
                      Mike Williams                    </option>                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="location">Location</label>

                <div class="controls">
                  <select id="location" name="location">
                    <option value="#">
                      Select a Location
                    </option>
                    <option value="81">
                      Corporate Office                    </option>
                    <option value="82">
                      Main Office                    </option>                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="equipment">Equipment</label>

                <div class="controls">
                  <select id="equipment" name="equipment">
                    <option value="#">
                      Not Applicable
                    </option>
                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="type">Service Type</label>

                <div class="controls">
                  <select id="type" name="type">
                    <option value="1" selected="selected">
                      Diagnose
                    </option>

                    <option value="2">
                      Install
                    </option>

                    <option value="3">
                      Courtesy Call
                    </option>

                    <option value="4">
                      Warranty
                    </option>
                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="priority">Priority</label>

                <div class="controls">
                  <select id="priority" name="priority">
                    <option value="1" selected="selected">
                      Normal
                    </option>

                    <option value="2">
                      Schedule
                    </option>

                    <option value="3">
                      Severe
                    </option>

                    <option value="4">
                      Emergency
                    </option>
                  </select>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="datepicker-basic">Date Picker</label>

                <div class="controls">
                  <input class="input-medium" id="datepicker-basic" type="text" value="">
                </div>
              </div>

              <div class="control-group">
               <label class="control-label" for="timepicker-basic">Start time</label>
                <div class="controls">
                  <input class="input-medium" id="timepicker-basic" type="text" value="">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="endTime">End time</label>

                <div class="controls">
                  <input class="timepicker" id="endTime" type="text" value="">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="deduct">Deduction</label>

                <div class="controls">
                  <input class="input-medium" id="deduct" name="deduct" type="text" value="">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label">Total time</label>

                <div class="controls">
                  <label class="control-label" id="totalTime"></label>
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="description">Description</label>

                <div class="controls">
                  <input class="input-medium" id="description" name="description" type="text"
                  value="">
                </div>
              </div>

              <div class="control-group">
                <label class="control-label" for="srDetail">Service report details</label>

                <div class="controls">
                  <textarea class="tinymce" name="srDetail" id="srDetail">
</textarea>
                </div>
              </div>

              <div class="form-actions">
                <input type="hidden" name="companyId" value="2">
                <input type="hidden" name="woid" value="126">
                <button type="submit" name="add" class="btn btn-primary btn">Save</button>
                <button class="btn btn">Cancel</button>
              </div>
            </fieldset>
          </form>
        </div><!-- /widget-content -->
      </div><!-- /span8 -->
    </div><!-- /row -->
  </div><!-- /.container -->
  </div> <!-- content --></div> <!-- content -->
<div id="footer">

	<div class="container">

		&copy; 2012 XXX, all rights reserved.

	</div> <!-- /.container -->

</div> <!-- /#footer -->
</body>
</html>

Open in new window

0
 
Brad NelsonOwnerAuthor Commented:
also just an update...
I think it must be some coding issue somewhere in the page because i took the header.php and created a new body.php which had just the date and time picker.

i think created a test.php and did a include of both header.php and body.php and it is working. So the original header.php file seems to work fine. it must be something with the original body then. Do you see anything wrong in that above code?
0
 
Dave BaldwinFixer of ProblemsCommented:
Line 417 and 424 both have id="datepicker-basic" which will cause at least one of them to fail.  In other 'datepickers' that I have used, you had to identify the id's that you wanted to use so the jquery would know what to look for.  I'm sure the one you are using requires something like that somewhere.
0
 
Brad NelsonOwnerAuthor Commented:
i figured it out, this was causing the issue:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("jquery", "1");
</script>

without it, its working. Now i have to figure out what this code is used for.
0
 
Dave BaldwinFixer of ProblemsCommented:
That's good and I suspect that code is supposed to load jquery for you.  But that would give you a second copy and that normally causes problems.  That doesn't change what I said above though.
0
 
Brad NelsonOwnerAuthor Commented:
removed the code that apparently wasnt needed anyway, and it worked.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now