I'm facing problem with jquery
here is my code
<script type='text/javascript' src='jquery-1.10.2.min.js'></script>
<script type="text/javascript">
$(function() {
$(".more2").click(function() {
var element = $(this);
var msg = element.attr("id");
$.ajax({
type: "POST",
url: "insta2.php",
data: "lastmsg="+ encodeURIComponent(msg),
success:function (data) {
$("#morebutton").replaceWith(data);
}
});
return false;
});
});
</script>
<span class="more" id="morebutton">
<a id="1" class="more2" title="Follow" href="#" style="color:#000">
Read More
</a>
</span>
and here is insta2.php
<?php
if(isset($_POST['lastmsg']))
{
$a= $_POST['lastmsg'];
$a = $a++;
?>
<br>
<span class="more" id="morebutton">
<a id="<?php echo $a;?>" class="more2" title="Follow" href="#" style="color:#000">
<?php echo $a;?> Read More
</a> </span>
<?php }?>
my jquery only one 1 set and after that every click not working
is there any way to continue counting ?
like this
Read More
1 Read More
2 Read More
3 Read More
4 Read More
and so on...
Your ajaxed in content does not have the jquery listener attached to it. Basically, your jquery will run only on your original HTML.
You can bind your click event to an element that is always on the page using the .on() function, and use the selector parameter to define your read more links. (Please read the jQuery manual for more info on this).
Eg:
$('body').on('click', 'span.more', function(){
// Do your ajax stuff
});
This will bind the click event to your body as opposed to 'span.more' and will work for any span.more added to the body.
Edit - JS Fiddle:
http://jsfiddle.net/g8G83/
<span id="more">
<a id="1" class="more2" title="Follow" href="#" style="color:#000">
Read More
</a>
</span>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function() {
$(".more2").click(function readmore() {
var element = $(this);
var msg = element.attr("id");
$.ajax({
type: "POST",
url: "insta2.php",
data: "lastmsg="+ encodeURIComponent(msg),
success:function (data) {
$("#more").append(data);
$(".more2").off("click");
$(".more2").on("click",readmore);
}
});
return false;
});
});
</script>
Related
I am doing a comment system. Yesterday I asked for the same problem in stackoverflow and I didn't get any answer. Now I have simplified the code, so I hope that its easier to understand. I also write complete code if someone what to try it.
The main HTML page has multiple divs:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="jscripts/actions.js"></script>
</head>
<body>
<div class="comments_div" id="comments_div" data-id="22" >
div_22--->
<div class="comments_more_22" id="comments_more"> </div>
</div>
<br>
<div class="comments_div" id="comments_div" data-id="23" >
div_23--->
<div class="comments_more_23" id="comments_more"> </div>
</div>
<br>
<div class="comments_div" id="comments_div" data-id="24" >
div_24--->
<div class="comments_more_24" id="comments_more"> </div>
</div>
<br>
</body>
The jQuery/JavaScript functions open/hide the div and show the post_id (data-id). It works perfectly.
//Open div
$(function() {
$(".comments_div").click(function() {
var post_id = $(this).attr('data-id');
$.ajax({
url: "jscripts/comment.php",
type: "POST",
data: { post_id: post_id },
success: function(datos) {
$('.comments_more_' + post_id).html(datos);
$('.comments_more_' + post_id).show('slow');
//alert(post_id);
}
});
});
})
//Hide div
$(document).mouseup(function (e){
var container = $('div[id^="comments_more"]');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{ container.hide('slow'); }
});
//Put text in some div
function showText()
{ document.getElementById("flash").textContent = 'works!';}
...and comment.php (here the code will be more complicated, with forms, captchas, etc)
<?php
echo 'post_id: ';
echo $_POST['post_id'];
?>
<div class="flash" id="flash">- </div>
<span style="margin-left:20px;"><small>click<a href='javascript: showText();'>here</a> </small></span><br/>
Nice, isn't it?.
But I need to execute another JavaScript: showText(). This script works when you click in this order: div_24, div_23, div_22. But stop works when you try click first div_22, then div_23,... etc.
Well I solved the problem: the div "flash" must have a unique id, so showText can find the correct div.
<?php
echo 'post_id: ';
echo $_POST['post_id'];
$post_id=$_POST['post_id'];
?>
<div class="flash" id="flash_<?php echo $post_id; ?>">- </div>
<span style="margin-left:20px;"><small>click<a href='javascript: showText();'>here</a> </small></span><br/>
<script type="text/javascript">
//Put text in some div
function showText()
{
var post_id = "<?php echo $post_id; ?>" ;
document.getElementById("flash_" + post_id).textContent = 'works!';
}
</script>
:P
I have two pages: test.php and backend.php.
test.php has three images which when clicked takes the user to backend.php. I want the src of the image clicked to be displayed on backend.php. I am trying to achieve this task via JavaScript and Ajax but the src of the image doesn't appear on backend.php. Code for the same are given below:
test.php:
<?php
session_start();
?>
<html>
<head>
<script src="jquery-1.9.1.js">
</script>
<script>
function clickIt(data){
$.ajax({
url: 'backend.php',
data: {"imgsrc":data},
type: 'post',
success:function(res){
alert(res.message);
}
});
}
</script>
</head>
<body>
<a href="backend.php">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="backend.php">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
</html>
backend.php:
<?php
session_start();
?>
<?php
echo $_POST['imgsrc'];
echo 'Back';
?>
What am I possibly doing wrong?
Try this;
HTML:
<body>
<a href="javascript:void(0);">
<img onclick="clickIt(this.src)" src="img1.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img2.jpg"/>
</a>
<a href="javascript:void(0);">
<img onclick="changeIt(this.src)" src="img3.jpg"/>
</a>
</body>
Jquery:
function clickIt(data){
window.location.href = 'backend.php?imgsrc='+data; // redirect to backend.php
}
In backend.php
<?php
echo $_GET['imgsrc']; // use $_GET
echo 'Back';
?>
Click event of tag is not firing because tag takes the
page to backend page before tag click event gets fired. You can resolve this problem simply by removing the tag from each line.
You cannot access ajax response as res.message as you haven't echo the response in json format. You can access response simply from res variable
Also change the function name to changeIt to clickIt as you have defined function has clickIt
// use only res
success:function(res)
{
alert(res);
}
<img onclick="clickIt(this.src)" src="img1.jpg"/>
<img onclick="clikcIt(this.src)" src="img2.jpg"/>
<img onclick="clickIt(this.src)" src="img3.jpg"/>
I am really stumped by this one. I have a template which contains data. I alert the variable containing this rendered template to prove it contains the data. I have tried using html() innerHTML() and others to then convert it before appending it. Using identical jquery syntax, I am able to append a div exactly as I desire, except with different contents.
success: function (data) {
if (data['success'] == 1) {
$.get('templates/PostReply.mustache', function(file){
var newPostArray={"reply_body":bodyText,
"replier_username": "<?php echo $sess_username; ?>",
"replier_profimg0": '<?php echo $sess_profimg0; ?>'
};
var html = Mustache.render(file, newPostArray);
$('#new-posts-container').append(html);
alert(html);
$(form).closest('#reply-divy').nextAll('#new-posts-container').append('<div>hello</div>');
//this works
$(form).closest('#reply-divy').nextAll('#new-posts-container').append(html);
// this does not work
e.preventDefault();
});
// You could also use the data['message'] that got sent back here.
}
},
So for some reason, the contents are unable to append. I am not receiving any errors.
This is what html looks like in an alert:
<div class="reply-div">
<div class="pull-left feed-entity-side-img">
<a href="profilepage.php?username=cb_snn">
<img src="photos/user_photos/public/2015/02/12/04/1ded2487680.jpg" alt="User" class="media-object no-padding reply-side-img"/>
</a>
</div>
<div class="media-body" style="padding-bottom:5px;">
<span class="pull-right" style=""> </span>
<span ><b>co_byrne</b></span>
<p> dgsadgasdgasdgasdgasdgasdgs
</p>
</div>
</div>
I am trying to implement a vote up/down functionality on comments.
For that, I've placed two buttons in every comment. Using jQuery's each() and click() functions, I am trying to get the button's id that was clicked, fire an ajax request to aother page, and then disable both vote up/down buttons for that specific comment using the success() callback.
For initial verification of whether it works or not, I'm trying this on just two comments i.e. 4 buttons, and then disabling a specific pair of them, irrespective of which button is clicked.
I've tried 3-4 different selector queries, but the only one that works is where I specifically pass the exact id attribute's value of the button that I click on. I need to implement this in a general fashion, on a page with multiple comments and their buttons!!
Here's the PART of the HTML code on which I'm trying to use the jQuery:
<section class="section content">
<div class="content-wrapper">
<div class="zone-content equalize zone clearfix">
<div class="content-container container-16">
<div class="comments block">
<div class="block-title-2">
<h2>Comments on Place X</h>
</div>
<div class="review-messages">
<div class="review first">
<div class="review-author">
<b>
<span class="author">John</span> - <span class="date">April 10, 2013 at 7:34 pm</span>
</b>
</div>
<br>
<div class="review-text">
Best place to have abcdef food in yyyyy. !!!
</div>
<br>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-success" id="test_id_1"><i class="glyphicon glyphicon-thumbs-up"></i></a></button>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-danger" id="test_id_2"><i class="glyphicon glyphicon-thumbs-down"></i></a></button>
</div>
<div class="review last">
<b>
<div class="review-author">
<span class="author">John</span> - <span class="date">April 10, 2013 at 7:34 pm</span>
</div>
</b>
<br>
<div class="review-text">
<p id="text1">Great xxxx and a good place to yyyy :)</p>
</div>
<br>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-success" id="test_id_3"><i class="glyphicon glyphicon-thumbs-up"></i></a></button>
<!-- xxxxxxx SELECT ONE OF THESE TWO --> <button class="btn btn-circle btn-danger" id="test_id_4"><i class="glyphicon glyphicon-thumbs-down"></i></a></button>
</div>
</div>
<div class="comment-message">
<div class="comment-message-title">
Leave a <span class="text-colorful">Comment</span>
</div>
<form class="comment-message-form">
<textarea class="text-input-grey comment-message-main" placeholder="Your Comments Here"></textarea>
<div class="thin-separator"></div>
<input type="submit" class="button-2-colorful to-right" value="Post Comment" name="comment" />
</form>
</div>
</div>
</div><!-- end of .content-container -->
</div><!-- end of .zone-content -->
</div><!-- end of .content-wrapper -->
</section>
Here are the various jQuery selector codes I've tried:
1. DOESN'T WORK
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('div button[id^="test_id_"]').each(function(){
$(this).click(function(e){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$(this).attr("disabled",true);
});
});
});
});
</script>
2. DOESN'T WORK
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('button').click(function(e){
$('button[id^="test_id_"]').each(function(){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$(this).attr("disabled",true);
});
});
});
</script>
3. SPECIFIC ELEMENT SELECTOR QUERY. WORKS.
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#test_id_1").click(function(e){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$("#test_id_1,#test_id_2").attr("disabled",true);
});
});
});
</script>
And this is the page that will receive the Ajax POST request, implemented as a simple stub. I've also used it's echo output in the success() callback to print it, so as far as I'm concerned, this file doesn't have any errors. Probably. :
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
1) Your loops are complex which is not need.
2) Inside the success callback, this is not your button, you should keep a reference to it.
3) Using prop for disabled attribute is preferred.
$(document).ready(function() {
$('button').click(function(e){
var $button = $(this);
var name = {"name": $button.attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$button.prop("disabled", true);
});
});
});
Your code is very close but you don't need to iterate buttons using .each(), simply bind click event and you will get instance of clicked button i.e. $(this) and use that instance to disable the button. see below code -
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('button[id^="test_id_"]').click(function(e){
var name = {"name":$(this).attr("id")};
$.ajax({
url: 'receiveajax.php',
data: name,
type: 'POST',
}).success(function(data) {
$(this).attr("disabled",true);
});
});
});
</script>
How to remove and display this elements when ajax success ?
i want to remove this elements when success
<a class="hyper" id="1234567890">
<div class="mine">
<img src="moo.png"/>
</div>
</a>
and display this elements when success
<a class="success" id="1234567890">
<div class="sura">
<img src="naa.png"/>
</div>
</a>
and this is my ajax post code
$('body').on('click','.hyper',function() {
var my_id = $(this).attr('id');
var postData = 'mydata='+my_id+'&time=now';
$.ajax({
type: "POST",
url: "my_post.php",
data: postData,
cache: false,
success: function()
{
}
});
})
When i use follow Zentoaku
$('#1234567890').removeClass('hyper').addClass('success').html('<div class="sura"><img src="naa.png"/></div>');
after success my element display
<a class="hyper" id="1234567890">
<div class="mine">
<img src="moo.png"/>
</div>
<a class="success" id="1234567890">
<div class="sura">
<img src="naa.png"/>
</div>
</a>
</a>
but after success i want to see this
<a class="success" id="1234567890">
<div class="sura">
<img src="naa.png"/>
</div>
</a>
how can i do ?
To Hide you can use following:
success: function()
{
$('.hyper').hide();
}
You can also use remove() method to completely remove the elements from DOM.
To show use this:
success: function()
{
$('.success').show();
}
You can use Id as well as your selector, if you use different ids for both the elements.
NOTE: This solution will be applicable when you have your html code already exists on your page which you have shown in your question.
jQuery has a toggle function, with which you can toggle the visibility of an item.
http://api.jquery.com/toggle/
Your code then could look like this:
$('body').on('click','.hyper',function() {
var my_id = $(this).attr('id');
var postData = 'mydata='+my_id+'&time=now';
$.ajax({
type: "POST",
url: "my_post.php",
data: postData,
cache: false,
success: function(my_id)
{
$('#'+my_id+'.hyper').toggle();
$('#'+my_id+'.success').toggle();
}
});
})
$('#1234567890').removeClass('hyper').addClass('success');
$('#1234567890 > div').removeClass('mine').addClass('sura');
$('#1234567890 > div > img').attr('src', 'naa.png')
OR
$('#1234567890').removeClass('hyper').addClass('success').html('<div class="sura"><img src="naa.png"/></div>');