jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Share tech news, updates, or what's on your mind.

Sign up to Post

I have a search field which provides data from a database for the user. It works well but the autocomplete coding doesn't.  The station names are suppose to automatically show. Please see the code below...

<h3>Search Box</h3>
    <label>Type Station Name</label>
    <input id = "stationBox" type="text">
    <ul id="autoList"></ul>
    <button id ="stationOne" >Submit</button>
    <div id="searchResult"></div>

Open in new window


//Inserting information in a search bar--
<script>
  $(document).ready(() => {
    $('#stationOne').click(() => {
      var requestUrl = 'stationNames/' + $('#stationBox').val();
      console.log('making ajax request to', requestUrl)
      $.ajax({
          url:requestUrl,
          type:'GET',
          datatype:'json',
          success: (data) => {
          console.log('You received some', data);
            
          var search_data = '';
            $.each(data, function (key, value) {
              //console.log(value.ID);
              search_data += '<li>ID: ' + value.ID + '</li>' +
                '<li>Station: ' + value.Station + '</li>' +
                '<li>Address: ' + value.Address + '</li>' +
                '<li>Sales: ' + value.Monthly_CStore_Sales + '</li>' +
                '<li>Operator: ' + value.Operator + '</li>' +
                '<li>Top SKU: ' + value.Top_SKU + '</li>' +
                '</<li>' + '<br/>';
            });

            $('#searchResult').html(search_data);
          }
      })
    });
  });
         

Open in new window

1
Using Jquery, I would like once the user selects a different item in the drop box list which was taken from a mysql database, that specific data to that field be displayed as formatted.

Currently, I am able to get the value of the item in the drop down box but I am unable to use it. I don't see many examples on the web which provides information regarding the use of the values.

<h3>Drop down Menu</h3>
    <select id="dmenu">
      <!--<option value = "" selected disabled>-- Choose Station --</option> -->
      <option selected="selected" id="opt">Choose your station</option> 
    </select>
    <div id="optionT"></div>
``````````````````````

  $(document).ready(() => {
    window.onload = ajaxCallback;
    function ajaxCallback(data) {
      var data;
      var myOptions;
      var output;
      $.ajax({
        url: 'http://localhost:5000/alldata',
        type: 'GET',
        datatype: 'json',
        success: (data) => {
          //$.each(data, function (index, value) {
                                   
          var output = [];

          $.each(data, function(key, value) {
          
            output.push('<option value="'+ key +'">'+ value.Station +'</option>');
          });
                       
          $('#dmenu').html(output.join(''));
        }
      })
     }
    });

       
         // (1) - alert( this.value ); produces the index position of station (e.g. 2, 3 etc)
         // (2) - alert($(this).find(":selected").value()); produces the 

Open in new window

1
I am using the jQuery date picker tool. When I select on an empty field I get a list of previously selected dates over top of the calendar. What do I need to do stop this from happening?

I have attached an image of what is happening.
Capture.PNG
0
Hello everyone ! I am trying to retrieve the country code when I use intlTelInput.
The mark and the number are well taken into account but the recovery of the callsign in Fr_Phone_1 gives me an error at the level of addEventListener.

$("#Fr_Telephone_1").intlTelInput({
initialCountry : "ci",
preferredCountries : ['ci','sn','tg','cd','fr'],

geoIpLookup	 : function(callback){
	$.get('https://ipinfo.io',function(){},"jsonp").always(function(resp){
		var countryCode=(resp && resp.country) ? resp.country : "";
		callback(countryCode);
	});
},
utilsScript : "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.1.0/js/utils.js"
});

var handleChange_1 = function() {
var text_1 = ($("#Fr_Telephone_1").isValidNumber()) ? $("#Fr_Telephone_1").getNumber() : "";
document.getElementById("Fr_Phone_1").value = text_1.replace('+','00');
};

document.querySelector("#Telephone_1").addEventListener('change', handleChange_1);
document.querySelector("#Telephone_1").addEventListener('keyup', handleChange_1);

