Develop Reference

jQuery - show multiple divs with multiple triggers

On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.

First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>

Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>

How to click these buttons using Javascript?

I found this html code on a website which is a click button and I want to learn how to click on this button using Javascript. Please someone help me to understand how to click such buttons. I'm trying this from past one hour.
This is the button which I want to click:
<div class="Button">
Tap this button
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p></div>
this is not my code. Its from a website.

You need to close the first div with a closing tag. Below is the updated code with the closing tag.
<div class="Button">
Tap this button
</div>
<div id="ButtonTwo" class="ButtonTest2">
<p class="MeButton" id="ButtonID">Final button test</p>
</div>
What is the purpose of enclosing your a tag in a div ? Can't you use only the a ?
You do not have any button in the HTML snipper shown, only div, a, and p
A button would be a <button>.
to click them using your current code you can use
<script>
document.getElementsByClassName("button")[0].click();
document.getElementsById("ButtonID").click();
</script>
A correct, valid and clear code would be
<!-- What is this button meant to do ? Can you use an actual button or do you HAVE to use a <a> ?
<button id="clickUsingJs" class="button yellow-btn addToCart trackEvent" rel="Thebutton" data-action="Tap">
Tap this button
</button>
<script>
document.getElementById("clickUsingJs").click();
</script>

<div class="Button" id="button1" onclick ="call some javascript method">
Tap this button
<div id="ButtonTwo" class="ButtonTest2" onClick="call some javascript method">
<p class="MeButton" id="ButtonID">Final button test</p></div>
try this

Printing a div in HTML with all css applied

I'm making a project in asp.net MVC. I want to print a div with all css styles applied. This div may contain one or more divs inside it. I tried a lot of javascript print codes but each of them failed. The page I want to print looks like this: Click here to view page. I just want to print the area below the input region which contains the details. But the problem is that when I use the javascript print method, my table view suddenly vanishes. This is the print preview that I get: Click here to view the print preview page. I've tried multiple methods but all have failed. Please Help. Thanks in advance. Below are my code files of front end
saleInvoice.cshtml
<script>
function refresher() {
$('#si, .si').load('/TallySet/cart');
};
function printDiv(divID) {
debugger;
var printContents = document.getElementById(divID).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
};
</script>
<div class="col-lg-12 popblk">
<p>New Sales Invoice</p>
</div>
<div class="col-lg-12" style="background-color:white">
<div class="row">
<div class="col-lg-2">
<p>Customer : </p>
</div>
<div class="col-lg-4">
#Html.DropDownList("customers")
</div>
</div>
<div class="row">
<div class="col-lg-4">
#Html.DropDownList("items")
</div>
<div class="col-lg-4">
#Html.TextBoxFor(x => x.quantity)
</div>
<div class="col-lg-2">
<button value="Add to cart" onclick="addToCart()">Add to cart</button>
</div>
<div class="col-lg-2">
<button value="Refresh" onclick="printDiv('si')">Refresh Cart</button>
</div>
</div>
<div class="row" id="si" style="margin-left:50px;">
#{Html.RenderAction("cart", "TallySet");}
</div>
<div class="row" style="background-image:url('../../viewData/sale_footer.png')">
</div>
<button class="rButtonCancel" value="X" data-dismiss="modal" onclick="listVoider()">X</button>
</div>
cart.cshtml
#model IEnumerable<Fast_Tally_Accounter.Models.salesCart>
<img src="~/viewData/sale_head.png" />
#if(Model!=null)
{
foreach(var v in Model)
{
<div class="row" style="background-image:url('../../viewData/sale_row.png'); background-repeat:no-repeat;margin-left:0px;margin-bottom:0px">
<div class="col-lg-2">
<p>#v.quantity KG</p>
</div>
<div class="col-lg-4">
<p>#v.itemName</p>
</div>
<div class="col-lg-1">
<p>#v.itemPrice</p>
</div>
<div class="col-lg-1">
<p>#v.itemTotal</p>
</div>
</div>
}
}
<div class="row" style="background-image:url('../../viewData/sale_footer.png'); background-repeat:no-repeat; margin-left:0px; height:120px">
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>#ViewBag.dt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:2px; margin-right:0px" id="myRow">
<p>Daniyal humayun</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:10px; margin-right:0px" id="myRow">
<p>#ViewBag.qt</p>
</div>
<div class="row myRow" style="height:20px; margin-left:536px; margin-bottom:0px; margin-right:0px" id="myRow">
<p>#ViewBag.pr</p>
</div>
</div>

There's a number of issues here. First and foremost. You're not actually using a table. Instead, you're using Bootstrap's grid styles to make an approximation of a table. Using an actual HTML table is a better idea, not just for the consistency it provides but also for the sake of accessibility.
Second, the "borders" to your "table" are being applied via background images. While I think Chrome actually gives the user the option to print background images, now, it's not the default, and other browsers will simply ignore background images entirely when printing. Long and short, that approach is doomed to failure.
Third, when printing, you're actually taking the contents of this div and replacing the entire HTML document with that. Importantly, that means any stylesheets and such that were part of the document are thrown away. In particular to your issue here, that would include the Bootstrap stylesheet. This was the way people used to handle printing way back in the day before CSS was even really a thing. Now, there's a much preferable way to handle removing extraneously content from the print. You simply add print-specific styles and hide elements you don't want to print (such as a page header) via that. For example:
#media print {
#Header { display:none; }
}
You can also use this same approach to change styles to improve the print layout. Maybe you want the text to be larger or smaller when printed. You simply add something like body { font-size:12pt; } inside this block.
The only JavaScript you actually need is just window.print(). Your print button calls that, and your print-specific CSS should take over to modify what needs to be modified in the print version.

