JavaScript - Setting A Property That Has Only A Getter

I am and seem to remain newbie ...

I have a JS script that presents a series of "pages" with different questions inside a single HTML file, by rewriting certain <div>s.

I have an object like this that contains the questions and information about answer labels etc (the idea is that this should be easy to modify for someone who doesn't know JS):

Code:

var Questions = [
    {
        "question" : "How good is this?",
        "labels" : ["excellent","very good","good","bad","very bad","awful"],
        "page" : 0 ,
        "random" : false ,
        "type" : "default",
        "varname" : "allgood"
    },
    {
        "question" : Change[curCase]+"What do you think now?",
        "labels" : BetterLabels,                                                               
        "page" : 1 ,
        "random" : true ,
        "type" : "default",
        "varname" : "betteradapt"
    }
]

This object is initialized when the page loads, and a function reads the total number of pages by getting the maximum number of the "page" property across elements.

Later, the object is accessed by thenextQuestion() function which uses the "page" property to looks whether each element belongs on the current page , then reads out the properties and presents the question.

This works okay. Now the tricky bit:

For some questions, their text should be different depending on which case is currently on the screen (Change[curCase]). curCase is different on each page, an integer between 0 and Change.length. I cannot get this to work for the Questions object, probably because the Questions object has been already initialized when the page loaded.

How can I get my function nextQuestion() to "re-evaluate" the property "question" for all the elements of the Questions objectwhen nextQuestion() is called , using the current value of "curCase"?

nextQuestion() is longer, but the (i think!) crucial bits are he

Look whether question belongs on current page and push it onto new array:

Code:

for (i=0; i < Questions.length; i++) {
        Questions[i].page = Questions[i].page;
        if ( Questions[i].page == BlockNum ) { // if the q belongs on the current page               
            QuestionsObjectThisPage.push(Questions[i]);
        }
    }

Then, extract an array containing the questions, which will then be presented:

Code:

 for (i=0; i < QuestionsObjectThisPage.length; i++) {
QuestionsThisPage.push(QuestionsObjectThisPage[i].question) ;
}

So what I'm looking for is something to change either of these two Object.push() functions so they don't simply take the value they find in the Questions (or QuestionsThisPage) object, but to re-evaluate the code for the "questions" property, taking into account the current value of curCase

Phew. I found that really hard to describe; hope it's somewhat clear.

I have a page:
http://www.girlscoutsmoheartland.org...progsearch.php
that works perfectly fine in every browser I try, except for actual IE7 (it even works fine in IE8 emulating IE7).
When you search for something on that page and have a display of results, each result has a link that changes a table row's display to visible, and hides the row when clicked again. It doesn't do that in IE7.
There are no errors or warning in Firefox's Error Console. But IE7 has an "Error on Page" notice (which does NOT appear in IE8 emulating IE7), that says:

Line: 59
Char: 11
Error: Could not get the display property. Invalid argument.

The script in question is this, with what would be line 59 indicated:
Code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       var f = document.getElementById(id + "b");
	   
       if(e.style.display == 'table-row')
          e.style.display = 'none';
       else
          e.style.display = 'table-row'; <<-- This is line 59
		  
       if(f.style.display == 'table-row')
          f.style.display = 'none';
       else
          f.style.display = 'table-row';
    }
//-->
</script>

I really don't know what to do, or where to begin. Everything in my limited knowledge seems to be working just fine. Most of my site's visitors use IE8, but enough use actual IE7 that I really need to fix this.
Thanks for any help or advice!
Liam

Hi
I need to change the font color of the disabled textboxes of our application. These disabled textboxes exist at thousands of places both at pageload or disabled conditionally clientside.
I am aware that in IE8 there is no other way to change the fontcolor except use readonly. So i thought that maybe if I changed the .disabled property to something like -
Code:

Object.disabled {
    function set() {
        this.readOnly = value;
     }

    function get() {
         return this.readOnly;
     }
}

then it would make my task much easier. I searched and found out that Object.defineProperty ,may do the trick. However i am getting the mull reference error. Is there any other way?

