I am working on an application that has a form on one of its pages. The form is enclosed in a bunch of nested div tags. It looks something like this:
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer>
<div data-reactid=".0">
<div data-reactid=".0">
<div data-reactid=".0.0.1.$form">
<form id="myForm" data-reactid=".0.0.1.$form.1">
...
</form>
</div>
</div>
</div>
</div>
</div>
</main>
The trouble is that I can see the form on my webpage, and also through the 'View Source' function in my browser, but when I do an 'Inspect Element' to see the actual HTML being generated, I just see
<main id="main-body">
<div id="content-wrapper">
<div id="formContainer">
</div>
</div>
</main>
I can't see any of the HTML elements inside the div 'formContainer' when I do an 'Inspect Element', even though they are right there on the page. Any ideas as to why might this be? I need to get the form Id in Neoload, but Neoload just won't read it, since it's absent from the page's source.
Edit: Several of the div tags are using data-reactid=".0.0". The form element itself has data-reactid=".0.0.1.$form.1". Basically anything with react disappears. I know nothing of React. Could this be causing this issue? I have updated my code to match the original code more closely.
You are not closing the id="form-container"! A " is missing
Related
Im creating a simple JS game, which will run in the browser and will pull the files directly from the pc. Because of this needed to make a workaround the "Cross-origin" error, which went smoothly, I put all the HTML within a JS and loaded the JS from the tag in the index.html. Everything was going smoothly so far.
You click "press any key to continue" -> but then next you click "New Game" and you get event listener error "can't set property of null". Which i don't understand how it happens, because the element is already in the "DOM" , the css could pick it up, but the event listener could not? So i tried moving all scripts on top, rearranging stuff, nothing worked. Pre-loading all HTML into the index.html, without executing it will definitely work, but how can i achieve this exactly? My Configuration atm is:
index.html (root folder)
/components/main_menu.js
/components/character_creation.js
function MainMenu()
{/*
<div id="mm_wrapper_grid">
<div id="mm_subgrid1">
</div>
<div id="mm_subgrid2">
<div id="mm_subgrid2_image"></div>
<div id="mm_new_game"><p id="mm_new_game_p" class="grow">New Game<p></div>
<div id="mm_load_game"><p id="mm_load_game_p" class="grow">Load Game</p></div>
<div id="mm_options"><p id="mm_options_p" class="grow">Options</p></div>
<div id="mm_credits"><p id="mm_credits_p" class="grow">Credits</p></div>
</div>
</div>
*/}
function CharacterCreation()
{/*
<div> Character Creation test
</div>
*/}
<div id ="game">
<div id="loading_screen">Press Any Key To Continue</div>
</div>
<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
function callback(arg1, func)
{
var html = func.toString();
var htmlstart = html.indexOf('/*');
var htmlend = html.lastIndexOf('*/');
var html = html.substr(htmlstart+2, htmlend-htmlstart-2);
document.getElementById(arg1).innerHTML = html;
}
</script>
You have the problem because you are trying to add the second listener for getElementById("mm_new_game_p") when this element doesn't exist on the page. I suggest you to add the follwing line of code to make sure, that it's true:
<script type="text/javascript">
document.getElementById("loading_screen").addEventListener("click", function() {callback("game", MainMenu)});
console.log('#mm_new_game_p', document.getElementById("mm_new_game_p"));
document.getElementById("mm_new_game_p").addEventListener("click", function() {callback("game", CharacterCreation)});
...
You have to add this listener after this element will be created (after calling of MainMenu() function).
To tell the truth, I can see such storing of html templates in js functions for the first time. It's hard to support your code and I've modified it a little bit below. This is not the best way to implement it, but my goal is show you a solution based on your code. What you can see here:
all the templates for pages are in html (not in JS);
you can add listeners from html code using HTML attribute onclick - and in this case you can be sure, that element exists on the page.
If you want to add listeners from JS, than you have to create own functions for each pages which you have and after HTML template of a page will be added to #game container you will need to create event listeners for the buttons which are on the created page.
openPage("game", "loading_screen");
function openPage(parentDOMElementId, name) {
console.log('openPage:', name);
var pageHtml = document.getElementById("page_" + name).outerHTML;
document.getElementById(parentDOMElementId).innerHTML = pageHtml;
}
<div id="game"></div>
<div class="templates" style="visibility: hidden;">
<div id="page_loading_screen" onclick="openPage('game', 'main_menu')">
Press Any Key To Continue
</div>
<div id="page_main_menu">
<div id="mm_subgrid1">
</div>
<div id="mm_subgrid2">
<div id="mm_subgrid2_image"></div>
<div id="mm_new_game">
<p id="mm_new_game_p" class="grow" onclick="openPage('game', 'character_creation')">New Game
<p>
</div>
<div id="mm_load_game">
<p id="mm_load_game_p" class="grow">Load Game</p>
</div>
<div id="mm_options">
<p id="mm_options_p" class="grow">Options</p>
</div>
<div id="mm_credits">
<p id="mm_credits_p" class="grow">Credits</p>
</div>
</div>
</div>
<div id="page_character_creation">
Character Creation test
</div>
</div>
I would like to be able to add (append) another set of div's to the section tag below when a user clicks on a button. For example adding the following div's:
<div class="from-me">
<p>this looks great. </p>
</div>
<section>
<div class="from-me">
<p>Hey there! What's up?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Checking out iOS7 you know..</p>
</div>
</section>
What I am trying to create is something similar to a text conversation for an e-learning project. I've had success creating a new div with a javascript function that is run by clicking a button, but I couldn't get it to append inside the section tag. Is this possible or do I need to approach this differently?
Thanks.
-Shawn
Noob here sorry. I'm trying to remove an ancestor when my WP loop returns an empty message with a specific class. Firefox is displaying as intended, removing the desired DOM, but Chrome is removing the targeted element and no ancestors.
Basic HTML markup:
<div id="content" class="container site-content">
<div id="primary" class="main-content">
<div id="main-box-1" class="main-box border-top">
<div class="main-box-inside">
<p class="no-modules-msg">No posts match your criteria. Please choose different options.</p>
</div>
</div>
<div id="main-box-2" class="main-box border-top ">
<h3 class="main-box-title">More Stuff</h3>
<div class="main-box-inside">
</div>
</div>
</div>
</div>
And my script:
(function($) {
$("document.body").ready(function() {
$("p.no-modules-msg")
.closest(".main-box")
.remove(".main-box")
})
})(jQuery);
It's working correctly in fiddle, but not on the live site...
https://jsfiddle.net/y90gtt6t/
The reason it's not working on your site, is because the documentation is quite clear, only the document has a ready handler
jQuery(document).ready(function($) {
$("p.no-modules-msg").closest(".main-box").remove()
});
Your use of "document.body" actually looks for an element like <document class="body"></document>, which it hopefully never finds.
I have a very simple webpage I took from a template. On the right I have a list of links in a div and when clicking on them I want an html page located on my server to load in the inner div area. When clicking on the link, nothing happens. I've also tried setting the innerHtml to just a text value in case the src part is invalid, but that too does nothing. What am I missing? This looks like all the examples I've gone through.. And note I'm only giving the partial html, so I know the body isn't closed etc.
I have:
<body>
<script>
function results()
{
document.getElementsByClassName('mid-left-container').innerHTML="src="..\VRS_BVT\VRS_Test.html""
}
</script>
<div id="main-wraper">
<div id="top-wraper">
<div id="banner">Automation Server</div>
</div>
<div id="mid-wraper">
<div class="mid-wraper-top">
<div class="mid-leftouter">
<div class="mid-left-container">
blah blah
</div>
</div>
<div class="right-container">
<div class="right-container-top">
<h3><span class="yellow-heading">Projects</span></h3>
<ul>
<li>VRS BVT</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
getElementsByClassName() returns an array (actually a NodeList) of matching elements.
You're creating a new innerHTML property on that array, which has no effect.
Instead, you need to get an actual element from the array and set its innerHTML:
document.getElementsByClassName(...)[0].innerHTML = ...
Also, your string literal is invalid syntax.
You need to use single-quotes or escape the double-quotes.
Also, putting src="..\VRS_BVT\VRS_Test.html" in the content of an HTML element will not load anything from the server.
You need to use AJAX or an <iframe>.
I have an HTML5 page structure like this:
<article id="article_id">
<div></div>
<div> </div>
<div> </div>
<form id="form_id">
<input id="" onsubmit="submit()"/>
</form>
</article>
Now I want to add a new div after div and before form. How should I do it?
I have tried:
$("#form_id").befor('<div id="div_id" class="block">');
$("#form_id").parent().befor();
$("#form_id").after('<div id="div_id" class="block">');
The HTML code works fine.
First of all, it's before. Secondly, you must pass an argument to it. The html that you will put before the form.
$("#form_id").before('<div class="block"></div>');
demo http://jsfiddle.net/uHrKG/1/