When I click add button, it is changed remove button. But I can not change remove button to add button again, When I click remove.
<head>
<script type="text/javascript" src="assets/js/jquery-2.0.3.min.js"> </script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".add").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#" + I).attr("class", "remove");
$(".remove").text("Remove");
return false;
});
});
</script>
<script type="text/javascript" >
$(document).ready(function()
{
$(".remove").click(function(){
var element = this.id;
var I = element.attr("id");
var info = 'id=' + I;
$("#" + I).attr("class", "add");
$(".add").text("add");
return false;
});
});
</script>
<a class="add" id="1" href="#"> Add </a>
When you modify DOM elements with jQuery, anything that is loaded within $(document).ready() won't recognize the change. What you can do is wrap each step in a function, call these on document.ready, then call each again at the end of the other function:
<script type="text/javascript" >
$(document).ready(function()
{
addFunction();
removeFunction();
});
function addFunction(){
$(".add").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#result").text(I);
$("#" + I).attr("class", "remove");
$(".remove").text("Remove");
removeFunction();
return false;
});
}
function removeFunction(){
$(".remove").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#result").text(I);
$("#" + I).attr("class", "add");
$(".add").text("add");
addFunction();
return false;
});
}
</script>
You have both functions listed in document.ready, so you can't attach an event handler to the .remove class since it doesn't exist yet. I would suggest using delegated events:
$( ".LocationOfYourButtonInTheDom" ).on( "click", "ThingBeingClicked", function() {
//code here
});
Edit:
ThingBeingClicked would be the type of DOM object triggering the event, in your case this would be an "a" tag
You can read more about events and delegation from the jquery "on" documentation.
Related
I have script with multiple buttons which when clicked run a php script via AJAX. I would now like the result to show in the div with the button. I have tried this and parent but neither work.
Example below: when clicked on .showme I want the result to show in the #here div within the same its parent.
$(document).ready(function() {
$('.showme').bind('click', function() {
var id = $(this).attr("id");
var num = $(this).attr("class");
var poststr = "request=" + num + "&moreinfo=" + id;
$.ajax({
url: "../../assets/php/testme.php",
cache: 0,
data: poststr,
success: function(result) {
$(this).getElementById("here").innerHTML = result;
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='request_1 showme' id='rating_1'>More stuff 1
<div id="here"></div>
</div>
<div class='request_2 showme' id='rating_2'>More stuff 2
<div id="here"></div>
</div>
<div class='request_3 showme' id='rating_3'>More stuff 3
<div id="here"></div>
</div>
I think this will do:
$(document).ready(function () {
$('.showme').bind('click', function () {
//keep the element reference in a variable to use in ajax success
var _this = $(this);
var id = $(this).attr("id");
var num = $(this).attr("class");
var poststr = "request=" + num + "&moreinfo=" + id;
$.ajax({
url: "../../assets/php/testme.php",
cache: 0,
data: poststr,
success: function (result) {
//use the element reference you kept in variable before ajax call instead of $(this)
//also use jQuery style, getElementById is undefined if you call after $(this)
//.find() will call it's child in any level, also better you use classes instead of using same id multiple times
_this.find("#here").html(result);
}
});
});
});
I was create like button with current value on database and when the button has been clicked the value must be automatically updated on the view.
Currently, the value was successfully updated on database, but not automatically updated on view.
Here is my jquery code:
<script type="text/javascript">
$(document).ready(function(){
$('#like').on('click', function(e){
var id = '{{$news->id}}';
$.get('{{ url('view/like')}}/'+id, function(data){
console.log(id);
console.log(data);
$('#like_data').empty();
$.each(data, function(index, element){
$('#like_data').append("<p>"+this.like+"</p>");
});
});
});
});
</script>
Here is my controller:
public function like($id){
$news = News::find($id);
$news->like += 1;
$news->save();
return $news;
}
You need to pass JSON response from your controller. Like this
public function like($id){
$news = News::find($id);
$news->like += 1;
$news->save();
return response()->json([$news], 200);
}
you don't need to use $.each() for this response because you send only single object response. Just simply write this code:
$('#like_data').html("<p>"+data.like+"</p>");
if you want to use each just simply write:
$.each(data, function (index, element) {
$("#like_data").append("<p>" + element.like + "</p>");
});
Try this
<script type="text/javascript">
$(document).ready(function(){
$('#like').on('click', function(e){
var id = '{{$news->id}}';
$.get('{{ url('view/like')}}/'+id, function(data){
console.log(id);
console.log(data);
$('#like_data').empty();
$.each(data, function (index, element) {
$("#like_data").append("<p>" + element.like + "</p>");
});
});
});
});
</script>
i have this code:
$("#search").keydown(function (e) {
var str = $(this).val();
alert(str);
var url = $("#url").val() + "?ajax=true&q=" + str;
$("#tableWrap").load(url, function () {});
});
#search is id of a textbox that filter information shown in a table. when i type in that for first key the function is firing one time . when i type second key in it the function is firing two time ... .any idea?
Edit:all code.
$(document).ready(function(){
// $("#search").val("جست و جو...");
$("#search").live('click', function(){
$(this).val("");
});
$("#search").keyup(function (e) {
var str = $(this).val();
alert(str);
var url = $("#url").val() + "?ajax=true&q=" + str;
$("#tableWrap").load(url, function(){
});
});
/* $("#search").live('keyup', function(){
var str = $(this).val();
var url = $("#url").val() + "?ajax=true&q=" + str;
$("#tableWrap").load(url, function(){
// $("#search").focus().val(str);
});
});*/
$(".pg_class a").live('click',function(){
showLoading();
$("#load").fadeIn("slow");
loadAJAX(this+"&ajax=true");
return false;
});
$("#tableWrap th").live('click',function(){
showLoading();
$("#load").fadeIn("slow");
loadAJAX($(this).children("a").attr("href") + "&ajax=true");
return false;
});
$("#tableWrap th a").live('click',function(){
showLoading();
$("#load").fadeIn("slow");
//alert($(this).attr("href"));
// alert("salam");
loadAJAX($(this).attr("href") + "&ajax=true");
return false;
});
$(".header select").live('change',function(){
showLoading();
$("#load").fadeIn("slow");
var pageSize = $('.header select option:selected').text();
var url = $('.header select').val();
// alert(url+pageSize+"&ajax=true");
loadAJAX(url+pageSize+"&ajax=true");
});
});
</script>
for future.
i solve the problem with this:
jQuery("#search").one("keyup", function (e) {
var str = $(this).val();
var url = $("#url").val() + "?ajax=true&q=" + str;
$("#tableWrap").load(url, function(){
});
});
I have a problem and just can't find where the old values are coming from. What I have is a forum and list of replies where the user has the ability to rate good advice, bad advice on each reply. If you click on one it fires off a java script and the database is updated... the other button hides to show something happened. Where i am running into problems is on a fresh page refresh the first button works as designed but all others are passing not only the next click event values (which the script responds where you have already voted) but is passing ALL the previous clicked values. If I vote on four different posts then all four values post and three showing I have already voted. How can I purge the previous click event values?
<script>
function doGABAbad(forum_post_id,type){
$(".badadviceclick").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#goodadvice'+I).fadeOut(200).show();
});
});
}
</script>
<script>
function doGABAgood(forum_post_id,type){
$(".badadviceclick").click(function(){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#badadvice'+I).fadeOut(200).show();
});
});
}
</script>
This is where I am building my Div's
<div id="goodadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="badadviceclick" href="#" onClick="return false" onmousedown="javascript:doGABAgood('.$forum_post_id.',\'goodadvice\');">Good Advice '.$good_advice.'</a>
</div>
<div id="badadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="badadviceclick" href="#" onClick="return false" onmousedown="javascript:doGABAbad('.$forum_post_id.',\'badadvice\');">Bad Advice '.$bad_advice.'</a>
</div>
The reason for that is you attach events in both javascript and jquery (jquery based event in javascript based event). you need to use one or another.
<script>
function doGABAbad(forum_post_id,type){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#goodadvice'+I).fadeOut(200).show();
});
}
function doGABAgood(forum_post_id,type){
var element = $(this);
var I = element.attr("id");
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id,type: type}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#badadvice'+I).fadeOut(200).show();
});
}
</script>
First modify the HTML like so:
<div id="goodadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="goodadviceclick" href="javascript:void(0);">Good Advice '.$good_advice.'</a>
</div>
<div id="badadvice'.$forum_post_id.'">
<a id="'.$forum_post_id.'" class="badadviceclick" href="javascript:void(0);">Bad Advice'.$bad_advice.'</a>
</div>
Next, you can refactor the functions like so:
function doGABA(e) {
e.preventDefault();
var element = $(this);
var forum_post_id = element.attr("id");
var type = element.hasClass('goodadviceclick') ? 'good' : 'bad';
var info = 'id=' + I;
$("#gaba_float_right").html('<img src="loader.gif"/>').show();
$.post('updateGABA.php', {forum_post_id: forum_post_id, type: type + 'advice'}, function(data){
if(isNaN(parseFloat(data))){
alert(data);
}else{
$('#'+forum_post_id+'_'+type+'s').text(data);
}
$('#' + type + 'advice'+I).fadeOut(200).show();
});
}
Then remove the onmousedown attributes on your anchor tags, and do it in jQuery:
$('.goodaviceclick, .badadviceclick').click(doGABA);
I'm looking to auto submit when a specific checkbox is checked.
I need it to pass to ajax.
Here is what I have so far:
$(document).ready(function () {
$("input[name=<?php echo("$newseo"); ?>]").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
But I just can't seem to get it to work,
Any help would be great, Thanks!
Here you go, this should do it. Your AJAX looks fine. I put together a JSFiddle to demonstrate.
$("input[name=TestCheck]:checked").live('click', function(e) {
var id=$(this).attr('id');
var favorite=$(this).val();
alert(id + " - " + favorite);
// Post here ...
$.ajax({
type:'POST',
url:'check_favorite.php',
data: {id: id, favorite: favorite}
});
});
JSFiddle : http://jsfiddle.net/4GQ6K/1/
I don't really like using obtrusive JavaScript and inputting PHP into JavaScript like that but there is no reason it shouldn't work.
$('#my_checkbox').change(function(){
if($(this).is(':checked'))
{
$('#my_form').submit();
}
});
Use your server side code[php] to set a id or a class to your specific checkbox. Then bind a click event to the given class name, e.g.
php code sets a class named .sCheckBx.
then on document.ready bind your event :
$(document).ready(function () {
$(".sCheckBx").click(function(){
var id=$(this).attr('id');
var favorite=$(this).val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
});
});
Try this
$(document).ready(function () {
$("checkboxId").click(function(){
var $this = $(this);
if($this.is(":checked")){
var id=$this.attr('id');
var favorite=$this.val();
$.ajax({
type:'POST',
url:'check_favorite.php',
data:'id= ' + id + '&favorite='+favorite
});
}
}
});
});