Open in new window


I admit that I am a little lost and seek your help to correct this problem.
The values "_1" are administered at the first phone number, I can have as many "_2" ...

Thank you for your help
1
Hi everybody.
I'm still fighting with Javascript - I ususally do it :)
So, now I0m trying to recursively loop through an object to see if any property contains a string. I tried many pieces of code, but here I report two of them. Both give the same error:

snippet 1
                function iterate(obj, token) {
                    var cardsFound = [];
                    Object.keys(obj).forEach(function (key) {
                        if ($(obj[key]).toLocaleString().toLowerCase().indexOf(token.toLowerCase()) > -1) {
                            cardsFound.push(obj);
                        }
                        if (typeof obj[key] === 'object') {
                            iterate(obj[key]);
                        }
                    });
                    return cardsFound;
                }

Open in new window


Snippet 2
                function eachRecursive(obj, token) {
                    var cardsFound = [];
                    for (var k in obj) {
                        if (typeof obj[k] == "object" && obj[k] !== null) {
                            eachRecursive(obj[k]);
                        } else {
                            if (obj[k].toLocaleString().toLowerCase().indexOf(token.toLowerCase()) > -1) {
                                cardsFound.push(obj);
                            }
                        }
                    }
                    return cardsFound;
                }

Open in new window


The error is "TypeError: token is undefined" related to line 4 in the Snippet 1 and line 7 in the Snippet 2.

The calling handler event is as follows:
                $('#searchButton').on('click', function (e) {
                    e.preventDefault();
                    var sSearch = $('#searchbox').val();
                    alert(sSearch);
                    $('#card-wrapper').empty();
                    console.log(cards);
                    var foundCards = [];

                    foundCards = eachRecursive(cards, sSearch);

//                    foundCards = iterate(cards, sSearch);
                    console.log(foundCards);
                });

Open in new window


Any idea?
Thank you so much for any help.
0
Good Morning Dear Expert,

I'm actually using Cfswitch expression to play several module on the same page with a page's "refreshment" when i submit the form.. i would like to use Coldfusion and Ajax for a different experience.. Is it possible on a input or submit Click, to call an Ajax function on the same page and in this function, change the variable of the CFcase expression to play a different mudule ?

Any response will be helpful..
0
I am using jQuery   I have a a dropdown box and the the code is in a dialog box that opens from an onclick event(). I have a .change() event that fires twice.  I know this problem is caused by the dialog box because when I remove  the dialog box it works fine

Then at a later point the user selects one of these values

and I detect the change with this

			
$('#Code').change(function () {
				      var value = $(this).val();
				      var text = $(this).find(":selected").text();
				      alert(' Text = ' + text  + '  value = '  +value  );
                                      .... do more stuff
			        });

Open in new window

0
EE.aspx     ..........Want JQueryScript On Focus & On Blur to change Textbox color background...

Here is webpage with ASP.net textbox & code & css that should work -- http://www.enflow.com/CC/P1/EE.aspx

Here is CSS for focus class
        .focus {
          border: 2px solid red;
          background-color: #FEFED5;
      }

Open in new window


Here is Javascript JQuery
        //On Focus Change Textbox color - remove On Blur
        $(document).ready(function () {
            $('INPUT[type="text"]').focus(function () {
                $(this).addClass("focus");
            });

            $('INPUT[type="text"]').blur(function () {
                $(this).removeClass("focus");
            });
        });

Open in new window

0
Hi E's.
I try to validate a string with javascript, that just allow alpha characters, like this:
function isAlpha(str) {
  var code, i, len;
  for (i = 0, len = str.length; i < len; i++) {
    code = str.charCodeAt(i);
    if (!(code > 64 && code < 91) && // upper alpha (A-Z)
        !(code == 32) &&
        !(code > 96 && code < 123)) { // lower alpha (a-z)
      return false;
    }
  }
  return true;
};

Open in new window

