?
Solved

Run multiple jquery functions on single page

Posted on 2014-09-03
11
Medium Priority
?
335 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
  • 2
  • +1
11 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 40300420
Where are you calling InventoryTabs.js functions in your code?
0
 
LVL 111

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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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 2000 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them.

Question has a verified solution.

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

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
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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 …
Suggested Courses

762 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