JavaScript - How Do I Replace Instead Of Append The Contents Of This Div?

Hi Chaps,

I have thumbnail gallery which, when clicked opens up a large version in a div.

PHP Code:
<p><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></p>
<p class="thumbs">
    <a href="images/img2-lg.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
    <a href="images/img3-lg.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
</p> 


The jQuery Code:
Code:

$(document).ready(function(){
	
	$(".thumbs a").click(function(){
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
	});
	
});

With a bit of CSS, this is working fine.

What I'm trying to do is to:
1. Add attribute to:
PHP Code:
<p class="thumbs">
    <a href="images/img2-lg.jpg" zoom="images/img2-zoom.jpg" title="Image 2"><img src="images/img2-thumb.jpg" /></a>
    <a href="images/img3-lg.jpg" zoom="images/img3-zoom.jpg" title="Image 3"><img src="images/img3-thumb.jpg" /></a>
</p> 


2. Add <a id="img_zoom"> to:
PHP Code:
<p><a id="img_zoom"><img id="largeImg" src="images/img1-lg.jpg" alt="Large image" /></a></p> 


3. Add to the jQuery code, to append the "<a>" link, something like:
Code:

$(document).ready(function(){
	
	$("img_zoom").append('" href="')

	$(".thumbs a").click(function(){
	
		var largePath = $(this).attr("href");
		var largeAlt = $(this).attr("title");
		var zoomPath = $(this).attr("zoom");
				
		$("#largeImg").attr({ src: largePath, alt: largeAlt });
		
		$("img_zoom").html(zoomPath+" " "); return false;
	});
	
});

So when the thumbnail image is clicked, the resulting jQuery output would be something like this:
Quote:
<a id="img_zoom" href="images/img3-zoom.jpg">
Is this do-able? I've played around with it for ages and can't get it to work.
Any hlep would be awesome!

I have following JS snippet

var t = document.createElement ('div');
t.id = "testDiv";
t.innerHTML = "test content";

window.top.document.getElementById ('anotherDiv').appendchild (t);

'anotherDiv' exists in the document; The statement above is not working in IE I'm seeing JS error. but it works in Firefox (i.e t element is appended to anotherDiv).

Can any one please let me know how i can resolve this.

edit: I further identified the problem.

Hi, I'm new to JavaScript and I'm having problem with appending a div node returned from a function.

Here's where it crashed:
Code:

var div=document.getElementById("dashboard_secondary_cat_list");
var s=get_secondary_cat_node(attributes);
alert("b4 appendin:"+s);
div.appendChild(s);
alert("done appendin");

alert("done appendin"); never gets called because the previous line crashes.
alert("b4 appendin:"+s); shows: b4 appendin:[object HTMLDivElement]

i am trying to make an online graphing calculator with javascript. dont ask how because i dont know. but there is an annoying error in a do...while loop. although it should break out of the loop when the |'s (absolute value signs) are replaced with Math.abs( and ). here is the code.

Code:

var initec = function(){
    var rg = {
    }
    ;
    rg.matc = false;
    rg.i = 0;
    rg.change = function(equ){
        if (typeof(equ) != "string"){
            alert('Equation must be a string');
            return;
        }
         alert("starting equation: "+ equ);
        rg.i = 0;
        do{
            rg.matc = equ.match(/\|/);
            if(rg.i === 0){
                equ.replace(/\|/, " Math.abs(");
                rg.i = 1;
                alert("1 "+equ);
            }
            else {
                equ.replace(/\|/, " ) ");
                rg.i = 0;
                alert("0 "+equ);
            }
        }while(rg.matc) 
        alert("finished equation: " + equ);
    }
return rg;
}

rg=initec();
rg.change("|8/x+7|-2");

the last 2 lines and the alerts are for debugging. as you can see, it is not finished. but still, it should work.

I have a form with an action url, but I need to alter it on submit. What I need to do is take the value of the text field, escape it, and append it on the end of the action url. Something like this:

action url: /search/node
appended action url: /search/node/some_escaped_string

To do this, I create the function ahead of time and change the submit to a button with onClick. What isn't working is the escape mechanism. If I were to test for "ttt hhh", I'll get "/search/node/ttt hhh", instead of "/search/node/ttt%20hhh"

Code:

<script type="text/javascript">
function urlAppend()
  {
  termsValue = document.getElementById('terms').value;
  escapedVar = escape(termsValue);
  appendedUrl = "/search/node/" + escapedVar;
  location.href = appendedUrl;
  }
</script>

<form method="get" action="/search/node">
<input type="text" name="terms" id="terms"></input>
<input type="button" value="Search" onClick="urlAppend();">
</form>

Can someone tell me what I'm doing wrong?

I did something like this:

Quote:
$('#test').append("<option id='ddm'>added dropdown</option>");
it shows its html in the browser but I can't see it when I view source, is this normal?


Thanks.

I am attempting to manipulate a long text string with javascript. This text string may have one or more occurrences of a string which starts with a particular string and ends with another string. So, for example, text that starts with 'nam' and ends with 'sit' in this example:

Quote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit nam aliquam leo sit amet nibh tincidunt ultricies. Nullam nam feugiat velit sit amet dui scelerisque id ornare nulla ultricies.
I want to prepend another string before the nam and append another after the sitt, to give me:

Quote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit before nam aliquam leo sit after amet nibh tincidunt ultricies. Nullam before nam feugiat velit sit after amet dui scelerisque id ornare nulla ultricies.
I think the way to do this is via RegExp, but I'm insufficiently familiar with this to know how to write the expression. Can anyone help me out?

I'd like to create a basic form where 3 text input fields are named with the following names referrerId, referrerId2 & referrerId3.

My goal is once the text fields within the form are populated with the users data, then once the user clicks submit, a new browser window opens up (in parent window preferably), navigating to the following url exactly as shown. Highlighted in red is the dynamic information I'd like appended.

Vacation Packages &referrerId=FIRSTNAME&referrerId2=LASTNAME&referrerId3=AGENTNUMBER

Any help would be greatly appreciated. Thanks!

I have a page with multiple drop down menus for selecting a State then City, then Zip. The State and City both work fine but I can't seem to make the Zip function properly.

Page with drop downs:
Code:

var xmlhttp;
function showCity(state)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_cities.php";
url=url+"?q="+state;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
var s=state;
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}


