[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

Hi Experts,
I am trying to do a Captcha implementation.  For some reason it is giving me the error "Uncaught TypeError: $ is not a function". Any help is greatly appreciated.

Thanks in advance.

@using CaptchaMvc.HtmlHelpers

<h1 class="spacer-20">@T("Reset your password")</h1>
@using (Html.BeginFormAntiForgeryPost("/Users/Account/LogOn/ForgotPassword", FormMethod.Post))
{
    @Html.Hidden("url_success", string.Empty)
    @Html.Hidden("url_fail", string.Empty)
    @Html.ValidationSummary()
<div class="login-page">
    <h3>@T("Your username")</h3>
    @Html.TextBox("username", string.Empty, new { maxlength = 50 })
   @Html.MathCaptcha()

    <div class="spacer-40">
        <input id="btnSubmit" class="critical button" type="submit" value="@T("Submit")" />
    </div>
    <div class="spacer-20"></div>
</div>
}

Open in new window


Giving error near the $ sign.

<script type="text/javascript">
$(function () {$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();})
function ______c0f11654da8c4103bc4724cc881fc967________() { $('#b20b155dd1fb4b6d92d9a47ddf2550c4').hide(); $.post("", { t: $('#CaptchaDeText').val(), __m__: "0" }, function(){$('#b20b155dd1fb4b6d92d9a47ddf2550c4').show();}); return false; }</script>

Open in new window

0
Exploring ASP.NET Core: Fundamentals
LVL 12
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

I'm struggling to close a modal window and then reopen it.

Upon submitting a modal I use

$('form#{$model->formName()}').on('beforeSubmit', function(e){
    var \$form = $(this);
    $.post(
        \$form.attr("action"), //serialize Yii2 form 
        \$form.serialize()
    )

    .done(function(result){
        //console.log(result);
        result = JSON.parse(result);
        if(result.status == 'Success'){
            $(\$form).trigger("reset");
            // $.pjax.reload({container:'#InvoiceItemsListGrid'}); //Does not work and reloads the main page, not the modal window?!
            $("#closeButton3").click(); //Close the 3rd modal
            $("#closeButton2").click(); //Close the 2nd modal
            $("#"+$('#modalPopup2 #passInfo #refBtn').val()).click(); //re-open the 2nd modal by clicking on the appro button to refresh the info
        }else{
            $(\$form).trigger("reset");
            $("#message").html(result.message);
        }
    })

    .fail(function(){
        console.log("server error");
    });

    return false;
});

Open in new window


Now, although not the way I wanted to handle this, it does work in a general sense.  It closes the 2 modal windows and then reopens the second one displaying the submission.  The issue I'm facing is that if I close the modal and then reopen it, none of the buttons works.  They all loose their event and I don't get why?

I've been at this for 2 days and just can't figure it out.  I've tried all sorts of things.

Thank you in advance.
1
How would I check in JavaScript  (jQuery ok but not preferred) if a div class starts with the word "modal" and has a specific ID? So for the below example, I'd want to check if div started with "modal" and has an ID of "existingAppModalBox". I will have a list of IDs I need to check against but this will always be against a div with a class starting with the word "modal"? Or would it be easier to just check for the specific ID? My challenge is that these are modals so they have to be visible, thoughts?
<div class="modal in confirmationModal" tabindex="-1" role="dialog" id="existingAppModalBox" data-hard-modal="True" style="display: none;" aria-hidden="true">

Open in new window


Thanks!
0
I've got a form that is used for ordering t-shirts. Different sizes, different prices, tax, total are all good. Up to now, we've only offered in-store pick up but now, they want to add home delivery for a small fee.

On the form, the delivery fees are initially hidden. If someone selects delivery, the delivery total fades in and shows $4. Click back on store pickup and delivery option fades out and the amount changes back to 0.

I need help with integrating that into the grand total calculation so that clicking on delivery adds $4 and clicking on store pickup removes it if the delivery option was selected or does nothing if it isn't. And do it in such a way that it works with the key-up events of the order fields.

I could really use some help with this as we're trying to get this launched before the holidays.  Many thanks in advance.

I've got a fiddle showing what it's currently doing - and the code below:

jsfiddle.net/saabStory/936wkx7v/6/

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta http-equiv="Expires" content="Tue, 01 Jan 1995 12:12:12 GMT">
        <meta http-equiv="Pragma" content="no-cache">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <style type="text/css">
            

Open in new window

0
I know this is a VERY simple fix but I just dont understand whats wrong with this code.   Just wanted to stop the Enter key from submitting the form.

jQuery(document).on( "keypress", ".gform_wrapper", function (e) {
    var code = e.keyCode || e.which;
    if ( code == 13 && ! jQuery( e.target ).is( "textarea,input[type="submit"],input[type="button"]")) {
    e.preventDefault();
      return false;
  }
});
1
I want to show the text  as VIEW when  mouse over the image.
<img  src="images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg"  onmouseover= xxxxxx  onmouseout="this.src='<images/<%# DataBinder.Eval(Container.DataItem, "idProduct") %>.jpg'"> 

Open in new window


Please advise! Thank you!
1
Is it possible to destory a bind on the DOM and recreate it ? let say i add data to a table from a Ajax request i would need to rebind that to the dom for the new inserted data ?
1
var jrID = ('a',$(this)).attr('data-id');

Open in new window


Why is this not giving me the id ?
1
How would I get the value of "You must accept the Bank of the West terms before registering." from the below, when displayed to user?  The only thing I see that is different is the div 2 before the value I want, has a class of "c-alert__icon--big c-alert__icon--error".
<div class="c-alert__container js-notifications">
<div aria-live="assertive" class="alert c-alert c-alert--floating c-alert--success fade is-hidden js-changes-saved-notification js-floating-alert show" role="alert" tabindex="0">
<div class="d-flex">
<div class="c-alert__icon--big c-alert__icon--success">
<div class="fal fa-check-circle c-icon"></div>
</div>
<div class="c-alert__text c-alert__text--floating js-notification-message">Changes successfully saved</div>
</div>
<div class="c-alert__close c-alert__close--floating">
<a aria-label="Close" class="btn btn--circle btn--disguised btn--close js-floating-alert-close" href="#">
<div class="icon--utility__close icon--utility far fa-info-circle c-icon"></div>
</a>
</div>
</div>

<div aria-live="assertive" class="alert c-alert c-alert--floating c-alert--success document-uploaded-notification fade is-hidden js-document-uploaded-notification js-floating-alert show" role="alert" tabindex="0">
<div class="d-flex">
<div class="c-alert__icon--big c-alert__icon--success">
<div class="fal fa-check-circle c-icon"></div>
</div>
<div class="c-alert__text c-alert__text--floating js-notification-message">Document uploaded successfully.</div>
</div>
<div 

Open in new window

1
I am working on select2 component to resolve an issue but when I include meta tag as follows

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />

Open in new window


I am getting an error, here is my aspx page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" />
    <title></title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js"></script>

    <script type="text/javascript">
        function mockData1() {
            var dict = [];
            var buttonarray = new Array(<%=MyDictionaryToJson1()%>);
            for (var key in buttonarray[0]) {
                dict[dict.length] = {
                    id: key,
                    text: buttonarray[0][key],
                };
            }
            return dict;
        }

        // 

Open in new window

1
Build an E-Commerce Site with Angular 5
LVL 12
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

If there are two instances this returns
var welcome = $("a.c-nav__link.js-nav__link.align-item-center.c-nav__link--flex.active").text();

Open in new window

How do I get the first occurrence of the words? I tried welcome[0] but that only returns the first letter? Sometimes there is only one word but sometimes there are two words:

"Loan Applications

Loan Applications"

or

"Borrower

Borrower"
1
Hello Experts -

I'm  using the datePicker jquery plugin for a calendar dropdown date selection, and I want to exclude weekends and holidays. I've got the weekends disabled (see Javascript function below), but would like to disable holidays as well, as defined by the array in the code below. Could someone show me how to reference the Date.prototype.holidays array to exclude holidays from the datePicker calendar?

Thank you!


$(document).ready(function () {
            $(".date-pick").datepicker({ startDate: '01/01/2000', clickInput: true, beforeShowDay: $.datepicker.noWeekends });
        });

Date.prototype.holidays = {all:['0101','0704','1225'],
         2018:['0903','1122','1123','1226','1227','1228','1231'],
         2019:['0527','0902','1128','1129','1226','1227','1230','1231'],
         2020:['0525','0907','1126','1127','1228','1229','1230','1231'],
         2021:['0531','0906','1125','1126','1227','1228','1229','1230','1231'],
         2022:['0530','0905','1124','1125','1226','1227','1228','1229','1230'],
         2023:['0529','0904','1123','1124','1226','1227','1228','1229']};

Open in new window

0
Modal is not working after 1st page when click on "Change" button  in datatable bootstrap:



View Info Modal :
<div id="dataModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Customer Details</h4>  
                </div>  
                <div class="modal-body" id="customer_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-gradient-light btn-fw" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div>

Open in new window


Change Info Modal:
 <div id="changeModal" class="modal fade">  
      <div class="modal-dialog">  
           <div class="modal-content">  
                <div class="modal-header">  
                     <button type="button" class="close" data-dismiss="modal">&times;</button>  
                     <h4 class="modal-title">Change Status</h4>  
                </div>  
                <div class="modal-body" id="change_detail">  
                </div>  
                <div class="modal-footer">  
                     <button type="button" class="btn btn-gradient-light btn-fw" data-dismiss="modal">Close</button>  
                </div>  
           </div>  
      </div>  
 </div> 

Open in new window


JQuery :
 $(document).ready(function(){  
      $('.view_data').click(function(){  
           var book_id = $(this).attr("id");  
           /*alert(employee_id);*/
           $.ajax({  
                url:"ajax/viewCustomer.php",  
                method:"post",  
                data:{book_id:book_id},  
                success:function(data){ 
                     $('#customer_detail').html(data);  
                     $('#dataModal').modal("show");  
                }  
           });  
      });  
 });
  $(document).ready(function(){  
      $('.change_data').click(function(){  
           var book_id = $(this).attr("id");
           $.ajax({  
                url:"ajax/updateServiceStatus.php",  
                method:"post",  
                data:{book_id:book_id},  
                success:function(data){ 
                     $('#change_detail').html(data);  
                     $('#changeModal').modal("show");  
                }  
           });  
      });  
 });

Open in new window

1
In the checkbox list below...

I need on ckecked  = true for Opened or Clicked

That it is assured that checkboxes No FIlter and Delivered are unchecked
And value =


<asp:CheckBoxList ID="rblMetrics" CssClass="icheck1" runat="server" AutoPostBack="False"
CellPadding="0" CellSpacing="0" Height="0px" RepeatColumns="2" RepeatDirection="Horizontal"
Width="200px">
    <asp:ListItem Class="icheck1" Selected="True" Value="0" Text="No Filter"></asp:ListItem>
    <asp:ListItem Class="icheck1" Selected="False" Value="1" Text="Delivered"></asp:ListItem>
    <asp:ListItem Class="icheck1" Selected="False" Value="2" Text="Opened"></asp:ListItem>
    <asp:ListItem Class="icheck1" Selected="False" Value="3" Text="Clicked"></asp:ListItem>
</asp:CheckBoxList>  

Open in new window

0
I don't know why the embedded jQuery function below is not returning the value to my JS var? I do get the expected value in console.log(" >>>> FINAL RESULTS RETURNED : " + results);
function _dtmGetCurrResults(){
	    var results = [];
	    $(function() {
            $('[class*="solid-shape-large-rating-"]').each(function(i, e) {
                var result = this.className.match(/solid-shape-large-rating-(.*?)\s+/);
                results.push(result[1]); 
            });
        results = results.join("|");
        console.log(" >>>> FINAL RESULTS RETURNED : " + results);
		});
		return results;
	};
var myResults = _dtmGetCurrResults();

Open in new window



Thanks!
0
I have jQuery/Javascript on my page at:
http://www.domain-a.com/page.html

...and I am trying to do a jQuery $.post to:
https://www.domain-b.com/script.asp

But I get this error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at...

On www.domain-b.com I have the following in web.config (this is an IIS server):

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>

Open in new window


...however, I still get the error. I don't have access to .htaccess or anything else on www.domain-a.com. Is it possible for me to resolve this issue, or is it not possible because I don't have access to the www.domain-a.com server? It isn't clear to me if I need to add Access Control to the server where the web page resides, or the server where the target script resides.

Thank you.
0
i am new to codeigniter, just have 15 days of experience. i have to ask how to implement a div block of input type text for kids name, grade and course base on number of kids entered by parents??
i have a input type " number of kids" and based on that i want to display a div of level and input type according to number of kids entered like if parents entered 3 kids then i want a div with 3 labels and input type of name and grades...please help me
0
Here is a simple CSRF class I am using:

<?php
 
namespace Core;
 

/**
 * CSRF protection
 */
class CSRF
{
    /** 
     * Get and store a new CSRF token
     *
     * @return string  A 32-character token
     */
    public static function getToken()
    {   
        $token = new \App\Token();
        $value = $token->getValue();
        $_SESSION["csrf_token"] = $value;
 
        return $value;
    }
 
    /** 
     * Check the token value
     */
    public static function checkToken()
    {   
        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
            if ( ! isset($_POST['csrf_token'])) {
               header('HTTP/1.0 403 Forbidden');
               exit('Missing CSRF token');

            }
 
            // Get the token from the session and remove it
            $token = $_SESSION['csrf_token'] ?? '';
            unset($_SESSION['csrf_token']);
 
            if ($_POST['csrf_token'] != $token) {
                header('HTTP/1.0 403 Forbidden');
                exit('Invalid CSRF token');

            }   
        }   
    }   
}