Hello, I have the following object:

Code:

		var layers = {			
			photo1 : {
				index : 1,
				xPos : 63,
				yPos : 48,
				angle : 0
			},
			background : {
				index : 0,
				xPos : 278,
				yPos : 163,
				angle : 0
			}
		}

How can I sort the objects by the index property?

Code:

for(var layer in layers.sort(???))
{
}

Thx Very Much!

I'm using ccs3PIE with my site. What I want to do is check if a DOM element has a css property like border-radius and then add a class to it.

The problem I'm having is that I don't know how to check for the css property. I've been searching for it for a couple of hours now and I can't find anything that seems to work.

Any ideas?

When I click on the image I want to get the "margin-left" value of its block.
In the code below the margin-left is set at 100px.
But when I click on the image the "margin-left" value shows in the "alert" as undefined.
What code changes do I need to get the correct margin-left value?
(Please, no guessing!)

[CODE]
<script type="text/javascript" >
window.onload = function(){
document.getElementById("holder").onclick = showit;
}

function showit( ) {
var marval = document.getElementById("holder").style.marginLeft;
alert(" margin-left= " + marval + " typeof= " + typeof marval);
}
</script>

<style type="text/css">
#holder{
padding: 0px;
margin-left: 100px;
}
</style>
</head>
<body>
<img id="holder" src="anyimage.gif" width="300px" height="200px" />
</body>
[CODE]

Hi,

This is my first post while learning Javascript and jQuery as total noob.

I have something like this:

Code:

var desc = "This is your title and here is even more that might be added so that we can get at least 60 characters or so";

var desc = desc.trim().substring(0, 40).split(" ").slice(0, -1).join(" ") + "...more";

alert(shortText );

It is actually being used on a page that calls a description from a MySQL table, but this example fails in exactly the same manner. Although FF and other browsers successfully initiate the script with errors, but IE loops endlessly and freezes up. FireBug reports "reference to undefined property a[d]". Using jQuery 1.6.2.

I'm not really sure what property is undefined here and how this can work without freezing IE. Thanks in advance for any help!

AJ

For some reason I run my script and its saying missing } after property list. But I'm not seeing it.

Code:

