JavaScript - Oop Prototype Copying

im currently using a prototype add on for one of my sites and id like to convert it to mootools... problem is, i dont know the first thing about prototype! i stumbled upon this before i learned any javascript and ive gotten to know mootools and like using it... heres the code, let me know if anyone can help!
Code:

/**
 * @author Bruno Bornsztein <bruno@missingmethod.com>
 * @copyright 2007 Curbly LLC
 * @package Glider
 * @license MIT
 * @url http://www.missingmethod.com/projects/glider/
 * @version 0.0.3
 * @dependencies prototype.js 1.5.1+, effects.js
 */
/*  Thanks to Andrew Dupont for refactoring help and code cleanup - http://andrewdupont.net/  */
Glider = Class.create();
Object.extend(Object.extend(Glider.prototype, Abstract.prototype), {
	initialize: function(wrapper, options){
	    this.scrolling  = false;
	    this.wrapper    = $(wrapper);
	    this.scroller   = this.wrapper.down('div.scroller');
	    this.sections   = this.wrapper.getElementsBySelector('div.section');
	    this.options    = Object.extend({ duration: 1.0, frequency: 3 }, options || {});
	    this.sections.each( function(section, index) {
	      section._index = index;
	    });    
	    this.events = {
	      click: this.click.bind(this)
	    };
	    this.addObservers();
			if(this.options.initialSection) this.moveTo(this.options.initialSection, this.scroller, { duration:this.options.duration });  // initialSection should be the id of the section you want to show up on load
			if(this.options.autoGlide) this.start();
	  },
  addObservers: function() {
    var controls = this.wrapper.getElementsBySelector('div.controls a');
    controls.invoke('observe', 'click', this.events.click);
  },	

  click: function(event) {
		this.stop();
    var element = Event.findElement(event, 'a');
    if (this.scrolling) this.scrolling.cancel();
    this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });     
    Event.stop(event);
  },

	moveTo: function(element, container, options){
			this.current = $(element);
			Position.prepare();
	    var containerOffset = Position.cumulativeOffset(container),
	     elementOffset = Position.cumulativeOffset($(element));
		  this.scrolling 	= new Effect.SmoothScroll(container, 
				{duration:options.duration, x:(elementOffset[0]-containerOffset[0]), y:(elementOffset[1]-containerOffset[1])});
		  return false;
		},

  next: function(){
    if (this.current) {
      var currentIndex = this.current._index;
      var nextIndex = (this.sections.length - 1 == currentIndex) ? 0 : currentIndex + 1;      
    } else var nextIndex = 1;
    this.moveTo(this.sections[nextIndex], this.scroller, { 
      duration: this.options.duration
    });
  },

  previous: function(){
    if (this.current) {
      var currentIndex = this.current._index;
      var prevIndex = (currentIndex == 0) ? this.sections.length - 1 : 
       currentIndex - 1;
    } else var prevIndex = this.sections.length - 1;
    this.moveTo(this.sections[prevIndex], this.scroller, { 
      duration: this.options.duration
    });
  },

	stop: function()
	{
		clearTimeout(this.timer);
	},

	start: function()
	{
		this.periodicallyUpdate();
	},

	periodicallyUpdate: function()
	{ 
		if (this.timer != null) {
			clearTimeout(this.timer);
			this.next();
		}
		this.timer = setTimeout(this.periodicallyUpdate.bind(this), this.options.frequency*1000);
	}
});

Effect.SmoothScroll = Class.create();
Object.extend(Object.extend(Effect.SmoothScroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    var options = Object.extend({
      x:    0,
      y:    0,
      mode: 'absolute'
    } , arguments[1] || {}  );
    this.start(options);
  },
  setup: function() {
    if (this.options.continuous && !this.element._ext ) {
      this.element.cleanWhitespace();
      this.element._ext=true;
      this.element.appendChild(this.element.firstChild);
    }
    this.originalLeft=this.element.scrollLeft;
    this.originalTop=this.element.scrollTop;
    if(this.options.mode == 'absolute') {
      this.options.x -= this.originalLeft;
      this.options.y -= this.originalTop;
    } 
  },

  update: function(position) {   
    this.element.scrollLeft = this.options.x * position + this.originalLeft;
    this.element.scrollTop  = this.options.y * position + this.originalTop;
  }
});

