I have done an auto complete such that when I click the selected result it appends to a div.
image when picking a vehicle
But when I navigate away from that popup and return to it. When I do a search and click the result I want, it appends two values at a go with the second one as empty like in the next image.
the second image with a blank value
How do I prevent this from happening ?
My code is as shown below:
$(function(){
$(".search1").keyup(function() {
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!=''){
$.ajax({
type: "POST",
url: "assets/ajax/search1.php",
data: dataString,
cache: false,
success: function(html){
$(".resultgeter").html(html).show();
}
});
}return false;
});
$(document).on('click', ".showing" , function() {
var vhlid = $(this).html();
$(".searchid").append('<div class="choice"><div class="pickVehicle">'+vhlid+'</div><div class="select2-search-choice-close"></div></div>');
$(this).html("");
this.html = "";
$(this).remove();
$(".resultgeter").fadeOut();
return false;
});
$('.search1').click(function(){
$(".resultgeter").fadeIn();
return false;
});
});
I don't know the real solution for this, but a trick might work.
Adding an if statement to make sure vhlid is not blank while appending.
$(document).on('click', ".showing" , function() {
var vhlid = $(this).html();
if(vhlid!=" " || vhlid.length>1) {
$(".searchid").append('<div class="choice"><div class="pickVehicle">'+vhlid+'</div><div class="select2-search-choice-close"></div></div>');
}
$(this).html("");
this.html = "";
$(this).remove();
$(".resultgeter").fadeOut();
return false;
});
Related
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
I have a pretty basic step by step wizard I created. When you select an option from a drop down menu on page 1, I load a new page via jQuery ajax. If you hit back, it loads the original page again.
However after loading the original page again, my modelSelect() function that loads page 2 stops working. Doesn't fire at all. I'm not exactly sure what I'm doing wrong.
I'm hoping someone can see what I'm doing wrong. My code is below:
//Collapse panel handling
var group = jQuery('.estimator-container');
jQuery('.tab-click').click(function() {
group.find('.collapse.in').collapse('hide');
jQuery(this).parent().toggleClass('active');
});
/* -------------------------------------- *\
New form handler
\* -------------------------------------- */
function modelSelect(v) {
jQuery('#page_2, .estimator-container').toggle();
// Ajax for loading page_2
jQuery.ajax({
type: "POST",
data: v,
success: function() {
jQuery('.estimator-app').load(templateUrl + "/page-estimator2.php?p=" + v);
}
});
}
jQuery('.estimator-panel').on('change', '.select-model', function() {
var v = jQuery(this).val();
modelSelect(v);
}); //end on change function
// Back and continue handling
jQuery('.estimator-app').on('click', '.estimator_form_btn_next', function() {
var backBtn = jQuery('.estimator_form_btn_back');
var continueBtn = jQuery('.estimator_form_btn_next');
var firstPage = jQuery('#contact-first-page');
var lastPage = jQuery('#contact-last-page');
if (firstPage.is(":visible")) {
firstPage.toggle();
lastPage.toggle();
}
}); //end continue
// Go back
jQuery('.estimator-app').on('click', '.estimator_form_btn_back', function() {
var backBtn = jQuery('.estimator_form_btn_back');
var continueBtn = jQuery('.estimator_form_btn_next');
var firstPage = jQuery('#contact-first-page');
var lastPage = jQuery('#contact-last-page');
if (lastPage.is(":visible")) {
firstPage.toggle();
lastPage.toggle();
} else {
jQuery.ajax({
type: "POST",
// data: v,
success: function() {
jQuery('.estimator-app').load(templateUrl + "/estimator-initial.php");
}
});
}
}); //end continue
Simple delegation.
Adding jQuery(document).on('change', '.select-model', function(){ on line 29 made it work.
Change your this line:
jQuery('.estimator-panel').on('change', '.select-model', function() {
to this
jQuery(document).off('change', '.select-model').on('change', '.select-model', function(e){
e.preventDefault();
because if HTML is loaded after page load OR by some kind of JS, you need to deattach event and then attach back,
Hello is that possible to make two condition from 1 button clicked?
if(unable == 4) {
$("#formitem").submit(function () {
$("#order_4").appendTo("body");
var message = "<?=$message_change_location?>";
var resotid = <?=$restaurant_info["restaurant_id"]?>;
var restoname = "<?=$restaurant_info["restaurant_name"]?>";
var restomenu = "<?=$restaurant_menu?>";
var postal = "<?=$postal?>";
var delivery_no = "<?=$delivery_no?>"
jQuery.ajax({
type: "GET",
url: "/ajax/order_unable",
dataType: 'html',
data: {
message_change_location: message,
restid: resotid,
restname: restoname,
restmenu: restomenu,
postal: postal,
delivery_no: delivery_no,
},
success: function (res) {
$("#order_4_show").html(res);
$("#order_4").modal("show");
}
});
return false;
});
}else if($("#second_notif") == "show"){
$("#formitem").submit(function () {
alert("asdf");
});
I want to make a condition if second_notif is showed, than if i click $("#formitem") for the second times will show the alert. The first click will show pop up windows, and there is not any problem here.
in the pop up windows there is a script to show the second_notif, with this following code :
<script>
$(document).ready(function() {
$("#change_location_2").click(function () {
$(".vendor-heading").hide();
$(".location-header").hide();
$("#order_4").modal("hide");
$("#second_notif").show();
return true;
});
});
</script>
and there in same page on where to show the pop up windows there is a code to show the second_notif too :
$("#change_location").click(function(){
$(".vendor-heading").hide();
$(".location-header").hide();
$("#second_notif").show();
return true;
});
here is the view for the second_notif :
<div id="second_notif" style="display:none;">
<?php $this->load->view('MAIN/'.country_code.'/search');?>
</div>
I can show the pop up windows, and show the second_notif when i clicked formitem button, but when the second_notif has been showed and if i clicked the same button again, why i cant show the alert?
guys can you help me how to show the alert?
p.s alert is not my goal, i will change the alert to other view
please help me guys, thank you (:
First of all, you only need one event handler for this method. You can then move your conditionals into the handler.
Secondly, your condition $('#second-notif') == 'show' will not work, as is will never evaluate to true. To test if an element is visible using jQuery, use the .is(':visible') method. Here's a quick example of what you're looking for:
JSFiddle
Bind the two element in single handler
$("#change_location_2, #change_location").click(function () {
$(".vendor-heading").hide();
$(".location-header").hide();
$("#order_4").modal("hide");
$("#second_notif").show();
return true;
});
how if you add condition to form submit like this ?
$("#formitem").submit(function () {
if(unable == 4) {
$("#order_4").appendTo("body");
var message = "<?=$message_change_location?>";
var resotid = <?=$restaurant_info["restaurant_id"]?>;
var restoname = "<?=$restaurant_info["restaurant_name"]?>";
var restomenu = "<?=$restaurant_menu?>";
var postal = "<?=$postal?>";
var delivery_no = "<?=$delivery_no?>"
jQuery.ajax({
type: "GET",
url: "/ajax/order_unable",
dataType: 'html',
data: {
message_change_location: message,
restid: resotid,
restname: restoname,
restmenu: restomenu,
postal: postal,
delivery_no: delivery_no,
},
success: function (res) {
$("#order_4_show").html(res);
$("#order_4").modal("show");
}
});
return false;
}else if($("#second_notif") == "show"){
alert("asdf");
}
});
I have 5 tabs when i am checking select all check box on current tab it is checking other tabs rows also.Plz help me.
Below code:
$('.group-checkable').click(function() {
var $checkboxes = $(':checkbox');
$checkboxes.prop('checked', $(this).is(':checked'));
});
$(document).delegate('.deleteAll', 'click', function() {
if($('input[name=credential_id]:checkbox:checked').length>0){
var check = confirm("Do you wish to continue?");
if(check){
var credential_ids = new Array();
$('input[name=credential_id]:checkbox:checked').each(function(i){
credential_ids[i] = $(this).val();
});
$.ajax({
url: 'credentials/delete',
type: 'GET',
datatype:'json',
data: { credential_ids:credential_ids},
success: function(response) {
console.log(response);
},
});
} `enter code here`
}
else{
alert("Sorry..No Record Selected..!");
}
});
It's here:
$('.group-checkable').click(function() { // when 'group-checkable' is clicked
var $checkboxes = $(':checkbox'); // find ALL checkboxes
$checkboxes.prop('checked', $(this).is(':checked')); // Set their checked attribute
});
You will want to adjust the selector on the 2nd line to be more selective.
I have the following code:
console.log($(".resultLike"));
$(".resultLike").on("click", function (event) {
alert('test');
event.stopPropagation();
alert('test1');
value['clicked'] = 1;
$.ajax({
url: 'scripts/php/userProfile.php',
data: {
action: value
},
type: 'post',
dataType: 'json',
success: function (profileData) {
if (profileData == 'removed') {
$(me).children('.resultInside')
.children('.resultData')
.children('.resultLike').html('Favourite?');
} else if (profileData == 'notLoggedIn') {
$(me).children('.resultInside')
.children('.resultData')
.children('.resultLike').html('Login to add');
} else {
$(me).children('.resultInside')
.children('.resultData')
.children('.resultLike').html('un-Favourite');
}
}
});
});
My expectations is that when you click on the div resultLike, then it will preform the function(). However, it does nothing. I have two alert() calls in there, and neither is being called. The output of console.log() is as follows:
[
<div class="resultLike searchBarGameLike"></div>
]
That proves it's being put on the page. Any help would be appreciated, thanks.
EDIT:
I think it should be mentioned that I'm actually using two .on() events.
This is actually all my code. The issue is around the
$("body").on("click", ".resultLike", function(){
Line, it's not working.
$searchedGamesContainer.on(
"click",
".box",
function(event){
if(!$displayLock){
$displayLock = true;
var description;
var user_id;
if($(this)[0].style.width == '75%'){
var org_img = $(this).children(".resultInside").find("img").attr("src");
$(this).children(".resultInside").append("<img src='"+org_img+"' id='imgId'/>");
$(this).children(".resultInside").css('height','auto');
$(this).css('width', '18%');
$(this).css('height', 'auto');
$(this).find(".resultData").fadeOut('fast');
setTimeout(function(){$searchedGamesContainer.masonry('reload');},300);
setTimeout(function(){$displayLock = false;},1000);
}else{
var me = this;
var pos;
largeImage= new Image();
value['name']=$(me).find("p").html();
oldImage = $(this).find("img").attr("src");
for(var i = 0; i<$searchBarGames.length; i++){
if($searchBarGames[i][5] == value['name']){
pos = i;
break
}
}
description = $searchBarGames[pos][2];
$(me).find("img").hide();
largeImage.src = $searchBarGames[pos][4];
$(me).find("img").attr("src",largeImage.src);
$(me).children(".resultInside").css('height','400px');
$(me).css('width', '75%');
$(me).children(".resultInside").html("\
<div class='resultData'>\
<div class='resultImg'><img src='"+ largeImage.src +"'></div>\
<div class='resultName'>" + value['name'] + "</div>\
<div class='resultDesc'>" + description +"</div>\
<div class='wikiLink searchBarGameWiki'><a href='http://wikipedia.org/wiki/" + value['name'] + "'>Wikipedia</a></div>\
<div class='resultLike searchBarGameLike'></div>\
</div>");
value['clicked']=0;
$.ajax({
url:'scripts/php/userProfile.php',
data:{action:value},
type: 'post',
dataType: 'json',
success:function(profileData){
//logic
}
});
console.log($(".resultLike"));
$("body").on("click", ".resultLike", function(){
alert('test');
event.stopPropagation();
alert('test1');
value['clicked']=1;
$.ajax({
url:'scripts/php/userProfile.php',
data:{action:value},
type: 'post',
dataType: 'json',
success:function(profileData){
//logic
}
});
}
);
}
}
}
);
try
$("body").on("click", ".resultLike", function(){
// your code goes here.
});
Your implementation will likely not be bound if the div.resultLike is added dynamically
This problem actually ended up being completely because of CSS.
For the div element I wanted the alerts on, I had markup to look like a button.
However, I noticed this:
.resultLike:active {
position:relative;
top:1px;
z-index:1235;
}
I'm not 100% why, but I think this was actually changing where the button was when clicking it. Meaning as soon as it was active, it wasn't where your mouse was. I could be wrong, but this fixed it.