Is it possible to load a php page into a div inside the content area when click on sub menu inside the side bar?

Question

5.00/5 (1 vote)

See more:

XML

<div id="sidebar-left"  href="" class="sidebar">
<a href="" class="new_project">New Project</a>
</div>



<div id="content">
        <div class="logo"><img src="My Four Wallls.png"><sup>Your Dashboard</sup></div>
        <div class="test"></div>
    </div>



I am clicking the menu in <pre>"sidebar-left</pre>" div and I need the PHP page to be displayed in the "test" div in side content.How can I do this?Please help me!

Posted 7-Nov-14 0:06am

Janardhanam Julapalli

Updated 7-Nov-14 0:10am

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Prava-MFS · Accepted Answer · 2014-11-07T01:56:00

Solution 1

Hello,

You can do the above thing, using AJAX call.

$('#sidebar-left').unbind('click').click(function(e){
    e.preventDefault();
    e.stopPropagation();

    // please provide the URL of the PHP page
    var url = 'app/php-page';

    $.post(url,
        function(data) {
            if ('' !== data) {
                // here data is the content of the whole php page
                // Inner HTML for php page content
                $('.test').empty().html(data);
            }
        }
    );
});

Hope this will help you. :)

Posted 7-Nov-14 1:56am

Prava-MFS

Comments

Janardhanam Julapalli 7-Nov-14 23:59pm

Thank You very much dude!It worked for me and You started my morning with some success.

Janardhanam Julapalli 8-Nov-14 0:00am

Can u please tell me what this line of code will do
$('#sidebar-left').unbind('click').click(function(e){

Prava-MFS 8-Nov-14 0:06am

Yes sure :). Glad that it helped you :).

You wanted the PHP page should be displayed on click of 'sidebar-left' menu click.

That's what I did :). I bind one click event for 'sidebar-left' div and before to that unbinding the click, if any. For example - first time, we bind the click event to 'sidebar-left' div, and second time, when we click on 'sidebar-left' div, the click event should work only once. So, for making this, I am unbinding the click event, and binding the click event again, to stop multiple click propagation :).

Janardhanam Julapalli 8-Nov-14 0:08am

Thanks for the Explanation!

Janardhanam Julapalli 8-Nov-14 0:08am

I Have used jQuery('#test').load('load.php').May I know why it does not work?

Janardhanam Julapalli 8-Nov-14 0:10am

Also Please share any links which helps me in making text boxes and textareas as Rich Texboxes.

Prava-MFS 8-Nov-14 0:15am

Hello Janardhanam, regarding the question for jQuery load method, yes it would also work :). The code could be like below :).

$("#sidebar-left").click(function(){
$(".test").load("load.php");
});

I guess, your code is not working because of '#test'. As 'test' is a class, you need to write 'jQuery('.test').load('load.php')' inside the click method. :)

Janardhanam Julapalli 8-Nov-14 0:18am

I am good enough to differentiate between class and ID.Even It was not working.When I click the menu, the php page was just appearing and disappearing.It looked strange to me yesterday!

Prava-MFS 8-Nov-14 0:23am

ohh so sorry for my words :). I thought its not working because of ID and class selector.

Regarding, changing textbox to rich textbox, do you need in C# or related to .NET? If yes, then I am really sorry, for not able to help you :) as I am an open source developer. But I will try to find some link, which will help you and if I will find, I will definitely post it here :).

Janardhanam Julapalli 8-Nov-14 0:25am

Not in c# and .NET.Is it possible in Javascript?

Prava-MFS 8-Nov-14 0:33am

Okay :). Though I haven't got any chance to work on like this, still, I think http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors this will help you.

Janardhanam Julapalli 8-Nov-14 0:36am

Okay!Thanks for Your time and patience!Have a Great Day!

Prava-MFS 8-Nov-14 0:37am

Thanks and you too :)

Janardhanam Julapalli 11-Nov-14 6:43am

When I click on Add New, it is appending a new page inside the required div.But the size of the div is much larger than both content and sidebar.Also it is changing from system to system.I am manually adjusting the width in each and every system that I run this program.How van I solve this?

Prava-MFS 13-Nov-14 4:15am

You can add some style attribute to fix this issue. Try adding 'width: 100%;' or 'width: auto;' and 'height: auto;'. If it won't fix your issue, please add the whole code, so that I can help you :).

Janardhanam Julapalli 13-Nov-14 6:13am

mycss file:

.navbar-header{
background-color:#088A85;
}

.logout a{
text-decoration:none;
float:right;
margin: 5px 10px;
}

#sidebar-left{
background-color:#088A85 ;
float: left;
width:150px;
height:2050px;

}

#content{
background-color:#BDBDBD;
height:2050px;
padding-left:150px;

}

.dropdown-pages, .dropdown-pages a , .sub-menu-pages a, .dropdown-media a{
text-decoration:none;
padding-top:20px;
font-size:20;
}

.sub-menu-pages, .sub-menu-media{
display:none;
width:100px;
}
#menu a, .dropdown-pages, .dropdown-media{
text-decoration:none;
padding-left: 10px;
padding-top:20px;
font-size:20;
width:140px; float:left; overflow: hidden;

}
.test{

overflow: auto;
}

Janardhanam Julapalli 13-Nov-14 6:13am

My problem is with #sidebar-left and #content

Prava-MFS 13-Nov-14 7:30am

Please check adding this CSS and check if your issue resolved or not. If resolved, then you can modify the CSS and can accomplish your requirement.

.navbar-header {
background-color: #088A85;
}

.logout a {
text-decoration: none;
float: right;
margin: 5px 10px;
}

#sidebar-left {
background-color: #088A85;
float: left;
width: 150px;
height: 700px;
}

#content {
background-color: #BDBDBD;
height: 700px;
padding-left: 20px;
padding-right: 20px;
overflow-x: hidden;
}

.dropdown-pages, .dropdown-pages a , .sub-menu-pages a, .dropdown-media a {
text-decoration: none;
padding-top: 20px;
font-size: 20;
}

.sub-menu-pages, .sub-menu-media {
display: none;
width: 100px;
}

#menu a, .dropdown-pages, .dropdown-media {
text-decoration: none;
padding-left: 10px;
padding-top: 20px;
font-size: 20;
width: 140px;
float: left;
overflow: hidden;
}

.test {
overflow: auto;
}

Janardhanam Julapalli 14-Nov-14 4:19am

still cant do it but looks better than before.Form is few pixels higher than the adminpanel.It works fine in Firefox, but it is creating a vertical scroll bar for the form.