Open in new window


Then I have the token in a hidden form field:

<input type="hidden" name="csrf_token" value="<?php echo $csrf_token; ?>">

Open in new window


This is my controller:

 
   public function createAction()
    {
        if($_SERVER['REQUEST_METHOD'] === 'POST') {
            
            $response = [];
            
            $customer = new Customer();
            if($customer->save($_POST)) {
                
                $response['success'] = true;
                $response['message'] = 'Customer successfully added';
                
             } else {
                
                $response['success'] = false;
                $response['message'] = $customer->errors;
            }
            
            echo json_encode($response);
        }
    }

Open in new window


If I wasn't using Ajax and I just called that method in the controller like:

CSRF::checkToken();

Open in new window


then it works fine and the 403 occurs. But since I am using Ajax, the page just hangs and the error shows up in console. So, I click submit and the form validation takes place. If there are errors then I use jQuery /json to show the errors:

        .done(function (data) {
            if (!data.success) {

                unblockUI();
                $.each(data.message, function(index, item) {
                    $( '.alert-danger' ).append(item + "<br>").fadeIn();
                });

Open in new window


Is it possible to make the 403 happen or would I need to do something else? It is no good as is that the page just freezes up and the 403 error is shown in console. In theory, genuine users should never have this happen, but I still want to handle it more elegantly anyway.
0
Hi Experts,
I have a text box with ID CustomerEmailAddress and on blur it validates the email and display a warning message at the top. If there is a warning message I want to change the corder color of the text box to red. I added some code(In bold). But still it is not working.  Any suggestions?
 jQuery(document).ready(function () {
        jQuery("#CustomerEmailAddress").blur(function () {
            jQuery.ajax({
                type: "POST",
                url: '@Url.Action("BusinessDomain", "Marketing")',
                data: '{email: "' + jQuery("#CustomerEmailAddress").val() + '" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    if (response == true) {
                        var CustomerEmailAddress = jQuery("#CustomerEmailAddress").val();
                        CustomerEmailAddress = jQuery.trim(CustomerEmailAddress);
                        var DomainName = CustomerEmailAddress.split("@@")[1];
                        var msg1= "Please provide an email address that has a business domain. Email domains at ";
                        var msg2 = " require further review by the program and will cause a delay in your application being approved.";
                        var msg = msg1 + DomainName + msg2;
                        jQuery("div.validation-summary-warning", "#frmSubmitCustomerInformation").text(msg).show();
                       

Open in new window

0
CompTIA Network+
LVL 12
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Hi experts,

I have this example.
It uses jQuery.
So when I click the button it saves a variable to local storage.
Then with the other button I clear the local storage.
It works fine.

How do i do the exact same thing but only using pure javascript. Without using jQuery.
I have a legacy application that doesn't have the jquery library and I can only use JavaScript.

Sample1.html

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Events - Local Storage</title>

    <!-- LOCAL REFERENCES -->
    <script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.10.4.js"></script>

    <style type="text/css">
        body {
            padding: 30px;
            font-family: Arial;
        }
    </style>

    <script type="text/javascript">
        // start of document ready
        $(document).ready(function () {
            // ---------------------

            // HTML5 web storage
            // http://www.w3schools.com/html/html5_webstorage.asp

            //******** on Page Load Events ********


            //******** on Page Load Events ********

            // *********** Button click event ***********
            $('#ButtonSaveLocalFruit2').click(function () {

                // create local storage variable
                var localstoragevarfruit2 = "guava";
                // store variable value in local storage
                localStorage.setItem("localstoragefruit2", 

Open in new window

0
Can someone help me identify what is wrong with my JQuery/Bootstrap?  On my main page (https://www.gopherstateevents.com/) the top dropdown works well...designed to work on mouse over.  This is a page created in Mobirise.  I tried to re-create the rest of my pages (using classic ASP) but the nav bar has to be clicked to function.  Here is an example:  https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?sport=cc

Obviously something is either mis-placed or missing altogether.  Any help would be much appreciated!
0
Hello,

oninput is not being recognized. creating this page within VS2008.
I am seeing the following error.
Attribute 'oninput' is not a valid attribute of element 'input'
What should be done to get it to recognize this?

Here is my code:

<!DOCTYPE html>
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >-->
<html>

<head>
    <!--<meta charset="utf-8" />-->
    <title>Services</title>
   <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.js" type="text/javascript"></script>
    <link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    
<script type="text/javascript">

    $(function() {
        $("#svcStartdatepicker").datepicker();
        $("#svcEndDatePicker").datepicker();
    });
    
</script>
   
</head>
<body>

<div>
    <table>
    <tr>
    <td>
    <span > Select Client :</span>
    </td>
    <td>
         <input id="hHoldAutoFill" oninput="GetClientAutoFill(this.value);" class="ui-autocomplete" />
   
    </td>
    </tr>
    <tr>

Open in new window

0
Hi Experts,
I have this to display a message dynamically onblur event of a textbox.
jQuery("#formEnroll").prepend("<div class='validation-summary-warning'>" + msg + "</div>") 

Open in new window


But it keeps adding the div every time when the focus is lost. So how can I check and display  the div only once. only if the div is not exists. It is really urgent!

Thanks in advance.
0
Hi Experts,
How can I concat 3 strings in jQuery? I am using MVC and C#.

var msg1= "Please provide an email address that has a business domain. Email domains at ";
var msg2 = "require further review by the program and will cause a delay in your application being approved."
var DomainName ="yahoo.com"

Open in new window

I want msg1 + DomainName  +msg2.
Thanks in advance
0
Screen-Shot-2018-10-30-at-17.57.44.png
from above i have submitted a form with textarea,

$(document).on('click', '#update-Note', function(e) {

        e.preventDefault();
        
     
           var data = $('#update-note-form').serialize();
           
           alert(data);
       

      /*  $.ajax({
            type: "POST",
            url: 'controllers/contacts.ajax.php',
            dataType: 'json',
            data:data,
        }).success(function (response) {
           console.log(response);
        }).error(function (response) {
                    console.log("Attachment: Error");
                }); */
    });

Open in new window


the submit goes to here.

the problem is that the textarea isnt been serialize ?

$html = '<form id = "update-note-form" class="form-horizontal">
							<div class="form-group">
							<label class="col-md-12 control-label" for="textarea">Note</label>
							<div class="col-md-12">                     
								<textarea class="form-control" name="TEXT" >'.$getNotes['TEXT'].'</textarea>
								<input id = "noteID" name = "noteID" type="hidden" value="'.$_POST['id'].'">
								<input id = "subaction" name = "subaction" type="hidden" value="update-note">
							</div>
							</div>			
						</form>
							';

Open in new window



the form is brought in from php
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