The problem is, if the string is "joao cacador", the function return TRUE, but if I use the string "joão caçador" return FALSE.
What changes I have to do in my function for accept also characters like: "´`ç^~" (usually used in Portuguese names, like João, Caçador, etc).

The best regards,
JC
0
Assuming a table row, how can I switch out a value for another throughout all the elements contained within that row id, name, class, ...

To simplify the example, I have a value of format

w-x-y-z

where w & z are constant and know, but the x & y are wrong.  Now I can determine the proper x & y, but need to now update value throughout all the row elements wherever it may be used (I know it is used in id, name, class).

Here's a concrete example

<tr class="item-phone">
	<td style="width: 25px;">
		<button type="button" class="remove-phone btn btn-danger btn-xs table-control">
			<i class="glyphicon glyphicon-minus"></i>
		</button>
	</td>
	<td style="width: 225px;">
		<div class="table-control field-clientscontactsphones-0-0-phone required has-error">
			<input type="text" id="clientscontactsphones-0-0-phone" class="form-control" name="ClientsContactsPhones[0][0][Phone]" aria-invalid="true">
			<div class="help-block"></div>
		</div>
	</td>
	<td style="width: 60px;">
		<div class="table-control field-clientscontactsphones-0-0-phoneext">
			<input type="text" id="clientscontactsphones-0-0-phoneext" class="form-control" name="ClientsContactsPhones[0][0][PhoneExt]">
			<div class="help-block"></div>
		</div>
	</td>
	<td style="width: 175px;">
		<div class="table-control field-clientscontactsphones-0-0-phonetypeid">
			<select id="clientscontactsphones-0-0-phonetypeid" class="form-control" name="ClientsContactsPhones[0][0][PhoneTypeId]">
				<option 

Open in new window

1
Hi Experts,

Need some help with a fancy box that allows us to view larger version of images on pop up.  We are wondering whether we can have a zoom effect on the pop up, so that a user can zoom in or out when viewing the image in the popup fancybox jquery plugin.  Any suggestions would be great for our art gallery and art work viewing.

Rgds
1
Hello experts,

Need help with adding css on scroll of a navigation menu...we would like to have a transparent background on page load, but when the page is scrolled, a background color needs to be applied.  Please help with this... see -->> http://www.einsteinsolutions.xyz/chaminuka/public/home and scroll the page, need color applied to background when the page is scrolled but having trouble on implementing where it needs to be added.
1
Hello experts,

Need some help on a project we are working... our front end js has some issues.  On our art gallery, on the artwork view page, when we click an artwork, it opens up a fancy box, but when we close the fancy box view of the image, the image thumbnail disappears from the display.  You can check at: http://www.einsteinsolutions.xyz/chaminuka/public/artwork/unknown-9/profile

Trying figure out why that is happening?

Rgds
0
I have a form that includes a file upload that I'm submitting with Ajax. When the submit button is pressed, I want to change the text of the button to "Please wait" and disable it. Whether the form is successfully submitted or not, change the text back to "submit" and re-enable it once the function completes. This is not working. I've Googled up several suggested methods and haven't managed to get any of them to work, but I may be placing them incorrectly. Can you see where I'm going wrong? Thanks!

the jQuery in the .js file:

$(document).ready(function() {
	
	// submitting the video form
  $("#video-form").submit(function(e){	 
		 
		e.preventDefault();
		 		 
    var formData = new FormData($(this)[0]);
		 
		$.ajax({
			type: "POST",
			url: "ajax-video-submit.cfm",
			
			beforeSend: function (){
      	$("#submitVideo").val("Please wait...").attr("disabled", "disabled");
      },
			
			data: formData,
      async: false,
      cache: false,
      contentType: false,
      enctype: 'multipart/form-data',
      processData: false,
      
			success: function (response) {
      	$('#video-alert').html(response);
      },
			
			complete: function () {
       
      	$("#submitVideo").val("Submit").removeAttr("disabled");
      }
			

		});
	});
});

Open in new window


