so I'm trying to make this works here is the jquery+php.
When I try to trigle the click in jquery it doesnt even does the "alert()".
PHP(Updated):
$MSG_Notification_sql = mysqli_query($Connection, "SELECT * FROM notifications WHERE user_id='".$bzInfo['id']."'");
while ($MSG_Notification_row = mysqli_fetch_array($MSG_Notification_sql)){
$MSG_Notification_rows[] = $MSG_Notification_row;
}
foreach ($MSG_Notification_rows as $MSG_Notification_row){
$bzWhen = date('d-m-Y H:m:i', strtotime($MSG_Notification_row['when']));
echo '<form method="POST">
<div class="notificationClick notification-messages info">
<div class="user-profile">
<img src="assets/img/profiles/d.jpg" alt="" data-src="assets/img/profiles/d.jpg" data-src-retina="assets/img/profiles/d2x.jpg" width="35" height="35">
</div>
<div class="message-wrapper">
<div class="heading"> '.$MSG_Notification_row['title'].'</div>
<div class="description"> '.$MSG_Notification_row['description'].' </div>
<div class="date pull-left"> '.$bzWhen.'</div>
</div>
<input name="notificationID" value="'.$MSG_Notification_row['id'].'" style="display: none" />
<div class="clearfix"></div>
</div>
</form>';
}
Javascript(Updated):
$(document).ready(function(){
$('.notificationClick').click(function(event){
alert('Ok');
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = $('#notificationClick').serialize();
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '../../class/notifications/msgs_del.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json' // what type of data do we expect back from the server
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
window.location = '/?page=messages&sub=inbox&bx=preview&id='+ data.notificationID +'';
});
event.preventDefault();
});
});
Can anybody help me please? I'm trying to complete this but nothing :(
First as the others say, ids need to be singular. So use the class you already have. Now inside, you need to use the current form that you clicked on, not all the forms.
$('.notification-messages').click(function(event){ //<-- change to class
var formData = $(this).closest("form").serialize(); //change to this
...
If you are loading these dynamically, you need to use event delegation
$(document).on("click", '.notification-messages', function(event){
var formData = $(this).closest("form").serialize();
...
You can concatenate the timestamp to your id to make it unique (separated by an _ if you like) and change your selector for the click event to $('[id*="notificationClick_"]')
On the other hand, you might want to use a class instead, that's what it's there for:
$(".notification-messages")
You're using ID, you can only bind click to 1 id not multiple ids.
You should use the class to bind the .click function.
Related
Currently, I am trying to implement voting system so users can like or dislike uploaded images, however, I'm trying to do it with an ajax call which makes it a bit confusing for me. I am not sure how to pass the id of the image the user is liking (there are going to be plenty of images on the page) to the ajax call. In the JavaScript file, the data: imageId is currently empty since I don't know how exactly to determine and pass the id of the image.
Home view:
#extends('layouts.app')
#section('content')
#foreach($images as $image)
<div class='imageContainer'>
<div class="stickyContainer blackGradient">
<h1 class='imageTitle'>{{$image->name}}</h1>
<img class='uploadedImg' src='{{url("storage/uploads/images/".$image->file_name)}}' alt='Random image'/>
<a class='specialA' href='{{url("image/".$image->id)}}'></a>
<div class='votingContainer'>
<a href='#'><div class='like'></div></a>
<a href='#'><div class='dislike'></div></a>
</div>
</div>
</div>
#endforeach
<script>
var token = '{{ Session:token() }}';
var urlLike = '{{ route('like') }}';
</script>
#endsection
JavaScript File:
$('.like').on('click', function(event){
event.preventDefault();
var isLike = event.target.previousElementSibling == null;
console.log(isLike);
$.ajax({
method: 'POST',
url: urlLike,
data: {isLike: isLike, imageId: , _token: token}
})
});
Assign image's id to the like button in the view:
<a href='#'><div class='like' id={{$image->id)}}></div></a>
Then, in javascript use image's id to the ajax call.
imageId= event.target.id;
On a side note: In javascript I don't understand why you are nulling the previousSibling with this:
var isLike = event.target.previousElementSibling == null;
Add Data attribute with attribute value as image Id to image element like data-imgId="1".It should be unique for each image element.
<img class='uploadedImg' src='{{url("storage/uploads/images/".$image->file_name)}}' data-imgId="{{$image->id)}}" alt='Random image'/>
Then get the image Id by using below script
var imgId = $(this).parents('.stickyContainer').find('.uploadedImg').attr('data-imgId');
I've been getting crazier day after day with this, I can't find an answer, I've spent like 100h+ with this... I hope someone could help me out!
UPDATE:
So to make myself more clear on this issue and be able to get help from others, I basically have 3 containers named "main-container" they all have 3 containers as childs all with the same class name, and when I submit the button, I trigger an ajax function to load the JSON strings comming from php into the child divs, the problem is that I get the 3 "main_containers" to load the ajax at the same time, I only want to load the ajax if I press the button of each "main_container" individually.
I've been using jquery and vanilla JS as well but seems I just can't get it done!
This is how I currently trigger the button with jquery:
$('.trigger_button_inside_divs').click(my_ajax_function);
And this is how my ajax looks like:
function my_ajax_function(){
$.ajax({
dataType: "JSON",
type: 'POST',
url: test.php,
success: function(data) {
$('.div_to_render_JSON_1').html(data.PHP_JSON_1_RECEIVED);
$('.div_to_render_JSON_2').html(data.PHP_JSON_2_RECEIVED);
$('.div_to_render_JSON_3').html(data.PHP_JSON_3_RECEIVED);
}
});
}
HTML looks like this:
<div class="main_container">
<div class="my_div">
//div_to_render_JSON_1
</div>
<div class="my_div">
//div_to_render_JSON_2
</div>
<div class="my_div">
//div_to_render_JSON_3
</div>
<button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>
<div class="main_container">
<div class="my_div">
//div_to_render_JSON_1
</div>
<div class="my_div">
//div_to_render_JSON_2
</div>
<div class="my_div">
//div_to_render_JSON_3
</div>
<button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>
<div class="main_container">
<div class="my_div">
//div_to_render_JSON_1
</div>
<div class="my_div">
//div_to_render_JSON_2
</div>
<div class="my_div">
//div_to_render_JSON_3
</div>
<button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>
So in conclusion, each of those 6 "divs" has a button that triggers an function containing my ajax to render inside that particular div. But what I get is that every time I click that triggering button, I get the ajax to render in all of the 6 divs, instead of render on each particular div only when I click its particular button.
Thanks a lot people, I really hope to get this done!
Cheers.
PD:
This is something a programmer did to achieve what I'm trying to achieve but I just can't figure out what in this code is that is making possible clicking 1 button and affect THAT html element , even though they all have the same class.
(function(){
$("form input[type=submit]").click(function() {
$("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
var xhr = new XMLHttpRequest();
var el;
function SetDataInTheForm()
{
var resp = JSON.parse(xhr.response)
var pt=0
var ct=0
var gt=0
Array.prototype.forEach.call(el.querySelectorAll(".test"),function(e,i){
e.innerHTML=resp[i].name
})
Array.prototype.forEach.call(el.querySelectorAll(".p"),function(e,i){
e.innerHTML=parseFloat(resp[i].p).toFixed(0)
pt+=parseFloat(resp[i].p)
})
Array.prototype.forEach.call(el.querySelectorAll(".c"),function(e,i){
e.innerHTML=parseFloat(resp[i].c).toFixed(0)
ct+=parseFloat(resp[i].c)
})
Array.prototype.forEach.call(el.querySelectorAll(".g"),function(e,i){
e.innerHTML=parseFloat(resp[i].g).toFixed(0)
gt+=parseFloat(resp[i].g)
})
el.querySelector(".wtp").innerHTML=parseFloat(resp[0].total).toFixed(0)+" "+resp[0].unit
el.querySelector(".wtc").innerHTML=parseFloat(resp[1].total).toFixed(0)+" "+resp[1].unit
el.querySelector(".wtg").innerHTML=parseFloat(resp[2].total).toFixed(0)+" "+resp[2].unit
el.querySelector(".pt").innerHTML=pt.toFixed(0)
el.querySelector(".ct").innerHTML=ct.toFixed(0)
el.querySelector(".gt").innerHTML=gt.toFixed(0)
}
function HandleSubmit(e)
{
el=e.currentTarget
e.preventDefault();
xhr.open("POST","/url_here.php",true)
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
xhr.onload=SetDataInTheForm
var button=e.currentTarget.querySelector("input[type=submit][clicked=true]")
button.removeAttribute("clicked")
xhr.send($("#"+e.currentTarget.id).serialize()+"&"+button.getAttribute("name")+"=on")
}
[].forEach.call(document.querySelectorAll("._form_"),function(form){
form.addEventListener("submit",HandleSubmit,false);
})
})()
Remember that $('.div_container_to_render_JSON') is a new selector that selects all elements with a class div_container_to_render_JSON. What you want to happen is figuring out where that click came from, and find the corresponding div_container_to_render_JSON.
Luckily for you, a jQuery click handler sets the this keyword to the HTMLElement where the click was captured. You can use this to get the parent element.
$('.your-button').on('click', function () {
const myButton = $(this);
$.ajax({
// ...
success (data) {
myButton.parent().html(data.PHP_JSON_RECEIVED);
// or if you need to find a parent further up in the chain
// myButton.parents('.div_container_to_render_JSON').html(data.PHP_JSON_RECEIVED);
}
});
});
The problem is that your class selector is indeed selecting all your divs at the same time.
Solution, set identifiers for your divs as such:
<div class="my_div" id="my_div_1">
and then you can use those id's to fill in the data:
$('#my_div_1').html(data.PHP_JSON_1_RECEIVED);
and repeat for your 6 divs (notice the change from class selector '.' to identifier selector '#')
Thanks for the replies people. I finally figured it out after days of hard work, it was something really simple.. here's the answer:
$('.trigger_button_inside_divs').click(my_ajax_function);
var thisButton = $(this);
var thisDiv = thisButton.closest(".main_container");
function my_ajax_function(){
$.ajax({
dataType: "JSON",
type: 'POST',
url: test.php,
success: function(data) {
thisDiv.find('.div_to_render_JSON_1').html(data.PHP_JSON_1_RECEIVED);
thisDiv.find('.div_to_render_JSON_2').html(data.PHP_JSON_2_RECEIVED);
thisDiv.find('.div_to_render_JSON_3').html(data.PHP_JSON_3_RECEIVED);
}
});
}
I have a sj:select drop down. On change event of that drop down. I am trying to invoke a action.
$.ajax({
type : 'POST',
url : 'getAttributeTypeForUpdate',
data : param,
success : function(data) {
//alert(JSON.stringify(data));
alert(data.attributeTypeObj.typeName)
},
async : false
});
In the action I am returning attributeTypeObj. Below is just the annotation I am Using.
#SkipValidation
#Action(value="getAttributeTypeForUpdate",
results={
#Result(name = SUCCESS, type = JSON, params = {
"ignoreHierarchy", "false",
"includeProperties", "attributeTypeObj\\..*, actionMessages\\[\\d+\\]"
})
})
I am able to get the data in alert box of action class. But the div form which I am using to reflect the values is not displaying.
<div id="updateAttributeType" class="updateAttributeType"
style="width: 900px;" align="center">
<div class=table-row>
<div class="col3">
<b><s:label id="lb20">Type Name:</s:label></b>
</div>
<div class="col3">
<s:textfield name="typeName" id="typeName"
cssStyle="width: 250px;" labelposition="left"
value="%{#attributeTypeObj.typeName}"></s:textfield>
</div>
I have used the following publish "$.publish("updateAttributeType"); " after the ajax call. The value is empty still.
%{#attributeTypeObj.typeName}
I was expecting value="%{#attributeTypeObj.typeName}" to populate on ajax call. But later realized that its part of DOM. I need to refresh whole page or write the html value instead. I have opted the second choice and wrote values of the tags on the jquery like:
$('#uptypeName').val(data.attributeTypeObj.typeName);
I'm trying to figure out if what I'm doing is the right way. I have a comment form and when it gets clicked I'm appending the comment into a div element through Ajax. When the page is refreshed then of course that would disappear and instead of it I have a foreach loop that runs and echos the comments. Since they both have the same CSS attributes they look the same to the user. The reason I'm doing it this way is because the foreach loop gets updated only after a refresh. Is there a better way? Can I update the page directly from the database without refresh? I basically need that every time a user clicks on the comment button that the foreach loop will run again but I couldn't find how to do it. I feel like I'm covering a gun shot with bandage the way I do it at the moment.
Loop:
#foreach($comment as $comments)
#if($comments->image_id == $image->id)
<div id="{{$comments->id}}" class="col-md-5 ajaxrules">
<div class="deletecomment">
<i class="fa fa-trash-o"></i>
</div>
<div class="col-md-2">
<img src="{{$comments->user_avatar}}" class="img-circle buddy">
</div>
<div class="hello col-md-10">
<h4>{!! $image->user_name !!}</h4>
<p class="left">{!!$comments->body!!} </p>
</div>
</div>
#endif
#endforeach
//Where I append the comments through Ajax until the refresh that replaces it with the loop
<div class="man">
</div>
Ajax:
<script>
$(document).ready(function(){
$('.send-form').click(function(e){
e.preventDefault();
var username = "{{ $username }}";
var one = $('textarea[id="{{$image->id}}"]').val();
var value = "{{$image->id}}";
var begin = '<div class="col-md-5 addavatar">'+'<div class="deletecomment">'+'<i class="fa fa-trash-o">'+'</i>'+'</div>'+'<div class="col-md-2">'+'<img src="{{$profile}}" class="img-circle">'+'</div>'+'<div class="hello col-md-10">'+'<h4>' + username +'</h4>'+'<p>'+one+'</p>'+'</div>'+'</div>';
if(one.length > 0){
console.log(username);
$('textarea[id="{{$image->id}}"]').val('');
$.ajax({
url: 'comment',
type: "post",
beforeSend: function (xhr) {
var token = $('meta[name="csrf_token"]').attr('content');
if (token) {
return xhr.setRequestHeader('X-CSRF-TOKEN', token);
}
},
data: {'id': value, 'comment': one},
success:function(data){
$( ".man" ).append([begin]);
},error:function(){
console.log("error!!!!");
}
});
}
});
});
</script>
You are killing yourself.
Manipulate the DOM via javascript code like you do it's really hard work!
You are not suppose to write html inside javascript strings, there must be another way!
And there is... Welcome to AngularJS!
In angular you can write your html and assign a javascript controller to it, perform ajax request and after the ajax complete you can bind the returned data to the html automatically! That means the angular refresh your html and do all the work for you. Even perform loop of let's say, row in a table, etc...
I'm trying to update/refresh a specific after data is returned from the server.
I want to update span class="answer-final-score". I use class instead of ID because this HTML gets dynamically generated multiple times.
The jquery ($('.rating').on... gets executed once the user clicks on a star in the div class="answer-score"
$('.rating').on('rating.change', function (event, value, caption) {
$(this).closest('.answer-container').find('.answer-score-final').text('aaa');
// above works standalone but not in .done section of $.ajax call below
.done(function (result) {
var jsonReturn = JSON.parse(result);
$(this).closest('.answer-container').find('.answer-score-final').text(jsonReturn.score);
})
<div class="answer-container">
<div class="answer-score">
Score (<span class="answer-count">#Model.ElementAt(i).Count)</span><br /><br />
<span class="answer-final-score">#(Math.Round((decimal)(Model.ElementAt(i).RatingScore)))</span>
</div>
<div class="answer-rateIt">
<input data-id="#Model.ElementAt(i).OptionID" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm">
<div class="hover">hover</div>
</div>
</div>
$(this).closest('.answer-container').find('.answer-score > .answer-score-final').text('aaa');
should work for you. Instead of using find again, just use the original find and find one of its children.
Not a JS expert so I don't know if this is best way, but this works.
var answerScoreFinal = $(this).closest('.answer-container').find('.answer-score-final');
// had to assign span object to a variable before making Ajax call, then
// use answerScoreFinal.text('value') in the Ajax .done section.
$.ajax({
type: "post",
...
})
.done(function (result) {
var jsonReturn = JSON.parse(result);
answerScoreFinal.text(jsonReturn.score);
})