JavaScript - A Jquery Schedule + A Cart Solution For Booking Time-slots (private Lessons)?

hey guys,

i've just started programming in javascript, and now i am studying how to use OOP in javascript. i've read most of the tutorials but none of them has mentioned anything about the public, private and protected stuff.

so i guess my question is - does oo in javascript deal with public,private and protected methods or variables?

thanks in adv.

Hey all,

I am having issues with below script. Firebug returns:
form[0] is undefined
[Break on this error] $(form[0].elements).each(function() {

I have this under my form:
<script>
var thisForm = $('#validateForm');
thisForm.validation();
</script>



Code:

(function($) {
    /*
    Validation Singleton
    */
    var Validation = function() {
        
        var rules = {
            
            email : {
               check: function(value) {
                   
                   if(value)
                       return testPattern(value,".+@.+\..+");
                   return true;
               },
               msg : "Enter a valid e-mail address."
            },
            url : {

               check : function(value) {

                   if(value)
                       return testPattern(value,"https?://(.+\.)+.{2,4}(/.*)?");
                   return true;
               },
               msg : "Enter a valid URL."
            },
            required : {
                
               check: function(value) {

                   if(value)
                       return true;
                   else
                       return false;
               },
               msg : "This field is required."
            }
        }
        var testPattern = function(value, pattern) {

            var regExp = new RegExp("^"+pattern+"$","");
            return regExp.test(value);
        }
        return {
            
            addRule : function(name, rule) {

                rules[name] = rule;
            },
            getRule : function(name) {

                return rules[name];
            }
        }
    }
    
    /* 
    Form factory 
    */
    var Form = function(form) {
        
        var fields = [];
    
        $(form[0].elements).each(function() {
            var field = $(this);
            if(field.attr('validation') !== undefined) {
                fields.push(new Field(field));
            }
        });
        this.fields = fields;
    }
    Form.prototype = {
        validate : function() {

            for(field in this.fields) {
                
                this.fields[field].validate();
            }
        },
        isValid : function() {
            
            for(field in this.fields) {
                
                if(!this.fields[field].valid) {
            
                    this.fields[field].field.focus();
                    return false;
                }
            }
            return true;
        }
    }
    
    /* 
    Field factory 
    */
    var Field = function(field) {

        this.field = field;
        this.valid = false;
        this.attach("change");
    }
    Field.prototype = {
        
        attach : function(event) {
        
            var obj = this;
            if(event == "change") {
                obj.field.bind("change",function() {
                    return obj.validate();
                });
            }
            if(event == "keyup") {
                obj.field.bind("keyup",function(e) {
                    return obj.validate();
                });
            }
        },
        validate : function() {
            
            var obj = this,
                field = obj.field,
                errorClass = "errorlist",
                errorlist = $(document.createElement("ul")).addClass(errorClass),
                types = field.attr("validation").split(" "),
                container = field.parent(),
                errors = []; 
            
            field.next(".errorlist").remove();
            for (var type in types) {

                var rule = $.Validation.getRule(types[type]);
                if(!rule.check(field.val())) {

                    container.addClass("error");
                    errors.push(rule.msg);
                }
            }
            if(errors.length) {

                obj.field.unbind("keyup")
                obj.attach("keyup");
                field.after(errorlist.empty());
                for(error in errors) {
                
                    errorlist.append("<li>"+ errors[error] +"</li>");        
                }
                obj.valid = false;
            } 
            else {
                errorlist.remove();
                container.removeClass("error");
                obj.valid = true;
            }
        }
    }
    
    /*
    Validation extends jQuery prototype
    */
    $.extend($.fn, {
        
        validation : function() {
            
            var validator = new Form($(this));
            $.data($(this)[0], 'validator', validator);
            
            $(this).bind("submit", function(e) {
                validator.validate();
                if(!validator.isValid()) {
                    e.preventDefault();
                }
            });
        },
        validate : function() {
            
            var validator = $.data($(this)[0], 'validator');
            validator.validate();
            return validator.isValid();
            
        }
    });
    $.Validation = new Validation();
})(jQuery);

So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes:


Id be very gratefull if someone would help me out with this one.

All related code can be found bellow (the ones that should be needed anyways):

This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked
Code:

$(document).ready(function(){
	//References
	var change = $("#menu li a");
	var loading = $("#loading");
	var content = $("#content");
	
	//Manage click events
	change.click(function(){
		//show the loading bar
		showLoading();
		//load selected section
		if(this.id == "home")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/index.php", hideLoading);
			content.slideDown();
		}
		else if(this.id == "secondpage")
		{
			change.load(this.className='current-page');
			content.slideUp();
			content.load("pages/secondpage.php", hideLoading);
			content.slideDown();
		}
		else
		{
			//hide loading bar if there is no selected section
			hideLoading();
		}
	});

	//show loading bar
	function showLoading(){
		loading
			.css({visibility:"visible"})
			.css({opacity:"1"})
			.css({display:"block"})
		;
	}

	//hide loading bar
	function hideLoading(){
		loading.fadeTo(1000, 0);
	};
});

Heres the structure of the menu/content
Code:

<ul id="menu">
<li><a id="home" class="normal" href="#Home"></a></li>
<li><a id="secondpage" class="normal"  href="#Secondpage"></a></li>		
</ul>

<div id="content">
<ul id="sec-menu">
<li><a id="link1" class="normal" href="#">Link1</a></li>
<li><a id="link2" class="normal"  href="#">Link2</a></li>		
</ul>
</div>

Heres the code that jquery history plugin uses in demo for ajax
Code:

jQuery(document).ready(function($) {
        function load(num) {
            $('#content').load(num +".html");
        }

        $.history.init(function(url) {
                load(url == "" ? "1" : url);
            });

        $('#ajax-links a').live('click', function(e) {
                var url = $(this).attr('href');
                url = url.replace(/^.*#/, '');
                $.history.load(url);
                return false;
            });
    });

hi, i have a jquery problem...

this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above:
(it is not working the tab actions, the slideout works...)
http://www.benjaminsterling.com/wp-c...es/sidetab.htm

the javascript code is the above:
PHP Code:
var jqsideTabs;
var tabs, h = 50, r = 0,ra = 0;
$(document)
.ready(function(){
    jqsideTabs = $('#sideTabs').addClass('closed');
    
    tabs = jqsideTabs
    .find('.tab h3')
    .clone()
    .appendTo(jqsideTabs)
    .each(function(i){
        var that = $(this), cls = '',ow,newThis, newEl;
        
        if( i == 0 ) cls = ' active';
        newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>');
        that.replaceWith(newEl);
        
        ow = newEl.outerWidth();
        
        if( i == 0 ) ra = ow;
        else r = ow;
        
        h = newEl.css({'top':h , 'right': -ow }).height() + h;
        
        newThis = newEl.get(0);
        newThis.jq = newEl;
        newThis.i = i;
        
        newEl.click(function(){
            var el = this.jq;
            
            if( jqsideTabs.hasClass( 'closed' ) ){
                jqsideTabs.removeClass('closed');
            }
            else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){
                jqsideTabs.addClass('closed');
            }
            
            el
            .siblings()
                .removeClass('active')
                .css({'right': -r })
            .end()
            .addClass('active')
            .css({'right': -ra });
            
            tabs.eq( this.i ).show().siblings('.tab').hide();
            
            return false;
        });
    })
    .end()
    .parent()
        .eq(0)
        .addClass('active')
    .end()
        .filter(':not(:eq(0))')
        .hide()
    .end();
    
    jqsideTabs.bind("mouseleave",function(){
        jqsideTabs
        .animate({left:-310}, 'fast', function(){
            jqsideTabs.addClass('closed').removeAttr('style');
        });
    });
}); 


and the html file is:
[HTML]
<div id="sideTabs">

<div class="tab">
<h3>Tab 1</h3>
<div class="gut">
<p>Some text</p>
</div>
</div>
<div class="tab">
<h3>Tab 2</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
<div class="tab">
<h3>Tab 3</h3>

<div class="gut">
<ul>
<li>link</li>
</ul>
</div>
</div>
</div>
[/HTML]
the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content)....

