Problem with jquery...function

Question

0.00/5 (No votes)

See more:

I have three div

div1cript>
div2
div3 and each div have some server controls also when i click on html control

button1----div1 will display
button2----div2 will display
button3----div3 will display

on window.load

i written the function

my problem is the when i click on 'div2 server control' it pageloads and defalut div1 is displayed and its not loading the current div...

JavaScript

<script type="text/javascript">

//    $(window).load(function () 
$( document ).ready(function()
    {

        $("#DF_d-L_Comptaskdiv").show();
        $("#DF_d-L_Mytaskdiv").hide();
        $("#DF_d-L_LeaveReqdiv").hide();    
  
    $("#btnLeaveMang").click(function () {
    $("#DF_d-L_Mytaskdiv").show(); 
    $("#DF_d-L_Comptaskdiv").hide();
    $("#DF_d-L_LeaveReqdiv").hide();
  });

$("#btnMy_Task").click(function () {
    $("#DF_d-L_Comptaskdiv").show();
 
    $("#DF_d-L_Mytaskdiv").hide();
    $("#DF_d-L_LeaveReqdiv").hide();
  });

$("#btn_TaskReport").click(function () {
    $("#DF_d-L_LeaveReqdiv").show(); 
  
    $("#DF_d-L_Comptaskdiv").hide();
    $("#DF_d-L_Mytaskdiv").hide();
  });
});
</script>

Posted 18-Mar-14 0:22am

Mohammed Shamsheer

Updated 18-Mar-14 0:30am

Tejas Vaishnav

v2

Add a Solution

Comments

Tejas Vaishnav 18-Mar-14 6:34am

you button 1 ,2 and 3 are just only for using to show hide your dive or any thing else...? if it will just using for that purpose only then why are you using server control, just use HTML button (input) control...

Mohammed Shamsheer 18-Mar-14 7:58am

button1,button2,button3 are html control
on div2(current div) i have server control when i click on that my current div is disappering and defalut div is displayig

Tejas Vaishnav 18-Mar-14 8:19am

So on your page post back you need to store your current selected div id, and based on that you need to show your div...

Tejas Vaishnav 18-Mar-14 8:27am

put one hidden filed in your page, by default its value is set for div1 id, when you select second dive, just update that hidden filed value with your current selected div id, and in make appropriate changes to your javascript code to show div or hide it...

Mohammed Shamsheer 19-Mar-14 9:07am

Thank for ur replay...

2 solutions

Solution 1

