Link to home
Start Free TrialLog in
Avatar of Bakersville
BakersvilleFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Display criteria change without refreshing whole page in asp.net

Hi everyone.

Can anyone help me with the above.

What i am trying to do is have a page that is displayed within another page (<!-- #include-->), however, depending on what they click, i want the page to refresh just the include page with the new criteria, but if the click another part of the included page, it takes them to another page.

Can any help me please

Baker
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

you need to use iframes

<div class="iframeContainer">
  <iframe src="newPageTobeIncluded.html"/>
<div>
Avatar of Bakersville

ASKER

Thank you gurvinder372, i really want to keep away from iframes as must of the browsers dont support them.

There really is no way of doing it without?
The best way to make and keep the code clean (ie without the iframe) is using  ajax ...
Thank you MYfox.

Can you help me how to do this?

Lets say i have a include page in the middle of the webpage and it is already pointing to default.aspx?pageid=1

Now if you click on a link that then displays default.aspx?pageid=1&mysite=me&do=uk

Thanks
Avatar of Proculopsis
Proculopsis


You might want to consider an ajax solution:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26821974.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function () {

  $(".dynamic").click( getContent );

});

function getContent( event ) {
  event.preventDefault();
  $("#dynamic-content").load( $(this).attr( "href" ) );
}

</script>

<style>
#dynamic-content { width: 640px; height: 400px; border: 1px dotted #f00; margin-left: auto; margin-right: auto; overflow: scroll; background-color: beige; }
</style>

</head>
<body>

<a href="http://www.whatcar.com/Valuation/SelectMake?makeId=4708" class="dynamic">Alfa Romeo</a> |
<a href="http://www.whatcar.com/valuation/SelectMake?makeId=5202" class="dynamic">Aston Martin</a> |
<a href="http://www.whatcar.com/valuation/SelectMake?makeId=5289" class="dynamic">Audi</a> |
<a href="http://www.whatcar.com/valuation/SelectMake?makeId=28656" class="dynamic">Bentley</a> |
<a href="http://www.whatcar.com/valuation/SelectMake?makeId=6805" class="dynamic">BMW</a>

<div id="dynamic-content"></div>

</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of _-MYFOX-_
_-MYFOX-_
Flag of Italy image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi everyone.

I have been trying to get it to work with very little luck, so spent more time researching and come up with a solution from w3schools, however, i have changed the code but still can not get it to work.

I have my file in asp.net, if quesrystring = me, me1 or me2 then i should display something

If Request.QueryString("q") = "me" Then
            Response.Write("Number 1 selected")
        ElseIf Request.QueryString("q") = "me1" Then
            Response.Write("Number 2 selected")
        ElseIf Request.QueryString("q") = "m2" Then
            Response.Write("Number 3 selected")
        Else
            Response.Write("Nothing selected")
        End If

On the page that this will be displayed i have

<script type="text/javascript">
function showCustomer(str)
{
var xmlhttp;    
if (str=="")
  {
  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","menu.aspx?q="+str,true);
    xmlhttp.send();
//
}
</script>

Within the boty i have

<div id="txtHint">Customer info will be listed here...</div>
                <a href="javascript:showCustomer('me')"> 1</a>

However it still does not go of and bring the data back.

Please can anyone help me.

Baker
Thank you all, but i now have it working and bring the information accross.

Basically, the above worked, but i was trying to bring accross an entire page and not just the code itself.

Baker
Thanks for pointing me in the right direction