Solved

Simple ajax... asp not working

Posted on 2013-05-23
15
335 Views
Last Modified: 2013-05-30
The attached zip ASP file includes an ajax app (or just simulation); where on mouseover the links, portion of the page should pop up. But, the pop-up doesn't show up.

Question: What is wrong with this application? The page information doesn't show up.

Thank you.
AjaxTest.zip
0
Comment
Question by:Mike Eghtebas
  • 9
  • 6
15 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39193156
The Firefox Error Console says:

Timestamp: 5/23/2013 7:41:05 PM
Error: ReferenceError: url is not defined
Source File: http://10.202.46.40/ee/eghtebas/AjaxTest/script.js
Line: 39

Works if you click on the links.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39193175
Hi Dave,

Thanks for the post. Please see the attached image; it shows how a popup displays part of the information from the link prior to clicking on the link to navigate to it.

The question still remains what do I need to make this happen?

I will check line Line: 39 now. brb

Mike
Popup.png
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39193206
I added alert(url); in:
function showPreview(evt){
	if(evt) {
	    var url = evt.target;
	    alert(url);
	}else{
		evt = window.event;
		var url=evt.srcElement;
	}
	xPos=evt.clientX;
	yPos=evt.clientY;
}
.
.

Open in new window


What I am getting is http://localhost:64520/jsintro/2000-09.html

not ../jsintro/2000-09.html

I see that the problem is because the files are not in the server-specific (localhost) folder. For example folder www in tomcat for php applications.

I have not installed IIS in this computer so, where should I move my folders to?

please see:

http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_28136202.html
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39193213
This is my Default.aspx possibly missing lots on server side tags:

How can I revise it to remedy the problem?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html>
<head>
	<title>Smart Ajax Links</title>
	<link rel="stylesheet" rev="stylesheet" href="script.css" />
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
<h2>A Gentle Introduction to JavaScript</h2>

<ul>
	<li><a href="../jsintro/2000-08.html">August article</a></li>
	<li><a href="../jsintro/2000-09.html">September article</a></li>
	<li><a href="../jsintro/2000-10.html">October article</a></li>
	<li><a href="../jsintro/2000-11.html">November article</a></li>
</ul>
<div id="previewWin"> </div>
</body>
</html>

Open in new window

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39193228
Your aspx file is fine.  It's actually just an HTML file, there is no ASP in there, and I just renamed it to 'default.html' and removed the first line.  And the links were fine in the directory structure that was in your zip file.  I could click on the links and the pages would appear so that means they were correct.  Adding '../' will break it, not help.

Your actual problem is that AJAX must be run on a web server.  The xmlHTTPrequest by definition makes a request to a server and not just a file.  Even then, you still will need to fix the problem on line 39 where the script gets to that line without the 'url' being defined.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39193363
re:> Your actual problem is that AJAX must be run on a web server.

This is why I want to put my files into the server. The question is, do I need to use IIS for that?

Visual Studio runs some applications (emulates server) without IIS installed. So, how can I run ajax (where do I put the files) without IIS?

Also,

Re:> The Firefox Error Console says...

How did you check js using FireFox? Please add your response to my another open question at:
Give me some steps. I have firebug and DOM inspector add-ons installed.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28137713.html

Thanks,

