I have a script inside a div which I want to refresh when someone clicks a button with a unique ID.
I have some data which will be displayed inside the div - which I need to refresh without refreshing the whole page.
I've found a solution which changes a border colour but I can't quite simplify it to what I need. Here's what I have so far
var storeColor = 'red';
$('#container').on('click', 'button', function() {
var $p = $('#content p');
var tmp = $p.css('border-color');
$p.css('border-color', storeColor);
storeColor = tmp;
});
</div>
<button type="button">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
I think there are a few problems with your code... The button is outside of the container and thats the reason the click listener doesn't work. Inside the click function you try to access a paragraph p inside some element with the id content which doesn't exist in your code
var storeColor = 'red';
$('#btnRefresh').on('click', function() {
var $p = $('#container');
$p.css('background-color', 'red');
$p.html('hello world');
});
<button type="button" id="btnRefresh">Refresh DIV</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="container">
Contents of div
</div>
Why not try changing the entire inner content of the div dynamically using document.querySelector('.div').innerHTML = html string
The above will not refresh the page if used upon a button click. You may want to use the preventDefault in the button's event listener too.
Related
I am using JQuery show and hide function, it works like when you click on image it opens a information log. The information log opens at the top of the page, so I need to make that when you click on the image on bottom on the page it scroll you up to the content.
JQuery what I am using for my hide and show content:
jQuery(function() {
jQuery('.showSingle').click(function() {
jQuery('.targetDiv').hide();
jQuery('#div' + $(this).attr('target')).show();
});
});
Scrolintoview function that I tried to use:
function myFunction() {
var elmnt = document.getElementById("targetDiv");
elmnt.scrollIntoView();
}
Content from witch I am calling both functions:
<a onclick="myFunction()" class="showSingle" target="{$ID}">
//HTML content here
</a>
Content what I am calling to shop up at the top of the page:
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
I tried to combine this two JS function but only jQuery('.targetDiv').hide() works for me.
The problem is that your target div
<div id="div{$ID}" class="targetDiv SlideDiv">
//HTML content here
</div>
has some id and the classes targetDiv and SlideDiv.
document.getElementById("targetDiv") tries to find an element with the id targetDiv but your element does not have this id, but is has a class with the same name.
You need to find the element by its class which can be done in a few ways:
1
var elem = document.getElementsByClassName("targetDiv")[0];
2
var elem = document.querySelector(".targetDiv");
3
var elem = $(".targetDiv")[0];
In this case,
I have some div like:
<div class="topImg">
<div class="topImgIcon">
<img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
</div>
</div>
And I want to insert this img link with one icon within this div. Is one X to close the windows but show some html code like form.
See my jQuery code:
var myDivImg = $( "<div class="topImg"></div>" )
$(document).ready(function() {
$("#maisinfo").before(myDivImg, '<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$("#maisinfo").hide();
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
I want to insert the html: <a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a> within .before() inside the div topImg in my HTML. I try create the div inside .before() but, jQuery create other same div.
Someone can help me please and make some explanation for I understand what I did wrong?
If you want to add something inside the DIV, you use .prepend() or .append(), depending on whether you want it at the beginning or end. .before() puts it outside the DIV, right before it.
$("#topDiv").prepend('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$(document).ready(function() {
$(".topImg").append("<div id='maisinfo'></div>");
$("#maisinfo").before('<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>');
$("#maisinfo").hide();
$("#show").bind("click",function(){
$("#maisinfo").slideToggle("slow");
return false;
});
});
</script>
<div class="topImg">
<div class="topImgIcon">
<img src="img/bbbbb.png" class="topImgIcon"><span class="tittle">Chat Window</span>
</div>
</div>
You could insert the div with ".html('xxx')" or with .append/prepend('xxx').
$(document).ready(function() {
var myDivImg = $( "<div class="topImg"></div>" );
// or var myDivImg=$('.topImg'); // => if the element exists
var myInsertDiv='<a class="imgClose" href="javascript:window.close()"><img src="img/close.png"></a>';
// first method
myDivImg.html( myInsertDiv ); // replace all html in this div with the content from "myInsertDiv"
//second method
myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as last child in your "myDivImg"
//or
myDivImg.append( myInsertDiv );// add the html from "myInsertDiv" as first child in your "myDivImg"
});
EDIT:
to close your div use something like this
$('body').on('click','.imgclose',function(){
$('.topImg').slideUp('slow');//close your parent-main div
return false;
});
I wrote the following script that resets the the Iframe Source, removes a class (.play) and adds an image placeholder when .b-close is clicked. I got it to work but the problem is that I have multiple modals and I would like only like to affect the modal that's clicked. I figured that I should use the '$(this)' DOM element in order to achieve this.
<script>
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
$('.pretty-embed').removeClass('play').empty();
$('.pretty-embed').html(vidImgUrl);
$('.b-modal').click(); /// Just trying to close modal..... $.modal.close();
});
});
})(jQuery);
</script>
Here's is the the Modal that I will be calling. Keep in mind that there will be multiple modals, so I would only like to affect the modal that's clicked
<div id="element_to_pop_up" display: block;">
<a class="b-close">x</a>
<h3 class="pop-hd">Header</h3>
<p>Test Video</p>
<div class="pretty-embed play" data-pe-allow-fullscreen="false">
<iframe width="330" height="186" style="border:none;" src="//www.youtube.com/embed/nGSfaMxCu-U?autoplay=1&rel=1"></iframe>
</div>
</div>
The problem is in your $('.pretty-embed') selector which selects all the embed elements in all modals If I understood your problem correctly. To fix that take the id of the modal and prepend it to the selectors like below:
(function($){
var ivid = $('.pretty-embed iframe').attr('src');
$(document).ready(function() {
$(".b-close").click(function(e){
e.preventDefault();
var vidID = $(this).parent().find('.pretty-embed').attr('data-pe-videoid');
var vidImg = "//img.youtube.com/vi/"+vidID+"/maxresdefault.jpg";
var vidImgUrl = '<img src="'+vidImg+'" width="100%" alt="YouTube Video Preview">';
var parent_id = $(this).parent().attr(id);
// Prepend the parent id before the .pretty-embed selector
$('#'+parent_id+' .pretty-embed').removeClass('play').empty();
$('#'+parent_id+' .pretty-embed').html(vidImgUrl);
$('#'+parent_id+' .b-modal').click(); /// Just trying to close modal... $.modal.close();
});
});
Also you can use the same way you did it in the previous lines:
$(this).parent().find('.pretty-embed').removeClass('play').empty();
You can get the current modal with
var current_modal = $(this).parent().find('.pretty-embed');
Then remove the class play, and add your image like this:
current_modal.removeClass('play').empty();
current_modal.html(vidImgUrl);
See your complete code in this jsfiddle
I created new website and on it I want when I click on one div jquery show me div ID and I user this command and I can give div ID
var name = $(this).attr("id");
and when I want to give div's child I use this Command
var name = $(this).children(".select").attr("name");
now I have 3 divs like this
enter image description here
and when I click on div 3 Jquery give me div2 with this command
var name = $(this).children(".select").attr("name");
how can I get div's ID when click on it?
example click on div 1 show me div 1 or when I click on div 2 show me div 2
and when I click on div 3 show me div 3
Thanks
Your first code was correct, you don't need to find children...
$("div").click( function(){
var name = $(this).attr("id");
console.log( name );
});
If you have trouble with multiple events, you can stop propagating the click event with .stopPropagation() like so:
$("div").click( function( e ){
var name = $(this).attr("id");
console.log( name );
e.stopPropagation();
});
See example: https://jsfiddle.net/tg4rmkk9/
You've already solved the main part of the problem:
var name = $(this).attr("id");
This will get you the ID of the Div.
To alert it you can then do alert(name);
Here's a demo of what I think you're going for :
$('[id^=div]').on('click', function() {
alert($(this).attr('id'));
});
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<div id="div1">
Click me
</div>
<div id="div2">
Click me too
</div>
<div id="div3">
Click me three
</div>
(see also this Fiddle)
I append the following content using jQuery to create a lightbox style popup that loads loads content using AJAX:
<div id="framebox-overlay">
<div id="framebox-wrapper">
<div id="framebox-nav-wrapper">
Previous
Next
</div>
<section id="framebox-content">
<!--AJAX to insert #single-project-wrapper content here-->
</section>
<div id="framebox-close">
<p>Click to close</p>
</div>
</div>
</div>
I am trying to get the appended next/previous links to work (.framebox-next and .framebox-prev as shown above), however the links are not triggering properly:
jQuery(document).ready(function(){
$('.framebox-trigger').click(function(e){
// Code that appends lightbox HTML and loads initial AJAX content goes here
});
// Code that isn't working:
$('body').on('click', 'a .framebox-next', function(e) {
e.preventDefault();
//remove and add selected class
var next = $('#portfolio-wrapper li.current-link').next('li > a');
$('#portfolio-wrapper li.current-link').removeClass('current-link');
$(next).addClass('current-link');
//fade out and fade in
var nexthref = $('#portfolio-wrapper li.current-link a').attr('href');
$('#single-page-wrapper').fadeOut('slow', function(){
var current = $('#portfolio-wrapper li.current-link a');
$(this).load(nexthref + " #single-page-wrapper", function(){
$(this).fadeIn('fast');
});
});
return false;
});
});
This last bit of code is not doing anything to the appended link .framebox-next. I have looked for other answers, and it seems that the .on() method should be effecting appended content.
Any help or input would be great.
Your selector is wrong for .framebox-next. You have a space between a and .framebox-next which would mean .framebox-next needs to be a child of the a element.
Use this selector instead:
$('body').on('click', 'a.framebox-next', function(e) {
...
}