Hi

I am using a program called aptabs which uses the Protoype framework.
The problem is that when I create a new tab and refresh the page, the newly created tab disappears. How can I resolve this ?

NOTE: The zip file for aptabs is attached.

Thanks

Hi,

I'm trying to use a javascript tabstrip script called aptabs, which uses prototype.js. However, prototype.js won't load properly, because the following error occurs in prototype.js:

destination is undefined

on the following line (3042):

destination[property] = value.methodize();

The function this line is in is:
Code:

  function copy(methods, destination, onlyIfAbsent) {
    onlyIfAbsent = onlyIfAbsent || false;
    for (var property in methods) {
      var value = methods[property];
      if (!Object.isFunction(value)) continue;
      if (!onlyIfAbsent || !(property in destination))
        destination[property] = value.methodize();
    }
  }

I've tried using versions 1.6.0 all the way up to 1.6.1, but I still get the same error.

Can someone suggest what this error could be caused by and possible fixes?

Debbie

Hi there
I am trying to retrieve xml data using the prototype Ajax.Request.
I think I am getting the xml though I am unsure as to how to retrieve the text from the nodes
here is the function I am using to try and populate a text field

Code:

function makeMarkerXml() {
new Ajax.Request('coords.xml',
  {
    method:'post',
    onSuccess: function(transport){
////this will not work/////////
	  var coord = transport.responseXML.childNodes(0).childNodes(0).firstChild.text;
///////////////////////////////



    },
    onFailu  function(){ alert('Call failed') }
  });

 
}

can anyone help?

Either I'm having a moment of stupidity, or have completely failed to understand a fundamental aspect of javascript. The code below is jquery, and uses jquery's extend() function, but I don't think that the issue has anything to do with that... does it?

Code:

$(document).ready(function(){
 
	var obj1 = {
		"name": "spud"
		,"age":	32
	}
	
	var obj2 = obj1;
	
	$.extend(obj2, {"location": "UK"});
	
	console.log(obj1);
	
});

By my reasoning, obj1 shouldn't have location set. But it does.

If this is something peculiar to jquery, then my apologies and I'll go off to the right forum - but is it? Is the line
var obj2 = obj1;
not making a copy of the original and leaving the original intact? Is it instead making some sort of reference to it? Why is changing the copy having an effect on the original??

Hey All - I asked this a few days ago.. what I came up with works just fine, but I feel it doesn't take advantage of "classes". If you think I could make this better by turning it into a class or using some other notation, that would be great.

Keep in mind, ALL this does is rewrite a pagination.... for a search return in a lightbox. I have this function called in the return function...




Code:

var srcpagParams = $H();
function buildPagi(param, currdsplyNum){
       var temDsply = new Template('<strong>[#{total_display}<span id="count">#{prevImg} #{links} #{nextImg}</span>'),
           crnt_link = srcpagParams.set('crnt_link', param), // the page we want to see
           dsplyNum = srcpagParams.get('paginateNum'), // what is the number of returns per page
           ttl_lnks  = Math.ceil( srcpagParams.get('numFound') / srcpagParams.get('paginateNum')), // total pages
           data_template = new Hash();
           data_template.set('total_display',srcpagParams.get('numFound'));

        bldImg = function() {
              var prvB = '<a href="#content" id="pagiPrev" onclick="firesrc(this)">Prev<img src="blank.gif" /></a>';
              var nxtB = '<a href="#content" id="pagiNext" onclick="firesrc(this)">Next<img src="blank.gif" /></a>';
              data_template.set('prvImg',(crnt_link > 1) ? prvB : "");
              data_template.set('nxtImg',(crnt_link < ttl_lnks) ? nxtB  : "");
       }
        bldLk =  function(){
           var holder = "";
           if(ttl_lnks > 1){
             var linkStr = new Template('&nbsp;&nbsp;<a href="#content" onclick="firesrc(#{pos});"> Go to page #{pos}</a>&nbsp;&nbsp;');
               $R(1,ttl_lnks).each(function(n) {
                  var posit = {pos : n}
                  holder += (crnt_link == n) ? "&nbsp;&nbsp;" + n + "&nbsp;&nbsp;" : linkStr.evaluate(posit);
               });
                  data_template.set('links',linkholder);
           }
        }
        bldRng =  function(){
            var currPaneRg = (dsplyNum * crnt_link) - (dsplyNum - currdsplyNum);
            data_template.set('range',((crnt_link - 1) * (dsplyNum) + 1 ) + " - " + currPaneRg);
             $('pages').update(temDsply.evaluate(data_template)).show();
        }
       firesrc = function(cl){
           var pagiPane = (typeof cl === "number") ? cl : (cl.id == "pagiNext") ? crnt_link + 1 : crnt_link - 1;
           var start = crnt_link * srcpagParams.get('paginateNum');
           Alertsrc( $F('query') ,(pagiPane)) // pass the query to the json to return the current search request
       }
           bldImg();
           buildLnk();
           bldRng();
};