can anyone help...please.....

Hello im using dhtmlx grid in this cells i have from time and to time (i.e ind==1 and ind==2) i need to validate time where to-time must be greater than from-time else it should alert an message,i have writeen a normal Regular expression for the time validation.as the time is i string format i.e[05:00],please can any one send me code for that.
Code:

var err_str="";
function validate_grid(value,id,ind)
	{
	if(ind==1 || ind==2)
		{
			var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
			if(!patt.test(value))
			{
				mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
				if(err_str!="")
					err_str+="\n"+(ind+1)+".Enter numbers and : only..";
				else
					err_str=(ind+1)+".Enter numbers and : only";
				return false;
			}
			else
			{
				mygrid.setCellTextStyle(id,ind,"background-color:white;");
				return true;
			}
		}
}

Hi

Code:

var err_str="";
function validate_grid(value,id,ind)
{
 $("#result").html(" ").show();
 if(ind==1 || ind==2)
  {
  var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
  if(!patt.test(value))
   {
	mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
	if(err_str!="")
		err_str+="\n"+(ind+1)+".Enter numbers and : only..";
	else
		err_str=(ind+1)+".Enter numbers and : only";
	return false;
   }
    else
      {
	mygrid.setCellTextStyle(id,ind,"background-color:white;");
	return true;
      }
  }
}
alert(err-str);

