Solved

Simple ajax... asp not working

Posted on 2013-05-23
15
330 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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 33

Author Comment

by:Mike Eghtebas
Comment Utility
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 33

Author Comment

by:Mike Eghtebas
Comment Utility
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
 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 33

Author Comment

by:Mike Eghtebas
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 33

Author Comment

by:Mike Eghtebas
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 33

Author Comment

by:Mike Eghtebas
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 33

Accepted Solution

by:
Mike Eghtebas earned 0 total points
Comment Utility
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 33

Author Comment

by:Mike Eghtebas
Comment Utility
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 82

Expert Comment

by:Dave Baldwin
Comment Utility
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 33

Author Closing Comment

by:Mike Eghtebas
Comment Utility
This solution works.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now