Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to call / embed a .aspx file in div tag on the basis of dropdown selection.

Posted on 2011-10-04
11
Medium Priority
?
347 Views
Last Modified: 2012-05-12
1.I have a drop down. ddlquarters
2.It has 5 values as fiel1, file2, file3, file4, file5.
3.I have a div below the dropdown with id "displaydiv"
4.I also have 5 .aspx files, a.aspx,b.aspx,c.aspx,d.aspx,e.aspx
5.I want when a user selects file1 from dropdown, the div should load a.aspx
when user selects file2, the div should load b.aspx and so on.
0
Comment
Question by:searchsanjaysharma
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 36909855
you could use jquery:

$('#yourDivId').load('Default.aspx');
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 36909857
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36909896
Jquery ajax to do this

1) Add jquery file in head tag OR below line in head tab
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Open in new window

2) Add CssClass="cssFile" to your dropdown
3) Add below code in your head tag
 <script>
  $(document).ready(function(){
    $(".cssFile").change(function(){
      
       $.ajax({
  url: $(this).val(), // Suppose your dropdown has value file1.aspx, file2.aspx...
  context: document.body,
  success: function(data){
     $("content").html(data); // Assume your div (to which you want to show data from file) id is content
  }
});

   });
 });
</script>

Open in new window




0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 36909943
to make small change in kiran's code.make the below change

 $("#content").html(data);
0
 

Author Comment

by:searchsanjaysharma
ID: 36914086
How do i put in .aspx.cs file.
if(ddlquarters.SelectedItem.Text=="file1")
{
          $('aa').load('a.aspx');
}
else if(ddlquarters.SelectedItem.Text=="file2")
{
          $('aa').load('a.aspx');
}
and so on,
0
 
LVL 17

Expert Comment

by:sonawanekiran
ID: 36914688
Everything you need to put in javascript i.e within <script> tag . Look at my solutions
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 36915022
How do i put in .aspx.cs file.
if(ddlquarters.SelectedItem.Text=="file1")
{
          $('aa').load('a.aspx');
}
else if(ddlquarters.SelectedItem.Text=="file2")
{
          $('aa').load('a.aspx');
}
and so on,

Not in aspx.cs file but you need to put that in aspx file as javascript script and put the onselectedindexchanged on the dropdown.
0
 

Author Comment

by:searchsanjaysharma
ID: 36915350
That is understood, but then how do i trap the asp dropdown in .aspx file, as the event gets open in .aspx.cs file
0
 
LVL 9

Accepted Solution

by:
Roman Gherman earned 2000 total points
ID: 36915599
<script>
function loadDivContent(ddl)
{
if(ddl.value=="file1")
{
          $('#aa').load('a.aspx');
}
else if(ddl.value =="file2")
{
          $('#aa').load('b.aspx');
}
....
}
</script>
....
<asp:dropdown id="ddlquarters" .... onchange="loadDivContent(this);" />
0
 
LVL 9

Expert Comment

by:Roman Gherman
ID: 36915602
and do not forget to put: AutoPostback=false for the dropdown
0
 

Author Closing Comment

by:searchsanjaysharma
ID: 36952937
Thanx
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses
Course of the Month20 days, 15 hours left to enroll

864 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