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
Related
Using the following code for facebook comment box on my site. There is a link to show or hide Comments box. I just want to remove this link and make the comment box appear always.
Code in header.php
<script type="text/javascript">
$(document).ready(function(){
$('.link').toggle(
function () {
if($('#box').text() == '') {
$.ajax({
url:'./comments.php?url=<?php echo $domain.$path; ?>',
method:'GET',
success:function(r) {
$('.link').html('hide comments ∧');
$('#box').html(r).hide().slidedown(1000);
},
error:function() {
alert('file does not exist');
}
});
} else {
$(this).html('Hide Comments ∧');
$('#box').slideDown(750);
}
},
function () {
$(this).html('Show Comments ∨');
$('#box').slideUp(750);
}
);
});
Code in index.php
<span class="link" style="color:#FFA300;cursor:pointer;font-weight:bold;">Show Comments (<fb:comments-count href=<?php echo $domain.$path; ?>></fb:comments-count>) ∨</span>
Code in comments.php
<?php
if(isset($_GET['url']))
{
?>
<div style="padding:5px;">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="<?php echo $_GET['url']; ?>" num_posts="5" width="626"></fb:comments>
<script>FB.XFBML.parse();</script>
</div>
<?php
}
?>
I have little knowledge in PHP and other languages and due to that i am unable to figure out the necessary changes required to make this comment box appear without clicking show comments link.
Any help would be greatly appreciated.
Try this
$(function(){
$.ajax({
url:'./comments.php?url=<?php echo $domain.$path; ?>',
method:'GET',
success:function(r) {
$('#box').html(r).slidedown(1000);
},
error:function() {
alert('file does not exist');
}
});
});
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 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
I have the following code to generate Jquery UI tabs:
<div id="tabs-loading-message" style="display:none">Loading, Please wait..</div>
<div id="fragment-2">
<ul>
<li><span>Animals</span></li>
<li><span>Birds</span></li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#tabs-loading-message").show();
$('#fragment-2').tabs(
{
cache:false, spinner:'', selected: 0 ,
select: function(event,ui) {
//show spinner
$("#tabs-loading-message").show();
},
load: function() {
// hide spinner
$("#tabs-loading-message").hide();
}
}
);
});
</script>
I am able to display the loading message, but how can I hide the contents of the tab panel, when it's selected and show the contents when loaded?
you can catch success event from ajax:
.tabs({ajaxOptions: {success: function() {
$("#tabs-loading-message").hide();
}}});
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