Iframe vs div + jquery

Question

I would like to know which is more suitable for what I want to achieve:

On my main page (main.php) I have links to different forms: form1.php, form2.php, form3.php. I need the link pages to open in the main.php part, that is, in the div or in the iframe on main.php, without updating main.php. Form pages allow you to fill out, delete, update the database. When I do these actions, I do not want main.php to be updated, but only on the corresponding form page. My first option is to open form1.php, for example, in iframe main.php. When I submit the form, only form1.php in the iframe is updated. My second option is to use jquery: open the link (form1.php) in the main.php div. Submit the form to a div and update only the div.

The second option is more demanding, since I do not have much experience with ajax and jquery. The first option is more direct for me. I am wondering if there are any advantages to using the second option with updating the div compared to the iframe, that is, compatibility with different browsers, as well ... Thank you.

Answer 1

I would recommend using jquery, ajax (XMLHttpRequest). Iframes are old, not semantic, and you cannot access the iframe in main.php.

$("#submit_button_id").click(function(e) { e.preventDefault(); $.post('form.php', $("#form_name").serialize(), function(result) { $("#div_id").html(result); } } 

this fragment should work.
$("#submit_button_id").click(function(e) { : catches the click function of the assigned identifier and creates a trigger.

e.preventDefault(); : prohibits form submission regularly; we will submit it via jquery.

$.post submits the form to the POST method.

'form.php' is your form controller that will return the displayed html code.

("#form_name").serialize() This function is a utility for serializing the form to submit. it loads the input fields and converts them as { field1: value, field2: value }

function(result) { is the third parameter; if successful, $.post calls the 3rd parameter as a function. we create an anonymous function to replace the html of our div.

$("#div_id").html(result) sets the assigned html div to the result variable.

refer to http://api.jquery.com/ , they have a wonderful reference sheet.

Answer 2

Try $("#div").load("form.php"); from jQuery

This method is the easiest way to get data from the server. This is roughly equivalent to $ .get (url, data, success), except that it is a method rather than a global function, and it has an implicit callback function. When a successful response is found (i.e., when textStatus is “success” or “not changed”), load () sets the HTML content of the matched element to the returned data.

Link:. load () | JQuery API documentation