I am trying to do a ajax autocomplete search and display the results. I develop small search box with autocomplete but i am struggling with showing search results , can anyone guide me ?
search.php
=========
<script>
$(function(){
$(".search").keyup(function()
{
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
$.ajax({
type: "POST",
url: "search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
}return false;
});
jQuery("#result").live("click",function(e){
var $clicked = $(e.target);
var $last_name = $clicked.find('.last_name').html();
var decoded = $("<div/>").html($last_name).text();
$('#searchid').val(decoded);
});
jQuery(document).live("click", function(e) {
var $clicked = $(e.target);
if (! $clicked.hasClass("search")){
jQuery("#result").fadeOut();
}
});
$('#searchid').click(function(){
jQuery("#result").fadeIn();
});
});
</script>
here the index file which i have done so far ...........
index.php
=========
if($_POST)
{
$q=$_POST['search'];
$sql_res=mysql_query("select personal_names_id,last_name,initials from personal_names where last_name like '%$q%' order by personal_names_id LIMIT 5");
while($row=mysql_fetch_array($sql_res))
{
$last_name=$row['last_name'];
what i want to do i display the results which related to auto-complete text data ?
Related
I am trying to fetch the records from the database using blur function. There are two input fields where this function triggers. I have used different names, variables, javascript, controller using laravel to fetch the records. I am able to fetch the records through ajax and successfully opens the modal. When the modal pop ups when the blur function triggers, it also triggers the function for the second field.
I just want to trigger the modal according to the field, where the blur triggers and not to trigger twice.
//input field: originS
<script type="text/javascript">
$(document).ready(function(){
var origin = "";
var _token = "";
var ovalue = "";
$('#originS').blur(function(){
ovalue = "";
origin = $(this).val();
_token = $('input[name="_token"]').val();
$.ajax({
type: 'POST',
url: '{{ route('pagescontroller.fetchOrigin') }}',
data:{origin:origin, _token:_token},
success: function(response){
if(response){
$("#originSelect").modal('show');
console.log(response);
$(".result").html(response);
$(document).on('change', '#selectSuburb', function () {
ovalue = $(this).val();
if ($(this).is(':checked')) {
$('#originS').val(ovalue);
$("#originSelect").modal('hide');
$this.die('blur');
}
});
$('#originSelect').on('hidden.bs.modal', function (e) {
if (ovalue == "") {
$("#originS").val('');
$(".result").html(response);
}
});
}
},
});
});
});
</script>
//input field: destS
</script>
<script type="text/javascript">
$(document).ready(function(){
var dest = "";
var _token = "";
var dvalue = "";
$('#destS').blur(function(){
dvalue = "";
dest = $(this).val();
_token = $('input[name="_token"]').val();
$.ajax({
type: 'POST',
url: '{{ route('pagescontroller.fetchdest') }}',
data:{dest:dest, _token:_token},
success: function(response){
if(response){
$("#destSelect").modal('show');
console.log(response);
$(".dresult").html(response);
$(document).on('change', '#selectSuburbdest', function () {
dvalue = $(this).val();
if ($(this).is(':checked')) {
$('#destS').val(dvalue);
$("#destSelect").modal('hide');
$this.die('blur');
}
});
$('#destSelect').on('hidden.bs.modal', function (e) {
if (dvalue == "") {
$("#destS").val('');
$(".dresult").html(response);
}
});
}
},
});
});
});
</script>
i want to get query1 and query2 from a span tag and im using split(_). for example query i want to get.
<span id='post1_query1_query2'>
and here my js code
$(document).ready(function(){
$( " span" ).tooltip({
track:true,
open: function( event, ui ) {
ui.tooltip.css("max-width", "600px");
var id = this.id;
var split_id = id.split('_');
var image = split_id[1];
var title = split_id[2];
$.ajax({
url:'fetch_details.php',
type:'post',
data:{image:image},
data:{title:title},
success: function(response){
$("#"+id).tooltip('option','content',response);
}
});
}
});
$(" span").mouseout(function(){
// re-initializing tooltip
$(this).tooltip();
$('.ui-tooltip').hide();
});
});
and then i call it to fetch_details.php
$post = htmlentities ($_POST['image']);
$title = htmlentities ($_POST['title']);
but not working.
you can pass multiple key-pair in data object.
$.ajax({
url:'fetch_details.php',
type:'post',
data:{image: image, title: title},
success: function(response){
$("#"+id).tooltip('option','content',response);
}
});
am try to send form ajax like this code
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#non").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this ),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );
/* Alerts the results */
posting.done(function( data ) {
alert('success');
});
});
</script>
it not alert success,and i check action after click button is ok
If jquery.min.js added. Then please ignore it. Else add it. To get action of <form> Use var action_url = form.attr('action');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('#non').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
var action_url = form.attr('action');
$.ajax({
url: action_url,
type: "POST",
data: formData,
success: function (data) {
alert(data);
},
error: function () {
alert("Oops..!! Problem Ocurred. Please Try Again..!!");
}
});
});
</script>
User's Requirement
<script>
$('#non').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var val1 = $('#text1').val();
var val2 = $('#text2').val();
var action_url = form.attr('action');
$.ajax({
url: action_url,
type: "POST",
data: { text1: val1, text2: val2 },
success: function (data) {
alert(data);
},
error: function () {
alert("Oops..!! Problem Ocurred. Please Try Again..!!");
}
});
});
Or, check Send FormData and String Data Together Through JQuery AJAX?
Additional
<script>
$('#non').on('submit', function(e) {
e.preventDefault();
var form = $(this);
var formData = form.serialize();
var title_f = $('#mak').val();
var meaning_f = $('#za').val();
formData.append(title,title_f);
formData.append(meaning,meaning_f);
var action_url = form.attr('action');
$.ajax({
url: action_url,
type: "POST",
data: formData,
success: function (data) {
alert(data);
},
error: function () {
alert("Oops..!! Problem Ocurred. Please Try Again..!!");
}
});
});
Why not attach your Handler directly to the Submit-Button & do something like this:
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#submitBtn").on("click", function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
// HERE IS THE PROBLEM... THE $(this) VARIABLE POINTS TO THE BUTTON, NOT FORM.
var $form = $( this ).parentsUntil("form").parent("form"),
url = $form.attr( 'action' );
/* Send the data using post */
var posting = $.post( url, { title: $('#mak').val(),meaning: $('#za').val()} );
/* Alerts the results */
posting.done(function( data ) {
alert('success');
});
});
Hi I'm new to this javavascript/ajax. I am trying to create a dropdown that dynamically changes the images by the different options as shown in this Fiddle here but the change function does not seem to be working.
I made sure that I am able to get the data from pictureList but the image source did not change successfully as the fiddle.
$('#selectVariant').change(function () {
var sku = $('#selectVariant :selected').val();
var sessionId="<?php echo $sessionId; ?>";
var dataString='sku='+ sku +'&sessionId='+sessionId;
$.ajax({
type:"post",
url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
data:dataString,
cache:false,
dataType: "JSON",
success: function(data){
var pictureList = {};
//example of my data list
//var pictureList = {'Apple SKU2': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
//'Pear1': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png"
//};
$.each(data.productVariantImages,function(i, productVariantImages){
pictureList[data.sku] = this.imagePath;
});
console.log(pictureList);
$('.content img').attr({"src":[pictureList[this.value]]});
}
});
return false;
});
However, when I do test it outside the ajax post, it is able to run.
Instance of this is change in ajax success function scope.
In this line $('.content img').attr({"src":[pictureList[this.value]]}); this
is not the instance of selectVariant element.
The usual practice for this is declare a variable that and use that variable in other scope. try the below code.
$('#selectVariant').change(function () {
var sku = $('#selectVariant :selected').val();
var sessionId="<?php echo $sessionId; ?>";
var dataString='sku='+ sku +'&sessionId='+sessionId;
var that = this;
$.ajax({
type:"post",
url: "<?php echo $base_url; ?>ajax-helper/search_variant.php",
data:dataString,
cache:false,
dataType: "JSON",
success: function(data){
var pictureList = {};
//example of my data list
//var pictureList = {'Apple SKU2': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/apples_in_season.png",
//'Pear1': "http://tos-staging-web-server-s3.s3.amazonaws.com/9/catalogue/pears.png"
//};
$.each(data.productVariantImages,function(i, productVariantImages){
pictureList[data.sku] = this.imagePath;
});
console.log(pictureList);
$('.content img').attr({"src":[pictureList[that.value]]});
}
});
return false;
});
I'm trying to auto submit a form when the username column is not null. i've got my script down there but since i'm new to jquery, i've got it missed up and its not working
$(function() {
var $username = $('#username'),
if ($username != null){
$("#form1").submit,function(event){
event.preventDefault();
data = $(this).serialize();
$.ajax({
type: "POST",
url: "http://mysample.com/ans.php",
data: data,
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
});
});
Try to use on change listener, like
$(document).on('change', '#input_id', function(e) {
$('form_selector').submit();
});
$(document).on('submit', 'form_selector', function(e) {
//Your ajax submit logic
});
If you want to do an AJAX submission, just call $.ajax in the if:
$(function() {
var $username = $("#username").val();
if ($username != '') {
$.ajax({
type: "POST",
url: "/ans.php",
data: $("#form1").serialize(),
success: function(data) {
$('#log_msg').html(data);
var result = $.trim(data);
if(result==="ok"){
window.location = 'page.html';
}
});
}
});
You don't need to define a $("#form1").submit() handler for this.