Solved

Run multiple jquery functions on single page

Posted on 2014-09-03
11
333 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:gurvinder372
ID: 40300420
Where are you calling InventoryTabs.js functions in your code?
0
 
LVL 110

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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Turn Insights into Action

Communication across every corner of your business is essential to increase the velocity of your application delivery and support pipeline. Automate, standardize, and contextualize your communication processes with xMatters.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

691 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