Mike
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39193427
This project is just HTML and javascript and Visual Studio as far as I know (since I don't use it) is not the place to test this.  The 'web server' in Visual Studio is not a 'real' web server in that I don't believe it is accessible thru the network.

I'm kind of surprised that you don't have a web server up and running to test things on.  I have 8 of them running in this room.  Make that 9, I have two of them on one computer.  3 IIS, 6 Apache on Windows, Linux, and Mac OS X.

Firefox Error Console - Ctl-Shift-J - all Tools like that are the Tools -> Web Developer menu flyout.  On my Firefox, that is just above the Web Developer Extension on the tools menu.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39195843
Hi Dave,

Here is what I think I should have. It is not working yet though:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html>
<head>
	<title>Smart Ajax Links</title>
	<link rel="stylesheet" rev="stylesheet" href="script.css" />
    <script src="script.js" type="text/javascript"></script>
</head>
<body>
<h2>A Gentle Introduction to JavaScript</h2>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="MainScriptManager" runat="server">
    </asp:ScriptManager>    

    <asp:UpdatePanel ID="hellowWorldUpdatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <ul>
                <li><asp:HyperLink ID="HyperLink5" href="jsintro/2000-08.html" runat="server">August article</asp:HyperLink></li>
                <li><asp:HyperLink ID="HyperLink6" href="jsintro/2000-09.html" runat="server">August article</asp:HyperLink></li>
                <li><asp:HyperLink ID="HyperLink7" href="jsintro/2000-10.html" runat="server">August article</asp:HyperLink></li>
                <li><asp:HyperLink ID="HyperLink8" href="jsintro/2000-11.html" runat="server">August article</asp:HyperLink></li>
            </ul>
            <div id="previewWin"> </div>    
        </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>

Open in new window

0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39195851
I don't agree.  You do not need any of that asp: stuff.  It contributes Nothing to a simple page like this.  And it does not fix the javascript problem in any way which is your actual problem.
0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39196026
As long as I can make function in vs 2010, I don't have to have any of the js codes. How can I make this function in vs 2010 with or without js?
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39196066
I have no idea since I don't use VS2010.  I'll say it one last time.  The problem is that your javascript is not working.  The URLs you originally gave work fine because you can click on them and see the pages.

I suggest you click on "Request Attention" and get some others to look at you question.
0
 
LVL 34

Accepted Solution

by:
Mike Eghtebas earned 0 total points
ID: 39197175
Hi Dave, This is what I was looking for. It works:
(without IIS)
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html>

<html>
<head>
	<title>Smart Ajax Links</title>
	<link rel="stylesheet" rev="stylesheet" href="script.css" />
</head>
<body>
<h2>A Gentle Introduction to JavaScript</h2>
    <form id="form1" runat="server">

    <asp:ScriptManager ID="MainScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference path="~/script.js" /> 
        </Scripts>
    </asp:ScriptManager>    

    <asp:UpdatePanel ID="hellowWorldUpdatePanel" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <ul>
                <li><asp:HyperLink ID="HyperLink5" href="jsintro/2000-08.html" runat="server">August article</asp:HyperLink></li>
                <li><asp:HyperLink ID="HyperLink6" href="jsintro/2000-09.html" runat="server">August article</asp:HyperLink></li>
                <li><asp:HyperLink ID="HyperLink7" href="jsintro/2000-10.html" runat="server">August article</asp:HyperLink></li>
                <li><asp:HyperLink ID="HyperLink8" href="jsintro/2000-11.html" runat="server">August article</asp:HyperLink></li>
            </ul>
            <div id="previewWin"> </div>    
        </ContentTemplate>
    </asp:UpdatePanel>

    </form>
</body>
</html>

Open in new window


and:
window.onload = initAll;
var xhr = false;
var xPos, yPos;

function initAll() {
    var allLinks = document.getElementsByTagName("a");

    for (var i = 0; i < allLinks.length; i++) {
        allLinks[i].onmouseover = showPreview;
    }
}

function showPreview(evt) {
    if (evt) {
        var url = evt.target;
    }
    else {
        evt = window.event;
        var url = evt.srcElement;
    }
    xPos = evt.clientX;
    yPos = evt.clientY;

    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e) { }
        }
    }

    if (xhr) {
        xhr.onreadystatechange = showContents;
        xhr.open("GET", url, true);
        xhr.send(null);
    }
    else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
    }
    return false;
}

function showContents() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            var outMsg = xhr.responseText;
        }
        else {
            var outMsg = "There was a problem with the request " + xhr.status;
        }

        var prevWin = document.getElementById("previewWin");
        prevWin.innerHTML = outMsg;
        prevWin.style.top = parseInt(yPos) + 2 + "px";
        prevWin.style.left = parseInt(xPos) + 2 + "px";
        prevWin.style.visibility = "visible";
        prevWin.onmouseout = function () {
            document.getElementById("previewWin").style.visibility = "hidden";
        }
    }
}

Open in new window

0
 
LVL 34

Author Comment

by:Mike Eghtebas
ID: 39197179
I tried to pass on 500 points to you but I was not able to. Do you want me to ask this to be reopened?

You made me work hard until I figured it out which is appreciated.

Also, plese add a comment on FireFox issue at: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28137713.html

so I can close that question.

Thanks,

Mike
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39197185
No, I don't need the points.  It may work in VS2010 but no websites on the internet run on Visual Studio.  They are all using 'real' web servers like IIS and Apache.  We've had a number of questions where something will work in Visual Studio but cause a lot of problems when it's put on a real web server.  Until you test it on IIS, I would not consider you to be done with this.
0
 
LVL 34

Author Closing Comment

by:Mike Eghtebas
ID: 39207107
This solution works.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question