jquery and php update using modal dialog

Question

I'm trying to display html form with specific information based on the article id using modal window but I'm struggling to pass value/id to my custom php function. So, here's the html/php part

    while(...) :
       <a href="#" id="$row['id']" class="button">Edit</a>
    endwhile;

Now js,

    $("a.button").on("click", function() {
        $("#modal").reveal();
        return false;
    });

html and php function

    <div id="modal">
        <?php echo showForm($needThisIDbasedOnClick); ?>
    </div>

Hope all this makes sense for you, I'm struggling of getting the certain id and passing to php function

I tried removing the return false; and following the href attribute <a href="?id=17"> ... and than getting the value using $_GET['id'] showForm($_GET['id']) but this solution just don't work the way I wanted, it reloads the page ...

Have you tried using ajax to load the modal DIV content when the user clicks the article, and then showing it afterwards? — Mateus Schneiders
– Mateus Schneiders, Commented Jan 31, 2013 at 22:57
@Mt. Shneiders Yes i've tried it and that's what I wanted but couldn't get relevant id in order to show form with values — Besmir Sadiku
– Besmir Sadiku, Commented Feb 1, 2013 at 10:12
@shnisaka This functions show entire form with values from db based on given id — Besmir Sadiku
– Besmir Sadiku, Commented Feb 1, 2013 at 10:12

MatRt · Accepted Answer · 2013-02-01 05:30:50Z

The page with you PHP code is execute on the server side. PHP is interpreted, and then the content is sent to your browser. After receiving the data, your JS code is executed on the client side (thanks to you JS machine of your browser).

If you want to show information without reloading anything, you have 2 solutions:

Embedding all information in the page during the PHP processing and keep it hidden, showing the good one with JS code depend on the link clicked. (Bad solution)
Use an AJAX request with the ID in parameter that will call to a new short PHP script returning the information of the specified row.

If I resume the process could be:

1) The first request is on your main script main.php

2) The page display all your item (embedding only the ID) and contain the information container (which is hidden and empty)

example

<!-- Your list of link with article ID -->
<div>
    <a class="articleLink" id="123" href="#">View</a>
    <a class="articleLink" id="124" href="#">View</a>
    <a class="articleLink" id="125" href="#">View</a>
</div>

<!-- The bloc that will contain info and will be shown in a popup later (hidden) -->
<div id="divInfo">
    <input type="text" name="name" value=""/>
    <input type="text" name="description" value=""/>
</div>

<script>

    $(document).ready(function() {

        // add listener to all link
        $(".articleLink").click(function(mouseEvent) {

            // Retrieve the article ID                
            var myId = $(this).attr('id');

            // Ajax call with the id of the link
            // onSuccess, fill the divInfo and show it
            $.ajax('getInfo.php', {
                dataType: 'json',
                type: 'POST',
                data: {
                    articleId: myId
                },
                success: function(data, status, xhrObj) {

                    // The data is received, update the info container
                    $("#divInfo input[name=name]").val(data.name);
                    $("#divInfo input[name=description]").val(data.desc);

                    // Show the div in a popup
                    //...
                }
            });

            return false;
        });
    });

</script>

3) You are clicking on one link, it will run an ajax call to a second PHP script : getInfo.php, giving the specified ID

4) The script retrieve data in your Database and finally return the information (in JSON for example)

Assuming your PHP getInfo.php will return JSON like

{"name":"an article name","description":"the article description"}

Note: you can produce easily JSON in PHP from array with the function

json_encode()

5) the method onSuccess of your Ajax call is called when the data is received, and you can use the data to fill your form (which is unique and already present in the page - and is hidden).

good luck

Collectives™ on Stack Overflow

jquery and php update using modal dialog

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related