Since some of the data declared at the top changes depending on the return, I didn't know if I could "initialize" it in a class.

But could I turn this into a class and if so - what I just use:

var buildPagi = create.Class({ 
       initialize: object.extend({

        })

})

Call the function when we are passed some data:
Code:

buildPagi(somevalue, somevalue2)

** NOTE: I use the libraries prototype and jquery.. so use Create.Class and new Template are within the libraries... etc..

so, is there a more eloquent, or robust way to write what I did above?

Hello all

I have been trying in vain for many days to resolve a conflict between javascript libraries.

I have read far and wide and still have failed to fix this problem, most likely because my programming skills are just about copy and pasting.

My homepage uses

jquery horizontal css menubar + a combined mootool and prototype accordian type sliding information box in the middle of the webpage.

I find that the highlighter of the css menubar does not work when prototype.js is also loaded on the same page.

I have read somewhere that $ should be replaced however I have tried every possible option and none works.

I have jquery loading first as it is on my template, with this

<script type='text/javascript' src='../Web/Templates/jquery-1.3.2.js'></script>
<script type='text/javascript' src='js/example.js'></script>

And my mootool and prototype loades further below like this

<script type="text/javascript" src="scripts/intro/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/intro/moo.fx.js"></script>
<script type="text/javascript" src="scripts/intro/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>


Could someone please offer me further assistance and enlighten me what other information you require to assist me further.

I have attached the example.js inside example.zip file if someone could kindly edit it for myself.

Looking forward to your assistance.

Sincerely,

Lex

Hello,

I'm trying to write my class with member properties and functions like below. What I want to learn is that is there any problem to use prototype object in the class that we want to use with it? I asked because I generally see that prototype object definition and member functions and properties created outside of the class unlike my class that I wrote like below.

Is there any problem writing my class like below?
Thanks.


Code:

        function Point()
	{
		Point.prototype.x = this._x;
		Point.prototype.y = this._y;
		
		function _setX(x)
		{
			this.x = x;
		}
		Point.prototype.setX = _setX;
		
		
		function _setY(y)
		{
			this.y = y;
		}
		Point.prototype.setY = _setY;
		
		
		function _show()
		{
			alert(this.x + this.y);
		}
		Point.prototype.Show = _show;
	}


	function callMyClass()
	{
		var p = new Point();
		p.setX(3);
		p.setY(5);
		p.Show();
	}

Array.prototype.each = function (fn) {
this.map(fn)
}

This is my each function that works great in every other browser but IE. UGH! What am I doing wrong? the error points to the this in the function.

Is it that IE doesn't like map? Has anyone seen this before? I thought my code was correct. Works perfect in FF, chrome and opera. the canvas text doesn't work in opera, but it does render the features so the each function is working.

I'll post the code if needed, but it's huge. here's the script running.
http://www.pdxbusiness.com/canvas/golf/

The code below looks elementary, but it gives absurd results.
Can you tell how I should have written it?
I am slowly beginning to understand why it fails. But I do not understand why
the JavaScript tutorials I've studied never warned against this trap.

Any ship needs a list of crew members. The total number of persons onboard must be known
too, for the case the ship sinks.

We place these two properties in a prototype, so that we won't have to repeat them
for each kind of ship.

A passenger list is needed only if the ship is a passenger ship, so we decide not to
place the passenger list in a prototype.

Code:

function Ship() {
    this.crew = [];
    this.persons = 0;
}

function PassengerShip(name) {
    this.name = name;
    this.passengers = [];
}

PassengerShip.prototype = new Ship;

