Have a problem that can not solve (I'm new in jScript).
I have 3 rows, each contains 4 blocks, row in HTML below (bootstrap):
<div class="row product-element">
<div class="col-lg-3 col-md-3">
<div class="product-element-container">
<img src="img/1_mini.jpg" alt="Texto Alternativo 1" class="img-thumbnail">
<h4>Some text H4</h4>
<p>Some text p</p>
<p>Some text p</p>
</div>
BUY
</div>
...
...
...
</div>
I have also modal window, that opens when user click "buy" button, and I need to copy and elements from "product-element-container" to modal window.
Problem: I don't know how to create proper "select" in jQuery that will chose div with pressed button. What is the best way to do this?
This is a very simple implementation of what you're trying to do:
$('a.launch-modal').click(function() {
var content = $(this).siblings('.product-element-container').html();
$('#modal-register').html(content);
});
First, you add an on click event listener to all <a class="launch-modal"> elements, the callback (i.e. what happens after you click) gets the HTML content of the corresponding <div class="product-element-container"> element and puts it in the <div id="modal-register>
You can use $(this).siblings('.product-element-container') within your button click event callback function.
First give classes to h4 and your p tags inside the container that you want to copy.
Second add an attribute such as data- btnId="button id here" to the button.
Next bootstrap have a event on modal open show.bs.modal and shown.bs.modal which fires on opening and after modal is being rendered on page respectively.
$( '#your modal id" ).on
('show.bs.modal' , function
(event) {
var button =
$(event.relatedTarget) // Button that triggered the modal
var recipient = button.data
('btn id here which is inside container' ) // Extract info from data-* attributes
var modal = $( this)
modal.find( "h4").text( receipt. parent(". containerClassNameHereWhoseContentToBeCopied"). find("h4.classNameOfH4TagHereWhich. IsInsideContainer).text());
// Do same for P tags.
})
Note* your modal should have h4 and p tags. Or you can put values/text to any tag.
Related
I have a div which has a trigger click associated with it. Inside that div there is another div in which I have binded html using innerhtml.bind(Aurelia). That HTML part contains anchor tag. Now when I am clicking on the link nothing is happening. It is not opening the link.
My HTML structure looks somewhat like this:
<div click.trigger="someMethod()">
<div>
<div innerhtml.bind="">
</div>
</div>
</div>
Please help in what I am doing wrong?
I am trying to append body of the bootstrap modal dynamically. Here is the body Markup of the Modal.
<!-- try to indent the codes for readability -->
<div class="modal-body">
<div class="row text-left" style="margin-left: 2em;">
<div class="form-group"></div>
</div>
</div>
and here is the Jquery code to append the contents on click event of a button.
$('.form-group').append(EditHTML);
EditHTML is the markup that got generated dynamically. Now issue is that with every button click event EditHTML is being added with the previous content. I need to reset the Modal, each time button is click.Please help.
Just use .html()
$('.form-group').html(EditHTML);
Description : When .html() is used to set an element's content, any
content that was in that element is completely replaced by the new
content. Additionally, jQuery removes other constructs such as data
and event handlers from child elements before replacing those elements
with the new content.
I'm not sure I have understood right：
$('.form-group').html(EditHTML);
What I need
I need when user click on link data is shown.
link disappear after click.
I have tried code
<a href="javascript:void(0);" class="viewdetail more"
style="color:#8989D3!important;">view details
<div class="speakers dis-non">
</div>
</a>
jquery code
$('.viewdetail').click(function() {
$(this).find('.speakers').show();
$(this).find('.viewdetail').hide();
});
problem
when I click on view detail link data is shown on div.
link doesn't disappear.
if I put anchor before div then data is not shown on speaker class div.
any suggestion are most welcome.
jsfiddle: http://jsfiddle.net/fw3sgc21/
Since the div is inside the anchor, the div will also be hidden if you hide the anchor. You need to put the div next to the anchor to make it work. Use next() method to select the div.
HTML
view detail
<div class="speakers dis-non" style="display: none">
test data to be shown
</div>
JS
$('#viewdetail').on('click', function(){
// show div with speakers class next to the anchor
$(this).next('div.speakers').show();
// hide the anchor
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/2/
EDIT
If you want to wrap the speakers div inside another div as below
view detail
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
with the following CSS
.dis-non
{
display: none;
}
Here's the JS that should show the speakers div and hide the clicked anchor
$('#viewdetail').on('click', function(){
$(this).next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/6/
EDIT 2
If you want to put the anchor inside two divs as below
<div class="a">
<div class="b">
view detail
</div>
</div>
<div class="12u">
<div class="speakers dis-non">
test data to be shown
</div>
</div>
Use .parent() method twice to select <div class="a">, then use .next().children('div.speakers').show() to show the speakers div
$('#viewdetail').on('click', function(){
$(this).parent().parent().next().children('div.speakers').show();
$(this).hide();
});
JSFiddle: http://jsfiddle.net/fw3sgc21/8/
Try the following:
$('.viewdetail').click(function()
{
$('.speakers').show();
$(this).hide();
});
$(this) refers to the .viewdetail so you don't need the find it again
Pull the div outside the hyperlink
HTML:
view details
<div class="speakers dis-non"></div>
try this
html
<a href="javascript:void(0);" id="viewdetail" style="color:green">view detail
</a>
<div class="speakers dis-non">
test
</div>
js
$('#viewdetail').click(function() {
$('.speakers').show();
$(this).hide();
});
http://jsfiddle.net/fw3sgc21/1/
First of all this in your code refers to to the clicked link itself.
So this line $(this).find('.viewdetail').hide(); doesn't work, because there is no .viewdetail inside of link. It should be
$('.viewdetail').on('click',function(e) {
var self = $(this);
self.find('.speakers').show();
self.hide();
});
But, if you hide your link, the .speakers will be also hidden, because it's inside of your link. If you want it to be visible, you should place it outside of link
For example:
view details
<div class="speakers dis-non"></div>
And JS:
$('.viewdetail').on('click',function(e) {
var self = $(this);
e.preventDefault(); // prevent link from working the way it should
self.next('.speakers').show();
self.hide();
});
I would like to show the contents of a div when I navigate to it via a URL. Currently the Div contents are revealed onclick.
How would I get the Div contents to be revealed when using a URL with anchor to navigate to the main title in the ?
Here's javascript
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
here's my html
<h2 class="acc_trigger">Some Title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Strap Line Goes here</h3>
Text content goes here
</div>
</div>
<h2 class="acc_trigger">Another title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Another Strap Line Goes here</h3>
Some more text content goes here
</div>
</div>
If you're using a hash (e.g. url.com/page.html#otherStuff) then read the location.hash
http://www.w3schools.com/jsref/prop_loc_hash.asp
If you're using a query (e.g. url.com/page.html?otherStuff) use the location.search
http://www.w3schools.com/jsref/prop_loc_search.asp
Put the code below the DIV that you want to show, so the element has been created. Then just do a simple if(hash == "#otherStuff"){ /* Do stuff */ } Where in "Do stuff" you would just run the open function.
listen to the hashchange event which is triggered on the window object. then you can show the div or do what you want with it.
Something along the lines of this;
About
<div id="mydiv_about" style="display:none">
</div>
Media
<div id="mydiv_media" style="display:none">
</div>
and some javascript
window.addEventListener("hashchange", function(){
document.getElementById("mydiv_"+document.location.hash.substr(1)).style.display="block";
},false);
//edit
updated to reflect a working example
On page load I bind Event Handlers with content which is hidden on at the time of page load.
If users clicks on the button, the hidden content is pulled and replaces the main content of the page, Now the event Handlers which were initially binded do not work.
HTML code on Page load
<p> Initial content of the page </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
After the user clicks a button the new dom looks some thing like this
<p>
<div>Some Hidden content</div>
</p>
After the manipulation the event handlers binded to the div element do not work any more. Please notice that the div goes into the P element after DOM Manipulation.
jQuery Code:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later);
});
$(document).ready(function(){
$('.show-later').click(function(){
// Do something.....
});
});
You're not moving the <div>, you're just taking its content (a text node) and copying that to the paragraph. Contrary to what you've stated in the question, the resulting DOM will actually look like this:
<p> Some Hidden content </p>
<button id="button"> Click Here to change content</button>
<div class="show-later" style="display: none;"> Some Hidden content </div>
The <div> is still there, it still has content, and it still has the event handler for click bound to it; but it's also still hidden, so there's no way you can click on it.
I'd suggest that you actually move the <div> into the <p> element, like so:
$('.show-later').show().appendTo('p');
That will select the <div>, make it visible, and then move the element itself into the <p>.
have you tried to change your code like this?
$(document).ready(function(){
$(document).on('click', '.show-later', function(){
// Do something.....
});
});
Update2:
$('#button').click(function(){
var show_later = $('.show-later').html();
$('p').html(show_later).addClass('show-later');
});
Update1: I'm not sure, what your problem exactly is. Maybe you want to make a jsfiddle-example...
The 'on'-Method registers events so that even if you remove the element a make a new one, the events is already registered.
If you do
var show_later = $('.show-later').html();
$('p').html(show_later);
then no event handler bound to .show-later will become bound to the p. All you're doing is changing the contents of the p. I suggest changing the HTML as such:
<p class="hide-later"> Initial content of the page </p>
<p class="show-later" style="display: none;"> Some Hidden content </div>
<button id="button"> Click Here to change content</button>
and the javascript as such:
$('.show-later').show();
$('.hide-later').hide();