JavaScript - Update Page After Ajax Call

i'm doing the following on a select box to load the next select box (in a td with the id)



if I look at the html returned by the ajax call I get

PHP Code:
<select name=optionvalue /><option value='test 1'>test 1</option><option value='test 2'>test 2</option><option value='test 3'>test 3</option></select> 


but it's showing as

the select box and then

test 1test 2test 3


my javascript code is

PHP Code:
function Loadoptionvalueselect() {
        //alert("here");
        urltoajax = "getoptionsvaluesselect.asp?1=1"
        strarea = document.getElementById('optionid').value;



        urltoajax = urltoajax + '&optionid=' + strarea
        urltoajax = urltoajax + '&rnd=' + Math.round(Math.random() * 10000)
        // alert(urltoajax);
        $.ajax({
            url: urltoajax,
            cache: false,
            success: function(html) {
                $("#troptionvalue").html(html);
            }
        });

    } 


any ideas what could be causing this?

Hi there

How to send data from a text feild in GET method using an AJAX call...
I already have codes working

Code:

                to = "interfaces/add_department.jsp";
		parm = "name="+name.value+
                          "&name2="+name2.value;
		alert(parm)
		post(to,parm,callBackFunctionForAddDepartment);

Here the variable name may have "me&you" or "me you" like that.... so how do i encode it so that it reaches properly?

0 down vote favorite

I have been struggling with this for some time.. I searched around but didnt get a solution yet. This is only an issue on production server. In my development environment, everything works just fine.

I am using JQuery/Ajax to update product information based on product's Color attribute. for example, a product has A and B color, the price for color A is different from color B. When user choose different color, the price information is updated as well.

What I did is to first add a javascript function: function updateProductVariant() { var myval = jQuery("#<%=colorDropDownList.ClientID%>").val();

jQuery.ajax({
type: "POST",
url: "/Products.aspx/GetVariantInfoById",
data: "{variantId:'" + myval + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",

success: function (response) {
var obj = jQuery.parseJSON(response.d);

jQuery("#<%=lblStockAvailablity.ClientID%>").text(obj.StockMessage);
jQuery(".price .productPrice").text(obj.CurrentPrice);
jQuery(".price .oldProductPrice").text(obj.OldPrice);
}

});
}

Then I can register the dropdown list's 'onclick' event point to function 'updateProductVariant'

