We Keep Coding

Add ajax to existing page with jquery-ui

I need help with an advanced search I implemented into a new existing page system.
It seems there is a problem with the existing jquery ui on the page:
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="js/jquery.lazy.min.js"></script>
When I enter my code the page isn't working properly anymore.
My code:
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#warenkorb_suche_feld').focus();
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#warenkorb_suche_feld').val();
$('b#search-string').text(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
$("input#warenkorb_suche_feld").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
});
The search script works fine but I need to add
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And after this page stops working. What can I do to get this stuff working?

Consider the following. I was not able to test it.
$(function() {
function search(term, callback) {
$('b#search-string').text(term);
$.ajax({
type: "POST",
url: "search.php",
data: {
query: term
},
cache: false,
success: function(html) {
$("ul#results").html(html);
if(callback && (typeof callback == "function")){
callback();
}
}
});
return false;
}
$('div.icon').click(function() {
$('input#warenkorb_suche_feld').focus();
});
$("input#warenkorb_suche_feld").on("keyup", function(e) {
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string.length > 0) {
$("ul#results, h4#results-text").fadeOut(400, function() {
search(search_string, function() {
$("ul#results, h4#results-text").fadeIn();
});
});
}
});
});
This makes use of the complete callback for .fadeOut(). So once it has faded, it will then run the search. I added a Callback in the search so that once the AJAX has completed, it will reveal the results with .fadeIn().
You may want to consider adjusting the length condition. This ensures

Communication between browser tabs: page titles must be updated synchronously for all browser tabs

what i have: page title is updating dynamically when new data is retrieving from ajax call; if tab with this page is visited - title is set to default value; if i open the second tab with this page, title of this tab is set to default (i must fix this)
what i need: page title must be the same for all tabs with this page. i mean, page title must be updated synchronously for all tabs.
My current implementation:
var prevData;
var newRequestsCounter = 0
var getRequests = function(){
$.ajax({
async: true,
type: "GET",
url: "/get_requests/",
success: function(data){
// retrieve and parse data. i skip this part
// newRequestsCounter is updating here
var visible = vis();
if (visible){
newRequestsCounter = 0
document.title = 'Default title'
} else {
if (newRequestsCounter == 0) {
document.title = 'Default title'
} else {
document.title = 'Dynamic title'
}
}
setTimeout(getRequests, 2000)
}
});
};
I tried with intercom.js, but it doesn't work properly. For some reason intercom.on gets different data each time. For example: first call - default title, second call - dynamic title. I checked with debug, wrong data comes after executing this line setTimeout(getRequests, 2000).
var intercom = Intercom.getInstance();
intercom.on('notice', function(data) {
document.title = data.title;
});
var prevData;
var newRequestsCounter = 0
var getRequests = function(){
$.ajax({
async: true,
type: "GET",
url: "/get_requests/",
success: function(data){
// retrieve and parse data. i skip this part
// newRequestsCounter is updating here
var visible = vis();
if (visible){
newRequestsCounter = 0
intercom.emit('notice', {title: 'Default title'});
} else {
if (newRequestsCounter == 0) {
intercom.emit('notice', {title: 'Default title'});
} else {
intercom.emit('notice', {title: 'Dynamic title'});
}
}
setTimeout(getRequests, 2000)
}
});
};
In general, i don't quite understand if it possible to achieve required functionality in scope of single ajax callback. I tried the next code. In this case variable "counter" from localStorage is incremented every time i open new tab. It means if i expect "3" in title for two tabs, i get "6" with two tabs instead.
var intercom = Intercom.getInstance();
intercom.on('notice', function(data) {
document.title = data.title;
});
if (localStorage.getItem("counter") === null){
localStorage.setItem("counter", 0);
}
var getRequests = function(){
$.ajax({
async: true,
type: "GET",
url: "/get_requests/",
success: function(data){
// skip part with retrieving and parsing data
var counter = localStorage.getItem("counter")
localStorage.setItem("counter", ++counter);
var visible = vis();
if (visible){
localStorage.setItem("counter", 0);
intercom.emit('notice', {title: 'Default'});
} else {
if (localStorage.getItem("counter") == 0 || localStorage.getItem("counter") === null) {
intercom.emit('notice', {title: 'Default'});
} else {
intercom.emit('notice', {title: '(' + localStorage.getItem("counter") + ') requests'});
}
}
setTimeout(getRequests, 2000)
}
});
};
getRequests();

