Solved

AJax, jQuery and ASP (Classic)

Posted on 2010-09-16
2
830 Views
Last Modified: 2012-06-27
I have a calendar page I wrote in ASP.  

When a person clicks an event link, it reloads the same page with an eventID so that at the bottom of the page the event details appear.

I would like to change this to have the event details pop up in modal box without refreshing the page.  So I figure use jQuery and AJAX, two technologies I dont' know enough about...

I’m not sure if I’m in the neighborhood with my thought process, and my code isn't working, so I thought I'd share what I did in hopes that I could get some help...

1.Generate the link in ASP:  DateText = DateText & "<a class='littleLink' href='#' onclick='getEvent(" & objrs("eidNumber") & ")' name='modal'>"&objrs("eTitleOfEvent")&"</a>"

2.The Javascript function “getEvent” sends the event ID to a process page: calproc.asp (I've attached the code below)

3. calproc.asp writes the response.

Here's where I get fuzzy...

Since the name of the link asp generates is "modal", I assume that clicking it should trigger the jQuery.  Since the javascript fires, I assume that the response.write function will display on top of the modal box.

But ofcourse when you assume you make an a... well you get the point.

Something worth noting.  The html for the modal box is:

<div id="boxes">
      <div id="dialog" class="window">
          I want my data here.
      <a href="#"class="close"/>Close it</a>
      </div>
        <div id="mask"></div>
</div>

I dont' have this code in my page, I have the calproc.asp page generate it.  This is probably part of the problem, but I wasn't sure how else to get the "response.write" text into the area where the data should go.

I hope this makes sense.

thanks for your help!
jQuery code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>

<script>



$(document).ready(function() {	



	//select all the a tag with name equal to modal

	$('a[name=modal]').click(function(e) {

		//Cancel the link behavior

		e.preventDefault();

		

		//Get the A tag

		var id = $(this).attr('href');

	

		//Get the screen height and width

		var maskHeight = $(document).height();

		var maskWidth = $(window).width();

	

		//Set heigth and width to mask to fill up the whole screen

		$('#mask').css({'width':maskWidth,'height':maskHeight});

		

		//transition effect		

		$('#mask').fadeIn(1000);	

		$('#mask').fadeTo("slow",0.8);	

	

		//Get the window height and width

		var winH = $(window).height();

		var winW = $(window).width();

              

		//Set the popup window to center

		$(id).css('top',  winH/2-$(id).height()/2);

		$(id).css('left', winW/2-$(id).width()/2);

	

		//transition effect

		$(id).fadeIn(2000); 

	

	});

	

	//if close button is clicked

	$('.window .close').click(function (e) {

		//Cancel the link behavior

		e.preventDefault();

		

		$('#mask').hide();

		$('.window').hide();

	});		

	

	//if mask is clicked

	$('#mask').click(function () {

		$(this).hide();

		$('.window').hide();

	});			

	

});

</script>



Javascript Code:

<script type="text/javascript">

function getEvent(did)

{

if (did.length==0)

  { 

  document.getElementById("txtHint").innerHTML="";

  return;

  }

if (window.XMLHttpRequest)

  {// code for IE7+, Firefox, Chrome, Opera, Safari

  xmlhttp=new XMLHttpRequest();

  }

else

  {// code for IE6, IE5

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

xmlhttp.onreadystatechange=function()

  {

  if (xmlhttp.readyState==4 && xmlhttp.status==200)

    {

    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

    }

  }

xmlhttp.open("GET","calproc.asp?did="+did,true);

xmlhttp.send();

}

</script>



calproc.asp code:



eid = Request("did")

if isNumeric(eid) = false then

	Response.Write("Nothing found.")

Else

	if eid <> "" then

		sql = "Select * from myTable where eId = " & eid

		set objrs = objconn.execute(sql)

		if objrs.eof and objrs.bof then

		

		else

			EventName = objrs("eTitle")

			dEventDate = objrs("eDate")

			EventDesc = objrs("eLongDesc")

			EventLink = objrs("eLink")

			EventImage = objrs("eImage")

			if isNull(EventImage) = True then

				EventImage = ""

			End if

		end if

		Response.Write("<div id='boxes'>")

		Response.Write("<div id='dialog' class='window'>")

		

		Response.Write("<table border='0' cellpadding='0' cellspacing='0' width='100%' class='ventinfo'>")

		Response.Write("<tr><td class='eventTitle' colspan="2">" & EventName & " - " & dEventDate & "</td>")

		Response.Write("</tr><tr><td colspan='2' height='10px'></td></tr><tr>")

		if EventImage = "" then 

        Response.Write("<td></td>")

		else

        response.Write("<td><img src='" & EventImage & "' width='100px'/></td>")

		end if

        Response.Write("<td style='padding-left:5px;'>" & EventDesc & "</td></tr><tr><td colspan='2' height='10px'></td> </tr><tr><td></td>")

		Response.Write("<td style='padding-bottom:4px; padding-left:5px;'><a href='" & EventLink & "' target='_blank' class='eventLink'>Click here for more information!</a></td></tr></table>")

		Response.Write("</div></div>")

		Response.Write("<div id='mask'></div>")

	End if

end if

Open in new window

0
Comment
Question by:slightlyoff
2 Comments
 
LVL 6

Accepted Solution

by:
rbgCODE earned 500 total points
ID: 33696559
Really the best way to do this is to have an external page like

functions.asp

that does all your database work, then when someone calls the javascript you can just have it pull back the code you got from functions.asp and then display it within a pop-up window.  

Your javascript would need to first have a call out, then look for a response back..

function ajaxGrab(writeDiv,urlBuilder){
 var nurl = "a_JAX.asp?" + urlBuilder + "&d=" + writeDiv + "";
 uLayer=writeDiv;
 if (document.getElementById(uLayer).innerHTML != "" && uLayer != "RecentHistory"){
   var styleObject = getStyleObject(uLayer);
   styleObject.display="";
 }
 else{
 //alert(nurl + " to " + uLayer);
 xmlHttp=GetXmlHttpObject(stateChanged);
 xmlHttp.open("GET", nurl , true);  
 xmlHttp.send(null);
 //magic.show('linkClicked');
 }
}  

function stateChanged(){  
 if (uLayer != ""){
  if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
   document.getElementById(uLayer).innerHTML=xmlHttp.responseText;
   //ajaxShow(uLayer);
   //
   var styleObject = getStyleObject(uLayer);
   styleObject.display="";
   //
   //magic.hide('linkClicked');
  }
 }else{alert("No divName passed?");}
}

function ajaxHide(hideDiv){
var styleObject = getStyleObject(hideDiv);
 styleObject.display="none";
}

function ajaxShow(showDiv){
 var checkStyle = "none";
 var noStyle = "";
 var styleObject = getStyleObject(showDiv);
 if (styleObject.display == checkStyle){styleObject.display=noStyle;}
 else{styleObject.display=checkStyle;}
}
0
 
LVL 1

Author Closing Comment

by:slightlyoff
ID: 33737745
Thank you, I appreciate your help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Google Map JavaScript API 4 40
Download a website to hdd 2 50
Regular Expression 1-100 with two digits 15 23
Javascript to allow login/password authorization 4 30
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

920 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

15 Experts available now in Live!

Get 1:1 Help Now