Solved

Run multiple jquery functions on single page

Posted on 2014-09-03
11
325 Views
Last Modified: 2014-09-03
Hi,

I have two scripts inventory.js and inventory_tabs.js  which need to run on single page. The tabs script is executing but the inventory script is not. I have tested the inventory script in another project it is working with same code. I am uploading all the files kindly help me execute both the scripts on the same page.
inventory.js
inventory-tabs.js
jquery-1.11.1.min.js
inventory.css
index.php
0
Comment
Question by:Vipin Kumar
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 40300420
Where are you calling InventoryTabs.js functions in your code?
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40300464
There is nothing about jQuery that would limit you to one jQuery function per page.  Just define the functions with their selectors, events and actions.  Example here with three functions:
http://iconoun.com/demo/temp_leovipin2.php

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<title>Example Using  Three jQuery Functions</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#red").click(function(){
        $("#output p#target").css("color","red");
    });
    $("#blu").click(function(){
        $("#output p#target").css("color","blue");
    });
    $("#blk").click(function(){
        $("#output p#target").css("color","black");
    });
});
</script>

</head>
<body>

<div   id="red">Click Me for Red!</div>
<div   id="blu">Click Me for Blue!</div>
<div   id="blk">Click Me for Black!</div>
<div   id="output">
   <p  id="static">This element remains unchanged</p>
   <p  id="target">This element gets changed</p>
</div>

</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 40300737
The snippets of the jquery codes is attached below. Kindly let me know how to embed them both in same file and both shall work. When I am calling them in different files the tabbed effect works but not the datepicker effect

//inventory-tabs.js file - for tabbed effect in the page

$(function() {
	$("#add-tab").organicTabs();
});
        
(function($) {
	$.organicTabs = function(el, options) {
		var base = this;
		base.$el = $(el);
		base.$nav = base.$el.find(".nav");
		base.init = function() {
			base.options = $.extend({},$.organicTabs.defaultOptions, options);
			// Accessible hiding fix
			$(".hide").css({
				"position": "relative",
				"top": 0,
				"left": 0,
				"display": "none"
			});
			base.$nav.delegate("li > a", "click", function() {
				// Figure out current list via CSS class
				var curList = base.$el.find("a.current").attr("href").substring(1),
				// List moving to
				$newList = $(this),
				// Figure out ID of new list
				listID = $newList.attr("href").substring(1),
				// Set outer wrapper height to (static) height of current inner list
				$allListWrap = base.$el.find(".list-wrap"),
				curListHeight = $allListWrap.height();
				$allListWrap.height(curListHeight);
				if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
					// Fade out current list
					base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
						// Fade in new list on callback
						base.$el.find("#"+listID).fadeIn(base.options.speed);
						// Adjust outer wrapper to fit new list snuggly
						var newHeight = base.$el.find("#"+listID).height();
						$allListWrap.animate({
							height: newHeight
						});
						// Remove highlighting - Add to just-clicked tab
						base.$el.find(".nav li a").removeClass("current");
						$newList.addClass("current");
					});
				}
				// Don't behave like a regular link
				// Stop propegation and bubbling
				return false;
			});
		};
		base.init();
	};
	$.organicTabs.defaultOptions = {
		"speed": 300
	};
	$.fn.organicTabs = function(options) {
		return this.each(function() {
			(new $.organicTabs(this, options));
		});
	};
})(jQuery);

Open in new window


//inventory.js - for datepicker effect

$(document).ready(
  
  /* This is the function that will get executed after the DOM is fully loaded */
 function () {
    $( "datepicker_start" ).datepicker({
      changeMonth: true,//this option for allowing user to select month
      changeYear: true //this option for allowing user to select from year range
    });
    $( "datepicker_end" ).datepicker({
      changeMonth: true,//this option for allowing user to select month
      changeYear: true //this option for allowing user to select from year range
    });
  }

);

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 40300766
Is there a live internet link where I can see this happening?
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 40300825
Is there any link where I can host and show you.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 40300908
@leovipin2 - You can host your app on free hosting services like Google Cloud or Heroku if you don't already have a live production/staging server.
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 40301022
If I post some screenshots will that do??
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40301106
In inventory.js, shouldn't you be using #datepicker_start instead of just datepicker_start? Same for datepicker_end of course.

Also, in your php source I don't see a reference to jQuery UI, only the basic jQuery javascript reference. Add those to your head section, for example:
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Inventory Management System</title>
    <link rel="stylesheet" href="inventory.css" media="screen">
    <link rel="shortcut icon" type="image/png" href="http://localhost:8080/inventory/favicon.png"/>
    <script src="jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <script src="inventory_tabs.js"></script>
    <script src="inventory.js"></script>
</head>

Open in new window

Test page here: http://schutt.nl/ee/Q_28510395/
0
 
LVL 1

Author Comment

by:Vipin Kumar
ID: 40301360
I have done the above mentioned changes but still it is still not working
0
 
LVL 35

Expert Comment

by:Robert Schutt
ID: 40301459
Any messages in the console perhaps? (F12)

Have you looked at my test page? It's definitely working there:
capture
Can you post your new code on the off-chance that there's still a typo in there?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

914 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