|
JavaScript - Replace The Html Content With The Reply For Post
Hi,
My current html file contains as below. <html> <head> ... </head> <body> ... </body> </html> When i receive a reply from WEB server, is there any way using javascript to replace all the contents shown above with the reply (another html). I have seen window.location.replace, but this will make another request to server before replacing the contents. But i just want to take whatever reply i receive from server with the display content. Can any one please give me some pointers on how to proceed with this. Thanks in advance. Similar TutorialsCan anyone tell me how I can change the code below so that instead of all the fade in fade out stuff the function will actually replace whatever is inside a div called Myholder with the response this script pulls in? Here's the code I need to change. <script type="text/javascript"> $(document).ready(function() { $('#wait_1').hide(); $('#drop_1').change(function(){ $('#wait_1').show(); $('#result_1').hide(); $.get("func.php", { func: "drop_1", drop_var: $('#drop_1').val() }, function(response){ $('#result_1').fadeOut(); setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjax(id, response) { $('#wait_1').hide(); $('#'+id).html(unescape(response)); $('#'+id).fadeIn(); } </script> drop_1 is the name of a drop down which when changed runs this script which brings back a second dropdown with data relating to the first one. If I need to post more info to get some help with this please let me know. Thanks in advance. Hello All, I have a code which works fine for what is does but I want to add in dynamically a new list to the Array...... from an input field. The relevent part of the code reads as this for example........ var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3") but I need a way to dynamically replace the existing.... "ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3" seen above with a new list from an input field which holds the following say....... ca2sb2en2pg1itm1","ca2sb2en2pg1itm2","ca2sb2en2pg1itm3 I have tried various ideas but none seem to be able to inject the new values in the space between the brackets. Any thoughts. Martin. For those just wondering what the code is and want to try it, it is a one piece code which can fire many different functions without requiring lots of individual bits of code to do same. The action usually happens in micro-seconds but I slowed it to a one second count between changes so you can see what is actually happening. Below is a revised code if you want to see it working and also to give an idea about the Array part in which I want to add a different number set. Copy the code and save in notepad as test.html It can be opened as a web page. Remember to change the code tags to the correct script tags Code: var i_x_list=0
function fireFunctionList_x_list()
{
if (document.getElementById("locate_load_x_list").value == "end" || document.getElementById("locate_load_x_list").value == "undefined"){i_x_list=0;document.getElementById("locate_load_x_list").value=""}else{fireFunctionList_x_list_do()}
}
function fireFunctionList_x_list_do()
{
document.getElementById("addto").value="place_";
var step_x_list=new Array("ca1sb2en1pg1itm1","ca1sb2en1pg1itm2","ca1sb2en1pg1itm3","ca1sb2en1pg1itm4","ca1sb2en1pg1itm5","ca1sb2en1pg1itm6","ca1sb2en1pg1itm7",
"ca1sb2en1pg1itm8","ca1sb2en1pg1itm9","ca1sb2en1pg1itm10","ca1sb2en1pg1itm11","ca1sb2en1pg1itm12","ca1sb2en1pg1itm13","ca1sb2en1pg1itm14","end")
document.getElementById('locate_load_x_list').value=step_x_list[i_x_list]
i_x_list=i_x_list+1
document.getElementById("addto").value+=document.getElementById("locate_load_x_list").value;
document.getElementById("final_locate_load_x_list").value=document.getElementById("addto").value;
document.getElementById("final_locate_load_x_list").value+=document.getElementById("addto2").value;
var x_list = document.getElementById("final_locate_load_x_list").value;
setTimeout("fireFunctionList_x_list()",1000)
var f_x_list = new Function(x_list); f_x_list();
}
<BR><BR> <button onclick="fireFunctionList_x_list()">run the function list rotation</button> <BR><BR> <input id="addto" type="text" size=25 value="place_"><BR> <input id="addto2" type="text" size=4 value="()"><BR> <input id="locate_load_x_list" type="text" size=20 value=""><BR> the code fires this function if there<input id="final_locate_load_x_list" type="text" size=25 value=""><BR> Code: function place_ca1sb2en1pg1itm4(){alert("ca1 number4 function dummy run as alert");}
Code: function place_ca1sb2en1pg1itm9(){alert("ca1 number9 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm6(){alert("ca2 number6 function dummy run as alert");}
Code: function place_ca2sb2en1pg1itm12(){alert("ca2 number12 function dummy run as alert");}
Im working on a 2nd case and I could use some help I need to replace the content of the welcome box Code: <div id="welcome"> Today is<br /> Tuesday, May 29, 2007 <br /><br /> Born today<br /> Ian Fleming (1908) - Author </div> with generated text that displays the current date, and the name of a famous person born on that date. Including comments that describe each of the variables used in writing this code and the functions that the code accesses. I am new to Java/AJAX and I am trying to create a script that will change content of a div. My scenario I am using is an index page with the list.php script included in the div I want content changed in. The list.php script will pull 8 newest titles from mysql and list them in the div. When you click one of the titles it will redirect you to a new page created by story.php. I would like this to be contained inside the div I have currently have the list.php script in. I have looked at several tutorials on AJAX to do this, but they always call a static html page. Since I am not using a static html page I do not think this solution would work for me. How my list.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT id, title, timestamp FROM news ORDER BY timestamp DESC LIMIT 0, 8"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // if records present if (mysql_num_rows($result) > 0) { // iterate through resultset // print news titles while($row = mysql_fetch_object($result)) { ?> <b><font size="+2"><a href="story.php?id=<? echo $row->id; ?>"><? echo $row->title; ?></a></b></font> <br> <font size="-2"><center><? echo formatDate($row->timestamp); ?></center></font> <p> <? } } // if no records present // display message else { ?> <font size="-1">No news is bad news</font> <? } How my story.php script works is as follows: PHP Code: // generate and execute query $query = "SELECT title, content, contact, timestamp FROM news WHERE id = '$id'"; $result = mysql_query($query) or die ("Error in query: $query. " . mysql_error()); // get resultset as object $row = mysql_fetch_object($result); // Show me the news if ($row) { ?> <p> <b><? echo $row->title; ?></b> <p> <font size="-1"><? echo nl2br($row->content); ?></font> <p> <font size="-2">Posted on <? echo formatDate($row->timestamp); ?>. By <? echo $row->contact; ?></font> <? } else { ?> <p> <font size="-1">That news post could is not found.</font> <? } If you need more information for this I will provide whatever you need. So I have a site, It has a few paragraphs. When a customer presses a href, or a navigation link, I want that block of text to change to a different set of paragraphs. For instance Ive got a Div set for the main block of text with general information. When they click a link at the top, I want this text to change to something else, without having to reload the entire page or create a completely new HTML file. I have read on innerhtml and setting particular elements but I cant find any good online resources for using a simple link rather than a button to change a block of text In essence Set block of text to be element "old text" Set block of new text to be element "new text" ( all the while not showing this text on the page until the link is pressed) Classify href as trigger to replace old text with new text. BAM, victory! Any help would be greatly appreciated. I want to change my html depending on what browser the user is using. I know the regular expression works as I've tested it endlessly. Can anyone help? Here is the code <script language="JavaScript" type="text/JavaScript"> if(navigator.appName == "Microsoft Internet Explorer") { function replaceit(s) { s.replace(/.*data=\"(.+?).svg".*/g, " <!-- end .content --> <div class=\"content\" style=\"text-align: center;height: 1000px;\"><img src=\"$1.html\" width=\"1104\" height=\"111\" alt=\"Gastroenterology Book\" /></div>"); } } </script></head> How do I replace the string "rpg" only present in between <et> tags ? Code: <et>ReplaceOnlyrpg</et> After replacement it should look like this Code: <et>ReplaceOnly</et> Any advice is appreciated. Thank you Hi guys, I want to have a flash object, that when clicked comes to the front of the html content below it. For example i want the Flash to be say 100px tall by 500px wide. When clicked i want the flash to scale to 500 x 500, and come to the front of the html content below it. I have the development of the flash object covered. I just dont know how to bring the flash to the front of the html content and scale the dimentions in the embed code. I attached screen shots of what i want to accomplish. Can anyone point me in the direction of a tutorial, or help in any way. Thanks in advance! Hi people, I would like to make the following thing: Load a random file, from a xml list, into a div. I've made a scheme where I show what I was trying to make, but I don't know how to make it. I would like to load into a div a random HTML file, loaded from a XML. Does anyone knows an similar example or can tell me how's possible to do this, please? is it better to do with Javascript ? thanks for the attention guys 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. Hi all, I am using xmlhttp.open();xmlhttp.send(); to send a php content to a div. This php content is again using the same method to get php content from a further page. The content of the div, does not seem to be using the css and javascript files defined in the calling pages <head> section. Does anyone know why this is? Is there a workaround or solution to this problem? It might be easier to understand looking at the code, so Background info: Javascript file: scripts.js client.php ----> loads data from: display_client.php display_client.php ----> loads data from: display_brand.php Code: client.php http://pastebin.com/4EFn9YRf display_client.php http://pastebin.com/BGZAKre2 display_brand.php http://pastebin.com/0a4Pg3gg scripts.js http://pastebin.com/er4dkmPc Thanks! Hi I'm looking for a very simple script to replace one div with another. I've found a few but they seem overly complicated with features I don't need. I simply want to be able to click on a div and for it to be replaced with another div previously hidden. If someone could suggest a solution or point me in the right direction I'd really appreciate it. Thanks I found a regular expression that will strip my string of every html tag... var stripped = htmlStr.replace(/(<([^>]+)>)/ig,""); Well, I also want it to strip every thing between parentheses, square brackets, and replace " &# 160;" with a space. It would be really cool if you could explain how to do this as well, because the stuff in the above code after "replace" confuses me. I have no idea how that's working. First of all, I don't want to replace text in a form, or on click. I'm writing up a design document in HTML, and I need an area to display code. The < and > tags won't show up, obviously, but to make it easier on the programmer, I don't want him to have to manually put in < and > for each time it shows up. I am aware that JavaScript has a replace function, but I am not familiar with JavaScript quite yet. Is there a way to have JavaScript find the < and > in a certain div, and replace it with < and > on load? I would appreciate your help so much, Its been frustrating me. in the div class "done" it reads 13/34 i want to compare these to numbers like this if (13 < 34){do something()} else {return false;} so i am trying to get each number by it self to compare with. var did=m[1].getElementsByClassName("done")[1].innerText.replace(/\/.*/,"").value; this line returns 13 correctly. var need=m[1].getElementsByClassName("done")[1].innerText.replace(? ,"").value; this ? the info that i need to get for the other number. i know how to do it if it were a letter but can find the correct way being that it is a / instead. Thx Hi, I need function for replacing one string with some html tag (for example <div>something</div>) in web page. Tricky is that in this replacing I must ignore all text between <a> and </a>. It's look easy but I am not good in javascript.
I know how the replace method works, but I can't for the life of me figure out exactly what this replace function is doing... Can someone shed somelight for me? the g I *think* is a flag for global replacement... Code: replace(/\s/g, " "); I know that *something* is being replaced by a non-blank space, but what? How would you do a .replace for a Javascript if statment.
Building a javascript shopping cart for an assignment. First time using Javascript so ignore the ****ness of it please Anyway basically I need to replace the qty of an item in an array if the item has already been added to the array. if it hasn't then it adds the normal values to the array. So I assume atm that I have to run an if statement when the function Code: function readInput(prd, qty, prc){
is called that checks in the array before pushing the new values into the array if array contains product name then var id = productarrayID+1 then replace that with the new quantity read in by the form. Quantity in my array is after the product name so I assume productarrayID+1 would give me the qty id variable. So heres the steps, be they correct: 1) get product name from HTML. 2) check if array contains product name. 3) continue with adding to array if product name doesn't exist in array. 4) if array contains product name retrieve id of product name within array. 5) + 1 to the ID to the product name thus giving me the ID for the quantity. 6) run some array.replace with the new id and replace with the quantity. Just wondering if thats a year or no to how that would run. Il post my HTML code but please dont post solutions I would prefer to write the code myself but just checking if the step-by-step process would work thankyou. HTML: Code: <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css\basic.css" />
<script language="JavaScript" src="js/basic.js"></script>
<title>Shopping Time</title>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="items">
<div id="column">
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper">
<p class="desc" value="Paper">
Product: Paper 1</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper2">
<p class="desc" value="Paper2">
Product: Paper 2</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper3">
<p class="desc" value="Paper">
Product: Paper 3</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
</div>
<div id="column">
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper4">
<p class="desc" value="Paper4">
Product: Paper 4</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £2.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper5">
<p class="desc" value="Paper5">
Product: Paper 5</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper6">
<p class="desc" value="Paper6">
Product: Paper 6</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
</div>
<div id="column">
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper7">
<p class="desc" value="Paper5">
Product: Paper 7</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper8">
<p class="desc" value="Paper8">
Product: Paper 8</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
<img src="img/paper1.jpg">
<form name="test">
<input type="hidden" name="prd" value="Paper9">
<p class="desc" value="Paper9">
Product: Paper 9</p>
<p class="desc">
<input type="hidden" name="prc" value="1.00">
Price: £1.00</p>
<p class="desc">
Select Quantity:
<select name="amount" onchange="quantity()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p class="submit">
<input type="button" onclick="readInput(prd.value, amount.value, prc.value);" name="test" value="Add To Cart" />
</p>
</form>
</div>
</div>
<div id="sidebar">
<table border="1px solid black" id="table" rules="ALL" frame="void" class="cart" width="100%">
<tbody>
<tr>
<th>
<p class="cart">Product:</p>
</th>
<th>
<p class="cart">QTY:</p>
</th>
<th>
<p class="cart">Price:</p>
</th>
<th>
<p class="cart">Total:</p>
</th>
</tr>
</tbody>
</table>
<button onclick="viewshoppingcart('table')" class="button">Update Shopping Cart!</button>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
Script: Code:
var cart= new Array();
var down= 0;
function readInput(prd, qty, prc){
down = down + 1;
var total= prc * qty;
cart.push( prd )
cart.push( qty )
cart.push( prc )
cart.push( total );
}
var p = 0;
var q = 1;
var t = 2;
var s = 3;
function viewshoppingcart(id){
if(!cart[p])return;
for(var i = 0; i < down; i++ ) {
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var data1 = document.createElement("td")
data1.appendChild(document.createTextNode( cart[p] ) )
var data2 = document.createElement("td")
data2.appendChild (document.createTextNode( cart[q] ))
var data3 = document.createElement("td")
data3.appendChild (document.createTextNode( cart[t] ))
var data4 = document.createElement("td")
data4.appendChild (document.createTextNode( cart[s] ))
row.appendChild(data1);
row.appendChild(data2);
row.appendChild(data3);
row.appendChild(data4);
tbody.appendChild(row);
p = p + 4;
q = q + 4;
t = t + 4;
s = s + 4;
}
down = 0;
}
Building a shopping cart, at the moment I have 1 variable array. My JS gets values from hidden inputs when add to shopping cart is clicked. The JS then pushes them all into the array in order. I've managed to get the js code to replace innerHTML and add the array to the HTML to show the products, quantity and totals in a table. However its only showing the last product, price, and total in the array in the table. I need to get it to do this: Product: Quantity: Total: Product1 1 1 Product2 2 2 Product3 3 3 So basically I think I need to have my 3 for statements then plus 2 to each i instead of i++ to print out the products but that still doesn't solve my problem with printing every product in a vertical list, same with quantity and same with total. Heres the code Code: var cart= new Array();
function readInput(){
var prd=document.test.prd.value;
var prc=document.test.prc.value;
var qty=document.test.amount.value;
var total= prc * qty;
cart.push( prd )
cart.push( qty )
cart.push( total );
var lenp=cart.length;
for(var i = 0; i<lenp-2; i++ ) {
document.getElementById("product").innerHTML = cart[i];
}
for(var i = 0; i<lenp-1; i++ ) {
document.getElementById("qty").innerHTML = cart[i];
}
for(var i = 0; i<lenp; i++ ) {
document.getElementById("total").innerHTML = cart[i];
}
}
Code: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="css\basic.css" /> <script language="JavaScript" src="test.js"></script> <title>Shopping Time</title> <body> <form name="test"> <input type="hidden" name="prd" value="Paper"> <p class="desc" value="Paper"> Product: Paper 1</p> <p class="desc"> <input type="hidden" name="prc" value="1.99"> Price: £1.99</p> <p class="desc"> Select Quantity: <select name="amount" onchange="quantity()"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select></p> <p class="submit"> <input type="button" onclick="readInput();" value="Add To Cart" /> </p> </form> <table border="1px solid black" rules="ALL" frame="void" class="cart" width="100%"> <tr> <th> <p class="cart">Product:</p> </th> <th> <p class="cart">QTY:</p> </th> <th> <p class="cart">Total:</p> </th> </tr> <tr> <td class="test"> <div id="product"> <p class="cart">Product:</p> </div> </td> <td> <div id="qty"> <p class="cart">QTY:</p> </div> </td> <td> <div id="total"> <p class="cart">Total:</p> </div> </td> </tr> </table> </body> </html> |
|||||||