Passing data variables from PHP to jquery ui dialog

Question

I have this bit of php code:

    <?php
$posts = new Posts();

foreach($posts->getPosts() as $post){ ?>
    <div class="post">
        <h3><a class="post-link" data-post-id="<?php echo $post['id']; ?>" href="javascript:void(0)"><?php echo $post['title']; ?></a></h3>
    </div>

<?php } ?>

<div id="insert-answer" title="Add new idea to post">
<form id="myForm" action="insertidea.php" method="post">
    <fieldset>
        <p><label for="idea">Your idea:</label>
            <input type="text" name="idea" class="idea"</p>
        <p><label for="pic">Have a pic? Paste its URL here! (optional)</label>
            <input type="text" name="pic" class="pic"></p>
        <input type="hidden"class="author" name="author" value="<?php echo $_SESSION['google_data']['id']; ?>" />
        <input type="hidden"class="forpost" name="forpost" value="<?php echo $post['id']; ?>" />
    </fieldset>
</form>

And I want to pass the post id data variable to a jquery ui dialog:

    $( "#insert-answer" ).dialog({
    autoOpen: false,
    modal:true,
    buttons: {
        "Add idea": function() {
            var
                forpost = $(this).data("post-id"), // HOW CAN I GET THIS???
                author = $(".author").val(),
                idea = $(".idea").val(),
                pic = $(".pic").val();

            $.post('insertidea.php',{
                forpost: forpost, author: author, idea: idea, pic: pic, action:'joined'
            });//End Post

            $(".forpost").val('');
            $(".author").val('');
            $(".idea").val('');
            $(".pic").val('');

            $(this).dialog("close");
        },

        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});

$( ".post-link" ).click(function() {
    $( "#insert-answer" ).dialog( "open" );
});

Problem is I'm mostly a php girl and I don't quite grasp the million JS examples I've checked already. What I'm trying to do is use the post id as a variable that comes from php that I can in turn use in my dialog to send to another php script via post.

Jan · Accepted Answer · 2015-10-19 07:23:33Z

1

You could change your post-link function as follows:

$( ".post-link" ).on('click', function() {
    var postid = $(this).data("post-id");
    var answer = $("#insert-answer");
    $(answer).data('post-id', postid);
    $(answer).dialog( "open" );
});

And then grab in in the "Add idea": function() { part with:

var forpost = $("#insert-answer").data("post-id"),
    author = $(".author").val(),
    idea = $(".idea").val(),
    pic = $(".pic").val();

So what you are doing is basically saving the current post-id to #insert-answer and getting it from there in your dialog. Is this what you were after?

UPDATED CODE: @charlietfl is absolutely right, var post-id is not correct, I have edited the name of the variable.

edited Oct 19, 2015 at 7:23

answered Oct 18, 2015 at 21:23

Jan

43.3k11 gold badges57 silver badges87 bronze badges

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

4 Comments

Barbarah Over a year ago

I'm getting some kind of syntax error when I declare post-id (missing semicolon?) I'm still testing this, thank you so much!

Barbarah Over a year ago

This is what I'm getting: SyntaxError: missing ; before statement var post-id = $(this).data("post-id"); EDIT: It's referencing the var post-id line in the function, and phpstorm is also complaining about it.

charlietfl Over a year ago

var post-id is invalid javascript variable syntax and would throw error

Jan Over a year ago

@charlietfl: you are right, I was too tired and will leave SO for now :-) I have edited the code.

Collectives™ on Stack Overflow

Passing data variables from PHP to jquery ui dialog

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related