Solved

Run multiple jquery functions on single page

Posted on 2014-09-03
11
324 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
Comment Utility
Where are you calling InventoryTabs.js functions in your code?
0
 
LVL 108

Expert Comment

by:Ray Paseur
Comment Utility
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
Comment Utility
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
Comment Utility
Is there a live internet link where I can see this happening?
0
 
LVL 1

Author Comment

by:Vipin Kumar
Comment Utility
Is there any link where I can host and show you.
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
@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
Comment Utility
If I post some screenshots will that do??
0
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
Comment Utility
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
Comment Utility
I have done the above mentioned changes but still it is still not working
0
 
LVL 35

Expert Comment

by:Robert Schutt
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Create a new template 9 20
C3-->D3 Line Chart 4 17
Element alignment and word wrapping 9 23
angularls and plnkr 14 17
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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)

743 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

13 Experts available now in Live!

Get 1:1 Help Now