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?
Related
I inserted a stepper into a mobile webapp based on Framework7:
<div class="stepper stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
However, the two plus/minus buttons for in/decreasing the value do not work...do they need to be initialized? Or am I supposed to write the onclick handlers for these buttons myself?
(Of course, I looked into the Framework7 kitchen sink examples - there I found no indication for manual onclick handling; and the stepper is placed inside a form, and the app is properly initialized and works well, otherwise;-)
I think I worked it out: experimenting with a multipage app, I had my <div class="page"> wrapped inside a <div class="pages"> element - and this seems to have interfered with the stepper initialization.
As soon as I removed the <div class="pages"> (leaving only a single page inside a <div class="page">), the stepper buttons worked.
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>
I've 3 tabs that use javascript to show content when they are clicked:
<ul class="tab">
<li>12 Weeks</li>
<li>4 Weeks</li>
<li>1 Week</li>
</ul>
Divs are placed in my html code as follows:
<div id="12_Weeks" class="tabcontent"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
I'd like the first tab to be open when the page is loaded and have tried the following code:
$( document ).ready(function() {
// Handler for .ready() called.
$("#12_Weeks").trigger('click');
});
however this doesn't seem to do the trick, anyone know what I'm doing wrong here, am sure it's super simple!?
Are you sure there is an element with ID #12_weeks on your page?
It is not present in your sample code.
Your trigger click has tab content but it will be in tab title. See flowing code.
$( document ).ready(function() {
// Handler for .ready() called.
$('ul#tab li:first > a.tablinks').trigger('click');
});
Or
you can user this under your hide execute code. $("#12_Weeks").show('');
Seems I needed to add openCity("12_Weeks") in my javascript function, they seem to have left this bit out at W3schools, thanks all for helping!
You could use style="display: block;" directly in your default <div></div> tag, like this:
<div id="12_Weeks" class="tabcontent" style="display: block;"> <!-- Tab 1 starts here -->
<h1>Example Text</h1>
</div>
When a different Tab is clicked, the style="display: none;" and the current clicked Tab is given style="display: block;"
This should do the trick.
I have an aspx page where I'm trying to hide a div based on a button click. It seems as though the javascript executes but then the div shows back up immediately. It seems like the page is refreshing as well.
function hideDiv2()
{
document.getElementById("div2").style.display = "none";
}
This is the html
<body>
<form id="form1">
<div style="background-color:gray;">
<div id="div1" style="width:300px; background-color:blue;">
<button onclick="hideDiv2()"></button>
</div>
<div id="div2" runat="server" style="width:300px; background-color:black; display:none;">test</div>
</div>
</form>
Okay the the problem was that the button was inside a form which was resubmitting the page each time. The solution was to change the type="button"
What to do if i want to link two internal pages on the click of a button using jquery or javascript...
i can do it using <a href=#nextPage"> in HTML but i want a script to do it! what i am doing right now is:
<!-- first page-->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>Test page</h1>
</div>
<div data-role="content">
<p>this page will link internal pages using # </p>
change to next page
</div>
</div>
<!-- second page-->
<div data-role="page" id="nextPage">
<div data-role="header">
<h1>Test page 2 </h1>
</div>
<div data-role="content">
<p>this page will appear after you click the button on first page. </p>
</div>
</div>
this is doing good, but what i need is a script to link them. as in my app i need to change the page on click of button only after certain conditions met. but i dont know how to do it...
-----------Edit------------
I found out a way
window.location.href="#nextPage"
this is how its done.
Thanks all for your effort..
You can add onclick handler to the a tag:
JS
function navigate() {
if (condition) {
$.mobile.changePage("#nextPage");
}
}
HTML
change to next page
OR you can do this:
JS
$(document).ready(function() {
$(".nav-nextPage").click(function() {
if (condition) {
$.mobile.changePage("#nextPage");
}
});
});
HTML
change to next page
jQuery Mobile, Anatomy of a Page
Scroll down to Local, internal linked "pages"