0

To help learn PHP, AJAX, and JQuery I'm developing a little recipe management system. On the main page recipesystem.php are two DIVs:

DIV1 has input fields for entering a new recipe's name and category, and a button to create the new record in a backend PostgreSQL database table.

That same button also calls the JQuery .load(url, data) with the url variable pointing to a PHP file that loads additional HTML input fields and buttons into DIV2 (for adding things like ingredients, etc, to the new recipe in a second step to the workflow).

The problem I've run into is that none of the DIV2 content can see the objects on the page or DIV1.

This article helped me understand better the difference between changing the innerHTML and manipulating the DOM, but I'm still not sure how to add new HTML content to DIV2 while preserving its ability to access objects in DIV1 and the rest of the original page.

Here's the code from DIV1 that populates the database with the new recipe and then populates DIV2 (#divRightColumn) with HTML from the call to phpRecipeDetails.php:

  // Create the initial recipe namd and category
  $( "#createrecipebutton" ).click(function() {
    var varRecipeName = $('input:text[name=recipename]').val();
    var varRecipeCategory = $('input:text[name=recipecategory]').val();

    insertNewRecipe(varRecipeName,varRecipeCategory);

    var url = 'phpRecipeDetails.php';
    var data = 'recipename='+ varRecipeName;

    $('#divRightColumn').html('<h4>Loading...</h4>').load(url, data);
    return false;
  })

The contents of phpRecipeDetails.php has gotten quite complicated because it has to return back to #divRightColumn not only HTML structure but also the Javascript that the structure leverages. When I tried having those Javascript functions in the DIV1 or the page, the DIV2 content would ignore them. So clearly I'm heading down the wrong path with this.

How do I develop DIV2 so that it has new content that can access functions and objects that are in DIV1 and the original page?

Thanks for your help!

Community
  • 1
  • 1
user923526
  • 23
  • 3
  • What contents are being returned back from `phpRecipeDetails.php` ? We need to know everything. – Jhecht Jan 31 '17 at 05:16
  • Thanks Jhect! I found a much better way to accomplish what I was after - instead of dynamically loading my DIV with HTML via the PHP call (with the escalating series of problems) I'm now building out all the DIVs I need in the HTML but leaving their display property set to hide all but the one I need. Instead of a single DIV2 that gets dynamically loaded I'm having better luck with many individual DIVs that all load with the page. This is proving to be enormously less cumbersome and it avoids the problem I was having with the DIV content being able to access the other objects on the page. – user923526 Feb 02 '17 at 00:37

0 Answers0