Replace content/section button webdesign

I'm trying to find a way to make a replace button on my page. I've looked around the web but all I found was a replace text script. What I want is to replace both the text in my h1 tag and the text in the article. If its possible to just replace the whole div with another div it would be great.
To explain a bit more accurate on my page: www.bravitus.com
I want at the "OM MIG" section, a button where I could switch out the content, for something else like some info about bravitus. I'd like a button to click that replaces only the orange section.
Here's a bit of my mark-up:
<div class="full-page" id="page-2">
<div class="container">
<h1 style="color:white;" >Hvem er jeg</h1>
<div class="columns eight"><article> Lorem ipsum </article>
</div>
I want to replace all content in the page-2, or just switch out the whole page-2 div with another.
Is that possible?

Here we go, a small demo on jsFiddle (http://jsfiddle.net/json/8cu34y4L/).
There are three buttons with the data-switch attribute. The attribute indicates what block inside the page-2 will be shown, when the button is clicked.
HTML
<button data-switch="#about_me">Click to read about me</button>
<button data-switch="#education">Click to show my education</button>
<button data-switch="#about_name_bravitus">Click to read about the name Bravitus</button>
<div id="page-2">
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e) {
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});

I'm not sure if I understood what you want.
But if you just want to replace all html inside page-2, you simply can do that (with jQuery):
var html = // Here comes your html
$('#page-2').html(html);

So im not sure if this is the correct way but what i ended up doing was this
function myFunction(){
document.getElementById("fisk").innerHTML = "Hvem er du"
}
<button onclick="myFunction()">Click me</button>
Now i just have to find a way to make it replace more than text. to replace divs and other tags all together.

Just add this link and execute the below code:
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
Click to read about me
Click to show my education
Click to read about the name Bravitus
<div id="about_me" class="container">
<h1>This is about me section</h1>
<div>about me about me about me</div>
</div>
<!-- Hidden blocks that you show when the appropriate button is clicked. -->
<div id="education" class="container" style="display: none;">
<h1>This is about my education</h1>
<div>education education education</div>
</div>
<div id="about_name_bravitus" class="container" style="display: none;">
<h1>This is about the name bravitus</h1>
<div>bravitus bravitus bravitus</div>
</div>
JS (you need jQuery)
// Listening to a button click.
$('[data-switch]').on('click', function (e)
{
var $page = $('#page-2'),
blockToShow = e.currentTarget.getAttribute('data-switch');
// Hide all children.
$page.children().hide();
// And show the requested component.
$page.children(blockToShow).show();
});

javascript only works once when needed twice on page

I'm using a piece of JS twice for two, different yet the same, events.
To make it more simple, let's say I've got:
<script type="text/javascript">
$(function(){
$(".iframe").load(function(){
$(this).contents().find("form").delegate(".clickThisCheckBox","click",function(){
alert(this)
})
})
})
</script>
<div class="tabs">
<ul class="tabs-nav">
<li>Products</li>
<li>Accessories</li>
</ul>
</div>
<div class="content">
<div id="products">
<iframe class="iframe">
<form action="?" method="post">
<input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
</form>
</iframe>
</div>
<div id="accessories">
<iframe class="iframe">
<form action="?" method="post">
<input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
</form>
</iframe>
</div>
</div>
This a more simplified version than what I've got, but exactly the same concept.
So when the page loads, you click the checkbox in the open tab, and you'll successfully get the alert box with the object. When you click the next tab and try to click the checkbox, nothing happens.
There is no AJAX or separate loading going on. Everything gets rendered on the initial page load. Both iframes are loaded at the same time and you access a different once by switching to a different tab.
Does the JS need to be in a function and ran each time a tab is clicked? Can't seem to wrap my finger around this one.
Update: Narrowed it down to it absolutely being that the JS only get's run once, so only the first iFrame in the first tab gets all the correct variables and events bound to the elements.
Update: Seemed to have figured it out. While continuing to use iFrames, I had to throw all of my JS into a function and run it on $(".iframe").load() and whenever a new tab is click, for example, $(".nav-cont li a").bind("click",function(){ //run the javascript })

If you want to bind load event to two identical iframes:
$("div.contents").delegate(".iframe", "load", function(){
alert('one of the iframes loaded');
});
One handler function handles "load "event for both iframes.
P.S. UPDATE
You can't use iframes the way you explain in comments. Simply use divs instead and set overflow:hidden; If the intent is to limit the display size of that specific area with data - set this in css file:
.form_container{width:500px;heigth:500px;overflow:hidden;}
Your html then will be:
<div class="tabs">
<ul class="tabs-nav">
<li>Products</li>
<li>Accessories</li>
</ul>
</div>
<div class="content">
<div id="products">
<div class="form_container">
<form action="?" method="post">
<input type="checkbox" name="checkBox1" class="clickThisCheckBox" />
</form>
</div>
</div>
<div id="accessories">
<div class="form_container">
<form action="?" method="post">
<input type="checkbox" name="checkBox2" class="clickThisCheckBox" />
</form>
</div>
</div>
And js will be:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('form').find(':checkbox').click(function(){
alert('something got clicked');
})
})
</script>

As far as I can see from the code you provided you are attaching load event handlers to elements that might have not yet been loaded at the time of attaching.
Did you try to wrap your code inside $(document).ready() to ensure that all the elements on the page are available for manipulation before you attach event handlers to them?