I've been running into some problems that seem to arise from making my questionnaire a .PHP file rather than an .HTML. The reason I had to do this is because I'm using a PHP script for working with an SQL database and I had to include them into the Questionnaire, which won't work as an HTML.
In the HTML version everything runs perfectly the way I coded it. When I saved it as a .php file my javascript stopped working properly and I tried linking the javascript at the bottom of the body tag instead of the head and that still didn't help.
After a lot of going back and forth trying to see what's different I decided to save the .php file as an html just for grins and giggles to see if I still got the same problems. Oddly enough, it runs just as smooth as the other HTML file.
here's links to all 3 versions so you can see what I mean.
HTML v1
PHP
HTML v2
In the JS Console I got this error
Uncaught TypeError: Cannot set property 'onClick' of null
which referred me to line 163 of my .js file which is referencing the "next" button of the first page of the Questionnaire (not intro page that loads up but the next page where you actually input data).
The way I have the Questionnaire structured in the .PHP file is
<?php ini_set('display_errors','on'); ?><?php include('extlib/vdaemon/vdaemon.php'); ?><!doctype html>
<html>
<head>
//links to files etc.//
</head>
<header>
</header>
<body>
<form action="core/process.php" method="post" id="CorpID" runat="vdaemon">
<input type="hidden" name="formID" value="Questionnaire" />
<input type="hidden" name="redirect_to" value="http://optiqvision.x10host.com/Corp_ID_&_Branding_Questionnaire.html" />
//all form inputs//
</form>
<?php VDEnd(); ?>
</body>
<footer>
</footer>
</html>
The entire Questionnaire has well over 100 individual inputs so I didn't want to put all of them in this snippet. I just wanted to show the over all structure, plus I figured you could get more details in the browser from clicking on them and looking at the debugger to see more of what's going on. Can anyone identify what I'm doing wrong with the PHP? I really don't understand why it's messing up the way it is.
In your html the code for the textarea is like this:
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
In your php the
The textarea closing tag is misplaced; coming after a lot of div's including the element with the id=p1_next. SO the divs just become part of the textarea value instead of being part of the HTML page
Edit: Looks like the real problem is that the DOM is broken. In your PHP file, you have a self-closed textarea tag. textarea tags need a closing tag.
<!-- you have this, it's not syntactically correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;" />
<!-- the following is correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
Put Corp_ID_&_Branding_Questionnaire.js right before the body tag and it will work. The reason the PHP file is throwing a javascript error is because the node "p1_next" doesn't exist at runtime since your JS is in the head tag.
The reason it's working in the HTML file is mainly thanks to luck. The static HTML is loading fast enough that the DOM is ready by the time your JS code is running. As a thumb of rule, generally include all your JS right before the body tag. There are of course some exceptions.
If you really need to include your script in the head, you can wait until the DOM is ready by wrapping all your code with this:
$(document).ready(function() {
console.log( "ready!" );
// your JS code here
});
Last, if you're going to be using jQuery as a library, then it is recommended to use jQuery syntax instead of native JS. Just make sure to include the jQuery JS before your code.
var p1a = document.getElementById("p1_next");
// becomes:
var p1a = $('#p1_next'); // jQuery node by CSS selector
Before the end of the body tag like this:
<html>
<head>
..your code ..
</head>
<body>
..your code ..
<script type="text/javascript" src="http://www.optiqvision.x10host.com/Files/Javascript/Corp_ID_&_Branding_Questionnaire.js"></script>
</body>
</html>
Related
I'm just programming my first website and I want to implement the weather widget from weatherwidget.io to my website.
This is the code you get from their website:
<a class="weatherwidget-io" href="https://forecast7.com/de/48d109d79/***/" data-label_1="***" data-label_2="WEATHER" data-days="0" data-theme="dark" >*** WEATHER</a>
<script> !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');</script>
If I paste this in my HTML it works just fine.
Next I tried to move the script part to an external file called Mirror.js.
<script src="Mirror.js"></script>
If I now paste the part that used to be between <script> and </script> in the Mirror.js file, it doesn't work anymore. As I didn't write the original code, I don't know what went wrong and how I have to modify the code in order for it to work.
I've been trying to import a html form and embedded it into a separate html file, my javascript to try and upload the file containing the form looks like this
<link rel="import" href="formhtml5.html" onload="handleLoad(event)"
onerror="handleError(event)">
var link = document.querySelector('link[rel="import"]');
var el = link.import.querySelector('#flexyForm');
document.body.appendChild(link);
however when I try and see if the form is uploaded my page is just blank? been struggling with this for days now and its driving me nuts, anyone got any guesses to see how it works?
If this is what you're looking for, it's possible with jQuery.
firstFile.html
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includeForm").load("formFile.html");
});
</script>
</head>
<body>
<div id="includeForm"></div>
</body>
</html>
formFile.html
<p>This is my Form</p>
Note: Your question is not clear, you're not uploading anything. Instead you're just importing some lines of code from another html file to yours. If yes, above code should work fine!
Also, If the included HTML file has CSS attached to it, it might mess up your page style. So better to do internal CSS or change the CSS external link in formFile as per link rules of firstFile.html
You can also use php in additional to JS to get the content of the second file.
<?php file_get_contents="path to your file here" ?>
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
Why does the below code only work in the Codecademy.com editor and not in a real browser or jsfiddle? There seem to be no mistakes...
HTML
<p id='p1'>Zebras eat bananas</p>
<p id='p2'>That's nonsense</p>
With this javascript, #p2 should change automatically when the page has loaded. In the Codecademy editor that's what happens, but see it not work in Jsfiddle and also not when I make HTML/js files and run it in my browser.
How can I fix this? Or did they teach me wrong?
Javascript
$(document).ready(function(){
$('#p2').html("Now it makes sense!");
})
As #dfsq has mentionend, you need to include jQuery to your file, as to your fiddle. You can do this by adding this line before your script:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
After that, you can put your code in <script> tags:
<script>
$(document).ready(function(){
$('#p2').html("Now it makes sense!");
})
</script>
and you will see that it works.
Your jQuery script should allways be directly before the closing </body> tag, so that the DOM is loaded before you try to access it with javascript/jQuery
I'm very new to JavaScript (just started a few hours ago and trying to get a script working). I went through a few tutorials on W3 and the 'hello world' code works when I paste it directly into my HTML but I'm having a problem with a script (I've had problems with other scripts as well but I am not sure what I'm doing wrong).
I have this code that I want to test in my HTML, I copied the HTML in and it looks the same then I made a file in my static folder called edit.js and copied the JavaScript into it (exactly as shown). It didn't work no errors on the page but when I click it nothing happens. I tried to paste a W3 'hello world' code in and that worked but this script does not.
I tried to inspect the code in Chrome and that's where I see the above error (under the resources tab). I can open the js file using Chrome which makes me think the js file is accessible and pointing correctly but I'm not sure how to get it working. I'm using Jinja2 as my template engine to render the HTML and in my header I have:
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
and in my main template (the one that gets rendered on all pages) I have:
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
edit.js:
(even putting it within the script tag directly on the page I want to use it on doesn't work)
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
HTML:
(it's embedded in a larger page)
<head>
<script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="static/edit.js"></script>
</head>
... my html code..
<div id="wrapper">
<div id="container">
<div id="storedvalue"><span>Hello</span> [edit]</div>
<div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [save]</div>
</div>
</div>
I have never been able to successfully run a JavaScript that wasn't on W3 yet. I get the same problem with other scripts even though I see people online saying they work fine for them. Do I need to do anything extra to make this work?
My two questions are:
What am I doing wrong?
Because Javascript seems to just not work when there's a problem, is there a way to get errors or information on what's actually wrong?
I read Uncaught ReferenceError: $ is not defined? and have been trying to figure this out for the last hour and can't see my problem.
First you need to place the jQuery script tag first.
Second, you need to do one of the following things:
Put your code within this function:
$(document).ready(function(){/*CODE HERE*/});
Or like this:
$(function(){
/*CODE HERE*/
});
The DOM needs to be ready before you can use it. Placing your code within anonymous functions that are executed on the ready event of the DOM is how you can do this.
Edit:
$(function(){
$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
var showNew = $('#changevalue').val();
$('#altervalue').hide();
$('#storedvalue').show();
$('#storedvalue span').text(showNew);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Script tag for jQuery should come before your custom javascript.
Follow by edit.js
<script type="text/javascript" src="static/edit.js"></script>
Try removing the language attribute..sometimes work for me. It's obsolete now .. i think
You need to include jquery before you can use it.