<script type="text/javascript">
    $(document).ready(function() {
        $('div.message-error').hide();
        $('div.message-success').hide();
        $('ul#characterList').css( 'margin-left', '120px' );
        $('li').remove('.characterName');
        $("#handlerForm").validate({ 
            rules: {
             firstName: "required",
             lastName: "required",
             userName: {
                required: true,
                minlength: 2
             },
             password: {
                required: true,
                minlength: 5
             },
             password2: {
             required: true,
                minlength: 5,
                equalTo: "#password"
             },
             email: {
                required: true,
                email: true
             },
             messages: {
                 firstName: "Please enter your firstname",
                 lastName: "Please enter your lastname",
                 userName: {
                    required: "Please enter a username",
                    minlength: "Your username must consist of at least 2 characters"
                 },
                 password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long"
                 },
                 password2: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 5 characters long",
                    equalTo: "Please enter the same password as above"
                 },
                 email: "Please enter a valid email address"
             }
        });
        $("input.submit").click(function() {
            var userID = $("input#userID").val();
            var defaultChar = $("select#charactersDrop option:selected").text();
            var userName = $("input#userName").val();
            var firstName = $("input#firstName").val();
            var lastName = $("input#lastName").val(); 
            var email = $("input#email").val(); 
            var statusID = $("select#statusID").val(); 
            var isAdmin = $("select#isAdmin").val(); 
             var liElements = $("ul#characterList li");
             var characterIDList = "";
             for( var i = 0; i < liElements.length; i++ ) {
                var liElement = $( liElements[ i ] );
                
                // only start appending commas in after the first characterID
                if( i > 0 ) {
        	       characterIDList += ","; 
                }
        
                // append the current li element's characterID to the list
                characterIDList += liElement.data( 'characterID' );
             }
             var dataString = 'userID=' + userID + 'userName=' + userName  + '&password=' + password + '&firstName=' + firstName + '&lastName=' + lastName + '&email=' + email + '&statusID=' + statusID + '&isAdmin=' + isAdmin + '&characterIDList=' + characterIDList + '&submitHandler=True';
             $.ajax({
                 type: "POST",
                 url: "processes/handler.php",
                 data: dataString,
                 success: function(myNewVar) {
                    if (myNewVar == 'good') {
                        $('div.message-error').hide();
                        $("div.message-success").html("<h6>Operation successful</h6><p>" + userName + " saved successfully.</p>");
                        $("div.message-success").show().delay(10000).hide("slow");
                        $(':input','#handlerForm')
                        .not(':submit, :button, :hidden')
                        .val('')
                        $('ul#characterList li').each(function() {
                            $(this).remove();
                        });
                    } else if (myNewVar == 'bad1') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " already exists in the database.</p>");
                        $("div.message-error").show();    
                    } else if (myNewVar == 'bad2') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + email + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    } else if (myNewVar == 'bad3') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    } else if (myNewVar == 'bad1bad2') {
                        $('div.message-success').hide();
                        $("div.message-error").html("<h6>Operation unsuccessful</h6><p>" + userName + " and " + email + " already exists in the database.</p>");
                        $("div.message-error").show();     
                    }  
                }
            });
            return false;    
        });
    });
    </script>
    
    <!-- Form -->
    <form action="#" id="handlerForm">
    	<fieldset>
    		<legend>Add New Handler</legend>
            <div class="field required">
    			<label for="userName">User Name</label>
    			<input type="text" class="text" name="userName" id="userName" title="User Name"/>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="password">Password</label>
    			<input type="password" class="text" name="password" id="password" title="Password" />
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
            </div>
            <div class="field required">
    			<label for="password2">Confirm Password</label>
    			<input type="password" class="text" name="password2" id="password2" title="Confirm Password" />
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
            </div>
            <div class="field required">
    			<label for="firstName">First Name</label>
    			<input type="text" class="text" name="firstName" id="firstName" title="First Name"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="lastName">Last Name</label>
    			<input type="text" class="text" name="lastName" id="lastName" title="Last Name"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="email">Email</label>
    			<input type="text" class="text" name="email" id="email" title="Email"/>
                <span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="statusID">Status</label>
                <select class="dropdown" name="statusID" id="statusID" title="Status">
                <option value="0">- Select -</option>
                <?php
                $query = 'SELECT ID, statusName FROM statuses';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['ID']."\">".$row['statusName']."</option>\r";
                }
                ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
            <div class="field required">
    			<label for="isAdmin">Administrator</label>
                <select class="dropdown" name="isAdmin" id="isAdmin" title="Administrator">
                <option value="0">- Select -</option>
                <?php
                    $administrator = array('Yes', 'No');
                    foreach($administrator as $admin):
                ?>        
                <option value="<?php echo $admin; ?>"><?php echo $admin; ?></option>
             
             <?php endforeach; ?>
                </select>
    			<span class="required-icon tooltip" title="Required field - This field is required, it cannot be blank, and must contain something that is different from emptyness in order to be filled in. ">Required</span>
    		</div>
    	</fieldset>
        <fieldset>
    		<legend>Handler's Characters</legend>
            <div class="field">
    			<label for="charactersDrop">Characters</label>
                <select class="dropdown" name="charactersDrop" id="charactersDrop" title="Characters Dropdown">
                <option value="0">- Select -</option>
                <?php
                $query = 'SELECT ID, characterName FROM characters WHERE ID NOT IN (SELECT characterID FROM handlerCharacters) ORDER BY `characterName`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['ID']."\">".$row['characterName']."</option>\r";
                }
                ?>
                </select>
                <input type="button" value="Add Character" class="" onclick="HandlerCharacters()"/>
                <ul id="characterList"></ul>
            </div>
                <input type="hidden" name="userID" id="userID" value="<?php echo $userID; ?>" />      
                <input type="submit" class="submit" name="submitHandler" id="submitHandler" title="Submit Handler" value="Submit Handler" />
    	</fieldset>
    </form>
    <!-- /Form -->
    <!-- Messages -->
    <div class="message message-error">
        <h6>Required field missing</h6>
        <p>Please fill in all required fields. </p>
    </div>
    <div class="message message-success">
        <h6>Operation succesful</h6>
        <p>Handler was added to the database.</p>
    </div>
    <!-- /Messages -->
    
    <script type="text/javascript" language="javascript">
    // Long version
    function HandlerCharacters() {
        function isDupe(which) {
            var result = false;
            $('ul#characterList li').each(function(i, e) {
                if ($(e).data('characterID') == which) {
                    result = true;
                    return false; // break out of .each()
                }
            });
            return result;
        }
        var characterID = $('#charactersDrop option:selected').val();
        var characterName = $('#charactersDrop option:selected').text();
        if (characterID > 0 && !isDupe(characterID)) {
        	// Create the anchor element
        	var anchor = $( '<a href="#">Remove</a>' );  
        	
        	// Create a click handler for the anchor element
        	anchor.click( function() {
        		$( this ).parent().remove();
        		return false;  // makes the href in the anchor tag ignored
        	} );
        	
        	// Create the <li> element with its text, and then append the anchor inside it.
        	var li = $( '<li>' + characterName + '&nbsp;</li>' ).append( anchor );
        	li.data( 'characterID', characterID );
        	
        	// Append the new <li> element to the <ul> element
        	$( '#characterList' ).append( li );
        }
    }
    </script>

