I am very exciting about jQuery but a am not programmer and the way I write functions is probably not most efficient. For example I have 12 collapsible panel that I need to control. Is there better way of writing this?
<script>
$(document).ready(function() {
$('.open-close').text('Read More...')
[code]....
I am familiar with the user built addEvent function used to load multiple functions in the window.onload property. However, I am curious as to the best way to do this across multiple JavaScript files. I thought I had seen somewhere code similar to the addEvent function was native to JavaScript now but I can't seem to find that anywhere.
Just to clarify, suppose I have 3 JavaScript files:
Code:
function foo() {
// do something here
}
fileB
[Code]....
note that it is not feasible to combine those functions into one file as they aren't always loaded together. What's the best way to load them all as a window.load?
I have a slideshow using jQuery and just added an apple overlay to the same page, and for some reason, now the slideshow will not work..Here are the links I have..:
<script type
="text/javascript
" src
[code]....
This is a FAQ page I built with custom jquery function that toggles the answers open/closed on click of a question, and Im just wondering if anyone has a suggestion to make the code leaner and meaner:
[Code]...
I would like to simplify some of my jquery code.I have multiple add functions:
Code:
<table1>
<form>
<input type="text" name="title">
[code]...
With this when you click the first one it works but not the second.I worked my way around this but I had to increment add like add1 add2 add3. Now this creates alot of code in my javascript and html.
Since jQuery parses the entire dom first, is there any efficiency gain in directing it via the entire CSS chain rather than directly to an ID? That is, if I have a Div with an ID of "foo" and it contains a P with an ID of "bar", is there any speed advantage in using $(div#foo p#bar) as opposed to just using $(p#bar), assuming jQuery would be more efficient if it had both indexes?
View 2 Replies View RelatedI have this div: named as "contact_person"
But I wonder if I use this jquery script;
But, how Could I manipulate / modify the conten variable so then the copied content have a different buttons?
Which is;the both button named as:contactpremovecould be changed its id numbering,and then another button named as :contactpadd could be removed?
The buttons that I mentioned is colored using RED And Blue color.
I want to use two different jQuery functions when a form submit button is pressed. I would like to run a form validation function, and if it validates fine, I want to use an ajax submission where it sends the form data and then hides the form showing the word "Sent".
Running each functionseparately, I can get either to work. But trying to figure out how to run one and IF TRUE run the next one I can't figure out.
Validate Function
$("#contactForm").validate({ success: "valid", rules: { name: { required: true, rangelength: [3, 50], }, message: { required: true, rangelength: [3, 300], }, email: { required: true, email: true } } });
[Code].....
When the forms submit button is clicked (it's called generate) I thought in that code on the click event I could write $("#contactForm").validate; and that would run my function. Instead it just submits the form via ajax.
How do I get it to run the validate function and only when the validate function returns that the form is valid that it then submits?
I want to find a parent for a button. I have set up the html like the following.[code]...
View 2 Replies View RelatedI know that you can have more than on document ready event without difficulty. i.e.
$(function(){
// document ready 1
});[code]....
The question I have is, is there any way for them to call functions from one to the other? The following does not work:
$(function(){
function displayMessage(){ alert('hello world'); };
});
$(function(){
displayMessage();
});
This invokes a js error complaining that displayMessage() is not defined.
I can't seem to get the syntax correct to get this to work. I'm sure it is something simple.I want to call multiple functions inside my document.ready function.The first function gets called but not the second.
$(document).ready(
function GetSuspectCollection() {
$.ajax({[code].....
I am populating a number of Select boxes on the server-side with a large number of options. I'd like to get the response size down without taxing the client browser too much. What do you think is the most efficient way to approach this problem?
Here are some considerations: The option text/values do not change very often, but could potentially change in the future. The page that holds the select boxes should never be cached, there are other aspects of the page that need to remain fresh. Firebug with YSlow is saying that the primed cache size of the page is 300Kb with all the select dropdowns and options, if I remove the options, the primed cache size of the page is 80Kb. I am considering breaking out the text/value pairs for the select boxes into a separate file that is cache-able calling it "valueTextPairs.js" and referencing it with a query string and some sort of server-generated MD5 hash of the data, so that if any of the values change, the client's cached version will be replaced by the latest version. Like so:[URL]...
Provided I do this, I anticipate that the primed cache size of the page will be reduced down to 80Kb (which I like) -- however, before I take the plunge, I am curious what you all think the performance effect will be?
I know the number of bytes on the wire will be reduced, but will this put a lot of additional pressure on the client's browser because I'd need to traverse the name/value pairs and add the options to the select boxes dynamically on the client end? If it seems reasonable to do this, what jQuery approach would be the most efficient? $('#selectId').html(options) with options = one big string? Adding each child option to the select in a loop? Something else?
Some client end folks are using IE6 so I am trying to tax the browser as little as possible, while also reducing the size of each request, trying to find a happy medium..
Does anyone know of a way to get onSubmit to run multiple functions?
also is there a way to make this nBlank function smaller?
function nBlank()
{
if (document.Forders.fName.value.length < 2 )
{
[Code]....
This code works fine in in FireFox but not in IE... it's written in Javascript & AJAX but I'm pretty sure the JavaScript is the problem...
Basically what this script is supposed to do is when you select a Product Option, it uses AJAX to fill out the Value drop down box with choices. That works fine.
You then select something from the Value drop down box and it then uses AJAX again to fill out the details into the Weight and Price text boxes... This is where it goes wrong. Code:
I have been starting to use Javascript a lot lately and I wanted to check
with the "group" to get your thoughts on code efficiency. First, is there a
good site/book that talks about good and bad ways to code.
The reason I ask is because I was just thinking about the following...which
is better and/or why?
document.forms["myform"].elements["txtname"].value
or
document.myform.txtname.value
Just looking for some insight.
Ok, so basically what I've got is a button which when clicked, "opens" a section of the page. I also need the button to "jump" to this section of the page, because it's below the current content and won't be visible. What I've got so far is ...
Javascript
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
[Code]....
If I put two separate buttons, both functions will work. Basically I need them to be on the same function, not sure how to do that?
I am trying to pass an (Global) array of variables to a number of functions in javascript but they are not being recognised. As follows:
<Head>
<Script>
var nutherVariable ="Whatever"
arrayset1 = newArray(n1)
arrayset1[0] ="XXXXXX"
arrayset1[2] ="XXXXXX"
etc
arrayset2 = newArray(n2)
arrayset2[0] ="yyyyyyy"
arrayset2[2] ="yyyyyyy"
etc
function doSomthing(arrayset1, arrayset2, nutherVariable){
document.theForm.txtBox.value=arrayset1[n] + arrayset2[n];
<!-- No output to form textfield unless array defined within function-->
}
</Script>
</Head>
<Body>
Passes and recieves variables to/from function(s) via Form
</Body
I think what I am asking is what is the syntax to do this.
I'm new here, and new to js. Here is my problem: I have written out a code to make an image switch from state 0 to 1 and back to 0 again (an eye blink). The code works fine, but I would like to write the functions with arguments so it could be applied to more images. I have tried for a few hours (and searched forums) and am getting no where. Here's my code.
Code:
function home_blinkDown()
{
//alert('blink down');
var t = setTimeout("home_blinkSwap('home_js', 'images/main/home_blink.png')", 2000);
[Code]...
I'm using an ajax function to call multiple php files to the same HTML web page. Dividends must be dynamic the data is stock prices. It seems that the last stock price is only updating the other 9 are not is their a limitation to the number of ajax functions used in a single web page. Here is the code I'm using 10 times is separate div's
[Code]..
I am trying to call 2 functions from the 1 onMouseOver event on an
anchor tag, but I can't seem to get it to work. the following should
demonstrate
<a onMouseOver="ShowMenu('Menu3');AddMenuToHoldArray('Menu3')">Menu
3</a>
I have tried a number of variations, like adding "javascript:" in
front of the first call, and returning True of False from the first
function, but Icant get the second function to fire after the first
one has.
by using alerts, and wathcing what IS occuring, I know that the first
is being called, but the second isn't.
I did this once some years back, but I can't seem to rember how I did,
it, and none of the example that I have located have helped, so can
anyone point me in the right direction?
I am having trouble running multiple windows.onload functions and having trouble how to implement them.
Here are the two functions I'm trying to load:
I posted a thread a few days ago concerning a bit of javascript code to make checking one checkbox clear another one. I got some great, prompt help. However, I just got back to working on that web page, and realized that the functions only work on the first form on my web page. I have many forms and they are actively named using php.
Here's are the functions (these works for just the first form on the page):
<script type="text/javascript">
function undo_Changes() {
if (document.getElementById("Complete").checked==true) {
document.getElementById("Needs_Change").checked=false;
[Code]....
I'm trying to make a table that will hide multiple rows in single js functions... now I put together a way to do it, but it requires multiple id declarations in the functions, is there any way to do it with classes instead of IDs, so that I can have a blanket class that I can use?See:
Code:
<!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">[code]......
how to load multiple functions on window.onload and these functions could be in a seperate ajax file.
<html>
<head>
<script type="text/javascript">
window.onload(func1);
[Code]....
func1 and func2 are in a seprate ajax file. In this case only func2 works and func1 is not works.
I'm having a problem creating a Javascript form.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
[code]....
I have a series of dropdowns that allow the user to choose country, province and town respectively. The province dropdown is populated by an Ajax function when the user chooses their country, and the town dropdown is likewise populated by the user's selection in the province dropdown. This all works fine.
Of course, my client now wants to add a "major centres" dropdown between the province and town selection. This seemed straightforward to me, however in practice it's proving problematic. The "major centres" are drawn from the same dataset as the towns, however an extra flag is applied so that only records flagged as "main centre" appear.
Called separately , both the town dropdown and the main centre dropdown are populated. However, the problem comes in when the onChange event which is meant to update both dropdowns simultaneously fires. Watching the network behavior in Firefox, I see that calls to the ASP files which populate the town and major centre dropdowns DO happen, though only one of the calls actually returns values. I've checked this in IE7 also, and the same thing happens.
My function is called from the Province dropdown, like so:
Code:
<select name="Province" id="Province" onChange="callOthers(this);">
<option value="">---</option>
</select>
[Code]....
what might cause only the one dataset to be returned via Ajax? Either the towns are populated or the major centres, depending on which order I call the two handleOnChange functions from my callOthers function. As I said, BOTH Ajax calls are made, however only the results of ONE are being used in my page. Could this problem be related to 2 Ajax calls being made too close together?