load part of html using php/jQuery

Question

I'm trying to figure out a way to load 1 single tab(tabs by jQuery) without reloading all the others. The issue is that I have a submit button and a dropdown that will create a new form, and when on this new form 'OK' or 'CANCEL' is clicked, it has to get the original form back.

The code to load a part of the page that I found is this:

$("#tab-X").load("manageTab.php #tab-X");

But now I would like to know how to use this in combination with the $_POST variable and the submit-button

Clarification:

I have a .php(manageTab.php) which contains the several tabs and their contents
I have in each of these tabs a dropdown containing database-stored information(code for these dropdowns is stored in other pages)
for each of these dropdowns, there exists a submit button to get aditional information out of the DB based on the selection, and put these informations in a new form for editing
this new form would ideally be able to be submitted without reloading everything except the owning tab.

Greetings

Sorry I can't understand what you are asking for, please show us what it is you want it to do — Anigel, Jul 31 '13 at 09:10
_how to use this in combination with the $_POST variable and the submit-button_ ??? Can you explain this statement.. — Adil Shaikh, Jul 31 '13 at 09:10
Could you show some more code? Maybe create a [jsfiddle](http://jsfiddle.net/)? — Markus Hofmann, Jul 31 '13 at 09:10
@DevZer0 it does accept it like that. jQuery will select that element from the response and load it into the selector — Spokey, Jul 31 '13 at 09:13
manageTab.php - Can you pls show me the contents of this file?. If the file contains
tag and a submit button action will take place as given in the form attribute action="" — Saranya Sadhasivam, Jul 31 '13 at 09:15

score 0 · Answer 1 · answered Jul 31 '13 at 09:21

<script>
$(document).ready(function() {
$("#form1").submit(function(){
event.preventDefault();
$.post('data.php',{data : 'dummy text'},function(result){
$("#tab-X").html(result);
});
});

});
</script>



 <form id="form1">
<input id="btn" type="submit">
</form>

score 0 · Answer 2 · answered Jul 31 '13 at 09:21

I am not totally understand your question, but as per my understanding you can't load one tab with form submit. Its normally load whole page.

What you can do is, use ajax form submit and load the html content as per the given sample code.

 $.ajax({
    url: url, // action url
    type:'POST', // method
    data: {data:data},  // data you need to post
    success: function(data) {
        $("#tab_content_area").html(data);  // load the response data
    }
});

You can pass the html content from the php function (just need to echo the content).

score 0 · Answer 3 · edited May 23 '17 at 10:25

AJAX is what you are looking for.

jQuery Ajax POST example with PHP

Also find more examples about ajax on google.

Example: Let me assume you have a select menu to be loaded in the tab.

You will need to send a request to your .php file using jquery, and your php file should echo your select menu.

In your jQuery,

<script>
    $.post(url, { variable1:variable1, variable2:variable2 }, function(data){
            $("#tab-X").html(data);
        //data is whatever php file returned.           
        });
    });

    $("#form_id").submit(function(){
          return false;
    });
  </script>

I mean whatever your options are, you will need to do the following in your .php file,

Echo that html code in your PHP script.

echo "<select name='".$selector."'>
     <option value='".$option1."'>Option1</option>
     <option value='".$option2."'>Option2</option>
     <option value='".$option3."'>Option3</option>
     </select>";

This would be returned to jQuery, which you may then append wherever you want.

load part of html using php/jQuery

3 Answers3

AJAX is what you are looking for.