Solved

Run multiple jquery functions on single page

Posted on 2014-09-03
11
328 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 109

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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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
 
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

The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

828 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