I have followed this tutorial which uses jQuery UI to generate Facebook tokens like:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/
My problem is I need to pass two values thru JSON: the ID and the NAME.
the server side script looks like this:
header('Content-Type: text/html; charset=iso-8859-1', true);
include($_SERVER['DOCUMENT_ROOT'].'/inrees/inrees/communaute/includes/_db.php');
$param = $_GET["term"];
$query = mysql_query("SELECT * FROM comm_carnet, in_emails
WHERE carnet_iduser=emails_id
AND emails_id!='".$_COOKIE['INREES_ID']."'
AND emails_nom REGEXP '^$param'");
//build array of results
for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
$row = mysql_fetch_assoc($query);
$friends[$x] = array("name" = > $row["emails_nom"], "id" = > $row["emails_id"]);
}
//echo JSON to page
$response = $_GET["callback"]."(".json_encode($friends).")";
echo $response;
the echo from the server side script is:
([{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}])
(which is exactly what I need)
I am passing the the "name" array but not the "id" which needs to be a hidden input with the corresponding id from the database, the html page where the call to the php is done looks like this:
//attach autocomplete
$("#to").autocomplete({
//define callback to format results
source: function (req, add) {
//pass request to server
$.getJSON("messages_ajax.php?callback=?", req, function (data) {
//create array for response objects
var suggestions = [];
//process response
$.each(data, function (i, val) {
suggestions.push(val.name);
});
//pass array to callback
add(suggestions);
});
},
//define select handler
select: function (e, ui) {
//create formatted friend
var friend = ui.item.value,
span = $("<span>").text(friend),
a = $("<a>").addClass("remove").attr({
href: "javascript:",
title: "Remove " + friend
}).text("x").appendTo(span);
$("<input />", {
value: "id",
type: "hidden",
name: "id"
}).appendTo(span);
//add friend to friend div
span.insertBefore("#to");
},
//define select handler
change: function () {
//prevent 'to' field being updated and correct position
$("#to").val("").css("top", 2);
}
});
//add click handler to friends div
$("#friends").click(function () {
//focus 'to' field
$("#to").focus();
});
//add live handler for clicks on remove links
$(".remove", document.getElementById("friends")).live("click", function () {
//remove current friend
$(this).parent().remove();
//correct 'to' field position
if ($("#friends span").length === 0) {
$("#to").css("top", 0);
}
});
so is basically where you see the comment: "//define select handler" that something needs to be done but I can't do it!
I added the line:
$("<input />", {value:"id", type:"hidden", name:"id"}).appendTo(span);
but it does not fetch my array "id".
your code should be:
UPDATE With DEMO
$(function() {
$("#to").autocomplete({
//define callback to format results
source: function(req, add) {
//pass request to server
$.getJSON("json.json", req,
function(data) {
add($.map(data,
function(item) {
return {
id: item.id,
label: item.name,
value: item.name
}
}));
});
},
//define select handler
select: function(e, ui) {
$('<a class="del_friend" href="#' + ui.item.id + '" title="remove">' + ui.item.label + '<span>x</span>' +
'<input name="friend[]" type="hidden" id="friend_' + ui.item.id + '" value="' + ui.item.id + '" /></a>').insertBefore('#to');
},
//define select handler
change: function() {
$("#to").val("");
}
});
//delete friends
$('a.del_friend').live('click', function(e) {
e.preventDefault();
var friend_id = this.hash.split('#')[1];
alert(friend_id); //AJAX Call and delete item by it's ID
$(this).fadeOut(500).remove()
});
});
NOTE: this assuming your json code look like:
[{"name":"dupont","id":"34998"},{"name":"castro","id":"34996"},{"name":"castelbajac","id":"34995"}]
USEFULL READS: http://jqueryui.com/demos/autocomplete/#remote-jsonp
So, it looks like you're adding only the names to the suggestions list, not the entire data object which would contain the name and id members. Instead of doing this:
suggestions.push(val.name)
try pushing the entire data object onto the list you're passing to your callback:
suggestions.push(val)
Then, in your callback, ui.item.value will contain the full data member, so you'll need to change your code around a bit. To access the name and id values separately, you could presumably do something like this:
var friendName = ui.item.value.name;
var friendID = ui.item.value.id;
Then, you can use those variables where you need to (friend becomes friendID, and instead of passing {value:"id" ...} to the hidden input, you could do {value:friendID ...}
Related
I'm developing a ps module which let you classify the product attachment in categories an display them in the front product page.
I'm using a draggable list with the attachment, and when you drop them to the category it turns to an option tag, each category has a select tag where to drop the attachment.
I want to save the attachments and the category where they was dropped, so I thought make an ajax call to bring the data to my module class but I'm new with ajax and cant approach it.
this is what I've made:
the js code (inside the proper .tpl):
<script>
$( ".droptrue" ).droppable({
drop: function( event, ui ) {
//add <option> tag when an attachment is dropped to category's select
$(event.target).append('<option value="' + ui.draggable.attr('id') + '" selected>'+ui.draggable.text()+'</option>');
//remove the <li> wich contained the attachment data
ui.draggable.fadeOut("slow").remove();
var val = $('#categoryAttachmentArr').val();
//var tab = val.split(',');
//for (var i=0; i < tab.length; i++)
//if (tab[i] == $(this).val())
// return false;
//create an array with the next format: 'id_category(1)'-'id_attachment(1)','id_category(2)'-'id_attachment(2)'[....]
//the comma will be the main character that will be splitted
$('#categoryAttachmentArr').val(val + ui.doppable.attr('id') + '-' + ui.draggable.attr('id') +',');
}
});
$('#submitAddProduct').click(function(e){
$.ajax({
type: 'POST',
url: baseDir + 'modules/adjuntos/classes/CategoryAttachment.php',
data: {
ajax: true,
action: \'CategoryArray\',
cat_array: $('#categoryAttachmentArray').val(),
}
dataType: 'json',
success: function(json) {
console.log($('#categoryAttachmentArray').val());
}
});
})
$( ".ui-state-default" ).draggable({
revert: "valid",
});
</script>
And my class:
class CategoryAttachment extends Objectmodel
{
//other functions
public function ajaxProcessCategoryArray()
{
$CategoryAttachmentArr = Tools::getValue('cat_array')
}
}
you can't connect directly to any class. you have to use the controller to do this.
Ajax send data to controller
Controller save data using class
Controller return result to browser (javascript)
Finaly I got the solution, maybe one of you guys will have this problem in the future.
My code in the .tpl:
$( ".ui-state-default" ).draggable();
$( ".droptrue" ).droppable({
drop: function( event, ui ) {
//add <option> tag when an attachment is dropped to category's select
$(event.target).append('<option value="' + ui.draggable.attr('id') + '" selected>'+ui.draggable.text()+'</option>');
$('#selectAttachment1').append('<option value="' + ui.draggable.attr('id') + '" selected>'+ui.draggable.text()+'</option>')
//remove the <li> wich contained the attachment data
ui.draggable.fadeOut("slow").remove();
var val = $('#categoryAttachmentArr').val();
//make a serialize() type array
$('#categoryAttachmentArr').val(val + $(this).attr('id') + "=" + ui.draggable.attr('id') +"&");
var value = $('#arrayAttachments').val();
var tab = value.split(',');
for (var i=0; i < tab.length; i++)
if (tab[i] == ui.draggable.attr('id')){
return false;
}
$('#arrayAttachments').val(value+ui.draggable.attr('id')+',');
}
});
$('#submitCategories').click(function(e){
var array = $('#categoryAttachmentArr').val()
$.ajax({
url: '../modules/adjuntos/ajax-call.php',
data: {
action: 'handlearray',
token:new Date().getTime(),
cat: array
},
method: 'POST',
success:function(data){
$('#result').html(data);
}
});
});
the ajax call goes to my ajax-call.php file:
<?php
//load ps config
require_once(dirname(__FILE__).'../../../config/config.inc.php');
require_once(dirname(__FILE__).'../../../init.php');
require_once('adjuntos.php');
//adjuntos.php is the name of my module main file
if(Tools::getIsset('token') && Tools::getIsset('action'))
{
$mp = new Adjuntos;
echo $mp->handleArray();
}
The handleArray function in my module main file:(it make a call to my custom class)
public static function handleArray()
{
$html = '';
$array = Tools::getValue('cat');
$arrayExplode = explode("&", $array);
foreach($arrayExplode as $value)
{
$finalArr = explode("=", $value);
if (!CategoryAttachment::postProcess($finalArr))
{
$html .= '<p style="color:red;>Fallo</p>"';
}
}
$html .= '<p style="color:green;>Correcto</p>"';
return $html;
}
The function in my custom class:
public static function postProcess($finalArr)
{
return Db::getInstance()->execute(
'UPDATE ps_attachment SET id_category = '.$finalArr[0].' WHERE id_attachment = '.$finalArr[1]
);
}//end
This way is working like a charm, and make the code more scalable
Contacts are created dynamically (added or deleted). For each contact created, a country must be selected and the provinces for that country must be loaded via ajax.
Parent element
#contacts
Child elements
#contacts_0_country
#contacts_0_provinces
#contacts_1_country
#contacts_1_provinces
etc
Everything works perfectly except that i have to switch the country selection twice for the ajax to take charge and change the provinces for the country selected
This problem is due to below js but i cant find it:
(function ( $ ) {
'use strict';
$(document).ready(function() {
$('#contacts').on("change", [$('select')],function() {
$("select[id^='contacts'][id$='_country']").each(function() {
var id = parseInt(this.id.match(/\d+/), 10);
var $country = $("#contacts_" + id + "_country");
var $province = $("#contacts_" + id + "_provinces");
// When country gets selected ...
$country.on('change',["#contacts_" + id + "_country"], function () {
// ... retrieve the corresponding form
var $form = $(this).closest('form');
// Simulate form data, but only include the selected value
var data = {};
data[$country.attr('name')] = $country.val();
// Submit data via AJAX to the form's action path
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
// Replace current province field ...
$("#contacts_" + id + "_provinces").replaceWith(
// ... with the returned one from the AJAX response
$(html).find("#contacts_" + id + "_provinces")
);
// Province field now displays the appropriate provinces
}
});
});
});
});
});
})( jQuery );
I found an answer to my own question. Below is now working perfectly. Provinces are populated for the relevant country selected and this also works on new contacts added dynamically on the collection
(function ( $ ) {
'use strict';
$(window).load(function() {
$('#contacts').on("click", [$('select')], function(event) {
var $id = event.target.id;
var id = parseInt($id.match(/\d+/), 10);
var $country = ('#' + $id);
var $country = $($country);
var $form = $country.closest('form');
// Simulate form data, but only include the selected value
var data = {};
data[$country.attr('name')] = $country.val();
// Submit data via AJAX to the form's action path
$.ajax({
url : $form.attr('action'),
type: $form.attr('method'),
data : data,
success: function(html) {
// Replace current province field ...
$("#contacts" + id + "_provinces").replaceWith(
// ... with the returned one from the AJAX response
$(html).find("#contacts" + id + "_provinces")
);
// Province field now displays the appropriate provinces
}
});
//});
});
});
})( jQuery );
I hope it helps someone!
Hello guys i am trying to build a chat with Jquery , php , ajax and mysql
the problem that i am facing since few days is that when i get the value of the last message its keep getting append to the div what i want is to append the last message only once , and append again if there is a new message here is my ajax call
var chat = "";
$.ajax({
url: "php/gt_user.php",
type: "get",
success: function (result) {
var gtUser = $.parseJSON(result);
$.each(gtUser, function (idx, obj) {
var usrApp = "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
usrApp += "<p class='usr-name'>" + obj.Tables_in_chat + "</p></span>";
$('.userarea').append(usrApp);
}); // here i get all the username who sent a message and print them on a div
$('.userarea span').on('click', function () {
$('.msgarea').html("");
var usrName = $(this).text();
$('#usrname').text(usrName);
setInterval(function () {
$.ajax({
url: "php/admin_msg.php",
type: "post",
data: {
name: usrName
},
success: function (result) {
var lastmsg = result;
function appedn() {
var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
usrMsg += "<span><p>" + lastmsg + "</p></span></div>";
$('.msgarea').append(usrMsg);
}
if (chat !== result) {
appedn();
} else {
chat = result;
}
}
});
}, 2000);
});
}
});
the respanse from php/admin_msg.php is working and i got the last message sucessfully the problem is that this script keep adding the same message to the message area , and what i want is to added the message only once if there is a new one
You need to somehow identify last message that is already appended to your html the best would be some id sent from server. So your message div should containt some data-id attribute, and then when you ask for next message get last children of $('.msgarea') element, read it data-id and compare with current one.
Another thing I would recommend to moving to some view library or framework, react, angular, vue or whatever. It gets complicated when you want to manage such features with pure jQuery.
i was finally able to fix the problem after 1 day of struggle so will post the answear here just in case it will help some one else facing the same issue
the part where i had to get all the username table from database i move it to my HTML and used a few line of php to echo the result like this(each user name has his own table)
// show all the user name that sent a message
$result = $con->query("show tables from chat");
while($row = mysqli_fetch_assoc($result)){
echo "<span><i class='fa fa-user-circle-o' aria-hidden='true'></i><p class='usr-name'>".$row['Tables_in_chat']."</p></span>";
}
then on my jquery script i moved the function that check for the last message every 2sec outside the click event so my Jquery script look more cleaner now
/* get the user name and added it to the header of the message box */
$('.userarea span').on('click', function () {
$('.msgarea').html("");
var usrName = $(this).text();
$('#usrname').text(usrName);
});
var chatdata = "";
/* check for new message and append the message area if there is a new one */
setInterval(function () {
var usrName = $('#usrname').text();
$.ajax({
url: "php/admin_msg.php",
type: "post",
data: {
name: usrName
},
success: function (result) {
function appedn() {
var usrMsg = "<div class='usr-msg'><i class='fa fa-user-circle-o' aria-hidden='true'></i>";
usrMsg += "<span><p>" + result + "</p></span></div>";
$('.msgarea').append(usrMsg);
}
if (chatdata !== result) {
appedn();
chatdata = result;
}
}
});
}, 2000);
Just want to display following information which I got from my controller via ajax call:
{"results":{"name":"Bob","city":"Ottawa","reg_date":"12-Feb-2004"}}
Here is my controller:
$data["results"] = $this->my_model->did_get_data($user_id);
echo json_encode($data);
Here is My view:
<div id="display"></div>
Here is my JS file:
$.get('controller/get_data', function (data) {
$( "#display").text(data.results); //???
}, "json");
If you need to display all the attributes inside data then you can do it like this:
$.get('controller/get_data', function (data) {
var name = data.results.name;
var city = data.results.city;
var reg_date = data.results.reg_date;
$("#display").text("name :" + name + ", city:" + city + ", reg date:" + reg_date);
}, "json");
If you want to display those attributes, you need to specify them individually:
var string = "Name: "+data.results.name+", City:"+data.results.city;
$( "#display").text(string);
Or something along those lines.
Your scenario is not well explained. What is the error u get? And have u checked if $("#display") exists?
However there is one thing you could do:
$.get('controller/get_data', function (data) {
$( "#display").text(JSON.stringify(data.results)); //???
}, "json");
The above is if you want to print for checking purpose however if your #display should have only the values of your data i.e. name and such then you need to use the above answer i.e.
var name = data.results.name;
$("#display").html(name);
I want to send json data from my controller to my view when a specific action happens.
I used this on controller to send the data
[HttpGet]
public JsonResult JSONGetParking(int buildingID){
return this.Json(
new
{
Result = (from obj in db.Parkings.Where(p => p.buildingID == buildingID) select new { ID = obj.ID, Name = obj.note })
}
, JsonRequestBehavior.AllowGet
);
}
it works very good
on my script i used this:
FloorScript.js
$(document).ready(function () {
$('#buildingID').change(function () {
alert("what is not");
$.getJSON('JSONGetParking?buildingID=' + $('#buildingID').val(), function (data) {
alert("afd");
var items = " ";
$.each(data, function (obx, oby) {
items += "<option value='" + oby.ID + "'>" + oby.Name + "</option>";
});
$('#parkingID').html(items);
});
});
});
I have opened google chrome and I can see the request and the response like this:
i can see the two text that i alerted
However, on my selector, i just see undefined value
Html
<div id="editor-label">
<select id="parkingID" name="parkingID"></select>
</div>
I have added the jquery in this
#section scripts {
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/FloorScript.js");
}
You're not looping on the correct variable.
You did this:
$.each(data, function (obx, oby) {
whereas you should do this:
$.each(data.Result, function (obx, oby) {
This is pretty visible in the Google Chrome screenshot you provided. As you can see the returned JSON has a property called Result which is the collection whereas you were looping over the data variable which is not an array - it's just a javascript object that has a property called Result which is the array you wanna be looping through.
Also I'd replace:
$.getJSON('JSONGetParking?buildingID=' + $('#buildingID').val(), function (data) {
with:
$.getJSON('JSONGetParking', { buildingID: $('#buildingID').val() }, function (data) {
and of course get rid of this hardcoded url over there and use an url helper to generate it, on the dropdown as an HTML5 data-* attribute:
#Html.DropDownListFor(
x => x.BuildingId,
Model.Buildings,
new {
id = "buildingID",
data_url = Url.Action("JSONGetParking")
}
)
and then inside the change event you can trivially easy retrieve this url and avoid hardcoding it (and of course taking the risk of breaking your code when you deploy it in IIS in a virtual directory or simply change the routing pattern of your application):
$('#buildingID').change(function () {
var url = $(this).data('url');
$.getJSON(url, { buildingID: $('#buildingID').val() }, function (data) {
Alright, now the initial mess is tidied up.
use data.Result in your each loop
$(document).ready(function () {
$('#buildingID').change(function () {
alert("what is not");
$.getJSON('JSONGetParking?buildingID=' + $('#buildingID').val(), function (data) {
alert("afd");
var items = " ";
$.each(data.Result, function (obx, oby) {
items += "<option value='" + oby.ID + "'>" + oby.Name + "</option>";
});
$('#parkingID').html(items);
});
});
});
Hope this helps...