GetVariantInfoById is a Web method in the codebehind, its also very straightforward： [WebMethod] public static string GetVariantInfoById(string variantId) {

int id = Convert.ToInt32(variantId);

ProductVariant productVariant = IoC.Resolve<IProductService>().GetProductVariantById(id);

string stockMessage = productVariant.FormatStockMessage();

StringBuilder oBuilder = new StringBuilder();

oBuilder.Append("{");
oBuilder.AppendFormat(@"""{0}"":""{1}"",", "StockMessage", stockMessage);
oBuilder.AppendFormat(@"""{0}"":""{1}"",", "OldPrice", PriceHelper.FormatPrice(productVariant.OldPrice));
oBuilder.AppendFormat(@"""{0}"":""{1}""", "CurrentPrice", PriceHelper.FormatPrice(productVariant.Price));
oBuilder.Append("}");
return oBuilder.ToString();
}

All these works fine on my local box, but if i upload to the production server, catching the traffic using fiddler, /Products.aspx/GetVariantInfoById becomes a 302 Object moved
Object moved to here.

On my local box,

HTTP/1.1 200 OK

Server: ASP.NET Development Server/10.0.0.0

Date: Thu, 03 Mar 2011 09:00:08 GMT

X-AspNet-Version: 4.0.30319

Cache-Control: private, max-age=0 Content-Type: application/json; charset=utf-8 Content-Length: 117 Connection: Close

But when deployed on the host, it becomes HTTP/1.1 302 Found

Proxy-Connection: Keep-Alive

Connection: Keep-Alive

Content-Length: 186

Via: 1.1 ADV-TMG-01

Date: Thu, 03 Mar 2011 08:59:12 GMT

Location: http://www.pocomaru.com/Products.asp...d/default.aspx

Server: Microsoft-IIS/7.0 X-Powered-By: ASP.NET

then of course, then it returns 500 error title>Unknown web method GetVariantInfoById/default.aspx.
Parameter name: methodName

Can someone please take a look? I think its some configuration in the production server which automatically redirects my webservice call to some other URL, but since the product server is out of my control, i am seeking a local fix for this. Thanks for the help!

HI
I have tow page and the first page open a new window with javascript(by using window.open).Now I want to call a javascript function that is in the first page from the second page and for that i use parent.function_name but it doesn't work.How can do so?

thanks

<frameset rows="30%,70%>
<frame src="page1.html" name="name1" frameborder="0"></frame>
<frame src="page2.html" name="name2" frameborder="0"></frame>
</frameset>

in above code I used page1.html & page2.html as frame. Both include same javascript file having two function name fun1() & fun2().

as both are separate frame both have there own copy function

page1.html
fun1()
fun2()
page2.html
fun1()
fun2()

I call fun2() from page2.html and inside that function I want to call page1.html's fun1().

fun1() in page1.html and fun1() in page2.html both return different result because of there global variables.

Is there any way to call fun1()-page1.html from the fun2()-page2.html?

All,
I have the following code:
Code:

$(function() {
	$("#check_login").click(function() {
		event.preventDefault();
			var $email = $("#login_email").val();
			var $password = $("#login_password").val();
			$.post("check.php", {email: $email, password: $password}, function(result) {
				if(result=="Success"){
				parent.$.fancybox.close();
				window.location.replace("index.php");
				}else{
    			$("#login_check").html(result);
				$("#login_email").val('');
				$("#login_password").val('');
				}
   			 });
	});
});

I'm basically checking a user login. If the login is successful I'd like to close the Fancybox. This part works fine. I'm using an iFrame from Fancybox. If I don't have this part:
Code:

parent.$.fancybox.close();

It will reload the index page in my iFrame. How can I refresh my other page from the iFrame? Thanks in advance.

Hi, I'm making a page and I'd like to start an applet (Jmol) and display it near the button of the current page when a button is clicked. However, I get a syntax error: "missing ; before statement"
(Note: this javascript is part of a cgi page)
The code I have is as follow:
Code:

<script type="text/javascript" SRC="../jmol-12.0.48/Jmol.js"></script>
<script 
type="text/javascript" 
language="Javascript">
function loadJmol(SMILES)
{
        document.getElementById("viewMol").innerHTML = 'jmolInitialize("../jmol-12.0.48", true); jmolAppletInline(300, \'\', "load \$' + SMILES + '");' ;
}
</script>
...
print "<a href=javascript:loadJmol(\"SomeString\")>View</a>";
print "<script id=\"viewMol\"></script>";

The syntax error occurs at the single quote in ...").innerHTML = 'jmolInitialize("...

I have been able to get this applet to run when not in a function.

Has anyone run into this before and can give me a hand?

Thanks, Tom

Hey, I have 3 bits of code, 2 of which I'm pretty sure are right [i know the php works, and the ajax looks fine], but one i'm having trouble with. Basically what I'm trying to do is use a link to call php function [calls a piece of text from a database]. Which worked fine. But then I tried to incorporate AJAX into the script to make change dynamically on the page, and I'm a little confused with it all. I've got the AJAX and PHP, [and an attempted page with a link on to try and call the function with AJAX] but so far it's not doing as it should. Wondered if anyone could show me where I'm going wrong with the whole 'linking together' thing? So far everything I've tried hasn't worked.

[hope this doesn't violate the forums 'don't dump your code' rule. But it's kind of all necessary]

The AJAX [AJAX.js]:

Code:

function loadurl(generate.php) {
 
var ajax = false;
 
// Create the object:
 
// Choose the objecttype, depending on what is supported:
if (window.XMLHttpRequest) {
 
    // IE 7, Mozilla, Safari, Firefox, Opera, most browsers:
    ajax = new XMLHttpRequest();
 
} else if (window.ActiveXObject) { // Old IE-browsers
 
    // Make the type Msxml2.XMLHTTP, if possible:
    try {
        ajax = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e1) { // Else use the other type:
        try {
            ajax = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e2) { }
    }
 
}
 
// Retrieving the data from the page
 
 if (ajax) {
 
   alert("url:generate.php" + url);
 
   ajax.open('GET', url);
 
   // Sends request
   ajax.send(null);
 
   // Function that handles response
   ajax.onreadystatechange=function(){
    // If everything is OK:
     if ( (ajax.readyState == 4) && (ajax.status == 200) ) {
          // Returns the value to the document
          alert(ajax.responseText);
	 }
    }
 
 
 } else { // AJAX is not useable
     alert('It is not possible to connect, please update your browser.');
 }
 
}

The PHP [generate.php]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>

<?php
 
if($_GET['act'] == "generate_quotes") {

$db = mysql_connect("*", "*", "*") or die ("Unable to connect to database.");
mysql_select_db("quote") or die ("Unable to select database.");


$result = mysql_query( " SELECT * FROM `quote`  ORDER BY RAND() LIMIT 0,1 " );
$fetch = mysql_fetch_array($result); 


echo "<blockquote>".$fetch['q_quote']."</blockquote>";
mysql_close($db);

} else { 

echo "<img src=\"1.png\">";

}
?>
</body>
</html>

The page where I'm trying to bring them together [PULL.php]

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="ajax.js" type="text/javascript"></script>
</head>

<body>
           <a onClick="loadurl('generate.php'); return false;">Click Here</a>
</body>
</html>

I've included the file names with extensions just in case it's something to do with those, but thanks in advance for any help. Greatly appreciated.

We have an html page which brings in content dynmically using Ajax. So the page starts out with certain content, and when a particular link is clicked, the content is swapped out with new content. With this approach, the back button on the browser does not work, because the URL didn't actually change. How could a user bookmark the new page with the second set of content? Is this even possible?

hey guys i have been trying for the last week to make a one of a kind login page. but i cannot figure out how to make the Slide bar initiate a Form submition
i have made a sample page on jsfiddle

shown here
http://jsfiddle.net/Cav3maN/ZzwQq/embedded/result/
if your not farmiliar with jsfiddle just remove the embedded/result/ to see the source

http://jsfiddle.net/Cav3maN/ZzwQq/

please feel free to modify the source and get it to submit.
if your slider disapeers click the "Run" tab at the top.
and when you get it successfully working click "Update" tab
and send the new url on here for me to see. thanks very much.
aslo this is a free source feel free to embed it in your site anywhere. thanks alot and please guy i beleve in you all lol
im new to web coding and i wanna be successful so if you wish to show me exactly what you done to make this work i would love you for ever.

I have been searching online for hours, but it is possible I'm just not thinking of the correct keywords. I have included a basic illustration of the current setup (which does not work). The issue lies with the page that is the desired output. I have a far deeper issue which I have narrowed down to javascript on the final .asp page not loading at all.


On default.asp, I am calling a function contained in 'ajax_call-contentselection.js'

Code:

<a onclick="func_displaycontents('restaurants'); return false">displayajaxcontent</a>

Honestly, I don't believe the following piece of code (ajax_call-contentselection.js) is relevant, as it is standard ajax code, but just in case:
Code:

function func_displaycontents(var_type){     
	var xmlHttp = GetXmlHttpObject();     
	var url = "../_include/ajax_display-contentselection.asp";    
	url += "?type="+var_type;

	if (!xmlHttp){          
		alert ("Browser does not support HTTP Request")          
		return     
	}    
		
	xmlHttp.onreadystatechange=function(){     
	if(xmlHttp.readyState == 1){
       		document.getElementById("div_ajaxfillattractions").innerHTML = "<div style='padding-top:50px;color:white;width:930px;text-align:center;'><img src='../_images/ajax-loader.gif'/><br/>Loading...</div>";
	};
	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
			document.getElementById("div_ajaxfillattractions").innerHTML=xmlHttp.responseText;
        	}     
	};     
	xmlHttp.open("GET", url, true);     
	xmlHttp.send(null);
}

The other contents of "ajax_display-contentselection.asp" are displayed properly in "div_ajaxfillattractions" of "default.asp", but no javascript code on that page loads. If I use "ajax_display-contentselection.asp" as an include file on "default.asp", I get the javascript alert of 'Success', but when I initiate the AJAX it does not work, so I know there isn't a problem with the javascript.

Please let me know if I sucked at explaining something, or more detail is needed.

Thanks in advance,
Matt

Hello,

I actually use a counter on a webpage (It works)
To do it, I use an inline javascript but I would like to unify the entire page and call that counter directly in the external Javascript that manages the whole site.

Here's the actual code...
Code:

 HTML 
<body onLoad=gen_hits()>
...
<span id='hits'></span><SCRIPT language="JavaScript" SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"></SCRIPT>
...
</body>

 EXTERNAL JAVASCRIPT (ini.js) 
var hits="HITS ";

function gen_hits() {
document.getElementById("hits").innerHTML=hits;
}

and here a "view" of my request...
Code:

 HTML 
<body onLoad=gen_hits()>
...
<span id='hits'></span>
...
</body>

 EXTERNAL JAVASCRIPT 
var hits="HITS " +  <SCRIPT language="JavaScript"  SRC="http://www.mycompany.com/cgi-bin/counterdir/gcount.pl?NUMBER=../../otherdir/counter"> </SCRIPT> ;

function gen_hits() {
document.getElementById("hits").innerHTML=hits;
}

Any idea how to modify it ?

Thank you very much
Gino

I have a website that is using ajax to keep the page up to date with the database information. I call this page through a file called start.php. Once index.php is loaded it has a menu with selections. I then want it to call a page called query.php in an iframe to update the information, but not open a new window. In the iframe the query.php will run and then redirect itself to blank.php. The code is as follows and any help would be much appreciated. I have tried several methods of doing this and they have been commented out because they didn't work or didn't do what I wanted them to do. I do not want to use window.open since IE doesn't work well with it.

window.open does work by pop up windows but I want to stay away from them.
The main code I am looking to get help on is in red under start.php.

In start.php I will include the entire file. In index.php I'm only going to include the main sections I use for this snippit. In query.php I'm not going to include query.php since I beleive this file isn't important for this snippit.

start.php
Code:

<html>
	<head>
		<title>Countries At War!</title>
      <body style="background-color:#B0C4DE;">
      
		<script language="JavaScript" type="text/javascript">
			//Gets the browser specific XmlHttpRequest Object
			function getXmlHttpRequestObject() {
				if (window.XMLHttpRequest) {
					return new XMLHttpRequest(); //Not IE
				} else if(window.ActiveXObject) {
					return new ActiveXObject("Microsoft.XMLHTTP"); //IE
				} else {
					//Display your error message here. 
					//and inform the user they might want to upgrade
					//their browser.
					alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade to Firefox.");
				}
			}			
			//Get our browser specific XmlHttpRequest object.
			var receiveReq = getXmlHttpRequestObject();
			//Initiate the asyncronous request
			
function sayHello() {
				//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
				if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
					//Setup the connection as a GET call to SayHello.html.
					//True explicity sets the request to asyncronous (default).
				    receiveReq.open("GET", 'index.php', true);
					//Set the function that will be called when the XmlHttpRequest objects state changes.
					receiveReq.onreadystatechange = handleSayHello; 
					//Make the actual request.
					receiveReq.send(null);
				 
				}
}
 
			//Called every time our XmlHttpRequest objects state changes.
			function handleSayHello() {
				//Check to see if the XmlHttpRequests state is finished.
				if (receiveReq.readyState == 4) {
					//Set the contents of our span element to the result of the asyncronous call.
					document.getElementById('span_result').innerHTML = receiveReq.responseText;
				}
}

 function openMenu(query) {
  
    var myString = 'query.php?' + query;
   // window.open(myString, 'linkname', 'title=no, height=465, width=400, left=550, top=150,  location=yes, resizable=no, menubar=no, scrollbars=no')
    //document.getElementById('engine').src = myString;
	//document.getElementById('engine').setAttribute('src',myString;);
	//top.frames['engine'].location.href = myString;
	pausecomp(1000);
    sayHello();
} 
 