the button code:
<input type="submit" name="submitVideo" id="submitVideo" value="Submit" class="btn btn-primary btn-xl mt-2">

Open in new window

0
Hi Experts,

Need help with getting horizontal scroll arrows to work on mobile for a slider.  At the moment it is working on desktop but it is not working on mobile..check the link and see the artist scroll area http://www.einsteinsolutions.xyz/chaminuka/public/  not sure why they are not working on mobile but need to be able to scroll left and right on mobile for the artists on a page.
1
I'm making a simple call to a function in the onclick event of my input control. This same kind of call works on a different view in my project but my call is throwing an: "Object doesn't support this property of method" error message. Why is this happening?

<input type="submit" value="Back" name="btnBack" class="button" onclick="IsFormDirty()" />
.
.
.
        function IsFormDirty() {
            alert("test");
        }

Open in new window

0
Hello everybody,

I need JS to fetch all the data in the DB for one or more auto-generated stuff. First I create a global variable and make a forEach loop to get my data from the DB for each instance:
var datosRae = new Array();

arrayRaes.forEach(getRaesOriginalData);

Open in new window

Inside the function I call in the loop, I use AJAX to fetch the data arrays:
function getRaesOriginalData(value, uid, yacimiento) {
	
	var dataString = 'uid=' + uid + '&yacimiento=' + yacimiento + '&raeId=' + value;
	
	$.ajax ({
		url: 'get-rae-datos-originales.php',
		type: 'POST',
		data: dataString,
		dataType: 'json',
		success: function (d) {
			console.log(d);
			datosRae[value] = d;
		}
	});
	
}

Open in new window

The result is as expected (if 3 items are called, it brings me 3 arrays with all the data), except when I need to use that data. As you can see in the last line inside the success function of the AJAX call, I insert the arrays into the global array while giving each entry the ID for that DB entry. When I try to print in the console, let's say the ID number 15 with:
console.log(datosRae[15]);

Open in new window

it gives me "undefined". If I remove the ID and try to print the whole global array, it prints the following:
Global array resultHow can I call each array from within the global array using it's ID? What am I missing?

Thanks in advance!
0
I have a jquery function that fills a dropdownlist, then selects a value from the list.  The function to fill the list works and the value that it attempts to put in there is one in the list.
problem is it does not select.  but if I put a alert() after the drop down fill and then after I click the alert box the value is selected.  Its like the list is not there, but the alert allow it to fill then the select happens

		function SetScreen(AccountKey,ValueToSelect)
		{
                    fillDropdown(AccountKey);
		 // id i put an alert('wait'); it selects and works   ****************
                   $("#Search").val(ValueToSelect);	  
		  
		)
// this works fine
		function fillDropdown(Account) {
			$.ajax({
				type: "POST",
				url: "getValues.ashx?prefix=" + Account,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function (data) {
					var ddlCustomers = $("#Search");
					ddlCustomers.empty().append('<option selected="selected" value="0">Please select</option>');
					$.each(data, function () {
						ddlCustomers.append($("<option></option>").val(this['Value']).html(this['Text']));
					});
				}
			});
		}

Open in new window

0
After a successful INSERT i have added ?status=success to my header( "location:employees.php?status=success" );

When I get back to my page I want to show a success sweet alert. I can see that my status is showing up in the URL but not sure how to make this happen.
0
I'm displaying a table that returns users I want to click on the user and edit them in a bootstrap modal. I'm able to do this using ajax but the modal that opens won't load some of the classes I'm using in the form. If I open the modal from that page without using the ajax the form loads and works as it should but I can't load that user id in my where statement. I up to try anything. One example is using the floating labels bootstrap has.
0
I have 4 pipes that I'm trying to remove using jQuery, but when I use the script below, it seems to throw an error in the console "cannot read property 'replace' of undefined"
jQuery(document).ready(function($) {
	$('div.dokan-product-listing.dokan-product-listing-area.row-actions').html($('div.dokan-product-listing.dokan-product-listing-area.row-actions').html().replace('|',''));
	$('div.dokan-product-listing.dokan-product-listing-area.row-actions').html($('div.dokan-product-listing.dokan-product-listing-area.row-actions').html().replace('|',''));
	$('div.dokan-product-listing.dokan-product-listing-area.row-actions').html($('div.dokan-product-listing.dokan-product-listing-area.row-actions').html().replace('|',''));
	$('div.dokan-product-listing.dokan-product-listing-area.row-actions').html($('div.dokan-product-listing.dokan-product-listing-area.row-actions').html().replace('|',''));
});

