Re: JavaScript class problem - JavaScript Discussion Boards

Wjousts25-Aug-11 6:09

25-Aug-11 6:09

I'm not a habitual user of JavaScript, but I have a particular need for it right now, so maybe my problem is due to some fundamental misunderstanding of how JavaScript is supposed to work and my expectation that it'll work somewhat like the C# I'm familiar with. Anyway, I have a class (or object prototype or whatever the correct term in JavaScript is supposed to be) that looks something like this:

JavaScript

function MyClass() {

    //....

    this.OnTimerStart = function() {
        // Do some stuff
    };

    MyClass.prototype.StartTimer = function() {
        if (this.OnTimerStart != null) {
            this.OnTimerStart();
        }
    }
}

Now when I use it, I create an object like so:

JavaScript

var myObj = new MyClass();

Now here's my problem, in the StartTimer function this.OnTimerStart returns undefined (so the != null comparison is always false and the function doesn't get called), but myObj.OnTimerStart is defined and can be executed (directly running myObj.OnTimerStart() works). So why doesn't the prototype method StartTimer seem to know what "this" is? At least in the case when a variable is a function (it doesn't seem to have a problem when a variable is just a string or an int for example). What am I not understanding here?
(Note: tested in IE8, I have other problems with Firefox at the moment which may or may not be related)

Edit: fixed typo in StartTimer

modified on Thursday, August 25, 2011 1:40 PM

Re: JavaScript class problem

Graham Breach25-Aug-11 6:34

Graham Breach

25-Aug-11 6:34

Try replacing

MyClass.prototype.StartTimer() {

with

MyClass.prototype.StartTimer = function() {

Re: JavaScript class problem

Wjousts25-Aug-11 7:40

Wjousts

25-Aug-11 7:40

Actually, that was a typo on my part when posting. I think the actual problem I'm having is more complicated that my simple example showed. The way StartTimer get called is from the callback to a jQuery getJSON:

JavaScript

MyClass.prototype.MyFunction = function () {
    $.getJSON(this.url + "/MyFunction?callback=?", function (data) {
        MyClass.prototype.ErrorChecker(data, function (data) {
            MyClass.prototype.StartTimer();
        });
    });
}

ErrorChecker is a function I use to check for a particular returned value that indicates an error occurred with my web service which then calls the passed in function (i.e. StartTimer) if there is no error. I thought the problem might be because I did MyClass.prototype, but changing it for this.StartTimer() (and/or this.ErrorChecker) doesn't work either and causes an error within jQuery. I guess somewhere within the callback infrastructure you lose the identity of "this". I guess I could change so that both methods (ErrorChecker and StartTimer) accept an extra argument which I can pass "this" in to. I'll give it a try.

Re: JavaScript class problem

AspDotNetDev25-Aug-11 7:45

AspDotNetDev

25-Aug-11 7:45

Try this:

JavaScript

MyClass.prototype.MyFunction = function () {
    var instance = this;
    $.getJSON(instance.url + "/MyFunction?callback=?", function (data) {
        instance.ErrorChecker(data, function (data) {
           instance.StartTimer();
        });
    });
}

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Re: JavaScript class problem

Wjousts25-Aug-11 8:06

Wjousts

25-Aug-11 8:06

jQuery still chokes on it. Is there a difference between instance and this?

Re: JavaScript class problem

AspDotNetDev25-Aug-11 8:11

AspDotNetDev

25-Aug-11 8:11

"this" is a keyword. "instance" is just what I named that variable. You could rename "instance" to "donkey" and it would act the same. What my changes are supposed to do are capture the value returned from "this" and store it in the "instance" variable so you can use it in nested functions where "this" changes. I'm not sure why it still chokes. Try replacing the line that chokes with alert("test").

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Re: JavaScript class problem

Wjousts25-Aug-11 8:18

Wjousts

25-Aug-11 8:18

Whoops!

I completely missed that part. I thought instance was some JavaScript keyword I didn't know about (it's been a long time since I last did any significant JavaScript). Just tried it and it seems to work now. Copying this to a local variable solves the problem.

Thank you very much. I've been banging my head on my desk all morning.

Re: JavaScript class problem

AspDotNetDev25-Aug-11 7:19

AspDotNetDev

25-Aug-11 7:19

In addition to what Graham said, you don't need to put prototype functions in the constructor. You can do this instead:

JavaScript

function MyClass() {
  this.OnTimerStart = function() {
    alert("started");
  };
}
MyClass.prototype.StartTimer = function() {
  if (this.OnTimerStart) {
    this.OnTimerStart();
  }
}
var instance = new MyClass();
instance.StartTimer();

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Re: JavaScript class problem

Wjousts25-Aug-11 7:43

Wjousts

25-Aug-11 7:43

Is there a reason for doing it that way versus what I was doing? I can't help my strong desire to wrap a "class" in curly brackets (i.e. the C# way) which I think was why I naturally did it that way.

Re: JavaScript class problem

AspDotNetDev25-Aug-11 7:47

AspDotNetDev

25-Aug-11 7:47

Your way, the function would be created each time the class constructor is called. My way, it is created once. Doing it your way would be in C# like creating a delegate rather than a function and reassigning the delegate each time the constructor is called. Basically, it's an unnecessary performance hit.

Martin Fowler wrote:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Re: JavaScript class problem

Wjousts25-Aug-11 7:58

Wjousts

25-Aug-11 7:58

Makes sense. Thanks.

jquery dialog autosize [modified]

fififlowertot24-Aug-11 3:05

fififlowertot

24-Aug-11 3:05

Hi,
I have a jquery dialog which loads another aspx page inside iframe.
I want dialog to resize as per the contents inside Iframe.

Tried setting

width:'auto' and autoResize: true

in the dialog constructor but no luck.

modified on Wednesday, August 24, 2011 9:25 AM

Re: jquery dialog autosize

Gerben Jongerius24-Aug-11 19:50

Gerben Jongerius

24-Aug-11 19:50

You will have to create some javascript yourself to build this. First you will have to attach an event to the onload of the iframe. In that onload function you will have to try to calculate the height of the contents and resize the jQuery dialog window. I built something similar a couple of months back, but it didn't work equally well in all scenario's.

// title, url, name, ok_title, width, height <-- these were input variables for my code
      var popup_div = document.createElement('div');
      var popup_content = document.createElement('iframe');
      var dialog = null;
      jQuery(popup_content).css({ 'width': '100%', 'height': '100%', 'border': 'none', 'visibility': 'hidden' });
      popup_content.src = url;
      popup_content.name = name;
      popup_div.id = 'bb-dialog';
      popup_div.appendChild(popup_content);
      document.body.appendChild(popup_div);

      jQuery(popup_content).bind('load', function () {
        height = height == 'auto' ? jQuery(top.window.frames[name]).height() : height,
        width = width == 'auto' ? jQuery(top.window.frames[name]).width() : width;

        jQuery(popup_div).dialog({
          show: 'fade',
          hide: 'fade',
          title: title,
          modal: true,
          position: 'center',
          width: width,
          height: height,
          closeOnEscape: false,
          close: function () { this.parentNode.parentNode.removeChild(this.parentNode); },
          open: function () { jQuery(popup_content).css('visibility', 'visible'); },
          buttons: button_set
        });

        jQuery(this).unbind('load');
      });

Try it out and see if it works for you. Though you might have to tweak it a little bit.

Passing on Javascript array data to a PHP-array

Gert Koetsier18-Aug-11 6:19

Gert Koetsier

18-Aug-11 6:19

I found and adapted an HTML script as shown below. It fits my needs perfectly. However, I don't know how to store the field-values of repeated lines in a javascript array that subsequently passes its contents on to a PHP-array that enables me to store the date in a MYSQL-database. I tried to fix something myself in de 3rd codeblock of de AddRow()function.

A second problem is: when de line is repeated I need to reset de field values to default. Does anybody have the knowledge that I so obviously do not have?
======================================================================

<title>

function AddRow ()
{
var o_id = document.getElementById ("id").cloneNode(true);
var label_id = document.getElementById ("label_id").cloneNode(true);
var o_item = document.getElementById ("item").cloneNode(true);
var o_subitem = document.getElementById ("subitem").cloneNode(true);
var label_opm = document.getElementById ("label_opm").cloneNode(true);
var o_opm = document.getElementById ('opm').cloneNode(true);

// reset field opm
document.getElementById("opm").innerHTML="";

o_id.name='id[]';
o_item.name = 'item[]';
o_subitem.name = 'subitem[]';
o_opm.name = 'opm[]';

var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;

var o_td_id = document.createElement ("td");
var o_td_item = document.createElement ("td");
var o_td_subitem = document.createElement ("td");
var o_td_opm = document.createElement ("td");
var o_td_button = document.createElement ("td");

var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");

o_td_id.appendChild (label_id);
o_td_id.appendChild (o_id);
o_td_item.appendChild (o_item);
o_td_subitem.appendChild (o_subitem);
o_td_opm.appendChild (label_opm);
o_td_opm.appendChild (o_opm);
o_td_button.appendChild (o_button);

o_tr.appendChild (o_td_id);
o_tr.appendChild (o_td_item);
o_tr.appendChild (o_td_subitem);
o_tr.appendChild (o_td_opm);
o_tr.appendChild (o_td_button);

//document.ovd.id.value++;
alert(o_item.value);

o_body.appendChild (o_tr);
}

function RemoveRow ()
{
var dinosaur = this.parentNode.parentNode;
dinosaur.parentNode.removeChild (dinosaur); // Smile | :)

}

OvD-Id

-- Choose Category --
Cat 1
Cat 2
Cat 3

-- Choose Sub Category --
Sub Cat 1
Sub Cat 2
Sub Cat 3

Remarks

Add OvD Item

Re: Passing on Javascript array data to a PHP-array

Evan Gallup3-Sep-11 18:49

Evan Gallup

3-Sep-11 18:49

I'd love to help, but I'm really not clear as to what you're asking here. Can you explain further?

Also, just a tip, put any code you must share inside of these tags: <pre></pre>
Do so by clicking the 'code' button above the message box. It makes your code a lot easier to read.

Javascript data (array) pass on to PHP

Gert Koetsier18-Aug-11 6:15

Gert Koetsier

18-Aug-11 6:15

<title>

function AddRow ()
{
var o_id = document.getElementById ("id").cloneNode(true);
var label_id = document.getElementById ("label_id").cloneNode(true);
var o_item = document.getElementById ("item").cloneNode(true);
var o_subitem = document.getElementById ("subitem").cloneNode(true);
var label_opm = document.getElementById ("label_opm").cloneNode(true);
var o_opm = document.getElementById ('opm').cloneNode(true);

// reset field opm
document.getElementById("opm").innerHTML="";

o_id.name='id[]';
o_item.name = 'item[]';
o_subitem.name = 'subitem[]';
o_opm.name = 'opm[]';

var o_button = document.createElement ("input");
o_button.type = "button";
o_button.value = "Remove";
o_button.onclick = RemoveRow;

var o_td_id = document.createElement ("td");
var o_td_item = document.createElement ("td");
var o_td_subitem = document.createElement ("td");
var o_td_opm = document.createElement ("td");
var o_td_button = document.createElement ("td");

var o_tr = document.createElement ("tr");
var o_body = document.getElementById ("dynamic_table_body");

o_td_id.appendChild (label_id);
o_td_id.appendChild (o_id);
o_td_item.appendChild (o_item);
o_td_subitem.appendChild (o_subitem);
o_td_opm.appendChild (label_opm);
o_td_opm.appendChild (o_opm);
o_td_button.appendChild (o_button);

o_tr.appendChild (o_td_id);
o_tr.appendChild (o_td_item);
o_tr.appendChild (o_td_subitem);
o_tr.appendChild (o_td_opm);
o_tr.appendChild (o_td_button);

//document.ovd.id.value++;
alert(o_item.value);

o_body.appendChild (o_tr);
}

function RemoveRow ()
{
var dinosaur = this.parentNode.parentNode;
dinosaur.parentNode.removeChild (dinosaur); // Smile | :)

}

OvD-Id

-- Choose Category --
Cat 1
Cat 2
Cat 3

-- Choose Sub Category --
Sub Cat 1
Sub Cat 2
Sub Cat 3

Remarks

Add OvD Item

dynamic progress bar with respect to time

amjadali25516-Aug-11 18:27

amjadali255

16-Aug-11 18:27

i want to create dynamic progress bar with respect to time. it means the progress bar increase with high value and decrease with low value automatically...

Re: dynamic progress bar with respect to time

Richard MacCutchan16-Aug-11 22:39

Richard MacCutchan

16-Aug-11 22:39

Try here[^].

Unrequited desire is character building. OriginalGriff

Validation groups with jQuery validation plugin on ASP.NET webforms?

zeego14-Aug-11 19:32

zeego

14-Aug-11 19:32

How can I emulate validation groups on jQuery UI Modal dialogs on asp.net webforms? I am using multiple modals on my webform but can't get this to work. WTF | :WTF:

CROSS POST

Not Active14-Aug-11 19:40

Not Active

14-Aug-11 19:40

Don't cross post. You have already asked this, and received responses, in the ASP.NET forum Read the forum guidelines please.

I know the language. I've read a book. - _Madmatt

Re: CROSS POST

zeego14-Aug-11 20:06

zeego

14-Aug-11 20:06

I'm sorry I thought the fellows at javascript would answer better. Frown | :(

How to Know The Selected Date is Previous in javascript

Arunkumar.Koloth13-Aug-11 20:28

Arunkumar.Koloth

13-Aug-11 20:28

Hi all

Iam New to javascript can you help me how to check the selected date is previous one?

eg:today is 14/8/2011 and i selected 12/8/2011 in a javascript calender i want to validate the selected date is previus one is it possible?

Please Help me

Arunkumar.T
Cry | :((

Re: How to Know The Selected Date is Previous in javascript

DaveAuld13-Aug-11 22:21

DaveAuld

13-Aug-11 22:21

Do you mean you want to make sure the selected date is BEFORE todays date?

If thats all you need then a simple DateDiff and look for a +ve or -ve number depending on whether you put the latestdate first or second;

http://ditio.net/2010/05/02/javascript-date-difference-calculation/[^]

Dave
Find Me On: Web|Facebook|Twitter|LinkedIn

Folding Stats: Team CodeProject

Re: How to Know The Selected Date is Previous in javascript

Niral Soni24-Aug-11 2:19

Niral Soni

24-Aug-11 2:19

/************************************************
function: CompareDates
Arguments: fromdate : type 'String' : format : DD/MM/YYYY
Arguments: todate : type 'String' : format : DD/MM/YYYY
Returns: Number value 
	if value = 1  : fromdate comes before todate
	if value = 0  : fromdate and todate are same
	if value = -1 : fromdate comes after todate
*************************************************/
function CompareDates(fromdate,todate) {
	// Assuming the date format = DD/MM/YYYY
	// modify following block if your date format is different
	// new Date(year,month,day)
	frmdt = new Date(fromdate.substring(6,10),fromdate.substring(3,5)-1,fromdate.substring(0,2));
	todt  = new Date(todate.substring(6,10),todate.substring(3,5)-1,todate.substring(0,2));

	if ( todt.getTime() > frmdt.getTime() ) {
		return 1;
	}
	else if( todt.getTime() == frmdt.getTime() ) {
		return 0;
	}
	return -1;
}

Thanks & Regards,
Niral Soni

codeprojectforums.com [modified]

sivakumat11-Aug-11 1:27

sivakumat

11-Aug-11 1:27

codeprojectforums.com Currently under Testing

-- Modified Thursday, August 11, 2011 7:37 AM

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.