Passengers and crew arrive one by one shortly before departure.
The first thing they do onboard is to check in:

Code:

Ship.prototype.checkin = function(list, person) {
    this[list].push(person);
    ++this.persons;
}

(Instead of the push function, we could as well have used a statement such as
Code:

this[list][ this[list].length ] = person;

I have tried. Same wrong result.)

Let us launch two passenger ships and check some persons in.

Code:

var msFloat = new PassengerShip("M/S Float");

msFloat.checkin("crew", "Captain");
msFloat.checkin("crew", "Cook");

msFloat.checkin("passengers", "Alice");
msFloat.checkin("passengers", "Bob");

var msFlawed = new PassengerShip("M/S Flawed");

msFlawed.checkin("crew", "Capt'n");
msFlawed.checkin("crew", "Sailor");

msFlawed.checkin("passengers", "Charlie");

The shipping company wants a report when everybody has checked in.
But I'm not sure they will like it:

Code:

Ship.prototype.report = function() {
    function makeList(ship, list) {
        if (!ship[list]) return (ship.name + " has no list of " + list + ".\n");
        if (!ship[list].length) return (ship.name + "  has no " + list + ".\n");
        return (list + ":  " + ship[list].join(", ") + "\n");
    }
    alert("\nPre-Departure Report For  '"  + this.name + "'\n\n" +
          makeList(this, "passengers")     + makeList(this, "crew") +
          "\nNumber of persons onboard:  " + this.persons + "\n\n");
}

msFloat.report();  // OK: Alice, Bob as passengers; Captain, Cook as crew
msFlawed.report(); // WRONG CREW: Captain, Cook, Capt'n, Sailor

The number of persons (passengers + crew) is reported correctly for both ships,
and so is the passenger list.

But the "M/S Flawed" reports four crew members. Two of those never checked in on that ship.

How can such a thing happen? What kind of blunder did I make?

An "edit+execute" version of the code is available at bjarne.altervista.org/sailor.html
together with a little testoutput, some considerations based on that testoutput,
and a workaround (which is not the same as a solution - it looks ridiculous).
It seems as if arrays placed in prototypes do not always work as expected.

Can that be true? The testoutput suggests that JavaScript sometimes forgets to create
a much-needed own property in the this object, and instead changes the prototype.
But that sounds incredible, doesn't it?
I am not too familiar with the deeper theory of JavaScript, and I hope to get a response.

Here is the code concatenated and embedded:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Array In JavaScript Prototype</title></head>
<body>
 <script type="text/javascript" language="JavaScript">

function Ship() {
    this.crew = [];
    this.persons = 0;
}

function PassengerShip(name) {
    this.name = name;
    this.passengers = [];
}

PassengerShip.prototype = new Ship;

Ship.prototype.checkin = function(list, person) {
    this[list].push(person);
    ++this.persons;
}

Ship.prototype.report = function() {
    function makeList(ship, list) {
        if (!ship[list]) return (ship.name + " has no list of " + list + ".\n");
        if (!ship[list].length) return (ship.name + "  has no " + list + ".\n");
        return (list + ":  " + ship[list].join(", ") + "\n");
    }
    alert("\nPre-Departure Report For  '" + this.name + "'\n\n" +
        makeList(this, "passengers") + makeList(this, "crew") +
          "\nNumber of persons onboard:  " + this.persons + "\n\n");
}

var msFloat = new PassengerShip( "M/S Float" );
msFloat.checkin("crew", "Captain");
msFloat.checkin("crew", "Cook");
msFloat.checkin("passengers", "Alice");
msFloat.checkin("passengers", "Bob");
msFloat.report();  // OK: Alice, Bob as passengers; Captain, Cook as crew

var msFlawed = new PassengerShip( "M/S Flawed" );
msFlawed.checkin("crew", "Capt'n");
msFlawed.checkin("crew", "Sailor");
msFlawed.checkin("passengers", "Charlie");
msFlawed.report(); // WRONG CREW: Captain, Cook, Capt'n, Sailor

</script>
</body>
</html>

I have spent much time struggling with this kind of error, which is reproducible in 5 different browsers.
This is the first time I have been able to reproduce it in a form that can be presented to others.

Is there a well-established programming practice that can prevent it? What do experienced
JavaScript programmers do?

Regards
Bjarne Pagh Byrnak

I have 2 text boxes on my page. When the user clicks in one text box, I would like whatever is in there to be copied to the other text box.

Is this possible? I have looked into it and onClick seems like it might do it but I can't get it to work.

Thanks.

I have 2 textareas, 1 which will be vissible, another that will be hidden. I have a function that mirrors (not in reversed lettering) the first textarea's input to the second.
Code:

function copy_data(val){ 
		var messageText = document.getElementById(val.id).value 
			document.getElementById('message').innerHTML = messageText;
}

So that copies from :
<textarea name="text_message" rows="4" id="text_message" style="direction:ltr;" onkeyup="copy_data(this)"></textarea><br/>
To:

<textarea name="message" rows="4" id="message" style="direction:ltr;"></textarea>


Then I have another function which when I select text in the "text_message" textarea will apply a tag to it, however I don't want this tag to be vissible in the "text_message" textarea but rather in the "message" textarea.

Code:

function formatText(el,tag){
	var selectedText = document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
		if(selectedText!=''){
		var newText=''+tag+''+selectedText+''+tag+'';
			el.value=el.value.replace(selectedText,newText)
	}
}

This effects from this checkbox:
<input type="checkbox" id="bold1" name="bold1" onclick="formatText(message,'#28D')" checked="checked" >

Could anyone please help me, I think I may have missed something somewhere, because it works if I point it back to "text_message"

Essentially, I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side.

Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox.

I'm very new to JavaScript, so ff someone can provide an example or pseudo code, I would greatly appreciate it.

Hi everyone,

Is there a shorter and cleaner way of performing the following:

The objective is to get the value/input from the first set of textboxes in the form and copy them to other set of textboxes.

Outline of the form is as follows:

First set of textboxes
Company
Address
City
State
Zip
Country

Select number of users -->1 2 3

User 1
Company
Address
City
State
Zip
Country

User 2
Company
Div
Address1
Address2
City
State
Zip
Country

User 3
Company
Address
City
State
Zip
Country

=============================================
At the moment the code looks like this where (comp,div, addra,addrb,city,state,zip and country) are the name attributes of the first set of text boxes and (comp1.....country1,comp2.....country2, comp3....country3) are the name attributes for the textboxes for user 1,2 and 3 respectively.

Code:

function compAddress(){

  document.form.comp1.value = document.form.comp.value;
  document.form.div1.value = document.form.div.value;
  document.form.addra1.value = document.form.addra.value;
  document.form.addrb1.value = document.form.addrb.value;
  document.form.city1.value = document.form.city.value;
  document.form.state1.value = document.form.state.value;
  document.form.zip1.value = document.form.zip.value;
  document.form.country1.value = document.form.country.value;
  
  document.form.comp2.value = document.form.comp.value;
  document.form.div2.value = document.form.div.value;
  document.form.addra2.value = document.form.addra.value;
  document.form.addrb2.value = document.form.addrb.value;
  document.form.city2.value = document.form.city.value;
  document.form.state2.value = document.form.state.value;
  document.form.zip2.value = document.form.zip.value;
  document.form.country2.value = document.form.country.value;

  document.form.comp3.value = document.form.comp.value;
  document.form.div3.value = document.form.div.value;
  document.form.addra3.value = document.form.addra.value;
  document.form.addrb3.value = document.form.addrb.value;
  document.form.city3.value = document.form.city.value;
  document.form.state3.value = document.form.state.value;
  document.form.zip3.value = document.form.zip.value;
  document.form.country3.value = document.form.country.value;

Thanks,

I'm still a beginner in js core so please forgive if the question is too fundamental.

In the following example PositionedRectangle is a subclass of Rectangle, all 3 methods of prototype inheritance seem to produce the same results, method 1 is from the authors book (Flanagan's Definitive Guide 5ed) example 9-3, and method 2 is from his website example 9-3, and method 3 is my own;


Code:

// method 1 seems most complicated
function heir(p) {
function f(){};
f.prototype =p;
return new f();
}
PositionedRectangle.prototype = heir(Rectangle.prototype);

//method 2 
PositionedRectangle.prototype = new Rectangle();

//method 3 seems most straight forward (I don't know if it's correct but works ok)
PositionedRectangle.prototype = Rectangle.prototype;

Thank you Gents, J.