I'm working on a project in php. I've a slider and an add button. If I click on the add button, a new slider along with another add button and a delete button will display. If I click on add button, the same cycle will go on and if I click on the delete button, the same line will disappear.
I've tried this one:
<div id="time">
<div id="slider-range1"></div>
<span id="utility2"></span>
<a class="add_time" href="#">Add</a>
</div>
$("#time").delegate(".add_time", "click", function(){
var content = '<div>'
+'<div id="slider-range2"></div>'
+'<span id="input_time1"></span>'
+'<a class="del_time" href="#">Delete</a>'
+'<a class="add_time" href="#">Add</a>'
+'</div>';
$("#time").append(content);
return false;
});
$("#time").delegate(".del_time", "click", function(){
$(this).parent().remove();
return false;
});
You also can try to display or not the specific div that you wish or not to show up, as for example:
<div id="time">
<div id="slider-range1"></div>
<span id="utility2"></span>
<a class="add_time" href="#">Add</a>
<div id="slider" style="display:none;">'
<div id="slider-range2"></div>'
<span id="input_time1"></span>'
<a class="del_time" href="#">Delete</a>'
<a class="add_time" href="#">Add</a>'
</div>
$(document).ready(function() {
$('.add_time').click(function() {
$("#slider").css("display","block");
});
});
You also can hide the slider defining the display to none in the javascript
Related
I have a list of items on my page from a DB table
I am trying to change the glyphicon when checked
<div class="div1">
<span id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>
this is the script on the top of my page:
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").load("clicked.php");
});
});
</script>
clicked.php looks like:
<span id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>
The problom is the when I click on one item - all the items change there glyphicons
What am I doing wrong?
You just have to remove & add new class:
$(document).ready(function(){
$(".div1").click(function(){
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
//Here you can add ajax call
});
});
There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.
Also using the right scope, $(this) will stop it effecting all your div1 elements.
<script>
$(document).ready(function(){
$(".div1").click(function(){
//$(".div1").load("clicked.php");
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
});
});
</script>
And to make the code toggle from one to another on each click
<script>
$(document).ready(function(){
$(".div1").click(function(){
if ( $(this).children('span').hasClass('glyphicon-ok') ) {
$(this).children('span').removeClass('glyphicon-ok');
$(this).children('span').addClass('glyphicon-eye-open');
} else {
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
}
});
});
</script>
I have anchor tags that when clicked, create popovers. After clicking a button in the popover, an ajax call is made which updates a database. The popover disappears and the div containing the popover anchor tags is refreshed. Following the div refresh, the anchor tags no longer display the popovers when clicked and when an anchor tag is hovered, it displays a title equal to the popover title. What is causing the popover not to work after a div refresh?
div that gets refreshed
<div class="content" id="content">
<div class="row">
<div class="col-3 heading">A</div>
<div class="col-3 heading">B</div>
</div>
<div class="row">
<a href="#" class="col-3 data
edit" data-toggle="popover" data-trigger:'click' data-html="true"
data-placement="top" title=""
data-content="
<div id='error'></div>
<form id='editForm'>
<input type='number' maxlength='5'class='form-control'
name='newAmount' id='newAmount'
value=''placeholder='New Amount'>
<br>
<input type='hidden' value='Car/Auto' name='catName'id='catName'>
<input type='submit' class='btn btn-primary btnPopover form-
control' value='Change'id='btnEdit' name='btnEdit'>
<a class='btn btn-warning btnPopover form-control'
id='btnCancelEdit'>Cancel</a>
</form>"
data-original-title="<div class='popoverTitle'>Edit </div>">
$900</a>
<div class="col-3 data">$500</div>
</div>
</div>
jquery to originally initialize popovers
$(function () {
loadPopovers();
})
function loadPopovers() {
$('[data-toggle="popover"]').popover();
$('.edit').click(function(){
$(this).popover('show');
$('[data-toggle="popover"]').not(this).popover('hide');
});
}
jquery ajax for div refresh
$(document).on('click','#btnEdit',function(e){
e.preventDefault();
var newAmount = $('#newAmount').val();
if(newAmount.length == 0){
document.getElementById("error").innerHTML = "<span
class='error'>Type a new amount or click cancel.</span>";
}else {
$.ajax({
type: 'post',
url: 'edit.php',
dataType: "json",
data: $('form').serialize(),
success: function (response) {
if(response.status === 'success'){
//Refresh div data
$.get("dataRefresh.php", {},
function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
}
}
});
}
});
Change
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
});
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
To
//Refresh div data
$.get("dataRefresh.php", function (returnedHtml) {
$("#content").html(returnedHtml);
$('[data-toggle="popover"]').popover('hide');
loadPopovers();
});
If you are going to use direct bindings, you have to run them after the data is rebuilt.
I have a page that loaded with ajax complete,
I have buttons on the page (load with ajax), so I want after click the button run an alert event,
I try bind,delegate,live,on Event to attach the Event to handler but no result.
I'm try add test btn manually and that call the event but the buttons that load via ajax not call Event.
My html code:
<body>
<a href='#' class='insert_cm'>test btn</a>
<div class="header"></div>
<div class="wrap">
<div class="rightmenu"></div>
<div class="content">
</div>
</div>
</body>
my JQuery code:
$(function(){
$(".header").load("header.html");
$(".rightmenu").load("sidebar.html");
$.ajax({
type:'POST',
url:'timeline.php',
success:function(data){
$(".content").html(data);
}
});
//insert comment after click the cm-btn
$( ".insert_cm" ).live( "click", function() {
alert( "User clicked on 'foo.'" );
})
});
and the php code:
<?php
include('db_inc.php');
include("myfunc.php");
$functionId=$_POST[functionId];
switch($functionId){
case "":
$music_query = $connection->query("SELECT * FROM music LIMIT 15") or die($connection->error);
while($music = $music_query->fetch_array()){
$music_id=$music['msuic_id'];
$music_thumb =$music['music_thumb'];
$music_name=$music['file_name'];
echo "<div class='music-item'>
<div class='music-avatar'>
<img src=admin/thumb/$music_thumb alt='avatar'>
</div>
<div class='music-post'>
<h3> $music_name <a href='#' class='like_music' >لایک</a></h3>
<p> $music_composer </p>";
$comment_query=$connection->query("SELECT * FROM comments where f_music_id = '$music_id'") or die($connection->error);
while($comments = $comment_query->fetch_array()){
$username = get_username($comments['f_user_id']);
echo "
<div class='username_comment'>
<h4> $username <span>:</span></h4>
$comments[comment];
</div>
";
}
echo "<textarea id='txt_cm' name='txt_cm'></textarea>
<a href='#' class='insert_cm'>insert comment</a>";
}
}
?>
always use $(document).on() for dynamically created element if you want to bind an event to them.
$(document).on("click", ".insert_cm", function() {
alert( "User clicked on 'foo.'" );
return false;
});
the event binder should sit on document level so that it recognize whenever there are more elements added to DOM
more info on $(document).on() : Is it possible to capture keydown globally on dynamically added text inputs?
Use .on() with updated syntax in the jQuery version > 1.8:
$(".content").on( "click",".insert_cm", function() {
alert( "User clicked on 'foo.'" );
})
Syntax:
$(selector/Closest parent).on(event,target,function(){});
That is called EventDelegation!
Where .content reffers to the closest parent element, you can also use document, document.body too.
Try:
$(document).on("click",".insert_cm",function() {
alert("User clicked on 'foo.'");
return false;
});
I have this piece of markup. Remember all these are coming from the database. I have used foreach loop and in that I am getting those values
<div id="announcment-wrap">
<div class="announcement-text">
This is again a dummy
| click here
<a id="close" href="#" class="close">X</a>
</div>
<div class="announcement-text">
This is demo 3
| Demo3
<a id="close" href="#" class="close">X</a>
</div>
<div class="announcement-text">
This is demo 4
| Demo again
<a id="close" href="#" class="close">X</a>
</div>
</div>
Now you can see there is a close button <a id="close" href="#" class="close">X</a>. I want that when someone will click on close button then it will only hide that div()
In jquery when I used
jQuery(document).ready(function($) {
jQuery('#close').click(function() {
jQuery('.announcement-text').hide();
});
});
it is only working for the first block and also it is hiding the total all blocks? So can someone tell me how to make that when someone will click on that close button and it will hide that particular block.Thanks
ID should be unique so use selector as .close not #lose
Try http://jsfiddle.net/devmgs/ZGjaj/
Your each text is
<div class="announcement-text">
This is again a dummy
| click here
<a id="close" href="#" class="close">X</a>
</div>
USe
$(document).ready(function($) {
$('.close').click(function() {
$(this).closest('.announcement-text').hide();
});
});
Try:
jQuery(document).ready(function($) {
jQuery('#close').click(function() {
jQuery(this).parent('.announcement-text').hide();
});
});
Id's should be unique so use class instead,and try using .closest()
| Demo3
<a class="close" href="#" class="close">X</a>
-----^
jQuery(document).ready(function($) {
jQuery('.close').click(function() {
jQuery(this).closest('.announcement-text').hide();
});
});
Since the close button is inside the div, u can make use of the .parent() function to select the div.
jQuery(document).ready(function($) {
jQuery('#close').click(function() {
jQuery(this).parent().hide();
});
});
all the best!! hope this helps.
You need to use the class i.e .close to work for all close close button Or specify different id to all of them .
jQuery(document).ready(function($) {
jQuery('.close').click(function(){
jQuery(this).closest('.announcement-text').hide();});});
First of all, you cannot have the same ID for all the Close buttons, Remove duplicate ID.
This won;t work in IE7 <
$(document).ready(function($) {
$('.close').click(function() {
$(this).parent('.announcement-text').hide();
});
});
I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.