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

https://code-boxx.com/simple-datepicker-pure-javascript-css/
I use above javascript calendar(pop up only) and it works fine but I want to do 3 things that I am not sure what to code.
1. Inside of the Js file, I want to retrict showing
year equal or after current year(meaning show 2019 and after) inside of the Year drop down.

2. I want to add [x] on the right top corner to close the calender box.

3. I want to show the x, y coordinate in the center of the webpage.
Now it is shown on the top of the webpage.

I included the source codes here. but you are welcome to download on their website.

Thank,

var picker = {
  attach : function (target) {
  // attach() : attach datepicker to target

    // Default to current month + year
    // Generate a unique random ID for the date picker
    var today = new Date();
    var thisMonth = today.getMonth(); // Note: Jan is 0
    var thisYear = today.getFullYear();
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
                  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var uniqueID = 0;
    while (document.getElementById("picker-" + uniqueID) != null) {
      uniqueID = Math.floor(Math.random() * (100 - 2)) + 1;
    }

    // Create wrapper
    var dr = document.createElement("div");
    dr.id = "picker-" + uniqueID;
    dr.dataset.target = target;
    dr.classList.add("picker-wrap");
    dr.addEventListener("click", function (evt) {
      if (evt.target.classList.contains("picker-wrap")) {
        

Open in new window

0
I have an iframe in Masterpage updatepanel . It has an .html page as its source. So, there is a textarea where the html page is displayed .  When i modify the html page in the textarea and click on a button , it should update the html content back to html page. [Basically i want the updated dom of the iframe to be assigned back to the innertext of the html body of the html page . i am currently using htmlagility pack to achieve read and save of the .html page. The only thing not working is the updating of .html file dynamically .

Is it possible to do so ?
0
Experts,
 We have sharepoint 2013 and i am trying to add some javascript add to layout page. We are trying to read current user and compare with sharepoit group. I have added the script but some how it's error. Looks like SP.JS is not loading. Can you please review my code and give some suggestions.

Error : Unable to get property 'SPGetCurrentUser' of undefined or null reference

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Assembly Name="Microsoft.SharePoint.ApplicationPages, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%> <%@ Page Language="C#" Inherits="Microsoft.SharePoint.ApplicationPages.AccessDeniedPage" MasterPageFile="~/_layouts/15/errorv15.master"       %> <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="wssuc" 

Open in new window

0
How to get around the jQuery.ajax CORS and Jsonp callback problem?
I'm writing a solution in a WordPress plugin which requires an api GET call, and will later require POST too, from JavaScript.
My initial attempt resulted in a CORS policy block:
Access to XMLHttpRequest at 'https://app.xxxxx.com/api/pub/v1/contacts/528a34f9-dbc1-4c50-ad6b-a9f300e19ea9' from origin 'https://www.xxxx.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Open in new window


This is what the jQuery looked like:

function generateCandidate(cuid){
    console.log('Generating New Candidate');
    var api = my_api()
    var candUrl = "https://app.xxxx.com/api/pub/v1/contacts/" + cuid;
    var da = {
        api_key: api,
    }
    jQuery.ajax({
        url: candUrl,
        data: da,
        type: "application/json",
        method: 'GET',
        success: function(resp){
            console.log(resp);
        },
        error: function(err){
            console.log('Ajax ERROR:');
            console.log(err.toString());
        }
    });
}

Open in new window


So I did some research and discovered plenty of people were getting around the CORS issue by specifying the 'jsonp' type instead of json. So I tried replacing
        type: "application/json",

Open in new window

with
dataType: 'jsonp',

Open in new window


But then I discovered I need to specify a callback somehow, because the error I get is this:

jquery.js?ver=1.12.4:4 GET https://app.xxxx.com/api/pub/v1/contacts/528a34f9-dbc1-4c50-ad6b-a9f300e19ea9?callback=jQuery1124036525732914578746_1550866428904&_=1550866428905 net::ERR_ABORTED 404

Open in new window


I've read about how the callback can be sent to a function, and handled that way to make it work. But I can't find out what the function should do, or how to write it.
And I'm not sure if that's what I should be doing anyway, or if there's any way I can solve the CORS problem in a way it can be used publicly, and not just in my own browser.

Can anyone assist, or point me in the right direction to get this solved.

Many thanks
Tim
0
http://dev.magickitchen.com/

user name: expertexchange
password:  BobTheBuilder45!!

The video in the first slide is almost working, thanks to an expert on here.  The last slide does transition, to the video, and then on through the slides. On initial page load, the video plays to the end, then stops, and if I hit the data-slide, it goes through the rest of the slides. But we want 1. The video plays to the end unless someone advances to next slide, then it stops. 2. The slide show should transition through, then skip the video after the video has played.

The expert says: The problem is that the slide transition event fires even when the carousel is paused.

What needs to happen is that you need to maintain a state variable that determines whether or not you have paused.

When the event fires you check this - if it is set then you e.preventDefault() the event - otherwise you let it through.

You then have to listen for the stop event on the video so you can set that state variable to false - otherwise the transition will not continue.

There is another caveat to this - if the user clicks to the next slide - then we need to cater for that - in other words stop the video and allow the transition.

Anyone care to have a go at this? I am in way over my head. Thanks!
0
Hi,

I have this script to open a menuitem on click. And that works fine.

<ul class="top-nav">
             <!-- Actions -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                        <i class="fas fa-home"></i>
                </div>
               
                <div class="top-nav__item--link">
                    <a href="#">Actions</a>
                </div>

                <ul class="top-nav__sub">
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--icon">
                                <i class="fas fa-toolbox"></i>
                        </div>
                        <div class="top-nav__sub-item--link">
                            <a href="#">Print</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">E-mail</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">Download</a>
                        </div>
                    </li>
                </ul>    
            </li>

            <!-- Fast links -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                    <i class="fas 

Open in new window

0
I have been looking for pop up the calendar (show two) like this one below: https://www.facilities.umd.edu/Style%20Library/FM%20Publishing/JQuery/daterangepicker/website/index.html#overview

And my website using <script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script>  and I have the following codes and the calendar does not work anymore.
When <script type="text/javascript" src="scripts/jquery-2.2.0.min.js"></script> is removed, everything is working.

Do you know how to fix it?

Thanks


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Testing.aspx.cs" Inherits="RvRentOutCOM.Testing" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />

<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script type="text/javascript">
    $(function () {
        $('input[id="daterange"]').daterangepicker();
    });
</script>
</head>
<body>
    <form id="form1" 

Open in new window

0
I'm trying to "POST" data via jquery ajax to a back end perl script

If i change bellow method to GET it works

HTML
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
         <script>
           var url = "cgi-bin/form.pl?list=123,456,789&foo=bar";
           $(function() {
           $("#PostBtn").click(function(){
            $.ajax({
            url: url, 
            type:"POST",
            dataType:"text",
            success: function(data, textStatus, jQxHr) {
            
            $("#res").html(data);
            },
            });
              });
          });
         </script>
  </head>
  <body>
    <div><button id="PostBtn" value="Post btn">Post btn</button></div>
    <div id="res"></div>
  </body>
</html>

Open in new window


cgi-bin/form.pl
#!C:\strawberry\perl\bin\perl.exe
print "Content-type:text/html\n\n";

use CGI;
 my $query = CGI->new;

my @Names = $query->param;
my $list = $query->param('list');
my $foo = $query->param('foo');

<p>data $data</data>
print <<HTML;
  <h1>Hello Posts</h1>
HTML
foreach my $name (@Names)
  {
    print "<p>" . $name . "[ " . $q->param($name) . "]</p>";  
    
  }

Open in new window


How do I receive the parameters in perl?
0
Hi

I have an intranet web page that performs a search function  situated on a fedora stand alone pc

I need to pass  a unique comma separated list to an external script this script will use the PostGreSQL/ PostGis function "pgsql2shp"

I tried to use simple copy & Paste, from a TextArea on the web page /run external script & paste into a terminal window but the paste buffer truncates the list

Next  I've tried to send the list to the server using jQuery\AJAX and save the file this also Fails I'm guessing due to security however if I run the receiving back-end script in its own tab it works

I'm using jQuery to loop through the ticked checkboxes to push the list into an array and outputting to a TextArea

 How might
ensure the javascript array is unique

second create a save button that saves the value of the text area to a file at a fixed location over writing what is there
0
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_form_steps
I am using above form wizard and everything is working fine except the validation. the current code will only validate if the <input> field is empty.
My question is: how to use jquery built-in validation in this case so I do not have to write codes to check one by one? Because in my case, I have over 20+ <input> for each steps and I have at least 5 steps to go.

thanks
0
using getbootstrap.com for my website and have some questions how to  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
inside of the <input type=text> as below.

 <div class="form-group row">
            <label for="@i.QuestionControlID" class="col-sm-@i.QuestionHtmlLabelSize col-form-label col-form-label-sm">@i.QuestionHtmlLabel</label>
            <div class="col-sm-@i.QuestionControlIDSize">
               <input value="" data-toggle="tooltip" data-placement="bottom" title="@i.QuestionToolTip" class="form-control" type="@i.QuestionHtmlType" placeholder="@i.QuestionHtmlPlaceHolder" id="@i.QuestionControlID" @i.QuestionHtmlIsRequired />
            </div>
        </div>

Open in new window

0
Hi all, I am using https://getbootstrap.com for my website as UI. It works fine. but just have some common question.

1. <input type= such as phone, ssn, zip code>, how to get the MASK for each?
2. <input type= such as phone, ssn, zip code>, how to get validation code? I have all of them required already?
0
I have the following codes from W3 school and it works fine.
But when I try to add glyphicon. like : <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

The input group addon icon is shown below the <input> and it should be inside of <input>

Can you show me how to make it?

  <div class="form-group">
        <label class="control-label col-sm-2" for='@i.QuestionControlID'>
            @i.QuestionHtmlLabel
                    @if (i.QuestionHtmlIsRequired == "Required")
                    {
                    <font color="red">*</font>
                    }
                </label>
        <div class="col-sm-10">
                <input data-toggle="tooltip" title="Hooray!" value="" class="form-control" type="@i.QuestionHtmlType" placeholder="@i.QuestionHtmlPlaceHolder" id="@i.QuestionControlID" @i.QuestionHtmlIsRequired />                
        </div>
    </div>

Open in new window

0
Does "Vanilla Javascript" mean NO jQuery?

And, does jQuery allow me to not use some of these direct calls, like to the document model?

https://www.w3schools.com/jsref/dom_obj_document.asp

Thanks
0
Hi Folks,
I'm a newbie in this jQuery ..., I have the code below, they are 2 different pics, 3 buttons ( Hide, show, toggle).
Question: how can I specify the jQuery to only select a certain picture to hide? similar to parent > child? (i noticed what i have hides all pics global...
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>

    <button class="button" id="hide">Hide</button>
    <button class="button" id="show">Show</button>

    <div class="bridges">
        <img src="Design1Pix/pic1.jpg" alt="my_image" width="250" height="350">
    </div>

    <div class="bridges">
        <img src="Design1Pix/pic2.jpg" alt="my_image" width="250" height="350">
    </div>

<script>
    $(document).ready(function() {
        $("#hide").click(function() {
            $("img").hide();
        });
        $("#show").click(function() {
            $("img").show();
        });
    });
</script>
</body>
</html>

Open in new window

0
I'm developing a Bootstrap project and started out with a UI kit theme but found that tweaking it was an issue, so I'm now using standard-issue Bootstrap.  My question is what or where are recommended/best form UI Components?  I've researched, but am not sure which are quality ones, so recommendations or a guide to resources is appreciated.   I usually use Foundation, and this project is also new to me as it is financial and has dates, amounts, percentages and charts.

I'm using the current Bootstrap version as it is today at https://getbootstrap.com/.

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


UI components of …
0
Hi
I have a table with an ADD ROW  button, when i click this button is creates a new row dynamically

I then want to have a click event fire for one of these newly created html elements: <input id='schemeItemSaveLink' type='button' value='save'>
however, the alert: alert('you clicked me again!'); isn't firing

What am i doing wrong?

 $('#addSchemeItemRow').on('click', function () {

                var addRow = "<tr class='schemeItemRow'><td> <input type='text' name='lower' id='txtLowerThreshold'>  </td><td> <input type='text' name='upper' id='txtUpperThreshold'> </td><td><input type='color' id='schemecolor' style='width: 25px; height: 25px;'></td> <td><input id='schemeItemSaveLink' type='button' value='save'></td></tr>";

                //add current row to table
                $('#schemetable tr:last').after(addRow);

            });

            $("#addSchemeItemRow").on("click", "#schemeItemSaveLink", function () {
                alert('you clicked me again!');
            });

Open in new window

0
Please read the codes, and the question is below. Thanks
page1.htm 
<script>
var myObj, myJSON, text, obj;

// Storing data:
myObj = { name:"John Smith", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

page 2.html
<script>
var myObj, myJSON, text, obj;

// Storing data:
myObj = { zip:"90032"};
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Retrieving data:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

Open in new window

summarypage.html
1. how to show everything from json? everything mean name, city, and zip that came from both pages using javascirpt.
2. inside of the myObj = { name:"John Smith", age: 31, city: "New York" } as example.
can I do that below?
{
input.id (e.g. txtname): 'input.value(e.g. txtnamevalue)'
}
I just do not want to hard code the <input> id name inside of the {} because I have so many.
0
Getting up and running with REACT

I have developed using Angular 4, JQUERY and JavaScript, but not yet with React.

I have a MacBook and use Visual Studio Code on the Mac for my work with Angular 4 and hope to do the same with React.

How do I get React installed so I can start programming it? And same projects / tutorials you can point me to that would be a great start for me?

Thanks!
0
I am trying to have jquery write a cookie and test for its presence.  If if is present write a message in the order_comments box of Woo Commerce.  Here is an answer using jquery to write in the order_comments box.

https://www.experts-exchange.com/questions/29114316/Need-Javascript-JQuery-Button-Update-Woo-Commerce-Order-Notes.html

Open in new window


Here is my present jquery code

<script type="text/javascript">

jQuery(function() {
		jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = "wantmembership=1; path=/";
              jQuery(this).css('background-color','green');
              jQuery(this).text("I Now Have A Membership!");
			});
	
		
	});

</script>

Open in new window


This creates the code.  I just need help knowing how to read the presence of the cookie and then write the message in the order_comments box.

Thanks,
0
jQuery Animation.  Is there a way to slide divs across each other  and fade one out on Toggle?  Meaning, I have a Div One and Div Two.  One is visible, the other is not.  Click the visible div, it slides right and fades out as the second div slides left and becomes invisible.  Click the visible div now and the reverse happens.

Any place to start will be helpful
0
I have a routine I have developed with the help of some experts and it worked great on my test site.  But now it won't write a message in the Order Notes box of Woo Commerce.  I am using 3.5.4 and that is what is on the test site too.

The function with the help of jquery writes a cookie which I can verify is written each time.  If the cookie is present then it is supposed to put the message "I Want Membership" in the order notes box.  On my XAMPP install it works perfectly but not on my live site.  I have copied all plugins with the exception of the ssl plugins since my test site isn't running as an ssl enabled site.

This is the jquery

<script type="text/javascript">

jQuery(function() {
		jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = "wantmembership=1; path=/";
              jQuery(this).css('background-color','green');
              jQuery(this).text("I Now Have A Membership!");
			});
	
		
	});

</script>

Open in new window


add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

        //if (isset($_COOKIE['wantmembership'])) {
        if(isset($_COOKIE["wantmembership"]) && $_COOKIE["wantmembership"]== 1 ) {
//echo "found the cookie1";
    $fields['order']['order_comments']['default'] = 'I Want Membership';
        }
    return $fields;

}

Open in new window


I can see the echo statement but the message is never written into the order comments box.

Can anyone see what is wrong with this function?
0
I need a Jquery based lightbox (or other effect) like the attached, where the lightbox can be like a form & accept Submit and text entries.

Or maybe just a new window properly placed on top of the other?
light_box.PNG
0
Hi I'm using  DataTables to show some point data I had it working now the JSON format has changed I've got most of it fixed except loading the dataTable

From

            $.each(json, function(i, item) {
                console.log(item.id + " Long Lat " + item.Long + ', ' + item.Lat);

Open in new window


New

            $.each(json.features, function(i, item) {
    
                console.log(item.attributes.id + " Long Lat " + item.attributes.Long + ', ' + item.attributes.Lat);

Open in new window


How might I adjust the DataTable code to account for the new JSON data format


OLD Method Th e new data is not available but I've found some similar looking data here
function GetPoints(Long, Lat) {
  //alert("long " + Long + " Lat " + Lat);
  
           var link = "Mock_data.json";
          //          $('#MainTable tbody').html(table);
          var arr=[];
          
         $('#dTable').DataTable({
//           $('#dTable').ajax.reload(),
    "columns": [{ "data": "id" }, { "data": "name" }, { "data": "Lat" }, { "data": "Long" }, {"data": "country_code"},{ "data": "url" }, { "data": "description" }],
    "ajax": {
        "url": link,
        "dataSrc" : function (json) {

//new
            $.each(json.features, function(i, item) {
    
                console.log(item.attributes.id + " Long Lat " + item.attributes.Long + ', ' + item.attributes.Lat);

}// End gGetPoints

Open in new window

0
How to access a global variable within a javascript .each() function? Yes, I know this is bad practice but I still need to do it. I'm creating a form with dynamic form input fields. I'm iterating through those fields and if the value is zero or an empty space I want to form validation to let the user know they need to enter a number.  But when I try to edit the global variable or modify a form field value I'm not able to do that. I'm using jquery to do this. Can anybody offer a way validate this form without a plugin? Attached is my code. I'm using cold fusion and jquery as the base language.
EE_simpleJqueryValidation.txt
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