Open in new window


Can someone help me with removing this error please?
0
HI,

I have an excel user who would like an input form similar to excel.

This should have selection options across the top row:

Option1  (DD with several options) .       Option2 (DD with several options)
User inputs value                                         User inputs value

I will then read both selections from the drop down and from the user input.

Ideally the user can also add additional rows and columns.

Any thoughts?

Thanks.

Ollie.
0
I'm trying to build a toggler in JS or jQuery that will switch between two ion icons. I'm having trouble incorporating the ion icon.

Here's what I have now.

HTML
<div class="c-pages-header__brand--nav-button toggler">
            <i class="js-navbar-toggle--closed " id="js-navbar-toggle"><ion-icon name="menu"></ion-icon></i>
            <i class="js-navbar-toggle--open " id="js-navbar-toggle"><ion-icon name="close"></ion-icon></i>
</div>

Open in new window



jQuery
$(".toggler").click(function() {
    
    // Reset all images
    $(".toggler i.js-navbar-toggle--open").hide();
    $(".toggler i.js-navbar-toggle--closed").show();
    
    // Now toggle the ones in this .toggler
    $("i", this).toggle();
});

This simply displays both icons. 

Open in new window

1
I would like to get the latitude and longitudes of an address from the OpenstreetMap Server. I use the following code:
The URI https://nominatim.openstreetmap.org/search/Keizersgracht%202,%20Amsterdam?format=json

gives me the following JSON output:

[
    {
        "place_id": 29597926,
        "licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
        "osm_type": "node",
        "osm_id": 2729940028,
        "boundingbox": [
            "52.3654887",
            "52.3655887",
            "4.8878076",
            "4.8879076"
        ],
        "lat": "52.3655387",
        "lon": "4.8878576",
        "display_name": "489B-2, Keizersgracht, Grachtengordel, Amsterdam, Noord-Holland, Nederland, 1017DM, Nederland",
        "class": "place",
        "type": "house",
        "importance": 0.32100000000000006
    },
    {
        "place_id": 29345477,
        "licence": "Data © OpenStreetMap contributors, ODbL 1.0. https://osm.org/copyright",
        "osm_type": "node",
        "osm_id": 2722023917,
        "boundingbox": [
            "52.3669115",
            "52.3670115",
            "4.8842236",
            "4.8843236"
        ],
        "lat": "52.3669615",
        "lon": "4.8842736",
        "display_name": "460-2, Keizersgracht, Grachtengordel, Amsterdam, Noord-Holland, Nederland, 1016GE, Nederland",
        "class": "place",
        "type": "house",
        "importance": 0.32100000000000006
    },
    {
        "place_id": 

Open in new window

1
I have a select dropdown that is populated from a mysql table which is working great. The dropdown is on a update profile page so how do I populate the dropdown from one table but then also get the value that was stored in a different table and show it as selected in the dropdown.

Here is the code for the dropdown.
<select name="type" id="type" data-placeholder="type" class="form-control form-control-select2 select2-hidden-accessible" data-fouc="" tabindex="-1" aria-hidden="true" required>
													<option value="" selected>Type</option>
													<?php
													$type = $link->query( "SELECT * FROM type" );
													while ( $rows = $vertical->fetch_assoc() ) {
														$type = $rows[ 'type' ];
														echo "<option value ='$type'>$type</option>";
													}
													?>
												</select>

Open in new window

0

jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics