Trying to load HTML into a div with a button - javascript

I've spent enough hours googling this to feel comfortable posting this- even though i'm sure it's a simple solution. I'm just getting into a webdev so pardon my ignorance. As the title says i'm simply trying to have the content of an HTML file appear in a div after a button is pressed. Here is my code:
HTML:
<button id="button" class="linkGeneration">Press me</button>
<div id="renderArea" class="contentArea">
<!-- CONTENT SHOULD GENERATE HERE -->
</div>
Javascript:
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load($(this).attr('../html/content.html'));
});
});
I'm not getting any errors, the button simply does nothing. I do have Jquery properly applied in my HTML as well.
Any suggestions on how to fix this OR a different method that might be simpler? Thanks.

The button doesn't have an attribute named ../html/content.html, so $(this).attr('../html/content.html') is not returning anything.
If you want to load from the URL, just use that as the argument to .load(), you don't need .attr().
$(document).ready(function() {
$('button').click(function(e) {
e.preventDefault();
$("#renderArea").load('../html/content.html');
});
});

Related

Show hidden HTML elements with javascript

I have the following in the <body> of my HTML
<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>
Link to jfiddle
The idea here is I want someone to be able to click on the Toggle Hidden link and it will show some hidden content (and when it is clicked again, hide it). However the javascript is not being triggered. Any help is greatly appreciated
You haven't inputted JQuery or JQuery UI into your JSFiddle's resources. Once putting them in, it works:
https://jsfiddle.net/tj8o8gwf/2/
$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine
Look at the External Resources section on the left hand side of the fiddle.
You also need to make sure the DOM is loaded.
$( document ).ready(function() {
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
});
You need to make sure that jQuery is inputted
$(document).ready(function () {
$("body").on("click", "#button_some_id", function () {
$("#item_some_id").toggle();
});
});
Try this
//HTML
<div class="toBeHidden" hidden>This is hided</div>
//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
$(".toBeHidden").hide('slow');
}
else
{
$(".toBeHidden").show('slow');
}

Javascript code to open a url on click in the same window

Im' stuck in a probably easy problem. Sorry I'm a beginner !
I have this
<div class="icon-1"></div>
<div class="icon-2"></div>
<script>
$(function() {
onclick('icon-1').openurl('http://acdefg.com');
onclick('icon-2').openurl('http://ghijkl.com');
}
</script>
...I mean, that if I click on "icon-1", then I go to URL "...."
If i click on "icon-2" then I go to URL "..."
etc.
Could you please help me ?
Well, you could define something like:
document.getElementByClassName("icon-1").onclick=function(){
window.location.href = 'http://abcdef.com';
};
You could also pull in an elements attribute (for examle, data-href) to full in the variable (instead of setting it specifically in JS, then you would only need 1 JS function for all occurrences).
However, can I ask - why don't you just use HTML a tags with href values?
Try this using jQuery (which is bundled with WordPress): https://jsfiddle.net/wu24bnbc/2/
<div class="icon-1">Icon 1</div>
<div class="icon-2">Icon 2</div>
<script>
jQuery(function() {
jQuery('.icon-1').click(function() {
window.location.href = 'http://acdefg.com';
});
jQuery('.icon-2').click(function() {
window.location.href = 'http://ghijkl.com';
});
});
</script>
Edit: I think you need to use jQuery instead of the $ shorthand with WP.

Remove button if table is empty

I am trying to remove the start upload button until files are added to the queue, so far I have this code...
<script type="text/javascript">
setInterval(CheckTables, 100);
function CheckTables() {
$("table").each(function (index) {
$(this).find('tbody:not(:empty)').parent().show();
$(this).find('tbody:empty').parent().hide();
});
}
</script>
With this code tbody is hidden until files are added but my start upload button, #form-button, is still displayed. I have tried the following...
if($.trim($("tbody:empty")
$("#form-button").hide();
Hope someone can help with this.
HTML:
<button id="form-button" style="margin-bottom:40px" type="submit" class="start">Start upload</button>
<div id="fileListingWrapper" class="fileListingWrapper hidden">
<div class="fileSection">
<table id="upload-table" style="border:1px solid #007FFF;display:none;margin-bottom:10px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px" id="files" class="files" width="100%"><tbody></tbody></table>
</div>
</div>
I think you may have a bit of a syntactical error in the code to hide your submit button (missing multiple parentheses at the end of your if condition). Anyways, here are two approaches you could use for selectively hiding the submit button:
if (($("tbody").is(":empty")))
$("#form-button").hide();
Here's a JSFiddle demonstrating the code in use. Try adding stuff (well, valid stuff, like a <tr>) inside the <tbody>, and the submit button should reappear.
If whitespace is a concern, and you want to ignore it as well, consider using this instead:
if (($.trim($("tbody").html()) == ""))
$("#form-button").hide();
Here too, is a JSFiddle to show you the code working.
Regardless of which way you take this approach, if you want the button to show again if there is content in the <tbody>, make sure you add the code to do so:
else
$("#form-button").show();
Hope this helps! If you have any questions, feel free to let me know.
This works (demo)
if($("table tbody").html() == "")
{
$("#form-button").hide();
}

Dynamically Written script not functioning

I have been bashing my head against a wall for about 4 hours now trying to figure out why this wont work. I have a program that needs to dynamically write code depending on the number of results from an SQL query.
I am using a jquery lightbox called EasyBox. When it is hard-coded like this, it works:
<body id="body" onload="bodyLoaded()">
<a id="link" href="#test" title="Snowflake" rel="lightbox">Hello</a>
<div id="test" style="display:none; width:320px; height:240px">
<p>Test Content</p>
</div>
<script type="text/javascript">
function bodyLoaded(){
$('#link').attr('onclick', 'logText("Hello")');
}
function logText(message){
console.log(message);
}
</script>
However, when I have the link written dynamically like this, the EasyBox popup does not fire.
<body id="body" onload="bodyLoaded()">
<div id="test" style="display:none; width:320px; height:240px">
<p>Test Content</p>
</div>
<script type="text/javascript">
function bodyLoaded(){
document.getElementById('body').innerHTML+="<a id='link' href='#test' rel='lightbox'>Hello</a>";
$('#link').attr('onclick', 'logText("Hello")');
}
function logText(message){
console.log(message);
}
</script>
Any ideas why this would work? I am pulling my hair out here!
I don't understand why you're not just using jQuery for all of this.
$(function(){
$('#body').prepend("<a id='link' href='#test' rel='lightbox'>Hello</a>");
$('#link').click(function(){
alert("Hello");
});
});
If the .click() doesn't work, you could also try .live(). Both worked for me in jsfiddle(http://jsfiddle.net/LZxrL/ and http://jsfiddle.net/LZxrL/1/).
Also, why does everyone keep saying there is no element with id='body' when the body element itself has the id of 'body.' Clearly, he wants to add a link to the body.
EDIT: I just read your comment on another post about the issue being the lightbox, not the click event. That DOES change things. I'm not familiar enough with that plugin to comment authoritatively, but I would suspect that the plugin looks for rel="lightbox" when the page loads and any elements added afterward won't be caught. Most plugins have a manual method, something like:
$('#link').lightbox();
I'm not seeing where you are loading the dynamic tags in your script. bodyLoaded() function is looking for anything with id='body' and in your second block of code I don't see any with that id tag.

javascript change div html when click span

Ok I have a small question.
I have the following
<div><span class="spanright" onclick"">Update</span><label class="myinfo"><b>Business information:</b></label></div>
What I want to do is when the user clicks on the span it changes the html after the label an adds an input box and submit button.
I think I need to do a this.document but not sure
Hi hope this might give you a small understanding of what to do when it comes to registering events. StackOverflow is about you learning how to do something, so we dont write the scripts for you, we are just trying to point you in the right direction of it.
http://jsfiddle.net/WKWFZ/2/
I would recommend you to import jQuery library, as done in the example, if possible. It makes the the world of javascript alot easier!
Documentation to look up:
http://api.jquery.com/insertAfter/
http://api.jquery.com/bind/
Look up some jQuery tutorials! there is alot of them out there.
I added a form which will hold the input
JavaScript:
function showInput()
{
document.getElementById('container').innerHTML += '<input type="text"/><input type="submit"/>';
}
HTML:
<div id="container">
<span class="spanright" onclick"showInput()">Update</span>
<label class="myinfo"><b>Business information:</b></label>
</div>
Summoner's answer is right, but I prefer using jquery (it's loaded on almost every page I work with):
HTML:
<div id="container">
<span class="spanright">Update</span>
<label class="container"><b>Business information:</b></label>
</div>​
Javascript:
​$(".spanright").click(function(){
$("#container").append('<br /><input type="text"/><input type="submit"/>');
$(".spanright").unbind('click');
})​​;​
This way, the click event will work once, as it is what you probably intended.
Try this in jquery flavor --
$(document).ready(function(){
$(".spanright").click(function(){
$(".myinfo").css("color","red");
});
});
Check fiddle --
http://jsfiddle.net/swapnesh/yHRND/

Categories