Try to figure out how to change the css display property of a table, from hidden, to block outside of an iframe.

//This data is outside of the iframe
Code:

<style>
#table {display: hidden; z-index: 100;}
</style>

<table id='table' ><td> ......data</td></table>

//This link is inside of an iframe
Code:

<script>
function change(){
document.getElementById("table").style.display='block';
}
</script>

<a href='javascript:void(0)' onclick='change()'>Change</a>

Javascript:

Code:

function hoverMenu(listItem, menuName)
{
	if (document.getElementById(menuName).isActive == "1")
	{
		var listItemHeight = document.getElementById(listItem).offsetHeight;
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";
		document.getElementById(menuName).style.opacity = "1.0";	
		document.getElementById(menuName).isActive = "0";
	}
	
	else
	{
		var listItemHeight = document.getElementById(listItem).offsetHeight;
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + listItemHeight + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";	
		menuFade(menuName);
		document.getElementById(menuName).isActive = "0";
	}
	
}

function hoverMenuTier2(listItem, menuName)
{
	if (document.getElementById(menuName).isActive == "1")
	{
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";
		document.getElementById(menuName).style.opacity = "1.0";	
		document.getElementById(menuName).isActive = "0";
	}
	
	else
	{
		var itemTop = document.getElementById(listItem).offsetTop;
		var itemLeft = document.getElementById(listItem).offsetLeft;
		document.getElementById(menuName).style.top = itemTop + "px";
		document.getElementById(menuName).style.left = itemLeft + "px";
		document.getElementById(menuName).style.display = "block";	
		menuFade(menuName);
		document.getElementById(menuName).isActive = "0";
	}
	
}

function hideThis(menuName)
{
	document.getElementById(menuName).style.display = "none";
	document.getElementById(menuName).style.opacity = "0";
}

function showMenu(menuName)
{
	document.getElementById(menuName).style.display = "block";
	document.getElementById(menuName).style.opacity = "1.0";
	document.getElementById(menuName).isActive = "1";
}

HTML:

Code:

