php - How to load HTML into a <div> using jQuery in WordPress?
So this is mybuildInputFields.php file, which contains the markup I want to load into my#add_input_fields div located in myarticlePostForm.php file. Both files are in the same directory in my theme file:
buildInputFields.php
<fieldset id="add_fields">
<legend>Add Fields</legend>
</fieldset>
<input type="button" value="Preview form" id="preview" />
<input type="button" value="Add a field" id="add" />
articlePostForm.php
<body>
<div id="form-container">
<form>
...
<section>
<legend>citations</legend>
<div id="add_input_fields" href="<?=get_template_directory_uri(); ?>/buildInputFields.php" onload="loadInputFields();"></div>
</section>
</form>
</div>
</body>
And here is my jQuery:
loadInputFields.js
function loadInputFields() {
var href = $('#add_input_fields').attr('href');
$('#add_input_fields').load(href);
return false; //to prevent default action
}
I have enqueued and registered .js files as so in my functions.php file in WP. All .js files are located in the theme file's js folder:
functions.php
function loadInputFields_js() {
wp_enqueue_script(
'custom_script',
get_template_directory_uri() . '/js/loadInputFields.js',
array('jquery')
);
}
add_action('wp_enqueue_scripts', 'loadInputFields_js');
And I have included it in my header.php file in WP:
header.php
<head>
...
<script type="text/javascript" src="<?=get_template_directory_uri();?>/js/loadInputFields.js"></script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
//end of header.php
Basically what I'm doing is creating a form for people to post their own articles on my site. This is just one part of the form. In this part of the form, I'm attempting to load in markup that will be accompanied by other jQuery code that features a "plus sign" and "minus sign" to add and remove input fields for people who want to add in cited sources.
The#add_input_fields div is where I want to load my markup in from thebuildInputFields.php file. I want to load it using my jQuery fileloadInputFields.js which is supposed to select the#add_input_fields div, get its href value, set a equal to a local variable, and then load it back into the div using the.load() function.
Any advice? I have been trying for two days and all I can do now is huddle up in the corner, pull over my hoodie, and sob endless tears.
NOTE: I understand that a div element cannot use an href attribute. I simply structured the code this way so anyone reading can get an idea of what I'm trying to accomplish because I have a terrible way of trying to explain things. You're help is desired and appreciated!