The part I am not understanding in your code is where you are opening a new browser tab. But, if that happening somewhere and you want to set the title of that new tab as its opening you can do this:
var newTab = window.open('/page')
newTab.title = 'New Title';

are you using some kind of long polling?
Maybe you can synchronise those polling calls with the browser's time.
e.g. poll everytime the browser's time's seconds are even numbers. then each tab should send its request at the same time and get (almost) at the same time an answer to update there title

Disable 2 buttons after click of a button

I have a submit button on page index.php When i click this button another script (call.php) is called through ajax that holds some response. Now i want that time between the click of submit button and response displayed/received under a div through the call of ajax script the buttons option1 and option2 should get disabled. and when succesfully the result is dispalyed the 2 buttons should get enabled, however i am not able to do so. can anyone help me with it
3 buttons and script code on index.php page is
<button class="rightbtn" type="button" id="submitamt" style="display:none; ">Submit</button>
<button class="botleftbtn" type="button" id="walkaway" style="display:none">Option1</button>
<button class="botrightbtn" type="button">Option2</button>
<script>
function myFunction() {
alert("You need to login before negotiating! However you can purchase the product without negotiating");
}
var startClock;
var submitamt;
var walkaway;
var digits;
$(function() {
startClock = $('#startClock').on('click', onStart);
submitamt = $('#submitamt').on('click', onSubmit);
walkaway = $('#walkaway').on('click', onWalkAway);
digits = $('#count span');
beforeStart();
});
var onStart = function(e) {
startClock.fadeOut(function() {
startTimer();
submitamt.fadeIn(function() {
submitamt.trigger('click'); // fire click event on submit
});
walkaway.fadeIn();
});
};
var onSubmit = function(e) {
var txtbox = $('#txt').val();
var hiddenTxt = $('#hidden').val();
$.ajax({
type: 'post',
url: 'call.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
$('#proddisplay').html(returndata);
},
error: function() {
console.error('Failed to process ajax !');
}
});
};
var onWalkAway = function(e) {
//console.log('onWalkAway ...');
};
var counter;
var timer;
var startTimer = function() {
counter = 120;
timer = null;
timer = setInterval(ticker, 1000);
};
var beforeStart = function() {
digits.eq(0).text('2');
digits.eq(2).text('0');
digits.eq(3).text('0');
};
var ticker = function() {
counter--;
var t = (counter / 60) | 0; // it is round off
digits.eq(0).text(t);
t = ((counter % 60) / 10) | 0;
digits.eq(2).text(t);
t = (counter % 60) % 10;
digits.eq(3).text(t);
if (!counter) {
clearInterval(timer);
alert('Time out !');
resetView();
}
};
var resetView = function() {
walkaway.fadeOut();
submitamt.fadeOut(function() {
beforeStart();
startClock.fadeIn();
});
};
</script>

You can achieve this by disabling the buttons before you make the AJAX request, and then enabling them again in the complete handler of the request. Try this:
var onSubmit = function(e) {
var txtbox = $('#txt').val();
var hiddenTxt = $('#hidden').val();
$('.botleftbtn, .botrightbtn').prop('disabled', true); // < disable the buttons
$.ajax({
type: 'post',
url: 'call.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
$('#proddisplay').html(returndata);
},
error: function() {
console.error('Failed to process ajax !');
},
complete: function() {
$('.botleftbtn, .botrightbtn').prop('disabled', false); // < enable the buttons
}
});
};
Note that its best to enable the buttons in the complete handler and not the success handler. This is because if there is an error the buttons will never be enabled again.

Disable the buttons on click, and enable them on ajax success:
var onSubmit = function(e) {
var txtbox = $('#txt').val();
var hiddenTxt = $('#hidden').val();
//Disable buttons ---------------------- //
//Give an id to the second button
$('#walkaway, #the_other_button').prop('disabled', true);
$.ajax({
type: 'post',
url: 'call.php',
dataType: 'json',
data: {
txt: txtbox,
hidden: hiddenTxt
},
cache: false,
success: function(returndata) {
$('#proddisplay').html(returndata);
//Enable buttons ---------------------- //
$('#walkaway, #the_other_button').prop('disabled', false);
},
error: function() {
console.error('Failed to process ajax !');
}
});
};

