I have an Jquery Autosuggest dropdown.
The function is running ok.
Now I want when I right click or click everywhere the display box must be keep show. Because I found problem when autosuggest search have a link. The link can't open because before click link the dropdown box closed.
Here it my JS code so far :
$(document).ready(function(){
$(".searchs").keyup(function()
{
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{
$("#display").hide();
}
else
{
$.ajax({
type: "POST",
url: "searchs.php",
data: dataString,
cache: false,
success: function(html)
{
$("#display").html(html).show();
}
});
}
return false;
});
$(".searchs").blur(function(){
$("#display").hide();
});
$(".searchs").focus(function(){
var seachbox = $(searchbox).val();
if(seachbox != '')
{
$("#display").show();
}
});
});
Someone have an idea ?
this the way to keep showing AutoComplete result list: DEMO
$("#tags").autocomplete({
source: availableTags,
close : function (event, ui) {
val = $("#tags").val();
$("#tags").autocomplete("search", val).focus();
return false;
}
});
The reason your drop down box is closing is because whenever you deselect you 'searchs' class, you hide the drop down box. To fix this, you can try a couple different things.
1: put your drop down box(the one with an id of 'display') in the the
'searchs' class. that would look something along the lines of:
<div id = "display" class = "searchs"></div>
2: when your $(".searchs").blur event is triggered, before executing $("#display").hide(); check if the new focus is your display div:
$(".searchs").blur(function(){
if($("#display").blur(function(){ //<--- if the new focus is not the display div, then hide display
$("#display").hide();
}
});
Related
I am using this jQuery plugin for making toggle, but I have an issue that when I make multiple toggles that have same ids and class so in that case I am not able to identify particular toggle for applying auto load ajax on changing value.
I would to ask that how I make same toggle with this same plugin but different ids or class or name so I make ajax function like when I click toggle it will update in PHP without submitting submit button.
The plugin I am using is this one
The code I am using is this:
HTML
<p>Default: <span class="easyswitch"></span></p>
<p>Checked: <span class="easyswitch" data-default="1"></span></p>
SCRIPT
<script>
$('.easyswitch').easyswitch();
</script>
AJAX
$('MY_CLASS_NAME').change(function(){
var mode= $(this).prop('checked');
$.ajax({
type:'POST',
dataType:'JSON',
url:'test.php',
data:'mode='+mode,
success:function(data)
{
$("body").html('Operation Saved');
}
});
You can not handle easyswitch's change event. you need to create click event of it, and from it you can get the status of current toggle.
$('.easyswitch').easyswitch();
$('.easyswitch').click(function () {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
// for all controlls.
$(".easyswitch").each(function() {
var mode = $(this).hasClass('on');
toogleStatus(mode);
});
function toogleStatus(mode)
{
if (!mode) {
alert('checked')
}
else {
alert('unchecked')
}
}
Try using callback option
$('.easyswitch').easyswitch({
callback: function(val, ele) {
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'test.php',
data: { mode: val },
success: function(data) {
$("body").html('Operation Saved');
}
});
}
});
How can I add toggle function to a div which is populated with ajax response on click. Right now i can achieve the both functions but I need two clicks to get the div displayed after getting populated. Can I get this done at one click (i.e populating the div and adding toggle function)?
Any help would be greatly appreciated.
My code:
$(document).ready(function(){
$(".ex2").on('click', '.spnSelected', function() {
var self = $(this).closest("tr");
var col1_value = self.find(".col1").text();
$.ajax({
type: 'GET',
url: 'reportForm.php',
data: { propid: col1_value },
success: function(response) {
$('#form'+col1_value).html(response);
$('#form'+col1_value).toggle();
}
});
});
});
Second line $(".ex2").on('click', '.spnSelected', function() { change to $("body").on('click', '.ex2 .spnSelected', function() { should work like charm.
in you code you attached event on .ex2 click, so if you adding more .ex2 elements with ajax. you don't have event attached on new elements. when you attact click event on body and then check if .spnSelected clicked this shuld work with new elements.
Following is my auto suggest code created using jquery
$(document).ready(function(){
$(".input_search").keyup(function()
{
var finder = $(this).val();
var queryString = 'key_wrd='+ finder;
if(finder==''){//check if search is empty}
else
{
$.ajax({
type: "POST",
url: "searcher.php",
data: queryString,
cache: false,
success: function(html)
{
$(".display_found_query_cont").fadeIn();
$(".display_found_query-window").append(html);
}
});
}return false;
});
});
This code closes the suggest window and clears the enterse text
$(document).mouseup(function (e)
{
var search_res_container = $(".display_found_query_cont");
if (!search_res_container.is(e.target)&& search_res_container.has(e.target).length === 0)
{
search_res_container.fadeOut().html();
$(".search_field").val('');
}
});
what do i want to do ?
I want the results displayed to be cleared when the text entered is erased
So how do i do that?
try this code:
if(finder=='')
{
//check if search is empty
$(".display_found_query-window").html('');
}
As per your comment, you want to replace the old content with new result. So just chnage the below line in your ajax success.
$(".display_found_query-window").html(html);
Myproblem is when I click my first selectbox, after there is a value, it will trigger the second selectbox. I implement it in Ajax, but successfully render ,but my other textfield value is gone. How could I just render a specific part of the responde html(success ajax call)?
$(document).ready(function(){
if ($('#product_category').val() == 'Choose Category')
document.getElementById('product_subcategory').disabled = true;
$('#product_category').change(function () {
if ($('#product_category').val() == 'Choose Category')
document.getElementById('product_subcategory').disabled = true;
else
document.getElementById('product_subcategory').disabled = false;
data = $('#product_category').val();
//alert(data);
var param = 'category_name=' + data;
$.ajax({
url: MYURL,
data: param,
success: function(result) {
alert('Choose product subcategory');
alert(param);
$('body').html('');
$('body').html(result);
}
});
// window.location = MYURL?category_name="+data;
});
$('#product_subcategory').change(function () {
data = $('#product_subcategory').val();
// paramCategory = $(document).getUrlParam('category_name');
// alert(paramCategory);
$.get(MYURL, function(data){
alert("Data Loaded: " + data);
});
//window.location = MYURL?subcategory_name=" + data;
});
});
in my form, i use $_GET['category_name'] to get my value Ajax return value. I Debug in firebug, and it is successfully. I tried to render again the html, but my previous textarea's value and textfiel's value is gone since what i did is $('body').html(''); $('body').html(result);, So,how could I manage to get the success ajax return value, and use it in the PHP.
any confusion ,please tell me...
Thank you for spending ur time.
Hmm, I'm using a div and show the Div when it was return success ajax call.
the problem is here,
$('body').html('');
$('body').html(result);
you are blanking whole body and inserting new result. You have to change it to just
$('#second_select_box_id').html(result);
$('body').html('');
$('body').html(result);
This is emptying your page and inserting in it your result, I supose that what you really want to do is to load your second dropdown with the result, for that you'll need to do
$("#product_subcategory").html(result);
Of course, this will depend on what are your ajax function returning on result
You have two ways to do it.
Add the text from PhP while returning the data for Ajax call
Add the data back to the text box after loading the page..
data = $('#product_category').val();
//alert(data);
var param = 'category_name=' + data;
$.ajax({
url: MYURL,
data: param,
success: function(result) {
alert('Choose product subcategory');
alert(param);
$('body').html('');
$('body').html(result);
$('#product_category').val(data);
}
});
can you please try this
$(body).html('');
$(body).html(result);
i have these two jquery scripts on my html page, one of them loads more results(like pagination), and the other one replies to users messages, just like twitter!
the replies works(inserts username into textbox), when the page is on default, but when i load more results, the loaded results wnt insert the username into the textbox!! these are the two scripts,
the replies jquery:
function insertParamIntoField(anchor, param, field) {
var query = anchor.search.substring(1, anchor.search.length).split('&');
for(var i = 0, kv; i < query.length; i++) {
kv = query[i].split('=', 2);
if (kv[0] == param) {
field.val(kv[1]);
return;
}
}
}
$(function () {
$("a.reply").click(function (e) {
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this,"reply_name",$("#reply_name"));
insertParamIntoField(this, "replyto", $("#inputField"));
$("#inputField").focus()
$("#inputField").val($("#inputField").val() + ' ');
e.preventDefault();
return false; // prevent default action
});
});
the loadmore jquery script:
$(function() {
//More Button
$('.more').live("click",function()
{
var ID = $(this).attr("id");
if(ID)
{
$("#more"+ID).html('<img src="moreajax.gif" />');
$.ajax({
type: "POST",
url: "ajax_more.php",
data: "lastmsg="+ ID,
cache: false,
success: function(html){
$("ul.statuses").append(html);
$("#more" + ID).remove();
}
});
}
else
{
$(".morebox").html('The End');
}
return false;
});
});
EDIT: when i load more posts, and i click reply the page is refershed, so that ends up with loaded data being hidden again!!
If the reply button is being replaced by the ajax, this might be a workaround.
$(function () {
$("a.reply").live(click, function (e) {
insertParamIntoField(this,"status_id",$("#status_id"));
insertParamIntoField(this,"reply_name",$("#reply_name"));
insertParamIntoField(this, "replyto", $("#inputField"));
$("#inputField").val($("#inputField").val() + ' ').focus();
e.preventDefault();
});
});
Also... If the status_id, reply_name , replyto info is contained within your reply button, make sure these data exists for each reply button after the more button is clicked.