0

My particular situation with using the jQuery .load() function is to include a page into my site after clicking a link. I have chosen to write the code inline. What I have is a user control panel with several buttons that would link to pages that you edit your information. I have one for password and one for settings. I'm trying to get this one to work and I will write a for each loop to apply to any more links I click. My php file looks like this:

<?php
    include_once("template/main_site/core/init.php");
    protect_page();

    if (empty($_POST) === false) {
        $required_fields = array('current_password', 'password', 'password_again');
        foreach ($_POST as $key=>$value) {
            if (empty($value) && in_array($key, $required_fields) === true) {
                $errors[] = 'Fields lighted red are required.';
                break 1;
            }
        }

        if (encryptBetter($_POST['current_password']) === $user_data['password']) {
            if (trim($_POST['password']) !== trim($_POST['password_again'])) {
                $errors[] = 'Your new passwords do not match';
            }
            if (strlen($_POST['password']) < 6 || strlen($_POST['password']) >= 32) {
                $errors[] = 'Your new password must be less than 32 characters and more than 6 characters.';
            }
        } else {
            $errors[] = 'Your current password is entered incorrectly.';
        }

    }
?>
    <h1>Change Password</h1>
    <?php
    if (isset($_GET['success']) === true && empty($_GET['success']) === true) {
        echo 'Your password has been changed!';
    } else {
        if (isset($_GET['force']) === true && empty($_GET['force']) === true) {
    ?>
        <p>You must change your password now that you've requested.</p>
    <?php
        }
        if (empty($_POST) === false && empty($errors) === true) {
            change_password($session_user_id, trim($_POST['password']));
            header('Location: changepassword.php?success');
            exit();
        } else if (empty($errors) === false) {
            echo output_errors($errors);
        }
    ?>
    <form action = "" method = "post">
        <ul>
            <li>
                <label>Current Password</label>
                <input required type = "password" name = "current_password" pattern=".{6,32}"/>
            </li>
            <li>
                <label>New Password</label>
                <input required type = "password" name = "password" pattern=".{6,32}"/>
            </li>
            <li>
                <label>Repeat New Password</label>
                <input required type = "password" name = "password_again" pattern=".{6,32}"/>
            </li>
            <input type = "submit" value = "change password"/>
        </ul>
    </form>

<?php
    }
?>

I have this php file included in a containing page. I also note that if I include the changepassword.php page using php include, it will load properly. I basically want the same thing as php's include, except with jQuery load.

My logged in included php file looks like this:

<div id="controls">
    <ul>
        <a id = "changepassword" href = "#login"><li>Change Password</li></a>
        <a href = "#"><li>Edit Profile</li></a>
        <?php if (is_admin()) { ?><a href = "#admin"><li>Administrate</li></a><?php }?>
        <a href = "logout.php"><li>Log out</li></a>
        <div id = "panel"></div>
    </ul>
</div>
<div id = "panel"><?php # include_once('template/main_site/includes/widgets/changepassword.php'); ?></div>

<script>
    $('#changepassword').click(function() {
        var phpFile = 'template/main_site/includes/widgets/' + $(this).attr('id') +'.php';
        $('#panel').html('loading...').load(phpFile);
    });
</script>

If I'm being an idiot, you can troll me. I don't care. If it's a security block in jQuery, let me know. I read the documentation for load a lot of times to try to find out why it doesn't work. If I just can't do it, I want this community to tell me so I can give up. I really just want a live include of these files. There probably is another solution for me. If so, suggest it. I can try to build it. Thank you.

2
  • is this template/main_site/includes/widgets/ real path? can you open the URL within browser that you try to load it using jquery? Commented Jul 11, 2013 at 6:50
  • ` <?php if (is_admin() === true) { ?><a href = "#admin"><li>Administrate</li></a><?php }?>` Commented Jul 11, 2013 at 6:53

2 Answers 2

1
<script>
$(function() {
    $('#changepassword').click(function(e) {
        e.preventDefault();
        var phpFile = 'template/main_site/includes/widgets/' + $(this).attr('id') +'.php';
        $.get(phpFile,{},function(response) {
            $('#panel').html(response);
        });
    });
});
</script>

You'll need to wrap the script so that it can be executed as soon as the DOM is ready.

Sign up to request clarification or add additional context in comments.

4 Comments

Try the addition of the .preventDefault() method on the event.
You know that this script will not load into the DOM until the .php file it is contained within is loaded, right?
Ok.. one more change - you'll need to monitor the console to see what's going on...
It really sounds like you're not getting the response you are expecting from the changepassword.php script.
0

You didn't use the jQuery .ready() function. This function executes your script once DOM is fully loaded. So wrap your whole script inside it.

<script>
$(document).ready(function() {
    $('#changepassword').click(function() {
        var phpFile = 'template/main_site/includes/widgets/' + $(this).attr('id') +'.php';
        $('#panel').html('loading...').load(phpFile);
    });
});
</script>

3 Comments

@bjames105: what results are you getting on click event when using this script?
did u check browser console? Are you getting any error there?
that's not a bad idea of using jQuery tabs... :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.