In your onsubmit() code, get a var reference to the buttons you wish to deactivate
Var btn1 = document.getElementbyId("btn1");
But you would have to set an Id for the two buttons.
You can disable these in your submit code and then enable them when your timer is done.
Btn1.disabled = true;
When your timer is done, set it as false the same way.

Adding Gritter Message After Second Deletion

I'm trying to find out why when a user is deleted by clicking on the ajax-delete class icon and performs the deletion process it shows the gritter message after deletion however if you were to immediately delete another user afterwards it removes the previous gritter message but doesn't show another for that second deletion. Any ideas on why this could be?
EDIT: I have figured out that the issue belongs to the $.gritter.removeAll(); code line. When there is another existing notification it removes it but doesn't add the next notification.
Any ideas what I should do here?
var rowToDelete = null;
var basicTable = null;
var api_url = null;
$(document).ready(function() {});
$(document).on('click', '.ajax-delete', function(e)
{
console.log(basicTable);
e.preventDefault();
//defining it like this captures and optimizing the need to cycle over the DOM more than once
//in subsequent calls to the element specifically
$elem = $(this);
$parentElem = $elem.closest('tr');
rowToDelete = $parentElem.get(0);
api_url = $elem.attr('href');
runConfirmation($('td:eq(1)', $parentElem).text());
});
function runConfirmation(nameSting)
{
$mymodal = $('#myModal');
$('.modal-body p', $mymodal).html('Are you sure you want to delete this <strong>'+nameSting+'</strong>?');
$mymodal.modal('show');
}
$('#myModalConfirm').on('click', function(e) {
$.ajax({
type: 'post',
url: api_url,
data: { _method: 'DELETE' },
dataType: 'json',
success: function(response) {
$.gritter.removeAll();
var className = 'growl-danger';
if (response.status == "SUCCESS") {
className = 'growl-success';
basicTable.fnDeleteRow(basicTable.fnGetPosition(rowToDelete));
rowToDelete = null;
api_url = null;
}
$.gritter.add({
position: 'top-right',
fade_in_speed: 'medium',
fade_out_speed: 2000,
time: 6000,
title: response.title,
text: response.message,
class_name: className,
sticky: false
});
}
});
$('#myModal').modal('hide');
});

Replace the following line:
$.gritter.removeAll();
With
$('.gritter-item-wrapper').remove();

jquery autocomplete open function getting called twice

I have a function that attaches an autocomplete to any textbox I pass into it. As you can see, in the open function, towards the end, I fill in the word for the user and select the autofilled part so that they can delete it by pressing the delete key. The problem I am having is that when I delete the autofilled/autoselected part by pressing delete, the open function runs again for some reason and autofills the word again. This behavior only happens once. If I go ahead and delete the autofilled text for a second time, the textbox stays that way.
function attachAutoComplete(id, webMethod) {
$("#" + id).autocomplete({
source: function (request, response) {
$.ajax({
url: webMethod,
data: "{ 'pre':'" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return { value: item }
}))
}
});
},
messages: {
noResults: '',
results: function () { }
},
minLength: 2,
open: function () {
$('.ui-autocomplete').css('width', '169px');
$('.ui-autocomplete').css('z-index', '10000');
$('.ui-autocomplete').css('list-style-type', 'none');
$('.ui-autocomplete').css('border-width', '1px');
$('.ui-autocomplete').css('border-color', '#b6b6b6');
$('.ui-autocomplete').css('border-style', 'solid');
$('.ui-autocomplete').css('background-color', '#fff');
$('.ui-autocomplete').css('padding', '0px');
$('.ui-menu-item').css('cursor', 'pointer');
var input = $(this),
firstElementText = input.data("ui-autocomplete").menu.element[0].children[0].textContent,
original = input.val();
input.val(firstElementText);
input[0].selectionStart = original.length;
input[0].selectionEnd = firstElementText.length;
},
close: function () {
var input = $(this);
var firstThreeLetters = input[0].id.substring(0, 3);
if (firstThreeLetters == "SNP") {
GetVariantsGene(input);
}
}
});
}
Thanks in advance
update: The open function only runs again if the last character that the user entered is a letter. If the last character is a number, it does not run again.