var xmlhttp;

function showZip(city)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="get_zips.php";
url=url+"?z="+city;
url=url+"&q="+s;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged1()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtZip").innerHTML=xmlhttp.responseText;
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}
<!--**********
state drop down
*********-->
<? $State = mysql_query("SELECT DISTINCT full_state FROM zip_codes ORDER by full_state",$db_link); ?>
<select name="state" CLASS="formTextbox" size="1"  onChange="showCity(this.value)">
<? while($get = mysql_fetch_array($State)) { ?>
<option value="<?=$get['full_state'];?>"><?=$get['full_state'];?></option><? } ?>
</select>

get_cities.php:
Code:

<?php
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $City = mysql_query("SELECT DISTINCT city FROM zip_codes WHERE full_state = '$q' ORDER BY city",$db_link); ?>
<select name="city" CLASS="formTextbox" size="1" onChange="showZip(this.value)">
<? while($get = mysql_fetch_array($City)) { ?>
<option value="<?=$get['city'];?>"><?=$get['city'];?></option><? } ?>
</select>

get_zips.php:
Code:

<?php
$z=$_GET["z"];
$q=$_GET["q"];
include('include/db_con.php');
?>
<? $Zip = mysql_query("SELECT DISTINCT zip FROM zip_codes WHERE city = '$z' AND full_state = '$q' ORDER by zip",$db_link); ?>
<select name="zip" CLASS="formTextbox" size="1">
<? while($get = mysql_fetch_array($Zip)) { ?>
<option value="<?=$get['zip'];?>"><?=$get['zip'];?></option><? } ?>
</select>

I have my page set to only show the drop down's when there is a value to select. The Zip drop down shows up at the correct time but is empty.

I've tried searching the forum but since I'm still learning js I wasn't able to make use of any on the other multiple drop down examples I came accross.

Thanks for any advice you can offer.

The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question.

The problem is, when I keep issuing the request it keeps appending over and over again



Code:

if (oSession.uriContains("search?q=")) 
{
    var str = oSession.fullUrl;
    var sAppend = "+test1+test2+test3";
    if (!oSession.uriContains(sAppend))
    {
        oSession.fullUrl = str.replace( "search?q=","search?q="+sAppend);
    }
}

Can you please give me an example? I'm still new to programming.

Thank you

In this case, Let's take Google Search as example:

The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question.

This code is used in Fiddler(It's a Man-in-the-middle proxy)

Code:

if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
    var str = oSession.fullUrl;
    var sAppend = "test1+test2+test3";
    if (!oSession.uriContains(sAppend))
    {
        oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
    }
}

For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3

Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL.

Basically, how do I make it wait until I click the submit/search button

Thank you.

Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id?

Also, Any other methods besides Onsubmit()?

Hello.

I have a textarea where user can select a text then copy to clipboard (using EditArea script for highlighting)
I need append additional information to the selected text so it won't be visible in the textarea, but only appear after copied to clipboard.
For example:
Code:

text line one
text line two
text line three

user selected word "two", hit CTRL+C to copy into clipboard (or used browser's context menu), but in clipboard it should be saved as: "selected word 'two'"

What would be the approach?

Thank you.

Hi

I need to produce some code to get the contents of the particular TD I am running a function in.

I have the following code which works fine up the point of wanting to delete a row. In order to make it work again I have to go into the code and adjust all the numbers in the functions (not sure that's the correct terminology)

Code:

<head>

<script language='javascript'>

exchRate = '1.12'; 

function gettheUKP(which) {
// This is the line I think I need to change
 var x = document.getElementsByTagName("span")[which].innerHTML; 
var s = Math.round(x / exchRate);
	document.write('(&pound;' + s + ')')
}

</script>

</head>

<body>
<table cellspacing="0" cellpadding="0" class="charges">
       <tr>
		  	<td><strong><span>368</span>&euro;</strong> <script type="text/javascript">gettheUKP(0);</script></td>
       </tr>
       <tr>
            <td><strong><span>471</span>&euro;</strong> <script type="text/javascript">gettheUKP(1);</script></td>
       </tr>
       <tr>
            <td><strong><span>598</span>&euro;</strong> <script type="text/javascript">gettheUKP(2);</script></td>
       </tr>
       <tr>
            <td><strong><span>720</span>&euro;</strong> <script type="text/javascript">gettheUKP(3);</script></td>
       </tr>
       <tr>
            <td><strong><span>998</span>&euro;</strong> <script type="text/javascript">gettheUKP(4);</script></td>
       </tr>
</table>
</body>

So in essence I think I need to change the highlighted line to say "get the contents on the span within this TD".

Is this possible?

Thanks