<div id='db-sub' class='ddm-db' onmouseover="showMenu('db-sub');" onmouseout="hideThis('db-sub');">
            <ul>
                <a href='#'><li id='dba' class='sub'>1</li></a>
                <a href='#'><li class='sub'>2</li></a>
                <a href='#'><li class='sub'>3</li></a>
                <a href='#'><li class='sub'>4</li></a>
                <a href='#'><li class='sub'>5</li></a>
                <a href='#'><li class='sub'>6</li></a>
                <a href='#'><li class='sub'>7</li></a>
                <a href='#'><li class='sub'>8</li></a>
                <a href='#'><li id='dbq' onmouseover="hoverMenuTier2('dbq', 'dbq-sub');" onmouseout="hideThis('dbq-sub');" class='submenuArrow'>9</li></a>
                <a href='#'><li class='sub'>10</li></a>
                <a href='#'><li class='sub'>11</li></a>
                <a href='#'><li class='sub'>12</li></a>
                <a href='#'><li class='sub'>13</li></a>
            </ul>
        </div>

The remaining HTML for the the 'dqb-sub' element that is displayed follows an identical format to 'db-sub'. Mousing over the upper elements produces a drop-down menu that is aligned with the position of the top-most element in question. Mousing over the 'dbq' element produces the element 'dbq-sub' at the (0,0) position of the window, which is my issue. I believe it has to do with the fact that I'm setting the display property to 'none', which essentially destroys the element, along with its properties. What doesn't make sense is that while the 'db-sub' element is set to a block display type, it should have valid, non-zero offsets. I'd like the 'dbq-sub' element to position based on where the 'dbq' element is. Any ideas?

Hello, I'm hoping someone can help me with this.

I have 3 pages that I need to put into my framework, they are products, shopping cart and billing. At the moment they work perfectly fine. Here is a live example -

http://www.cems.uwe.ac.uk/~r4-george...g/products.php