function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
} 
			</script>
	</head>
	<body>
<a href="javascript:sayHello();">Say Hello</a><br />
         <iframe src="blank.php" MarginWidth="0" transparent="yes" width="30" height="25"
			frameborder="0" scrolling="no" name="engine">
          UPGRADE YOUR BROWSER</iframe>
		<span id="span_result"></span>
        <body onLoad="sayHello();">
	</body>
</html>

index.php
Code:

<table width="100%" border="2" bordercolor="Black">
<tr><center>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=1');">Home</a></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=2');">Jobs</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=3');">Travel</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=4');">Fight</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=5');">Inventory</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=6');">Properties</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=7');">Rewards<?php if($db_field['rewardpoints'] >= "1") print "(". $db_field['rewardpoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=8');">Profile<?php if($db_field['profilepoints'] >= "1") print "(". $db_field['profilepoints'] . ")";?></td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=9');">Alliances</td>
<td><center><a href="javascript:void(0);" onclick="javascript: openMenu('menulevel1=10');">Options</td>
</tr></center>
</table>

Thanks in advance for all the help.

I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down.

What's the best way to do this?

hi,

When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?!

here is my Ajax code
Code:

function datecheckFunction(){
	var datecheckRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		datecheckRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	datecheckRequest.onreadystatechange = function(){
		if(datecheckRequest.readyState == 4){
			var ajaxDisplay = document.getElementById('ajaxDiv');
			ajaxDisplay.innerHTML = datecheckRequest.responseText;
		}
	}
	var datepicker = document.getElementById('datepicker').value;
	
	var queryString = "?datepicker=" + datepicker;
	//Add the following line
	datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
	datecheckRequest.send(null);
}