here ind==1 is from_time and ind==2 is to_time,i need to validate time as to_time must be always greater than from-time,if condition fails an alert msg should populate.time format is[05:00]as it is in string format im unable to do the validation for it.(ex:from-time=08:00 to-time=07:59 condition fails)

thank you.

hi im using dhtml xgrid where i need to do validation for time ,(from-time and to-time i.e ind==1 and ind==2 ) to-time must be greater than from-time else i need to alert a message to-time must be greater than from-time.
can any one send me the code for it time format is[05:00].
Code:

var err_str="";
function validate_grid(value,id,ind)
	{
	$("#result").html(" ").show();
		if(ind==1 || ind==2)
		{
			var patt=/^([0][0-9]|[1][0-9]|[2][0-3])[:]{1}[0-5][0-9]$/;
			if(!patt.test(value))
			{
				mygrid.setCellTextStyle(id,ind,"background-color:yellow;");
				if(err_str!="")
					err_str+="\n"+(ind+1)+".Enter numbers and : only..";
				else
					err_str=(ind+1)+".Enter numbers and : only";
				return false;
			}
			else
			{
				mygrid.setCellTextStyle(id,ind,"background-color:white;");
				return true;
			}
		}
}

i keep getting the error

GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS
& Failed to load resource: net::ERR_TOO_MANY_REDIRECTS

when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this.

thanx in advance

Ok guys, im willing to pay for the solution, got to get this site finished today!!

Im having some trouble with a site im working on. In a nutshell, im using a navigation bar with dropdown and JS Fadeshow. When using the navbar dropdown, it goes BEHIND the fade show. If anyone could advise it would be great! I didnt attach the code as i think the best thing to do is just take a look yourself. Its alhambrarenovations. COM Thanks in advance

Tell me what other info you need and i'll suply it.

Hi,

javascript method downloadUrl() is very very slow at chrome.

means, i am not able to see the data from mysql server at chrome browser..

But this works fine at IE.

Pls suggest me with some alternative javascript methods..

thanks,
VK

but I just can't figure it out. I have trawled the net for a solution and tried many different things that I have seen but still no luck. Maybe the answer is staring me right in the face and I just can't see it.

The code it executing the first time but as the setTimeout tries to start the second loop I get an error 'box is not defined'.

Any suggestions and explanations of what I am doing wrong much appreciated!

Code:

function expand(box) {

var box = document.getElementById(box);
var originalHeight = parseInt(box.style.height);
var inc = 5;

newHeight = (originalHeight + inc);
box.style.height = newHeight + "px";

int = setTimeout('expand(box)',100); }

Hi,

Normally when i try to put a form in a html page i use the
Code:

<form action="http://www.site.com/test.php" method="post">

and so on with the respective input (Something i learn over here)

Today i was trying to create a html box whith the purpose of submiting to a external site but the problem i got is that the external site doesn't use the Code:

<form>

tag to submit and uses javascript in an onclick event. Is there any way i can still submit?

Note: I tried an iframe 0 to load up the site and the respective scripts and emulate the submition in the top page but didn't work out.

Thanks for all the help...

I am a govt. employee wanting to make a multi-user database. This is a replacement for the current solution:

1. Single-user Excel sheet on a shared network folder.

Here are my design limits:

1. The system uses Windows XP only.
2. I do not have communication with the network admins.
3. I will never have permission to install servers anywhere. They are forbidden.
4. I do not have permission to install any software on any computer.
5. My group only has access to one shared network folder.

I've brainstormed some solutions, including:

A. Marrying a VB Application with SQLite, with the SQLite file sitting in the shared folder.

B. Using how to use SharePoint to develop my application.

C. Using Microsoft Access as a client-side GUI which connects to another .mdb on the shared folder.

D. Using Internet Explorer with Javascript and ADO ActiveX Objects to manipulate records in a .mdb on the shared folder.

I choose D. Choice A is out because I can not install any software development tools. B may not work for me because my database is heirarchical in nature and I want more control over the GUI. Same reason for C, and Access is a little micky-mouse.

Amazingly, the security settings on IE allow the creation of ActiveX objects through Javascript. I can also develop with javascript because I have Wordpad. To test the code I can simply run it by launching the HTML. This allows users to open the same HTML file in the shared folder instead of distributing front-ends.

The javascript must all be client-side, including all data manipulation. However, I am not concerned about security issues because only our group will be using the system, and all traffic is already contained within Navy networks. So I don't care if I use window.location for storing variables since it works for this case.

Does anyone have anything to say about this? I'm looking for pointers, gotchas, guidelines, and any other, better solutions. Thanks.