Solved

jquery issues with <script> in above header

Posted on 2013-05-18
9
360 Views
Last Modified: 2013-06-13
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
Comment
Question by:GTechForce
  • 5
  • 4
9 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39178199
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
 

Author Comment

by:GTechForce
ID: 39178214
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39179359
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
 

Author Comment

by:GTechForce
ID: 39179535
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
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 

Author Comment

by:GTechForce
ID: 39179591
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39179672
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
 

Accepted Solution

by:
GTechForce earned 0 total points
ID: 39179675
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
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 39179686
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
 

Author Closing Comment

by:GTechForce
ID: 39243867
removed the code that apparently wasnt needed anyway, and it worked.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now