Now, I have a framework for a whole website that I need to put these pages into. (http://www.cems.uwe.ac.uk/~r4-george/wp4/index.php) The index uses a switch statement to go between pages.

Here is the index.php

PHP Code:
<?php # index.php

/* 
 *    This is the main page.
 *    This page includes the configuration file, 
 *    the templates, and any content-specific modules.
 */

// Require the configuration file before any PHP code:
require_once ('./modules/config.inc.php');

// Validate what page to show:
if (isset($_GET['p'])) {
    $p = $_GET['p'];
} elseif (isset($_POST['p'])) { // Forms
    $p = $_POST['p'];
} else {
    $p = NULL;
}

// Determine what page to display:
switch ($p) {

    case 'about':
        $page = 'about.inc.php';
        $page_title = 'About This Site Again';
        break;
        
    case 'products':
        $page = 'products.inc.php';
        $page_title = 'Products on this site';
        break;

    case 'this':
        $page = 'this.inc.php';
        $page_title = 'This is Another Page.';
        break;
    
    case 'that':
        $page = 'that.inc.php';
        $page_title = 'That is Also a Page.';
        break;
    
    case 'contact':
        $page = 'contact.inc.php';
        $page_title = 'Contact Us';
        break;
    
    case 'search':
        $page = 'search.inc.php';
        $page_title = 'Search Results';
        break;
    
    // Default is to include the main page.
    default:
        $page = 'main.inc.php';
        $page_title = 'Site Home Page';
        break;
        
} // End of main switch.

// Make sure the file exists:
if (!file_exists('./modules/' . $page)) {
    $page = 'main.inc.php';
    $page_title = 'Site Home Page';
}

// Include the header file:
include_once ('./includes/header.inc');


echo "<div id=\"content\">";

// Include the content-specific module:
// $page is determined from the above switch.
include ('./modules/' . $page);

// Include the footer file to complete the template:
include_once ('./includes/footer.inc');

?>

It uses the .inc.php files located in the modules folder to switch between pages.

Here is my products.inc.php -

PHP Code:
<?
    include("includes/db.php");
    include("includes/functions.php");
    
    if($_REQUEST['command']=='add' && $_REQUEST['productid']>0){
        $pid=$_REQUEST['productid'];
        addtocart($pid,1);
        header("location:shoppingcart.php");
        exit();
    }
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Products</title>
<script language="javascript">
    function addtocart(pid){
        document.form1.productid.value=pid;
        document.form1.command.value='add';
        document.form1.submit();
    }
</script>
</head>


<body>
<form name="form1">
    <input type="hidden" name="productid" />
    <input type="hidden" name="command" />
</form>
<div align="center">
    <h1 align="center">Products</h1>
    <table border="0" cellpadding="2px" width="600px">
        <?
            $result=mysql_query("select * from products");
            while($row=mysql_fetch_array($result)){
        ?>
        <tr>
            <td><img src="<?=$row['picture']?>" /></td>
            <td>       <b><?=$row['name']?></b><br />
                    <?=$row['description']?><br />
                    Price:<big style="color:green">
                        &pound;<?=$row['price']?></big><br /><br />
                    <input type="button" value="Add to Cart" onclick="addtocart(<?=$row['serial']?>)" />
            </td>
        </tr>
        <tr><td colspan="2"><hr size="1" /></td>
        <? } ?>
    </table>
</div>
</body>
</html>

This is EXACTLY the same code as the working example. The products get listed correctly but the problem I have is the 'Add to Cart' button fails to work.

Live example - http://www.cems.uwe.ac.uk/~r4-george...php?p=products

Everything is in the right directory. When I inspect the 'Add to Cart' button in chrome I get the following -

Quote:
Uncaught TypeError: Cannot set property 'value' of undefined
addtocart index.php:51
(anonymous function)index.php:83
onclick
Any help is really appreciated, I'm struggling to see what I have done wrong. I don't know whether it's a Javascript problem.

If you need any of the code from other pages I can post it too.

Thanks in advance.

Hello,

how can I make the following object work properly so when I use 'layers.photo1.layer' a jQuery element is returned rather than the text of the function as it is now.

I also need to be able to find the element by the photo1 object its contained in not have to input a string there so that I can also reuse it in the background layer.

Code:

		var layers = {			
			photo1 : {
				layer: function() { return $(element).find($('photo1'))}
			},
			background : {
				layer: function() { return $(element).find($('background'))}
			}
		}

Thx Very Much!

Hello,

I'm a complete noobie to JavaScript so my apologies in advance if I'm asking something totally stupid.

I'm trying to get a website up and running using WordPress. A particular plug-in for WP makes the site I'm building mobile-phone etc friendly - and I have a question regarding some JS that is part of the plug-in.

Before people think badly of me, the licensing terms of the plug-in allow users to modify the code, but the suppliers will not respond for requests for help in doing so. I'm therefore having to see whether I can figure out how to do this myself.

If I've understood correctly, the extract of code below will show/hide a search box when the user clicks on the search button on the menu page. However, I would like the search box to always be visible when the user visits the menu page (but not on any other pages).

With the extract provided, could anybody tell me please, how to change the code to keep the search box permanently visible?

With many thanks in advance
Darren

PS I've only selected what I think are the important lines of code - hope I've included enough ....

Code:

var touchJS = jQuery.noConflict();
 
/* Toggling the search bar from within the menu */
	touchJS( 'a#tab-search' ).unbind( 'click' ).click( function() {
		
		touchJS( '#search-bar' ).toggleClass( 'show-search' );
		touchJS( this ).toggleClass( 'search-toggle-open' );
		
		if ( touchJS( '#search-bar' ).hasClass( 'show-search' ) ) {
			touchJS( 'input#search-input' ).focus();
		} else{
			touchJS( 'input#search-input' ).blur();		
		}
		return false;
	});

Hey all,

I have a script below, which I hope will generate query strings passed back to server using ajax depending on whether user selects an option from dropdown or enters content in a text field. Nevertheless, the issue I'm having at the moment is the firebug error:
missing : after property id drop-filter: {\n

It's telling me something is syntactically wrong with the drop-filter constructed in object notation below. But to me it looks correct:
Code:

<script>
(function($){
	
	var listview = $('#listview');
	
	var lists = (function(){
		var criteria = {
			drop-filter: {
				insert: function(value){
					if(value)
						return handleFilter("filter", value); 
				},
				msg: "Filtering..."
			},
			search-filter: {
				insert: function(value){
					if(value)
						return handleFilter("search", value);
				},
				msg: "Searching..."
			}
			
		}
		var handleFilter = function(key,value){
				return {key: value};
		}
		return {  
			 create: function(component){
				var component = component.href.substring(component.href.lastIndexOf('#') + 1); 
				return component;
			},
			 setDefaults: function(component){
				var parameter = {};
				switch(component){
					case "sites":
						parameter = {
							'order': 'site_num',
							'per_page': '20',
							'url': '/sites'
						}
				}
				return parameter;
			},
			getCriteria: function(criterion){
				return criteria[criterion];   
				
 			},
			addCriteria: function(criterion, method){
				criteria[criterion] = method;  
			}
		}
	})(); 
	
	var Form = function(form){
		var fields = [];
		$(form[0].elements).each(function(){  
			var field = $(this);
			if(typeof field.attr('alter-data') !== 'undefined') fields.push(new Field(field)); 
		})
	}
	
	Form.prototype = {
		initiate: function(){
			for(field in this.fields){
				this.fields[field].calculate(); // THIS DOESN"T MAKE SENSE WHY WE CALL CALCULATE HERE WHEN WE DIDN"T EVEN CALL ATTACH YET AND HENCE DONT KNOW WHAT TYPE OF EVENT TO RESPOND TO 
			}
		},
		 isCalculable: function(){    
			for(field in this.fields){ 
				if(!this.fields[field].alterData){ 
					return false; 
				}
			} 
			return true; 
		} 
	}
	
	var Field = function(field){ 
		this.field = field; 
		this.alterData = false;  
		this.attach("change"); 
		this.attach("keyup"); 
	}
	
	Field.prototype = { 
		attach: function(event){
			var obj = this;  
			if(event == "change"){
				obj.field.bind("change", function(){ 
					return obj.calculate();
				})
			}
			if(event == "keyup"){
				obj.field.bind("keyup", function(e){  
					return obj.calculate();
				})
			}
		},
		calculate: function(){
			var obj = this,  
				field = obj.field,  
				msgClass = "msgClass",
				msgList = $(document.createElement("ul")).addClass("msgClass"), 
				types = field.attr("alter-data").split(" "),
				container = field.parent(), 
				messages = [];
				
			field.next(".msgClass").remove();  
			for(var type in types){  
				var criterion = lists.getCriteria(types[type]);
				if(field.val()){ 
					var result = criterion.insert(field.val()); 
					
					container.addClass("waitingMsg"); 
					messages.push(criterion.msg);  
					
					obj.alterData = true; 
					
					initializeTable(result);  
					
				}
				else {  
					return false; 
					obj.alterData = false;  
				}
			}
			if(messages.length){
				for(msg in messages){
					msgList.append("<li>" + messages[msg] + "</li");  
				}
			}
			else{
				msgList.remove();  
			}
		}
	}
	
	$('#dashboard a').click(function(){
		var currentComponent = lists.create(this);
		var defaults = lists.setDefaults(currentComponent);
		initializeTable(defaults);
	});
	
	var initializeTable = function(custom){
		var defaults = {}
		var custom = custom || {};
		
		var query_string = $.extend(defaults, custom);
		
		var params = [];
		$.each(query_string, function(key,value){
			params += key + ': ' + value; 
		})
		
		$.ajax({
			type: 'GET',
			url: '/' + url,
			data: params,
	      	dataType: 'html',
			error: function(){},
			beforeSend: function(){},
			complete: function() {},
	      	success: function(response) { 
				listview.html(response);
			}
		})
	}
	
	$.extend($.fn, {  
		calculation: function(){
		var formReady = new Form($(this));  
			
		if(formReady.isCalculable) {
			formReady.initiate();   
		}
		
	})
	
	var form = $(listview + ' fieldset');
	form.calculation();
	
})(jQuery)
</script>

Thanks for response.