PHP overriding AJAX post request

StackOverflow https://stackoverflow.com/questions/11771076

Вопрос

On my Code I have this callback

 $('#tagList').tagit({
            //Every new dag will be pushed in the list array
            tagsChanged: function(tagValue,action,element){
                list.push(tagValue);
                $.ajax({
                    url: "dostuff.php",
                    type: "POST",
                    data:{ items:list.join("::")},
                    success: function(data){
                        $('#wrap').append(data);
                    }
                });
            }
         });

What it does it that each time I add a tag the newly added tag will be pushed in the array and after that it will make an AJAX post request.

And Then i have these field here

<form method = "POST" action = "demo3.php">
News Title <input id = "news_title" type = "text" name = "news_title" /><br>
    <label>Insert Some tags </label>
    <ul id="tagList" data-name="demo2">
    </ul>
        <input type = "submit" name = "submit" id = "submit" value = "Post News" />
</div>
</form>

and when I click the submit(it basically reloads the page) the $_POST['items'](This was created on AJAX request everytime a new tag is added) is being erased or removed in the POST global array. and therefore leaving my $_POST global array empty.

Is there anyway I can merge these two? or anyway not to let PHP override or remove the $_POST['items'] ?since I would be needing items for my query

Also I am using a plugin called tagit

If you guys are interested here's my whole code

<!doctype html>
<html>
<head>
  <script src="demo/js/jquery.1.7.2.min.js"></script>
  <script src="demo/js/jquery-ui.1.8.20.min.js"></script>
  <script src="js/tagit.js"></script>
  <link rel="stylesheet" type="text/css" href="css/tagit-stylish-yellow.css">
  <script>
    $(document).ready(function () {
    var list = new Array();
         $('#tagList').tagit({
            //Every new dag will be pushed in the list array
            tagsChanged: function(tagValue,action,element){
                list.push(tagValue);
                $.ajax({
                    url: "dostuff.php",
                    type: "POST",
                    data:{ items:list.join("::")},
                    success: function(data){
                        $('#wrap').append(data);
                    }
                });
            }
         });
    });
  </script>
</head>
<body>

<div id="wrap">
<div class="box">
<button class = "viewTags">View Tags</button>
<form method = "POST" action = "demo3.php">
News Title <input id = "news_title" type = "text" name = "news_title" /><br>
    <label>Insert Some tags </label>
    <ul id="tagList" data-name="demo2">
    </ul>
        <input type = "submit" name = "submit" id = "submit" value = "Post News" />
</div>
</form>
</div>
</body>
</html>

and here's dostuff. php

 <?php 

        $lis = $_POST['items'];
        $liarray = explode("::", $lis);
        print_r($liarray);
        print_r($_POST);
 ?>
Это было полезно?

Решение

The way PHP handles requests are that every request is completely separated from every other one, this sometimes referred as the share nothing architecture. This is the reason of that the request generated from the <form> to demo3.php doesn't know about the other requests sent by ajax to dostuff.php is this separation. This is not necessarily php specific, it's because the underlying HTTP protocol is stateless.

If you want to include tags into the request generated when your <form> is submitted you need to add those values to the form. For this, the tagit library has a built in way controlled by two config option:

  1. itemName controls what the parameter named (defaults to item)
  2. fieldName controls what the field in the itemName gets called (defaults to tags)

If you initialize your plugin like this (demo without styles):

$('#tagList').tagit({
    itemName: 'article',
    fieldName: 'tags'
});

Then on submit, the parametes sent down to php should be in $_POST['article']['tags'], the parameter names generated will look like article[tags][]. See the demos of the plugin. (the page source has nicely formatted javasript examples). By default simply calling $('#tagList').tagit(); without all the extra callbacks or configuration should work.

This is how it should show up in the net panel of firebug (never mind the demo4.php not beeing there) shot of firebug net panel after hitting submit

If you want to do it manually you can hook into the submit event of <form> like this:

$('form').on('submit', function(){
    var $form = $(this), 
        tags = $('#tagList').tagit('assignedTags'); // see the docs https://github.com/aehlke/tag-it/blob/master/README.markdown#assignedtags
    $.each(tags, function(i, tag){
        $('<input type="hidden" name="tags[]">').attr('value', tag).appendTo($form); // using jquery to create new elements
    });
});

By using the assignedTags method (with jquery ui calling schema) of the tagit plugin, you can get the tag names, and simply add a new hidden input just before submitting the <form>. Joining them together like this might be a bad idea if your can include any string imaginable even ::.

In the example, i've used separate input for each tag so in your demo3.php they will arrive as an array (ending the name with [] makes php do that).

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top