I have a simple table with buttons: <button class='btn btn-info' href='#'>More</button>, and I need that when user click by "More" button then array ($records, for example) and "Less" button will be shown under "More" button. For example, $records[0]="1", $records[1]="2". Please, I don't know JavaScript and JQuery very well, but I need to do it using Ajax. So, I very need your help. Thank you.
UPDATE:
$("button.btn-info").click(function() {
alert('click');
});
It's code for clicking by "More button", but I don't know how to write $records array under this button with "Less" button (which will hide the array by click) at the end.
PHP (sample only):
<?php
$records = array(1,2,3,4,5,6,7);
?>
HTML:
<html>
<body>
<div id="more">
<button>More</button>
</div>
<div id="less" style="display: none;">
<div id="codes" style="border-top: 1px dotted #d0d0d0;">
<?php
for($i=0; $i<count($records); $i++) {
printf("$records[%d] = %d<br />",$i,$records[$i]);
}
?>
</div>
</div>
</body>
</html>
JS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$('div#more button').click(function() {
$('div#less').toggle();
if (i) { $(this).html('Less'); i=0; } else { $(this).html('More'); i=1; }
});
});
</script>
P.S. Do not forget to include the jQuery plugin or this won't work.
EDIT: There it is jquery.min.js
Demo fiddle: http://jsfiddle.net/fe9wv/
You can use Jquery for this, below is a rough example
Assumptions:
ALL the buttons have an ID(required for fetching data through ajax)
The table cell in which you have the button ,also has a with display style as hidden and class as 'dataspan'
$('.btn-info').live('click',function(){
var id = $(this).attr('id');
$.ajax({
type : "POST",
url: "YOUR TARGET URL",
dataType : "HTML",//you can also use JSON
data : 'id=' + id,
success: function(data)
{
$(this).siblings('.dataspan').html(data);
$(this).siblings('.dataspan').append('<button class="hidedata" value="HIDE"/>');
$(this).siblings('.dataspan').show();
}
});
});
//FOR hiding the data
$('.hidedata').live('click' , function(){
$(this).siblings('.dataspan').hide();
});
Please note that as per the latest JQuery release the .live function has been deprecated, if you are using the latest version I will strongly recommend you to switch to delegate function
Related
I have multiple divs on my website that are clickable. I simply want that when the user clicks this div, a class is then added so they know they have viewed this.
For example, we could have a list of 10 links on the site. Once they click a link, the 'viewed' class would be added, to set a background colour to green.
I know the below is a simply way to do this in jQuery, but if someone could please help with storing this in PHP it would help so much, I am quite stuck on this!
$(function() {
$('.clickable-links > div').click(function() {
$(this).addClass("viewed");
});
});
.viewed {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<div class="clickable-links">
<div class="link1">Lnk 1</div>
<div class="link2">Lnk 2</div>
<div class="link3">Lnk 3</div>
</div>
You could add a jquery ajax in order to save the status change in your php.
By example:
$(function() {
$('.clickable-links > div').click(function() {
link= $(this).text()
$(this).addClass("viewed");
$.ajax({
type: "POST",
url: "/url/to/php/script",
data: "link=" + link,
})
})
});
Then in your PHP script you acces the clicked link with:
$link=$_POST['link']
It's just a thought. It can be improved.
I'm working on a portfolio for someone who isn't very technically proficient at the moment. He is going to need to regularly add new content to his portfolio, which means that either he is going to need to learn how to hard code new buttons, text, and pictures into his website, or I'm going to need to regularly do this for him.
My current design for the website includes a php script that automatically populates a navigation bar based on the contents of a directory. My goal is that when a user clicks on one of the navigation buttons, it will trigger an ajax event that calls a php script to load all of the images from that particular event into my main content div. Here is the script for the nav bar:
<div id="eventsbar">
<div id="eventslistleft">
<?php
$eventlist = preg_grep('/^([^.])/', scandir('events'));
foreach($eventlist as $i => $event){
if($i == 0 || $i % 2 == 0){
echo '<div class="eventbutton" id='.$event.'><img src="/events/'.$event.'/0.jpg"></div>';
}
}
?>
</div>
<div id="infobutton">
</div>
<div id="eventslistright">
<?php
$eventlist = preg_grep('/^([^.])/', scandir('events'));
foreach($eventlist as $i => $event){
if($i != 0 && $i % 2 != 0){
echo '<div class="eventbutton" id='.$event.'><img src="/events/'.$event.'/0.jpg"></div>';
}
}
?>
</div>
</div>
The rendered HTML:
<div id="eventsbar">
<div id="eventslistleft">
<div class="eventbutton" id="fifth"><img src="/events/fifth/0.jpg"></div>
<div class="eventbutton" id="fourth"><img src="/events/fourth/0.jpg"></div>
<div class="eventbutton" id="third"><img src="/events/third/0.jpg"></div></div>
<div id="infobutton"></div>
<div id="eventslistright">
<div class="eventbutton" id="first"><img src="/events/first/0.jpg"></div>
<div class="eventbutton" id="second"><img src="/events/second/0.jpg"></div>
</div>
</div>
And here is the script to call the image load function:
<script>
$(".eventbutton").click(function(){
alert("clicked");
currentevent = this.id;
$.ajax({
type: "GET",
url: "scripts/load.php",
data: "cevt="+currentevent,
success: function(msg){
$('#Content').html(msg);
}
});
});
</script>
For whatever reason, though, the click event only triggers when I click on the last navigation button. I suspect that the click event is not triggering at all because I do not see the alert that says "clicked" when I click any navigation buttons except for the one which is rendered last. Does anyone have experience with a similar issue? Any suggestions for what I can do to correct this problem?
if($i != 0 && $i % 2 != 0){
echo '<div class="eventbutton" id='.$event.'><img src="/events/'.$event.'/0.jpg"></div>';
}
Because all the the buttons are dynamically added to the form so the event should be attached to the parent.
$("#eventslistright .eventbutton").on( "click", function() {});
or
$( "body" ).on( "click", ".eventbutton" ,function(){});
If you add navigation button dynamically in page you should use
.on() Read more ... or .live() Until version 1.7 Read more ...
$("#eventsbar .eventbutton").on( "click", function() {
alert("clicked");
currentevent = this.id;
$.ajax({
type: "GET",
url: "scripts/load.php",
data: "cevt="+currentevent,
success: function(msg){
$('#Content').html(msg);
}
});
});
DEMO
If your code loads elements dynamically then method .click wouldn't work because it is declared for elements already existing during js loading. To add some click event action for js loaded elements you must use .on with parameter 'click'. Example above:
<script>
$(function(){
$("html").on('click','.eventbutton', function(){
var currentevent = $(this).attr('id');
alert(currentevent);
$.ajax({
type: "GET",
url: "scripts/load.php?cevt=" + currentevent,
success: function(msg){
$('#Content').html(msg);
}
});
});
});
</script>
I am using bootstrap for my project.
Two things I want to do.
Display the book records.
On clicking on any book show a pop-up and this pop-up will have the record list which can be edited(inline edit)
I have two set of jQuery files (one is for modal window and the other one is for inline editable).
<script src="jquery-2.0.3.min.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script src="js/bootstrap-modalmanager.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="bootstrap-editable.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="modal"]').click(function (e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$(url).modal('open');
} else {
$.get(url, function (data) {
$('<div class="modal hide fade">' + data + '</div>').modal();
}).success(function () {
$('input:text:visible:first').focus();
});
}
});
$('.bookname').editable({
type: 'text',
url: 'post.php',
title: 'Enter username',
validate: function (value) {
if ($.trim(value) == '') {
return 'This field is required';
}
}
});
});
</script>
Here is my html code:
<a data-target="#" class="bookname" id="bookname" href="pop1.php?id=<?php echo $row['book_id']; ?>" data-toggle="modal"> <?php echo $row['book_name']; ?></a>
When I run both the js files seperately I see no issues. When I try to integrate the inline edit inside a modal window there is problem with the modal window close button and also with the inline edit is not working.
Is the issue related to version(version problem)
Any one have faced such problems. Can someone help me out or guide me with an example.
Thanks
Kimz
I am editing my question after in depth searching about my problem basically my website is a fashion display website it displays shoes cloths and bags etc now its obvious that i will be having lots of pics i was solving my problem with jquery and javascript that when a user clicks a thumbnail on the index page or he goes to the menu and clicks the shoes link javascript opens the larger image in a new tab but now i m switcing to php what i did is below
I made a mysql database having paths to the images like images/zara/thumbnails/shoes for thumbnails and images/zara/shoes for the larger images
when the user clicks on the links for ex(shoes) the link text will be grabbed by jquery like this
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt'}
});
});
});
Further pass it to the php file now here i m facing a problem what i need at the moment is
that how will php make search on the basis of that var txt in the database retrieve the thumbnails of the shoes open a new tab say(shoes.html) and display all the available shoes thuumbnails in divs
Here's the jquery code that should work:
<script>
$(function () {
$(document).on('click', 'div.prodcls img', function (e) {
e.preventDefault();
window.open($(this).attr('src').replace('/thumbnails', ''), '');
});
});
</script>
And some css for good measure:
<style>
div.prodcls img:hover {
cursor: pointer;
}
</style>
Here's a working fiddle: http://jsfiddle.net/DenGp/
Css:
#imagePopup{ float:left; z-index:10; position: absolute;}
Add some positioning
HTML:
<div id="prodtwoid" class="prodcls">
<img src="images/thumbnail/zara/2.png" alt="ZARA"/>
</div>
<div id="prodthreeid" class="prodcls">
<img src="images/thumbnail/puma/1.png" alt="PUMA"/>
</div>
<div id="prodfourid" class="prodcls">
<img src="images/thumbnail/hermes/1.png" alt="HERMES"/>
</div>
//This is you popup div
<div id='imagePopup' style='display:none'>
</div>
JS:
$('.prodcls').click(function(){
var src = $(this).attr('src').replace('/thumbnail', '');
$("#imagePopup").html("<img src='"+src+"'/>")
$("#imagePopup").toggle();
});
Updated answer:
HTML: (give every image a link):
<a href='showImage.php?img=path/of/image.jpg'><img src='path/of/thumb.jpg'/></a>
showImage.php:
$sImagePath = $_GET['img'];
echo "<div class='imgDiv'>";
echo "<img src='$sImagePath' />";
echo "</div>;
You can open actual image in new browser tab without jQuery:
For Example:
<div id="prodoneid" class="prodcls">
<a href='images/zara1.png' target='_blank'>
<img src="images/thumbnail/zara/1.png" alt="ZARA"/>
</a>
</div>
Perhaps a lightbox is what you really need? take a look at this library: http://www.huddletogether.com/projects/lightbox2/
You have an error in your AJAX code (your forgo to include the actual var:
$(document).ready(function() {
$('ul.sub_menu a').click(function() {
var txt = $(this).text();
$.ajax({
type: 'POST',
url: 'thegamer.php',
data: {'txt':txt} //added :txt here
});
});
});
Now in PHP:
$txt = $_GET['txt'];
//Now lookup $txt in you msyql db
//And echo the result, so JS can read it.
I am using jQuery to load a page by AJAX using $.ajax (suppose test.html).Its a simple HTML document with a few buttons and associated animations upon clicking them (also using jQuery).The .click() properties associated are working fine when I load the page directly but the buttons fail to respond when I click them in the AJAX loaded version.Since I am too tires to actually explain all the glum that I am doing, I am simply writing all the code below, apologies for this. Here are the required codes in the files.
<!-- p11.php -->
<!DOCTYPE html">
<html>
<head>
<title>jQuery</title>
<script type="text/javascript" src="c/js/jquery.js"></script>
<script type="text/javascript" src="c/js/jtry11.js"></script>
<link rel='stylesheet' type='text/css' href='c/css/css11.css'>
</head>
<body>
<button id="go1">Load Something Using AJAX</button>
<div id="msg"></div>
<div id="showButton">
<button id="showLoadedPage">Show the Page</button>
</div>
<div id="results"></div>
</body>
</html>
and the next
$(document).ready(function()
{
$('#results').hide();
$('#msg').hide();
$('#showButton').hide();
$('#loading').hide();
$('#loaded').hide();
$('#load').live('click', function()
{
$('#load').hide();
$('#loading').show();
$('#msg').show('fast');
$.ajax({
url: 'test.html',
cache: false,
success: function(html) {
$('#results').append(html);
}
});
$('#msg').ajaxSuccess(function(evt, request, settings){
$(this).append('Click the Button Below to View the Page');
$('#showButton').show('slow');
$('#hideLoadedPage').hide();
$('#loading').hide();
$('#loaded').show();
});
});
$('#showLoadedPage').live('click', function() {
$('#loaded').hide('slow');
$('#msg').hide('slow');
$('#results').show('fast');
$('.shower').hide();
$(this).hide();
$('#hideLoadedPage').show();
});
$('#hideLoadedPage').live('click', function() {
$('#results').hide('fast');
$('.shower').hide();
$(this).hide();
$('#showLoadedPage').show();
});
$('.hider').live('click', function() {
$('.shower').show();
$(this).hide();
$('p.one').hide('slow');
$('p.two').hide('medium');
$('p.three').hide('fast');
});
$('.shower').live('click', function() {
$('.hider').show();
$(this).hide();
$('p.one').show('slow');
$('p.two').show('medium');
$('p.three').show('fast');
});
$('p.*').live('click', function() {
$(this).hide('slow');
if( $('p').is(':hidden') ) {
$('.shower').show();
}
if( $('p.*').is(':hidden') ) {
$('.hider').show();
}
});
});
and the last
<!-- test.html -->
Page Loaded by Ajax.
Not the original Page
<center>
<button class="hider">
<img src="c/images/zoom_out.png" alt="zoom_out" />
Hide 'em
</button>
<button class="shower">
<img src="c/images/zoom_in.png" alt="zoom_out" />
Show it
</button>
<p class="one">Hiya</p>
<p class="two">Such interesting text, eh?</p>
<p class="three">The third Paragraph</p>
</center>
I hope I am not making some big time mistake?
Sounds like you need
$('#go1').live('click', function() {});
$.fn.live, as event handlers are only registered on initial dom creation, and you're repopulating the DOM and those aren't attached.
More info # http://docs.jquery.com/Events/live
If i'm reading that right you are adding the click handlers at the beginning. These only affect current buttons. You may just need to change that to a Live event.
$("#peopleResult_list").on('click','a', function(event){
//do you code here
});
on event work for current dom in your page and any dom loaded by ajax in the future