1. Add an asp hidden field to keep track of current visible div id, the initial value is div1.
2. At document ready in jquery code, get the current visible div id from the hidden field and show it, while hiding all other divs. This will take place at each post back from server.
3. at each button click, in jquery code, show the div related to this button and hide other divs, remember to also update the current visible div id value of the hidden field to this div.
See the following code and adapt it to your need:

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default22.aspx.cs" Inherits="Default22" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {

        var div1 = $("#div1");
        var div2 = $("#div2");
        var VisibleDiv = $("#VisibleDiv");
        var button1 = $("#Button1");
        var button2 = $("#Button2");

        if (VisibleDiv.val() == "div1") {
            div1.show();
            div2.hide();
        } else if (VisibleDiv.val() == "div2") {
            div1.hide();
            div2.show();
        }

        button1.click(function () {
            div1.show();
            div2.hide();
            VisibleDiv.val("div1");
        });

        button2.click(function () {
            div2.show();
            div1.hide();
            VisibleDiv.val("div2");
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:HiddenField ID="VisibleDiv" runat="server" value="div1" />
        <asp:Button ID="Button1" runat="server" Text="Show Div 1 Only"
            onclick="Button1_Click" />
        <asp:Button ID="Button2" runat="server" Text="Show Div 2 Only"
            onclick="Button2_Click" />
        <br />
        <div id="div1">This is div 1
        </div>
        <div id="div2">This is div 2
        </div>

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

The End.

Posted 19-Mar-14 18:35pm

Peter Leow

Updated 19-Mar-14 18:39pm

v2

Comments

Mohammed Shamsheer 20-Mar-14 2:33am

my button is server side button i assaigned

var TaskButton = $("btnTaskView");

TaskButton.click(function () {
$("#DF_d-L_Comptaskdiv").show();
$("#DF_d-L_Mytaskdiv").hide();
$("#DF_d-L_LeaveReqdiv").hide();
});

button onclick event is not working....what is the reason

Peter Leow 20-Mar-14 2:51am

This is a different question. If I have solved your original question, accept it as solution and post this different question as new question.

Mohammed Shamsheer 20-Mar-14 5:05am

same ur logic i applied....i will give the code...but buktton click is not functioning..

<script type="text/javascript">

$(document).ready(function () {

var VisibleDiv = $("hdnDivValue");
var Task = $("DF_d-L_Mytaskdiv");
var TaskReport = $("DF_d-L_Comptaskdiv");
var LeaveReport = $("DF_d-L_LeaveReqdiv");

var btnLeaveMang1 = $("btnLeaveMang");
var btnMy_Task1 = $("btnMy_Task");
var btn_TaskReport1 = $("btn_TaskReport");

btn_TaskReport1.click(function () {
VisibleDiv.val() == "DF_d - L_Mytaskdiv";

});

btnMy_Task1.click(function () {
VisibleDiv.val() == "DF_d-L_Comptaskdiv";
});

btnMy_Task1.click(function () {
VisibleDiv.val() == "DF_d-L_LeaveReqdiv";
});

if (VisibleDiv.val() == "DF_d-L_Comptaskdiv") {

TaskReport.show();
Task.hide();
LeaveReport.hide();
}

else if (VisibleDiv.val() == "DF_d-L_Mytaskdiv") {
TaskReport.hide();
Task.show();
LeaveReport.hide();

}
else if (VisibleDiv.val() == "DF_d-L_LeaveReqdiv") {
TaskReport.hide();
Task.hide();
LeaveReport.show();
}

});
</script>

Peter Leow 20-Mar-14 5:10am

One quick look, you have not included # in all the selectors, for example, it should be $("#hdnDivValue")

Mohammed Shamsheer 20-Mar-14 5:16am

thanks i noticed that....i change that also...for first time it showing the current div but it is not working for button click

Mohammed Shamsheer 20-Mar-14 5:44am

Peter Leow 20-Mar-14 6:47am

VisibleDiv.text = "DF_d - L_Comptaskdiv";
should be
VisibleDiv.val("DF_d - L_Comptaskdiv");
same for the others
you need them in all button clicks, uncomment them.
those in the if blocks are redundant.

Mohammed Shamsheer 20-Mar-14 9:00am

ya i did like that...every thing fine...working but when i click on current div button click the current div hide and initial div is displaying...

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohammed Shamsheer · Accepted Answer · 2014-03-20T18:46:00

First up all i thank to peter leow....

I got the solution ;

my final jquery....

C#

<script type="text/javascript">


    $(document).ready(function () {

        //alert($("#hdnDivValue").val());
        var VisibleDiv = $("#hdnDivValue");
        var Task = $("#DF_d-L_Mytaskdiv");
        var TaskReport = $("#DF_d-L_Comptaskdiv");
        var LeaveReport = $("#DF_d-L_LeaveReqdiv");

        var btnLeaveMang1 = $("#btnLeaveMang");
        var btnMy_Task1 = $("#btnMy_Task");
        var btn_TaskReport1 = $("#btn_TaskReport");
        //var btnlLeaveSave1 = $("$btnlLeaveSave");

//        btnlLeaveSave1.click(function () {
//            $("#hdnDivValue").val("DF_d - L_LeaveReqdiv");
//            alert('working');
//        });

        btn_TaskReport1.click(function () {

            //VisibleDiv.val() = "DF_d - L_Mytaskdiv";
            TaskReport.show();
            Task.hide();
            LeaveReport.hide();

        });

        btnMy_Task1.click(function () {

            // VisibleDiv.val() = "DF_d-L_Comptaskdiv";
            TaskReport.hide();
            Task.show();
            LeaveReport.hide();
        });

        btnLeaveMang1.click(function () {

            //VisibleDiv.val() = "DF_d-L_LeaveReqdiv";
            TaskReport.hide();
            Task.hide();
            LeaveReport.show();
            $("#hdnDivValue").val("DF_d - L_LeaveReqdiv");
            //alert($("#hdnDivValue").val());
            //VisibleDiv.val("DF_d - L_LeaveReqdiv");

        });



        if (VisibleDiv.val() == "DF_d-L_Comptaskdiv") {

            TaskReport.show();
            Task.hide();
            LeaveReport.hide();
            // VisibleDiv.val() = "DF_d - L_Comptaskdiv";
        }

        else if (VisibleDiv.val() == "DF_d-L_Mytaskdiv") {
            TaskReport.hide();
            Task.show();
            LeaveReport.hide();
            //VisibleDiv.val() = "DF_d-L_Mytaskdiv";

        }
        else if (VisibleDiv.val() == "DF_d-L_LeaveReqdiv") {

            TaskReport.hide();
            Task.hide();
            LeaveReport.show();
            //VisibleDiv.val() = "DF_d-L_LeaveReqdiv";

        }



    });
</script>

on server side ctrl button click i set the hiddenfield value to current div id:

C#

protected void btnSumbitTask_Click(object sender, EventArgs e)
      {
          General.officeStaff ofcobj = new officeStaff();
          ofcobj.BindTaskGrid(grdTaskSubmit);
          hdnDivValue.Value = "DF_d-L_Comptaskdiv";
          
      }

Problem with jquery...function

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Problem with jquery...function

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us