I'm currently facing a problem and i would like your assistance to solve it the right way. Two languages.. depending on it's other. (At least in my case).
PHP: access database, insert, select data.
Javascript: useful calling events without having to refresh my page.
Well.. i've used ajax, but my way seems quite complicated to be correct.
Let me use an example. Let's say that i have the following PHP function.
function createDiv($value1, $value2, $value3){
echo "
<div>
<h3>."$value1".</h3>
<h3>."$value2".</h3>
<h3>".$value3."</h3>
</div>
";
}
My inside my HTML i'm calling this function like this.
<?php
$values = $db->getValues(); //( Let's say that i'm getting an array )
createDiv($values[0],$values[1],$values[2]);
?>
Now lets go a step further... I want to append data inside this div when clicking on a predefined list item without having to refresh.
<ul class="social-buttons" id="demo2">
<li>
<a onclick="letterSearch(this);" >A</a>
</li>
<li>
<a onclick="letterSearch(this);" >B</a>
</li>
<li>
<a onclick="letterSearch(this);" >C</a>
</li>
<li>
So, now i'm using javascript & ajax.
function letterSearch(element){
//With this ajax i'm calling a similar function to $db->getValues();
//That i called before to get my values
//With the difference of the searching parameter
$.ajax ({
type:"POST",
url: "ajaxAccess.php",
dataType:"json",
data: {tag: 'valuesWithSearch', arguments: element.innerHTML},
success: function(result) {
var jsonValues = JSON.parse(result);
//After this point i have stored in jsonValues the expected array list that i wanted to get.
//Now what??
}
});
}
So..
My first question is: how can i put the data i just got from ajax at the bottom of my div?
jQuery.append()?
And last but not the least.. Is my approach overcomplicated? Is there any other way?
IN PHP
<?php
echo json_encode(["values"=>$db->getValues()); //Let's say this is an array
?>
IN HTML
<ul class="social-buttons" id="demo2">
<li>
<a class="letter-search" >A</a>
</li>
<li>
<a class="letter-search" >B</a>
</li>
<li>
<a class="letter-search" >C</a>
</li>
<li>
IN JAVASCRIPT/JQuery
$(".letter-search").click(function(e){
e.preventDefault();//Prevent default link action
letterSearch($(this));
})
function letterSearch(element){
$.ajax ({
type:"POST",
url: "ajaxAccess.php",
dataType:"json",
data: {tag: 'valuesWithSearch', arguments: element.text()},
success: function(result) {
var response = JSON.parse(result);
//You now have a valid JSON response
//Append if needed, or loop through and process before appending
element.append(response.values)
}
});
}
Related
Ok, this seems to be a easy question but I'm not able to get it.
I have index.php and find.php in my project.
In index.php, I'm showing results of list-group items as follows
<div id="showDetails">
</div>
<div id="showList">
//All my list-group items are listed here
</div>
My Ajax returning the list-group as follows
function funcReadRecord() {
var readrecord1 = "readrecord1";
var sometext = $('#SNOW_INC').val();
$.ajax({
url : "find.php",
type : 'post' ,
data : { readrecord1 : readrecord1,
sometext : sometext } ,
success : function(data, status){
$('#showList').html(data);
}
});
}
Now, I'm returning the values as a HTML link so it looks like this
<div id="showList">
data 1
data 2
data 3
</div>
What I want is when I click data 1 link, I want to show showDetails div with data 1 populated. Then when I click data 2 link, it changes to data 2 in showDetails.
How do I do that?
Probably the information I've provided is not enough but feel free to ask and I'll provide more.
The simplest solution would be to add a click handler to each item that calls a function, passing in the id of the item you want to display.
Within that function, fetch the data for the given item and show it.
function showData(which) {
console.log(`fetch data ${which} here and show it in the data div.`);
document.getElementById('showData').innerHTML = `show data ${which}`
return false; // prevents navigation on the clicked link
}
<div id="showList">
<a onclick="showData(1)" href="#">data 1</a>
<a onclick="showData(2)" href="#">data 2</a>
<a onclick="showData(3)" href="#">data 3</a>
</div>
<div id="showData"></div>
This is the div that i am updating
but i want to add a active class to the (li) item
every time the div refreshes the active class goes away
so i don`t want to refresh all the data in the (ul) but
only add (li) if there is a new data in the database,
with out refreshing the previous (li) items
<div id="contacts">
<ul id="rooms" class="rooms">
<!-- This is where the data get inserted -->
<!-- the ajax call and this -->
<li class='contact' data-val='<?php echo $room['id']; ?>'>
<div class='wrap'>
<div class='meta'>
<p class='name'><?php echo $room['sender']; ?></p>
<p class='preview'><?php echo $room['senderemail']; ?></p>
</div>
</div>
</li>
</ul>
</div>
this is my ajax call
$(document).ready(function() {
var interval = setInterval(function(){
$.ajax({
url: 'rooms.php',
success: function(data){
$('#rooms').html(data);
}
});
}, 1000);
});
in the room php
$rooms = get_rooms();
foreach($rooms as $room){
?>
<li class='contact' data-val='<?php echo $room['id']; ?>'>
<div class='wrap'>
<div class='meta'>
<p class='name'><?php echo $room['sender']; ?></p>
<p class='preview'><?php echo $room['senderemail']; ?></p>
</div>
</div>
</li>
<?php
}
the get_rooms() function
function get_rooms() {
$sql = "SELECT id, sender, senderemail FROM chatroom ";
$result = mysqli_query($GLOBALS['dbh'], $sql);
$rooms = array();
while($room = mysqli_fetch_assoc($result)){
$rooms[] = array('id'=>$room['id'], 'sender'=>$room['sender'],
'senderemail'=>$room['senderemail']);
}
return $rooms;
}
You Just need to push new data to the div as below just replace your line with:
$('#rooms').append(data);
this will add new <li> in your existing <div> after the last <li>
jquery append()
To get the id of the last <li>
var lastId = $( "#rooms li" ).last().attr('id');
Once you get the last id then pass it in your ajax call.
If I understand you correctly, your problem is that you lose the active class (which you clicked on the li container) when there is new data.
This has to do with the fact that you exchange all of the content.
There are now three options. Either
You give the rooms.php the id of the currently active li-container
and this script sets the active class for the affected container.
You transfer all the chatrooms (ids) already shown to rooms.php and only
load the new ones (this means effort later with sorting).
You save the active li class and re set it after content changed (this is the fastest)
f.e: in your Ajax succes functions:
let id=0;
let active_li = $('li.active');
if (active_li.length>0) id=active_li.data('val');
$('#rooms').html(data);
if (id!=0) $('li[data-val="'+id+'"]').addClass ('active');
A few other thoughts:
Note the interval of 1000ms. Possible it makes Problems if the request lasts longer than 1000ms. This may still work well in your tests, but maybe not anymore if there are a hundred or 1000 users in your application.
Doesn't it make sense to tell the server when you click the active room and save it in a session so that the server knows which room is active in the client?
You need to simply update your JS code like:
$(document).ready(function() {
var active_list = '';
var interval = setInterval(function(){
$.ajax({
url: 'rooms.php',
beforeSend: function(){
active_list = $('#rooms').find('li.contact.active').attr('data-val');
}
success: function(data){
$('#rooms').html(data);
$(data).find('li[data-val="' + active_list +'"]').addClass('active');
}
});
}, 1000);
});
This should solve your problem and Let me know if you still face any issue.
I have a collection of Article objects that have a public attribute int priority. This field ist used to display the articles in the intended order. However, I'd like to be able to rearrange the order of the articles in the admin area.
I included jQuery and with this Laravel/Blade snippet
<ul class="selectable-demo-list" id="sortable-list-basic">
#FOREACH($articles as $article)
<li> {{ $article->label}} </li>
#ENDFOREACH
</ul>
I can produce this HTML output:
<ul class="selectable-demo-list" id="sortable-list-basic">
<li> My article (ID: 1) </li>
<li> Another article (ID: 2) </li>
<li> ... </li>
</ul>
I can access the respective priority via $article->priority and their unique IDs via $article->id if these elements should be included in the code.
The <ul> posted above is rendered correctly: All <li> elements are displayed as sortable jQuery elements. If I drag an item to a certain position, it stays there for the time being.
Unfortunately, I have no idea how to save the new order (= update the items priorities according to the list positions).
This shouldn't be done directly. Instead, I want to use an update button. Maybe I can use a form and send an array like this to my controller:
$priorities = [1=>3; 2=>1; 3=>2] // ID => new priority
Is this possible? Or should I use a different approach? Any help is greatly appreciated!
Add id with each of your li like id="id-{{ $article['id'] }}"
You can call an ajax request when you are changing any order using this sortable plugin like below code
$("#sortable-list-basic").sortable({
update: function (e, u) {
var data = $(this).sortable('serialize');
$.ajax({
url: "{{ url('controller/sorting_method') }}",
type: 'post',
data: data,
success: function (result) {
},
complete: function () {
}
});
}
});
Then inside your method, take your new order for each item & save it to database such as
$ids = $request->id;
foreach($ids as $order => $id){
$article = Article::findOrFail($id);
$article->order = $order;
$article->save();
}
I'm commenting an specific post from a list. This is why I'm using .closest() parent.
JQUERY
$('.comment').on('click', function(){
var parent = $(this).closest('.post');
$(document).CommentButton(id_user,comment);
});
FUNCTION The comments posts via Ajax and retrieve a value....
jQuery.fn.CommentButton=function(id_user,comment){
$.ajax({
type: 'POST',
url: "comment.php",
data: {
"comment":comment,
"id_user":id_user,
},
success: function(data) {
//alert(data)
parent.find(".container").append(comment);//problem
}
});
}
HTML I choose a random post to comment from the list.
<ul>
<li class="post"></li>
<li class="post"></li>
<li class="post">
<div class="container"></div>
<button class="comment"></button>
</li>
<li class="post"></li>
</ul>
PROBLEM
I cant append the comment in its specific container of his parent. How should I do that?
I have some Jquery tabs with Names on them.
(Ie: |Apple|Orange|Pear| )
I would like to update these titles to say something like
|Apple(2)|Orange|Pear(4)|
or something else based on the data returned by a php page ( say, numbers.php )
So,
Jquery requests numbers.php
numbers.php returns
Apple:2
Pear:4
How can I have JS, then use that data to dynamically update the Jquery tab "titles" with the data returned?
Then, if I re run the function, it would ask for numbers.php again and once again, update the tab titles based on what php returns?
Also, the names could change.. So next time it runs, Apples may not exist, but Pear may read 5 ..
In this instance, apple should be renamed "Apple"
Any help would be most excellent.
( hope ive made this clear? )
[ UPDATE ]
I have tried the below answer, but no luck.
The LI appears like this in the console:
<li id="tab-tabtestuser" class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="newtab-tabtestuser" aria-labelledby="ui-id-5" aria-selected="true">tabtestuser <span class="count"></span><span class="ui-icon ui-icon-close" role="presentation">Remove Tab</span></li>
If you return the data from numbers.php in a meaningful format such as JSON, you can then process the data and update the tabs in Javascript much more easily. Here is a basic example of what you want to do, you will probably want to improve upon it.
numbers.php
{
apple: 5,
orange: 3,
pear: 2
}
Javascript:
$.getJSON( "numbers.php", function( data ) {
$.each( data, function( key, val ) {
$('#tab-' + key).find('span.count').text(val);
if (val == 0) {
$('#tab-' + key).hide();
};
});
});
HTML:
<div id="tabs">
<ul>
<li id="tab-apple">Apple <span class="count"></span></li>
<li id="tab-orange">Orange <span class="count"></span></li>
<li id="tab-pear">Pear <span class="count"></span></li>
</ul>
<div id="tabs-apple"></div>
<div id="tabs-orange"></div>
<div id="tabs-pear"></div>
</div>