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

Need a simple Visual Studio jQuery test environment.

I expect to be working in Visual Studio on a project which will involve Angular, Kendo UI and jQuery. So I need to set up a simple Visual Studio test environment where I can play around with some of the more complex jQuery commands.

What is the best way to do this in Visual Studio? I feel like I need a solution with an HTML file and a folder that contains jQuery. But feel free to suggest a few steps that can get me to that point.

And please include the steps to get jQuery installed. I assume that is just a NuGet call. But what about other dependencies?


Thanks.
0
Dear Experts,
I use PHP 7.2 and MySql 5.6,

I found an open source html - javascript html-JS form on Github, which could work perfectly fine for me .

https://github.com/jessepollak/card  The link is here.
I used Javascript version of this form.

This is a credit card form. It's a very useful form. However, I'm new to JS and I know that data can be manuplated with JS.
It can be posted without my knowledge with JS of JQuery and credit card information is a very sensitive data as you can imagine.

I check the JS file, I didn't see any part that POST data or another 3rd party links. How can I be sure that the form is safe and do not send or post any of my users data?

thank you
0
I have got a form shown on the page at first. Then I would like to show another 3 forms , on the user actions.

jsfiddle

   <div id="form-0">

    form 0
    </div>

    <div id="form-1" class="add-form">
    <a class="remove-form">X</a>
    form 1
    </div>

    <div id="form-2" class="add-form">
    <a class="remove-form">X</a>
    form 2
    </div>

    <div id="form-3" class="add-form">
    <a class="remove-form">X</a>
    form 3
    </div>


<p class="request-text">Maximum of 4 per request</p>
<a href="#" class="add-another-form">+ Add another form </a>

Open in new window



$("a.remove-form").bind("click", function(e) {
    	    $(e.target).closest(".add-form").css("display", "none");
});

counter = 0;

   function checkCounter() {
          if (counter > 4)
          {
            $('.request-text').text('You have reached maximum 4 requests ');
            $(".request-text").css("color", "green");                
            $('.add-another-form').unbind('click');

            return false;
          }

          counter++;
          return true;
        }
        
        
        
// Add form

$(".add-another-form").click(function(){

     if (checkCounter()) {
    $(".add-another-form").bind("click", function(e) {
     $(e.target).closest(".add-form").css("display", "block");
        });
           counter++;
        }

});

Open in new window


.add-form {
  display: none;
}

Open in new window


I have tried a few different way, but I could not be able make it work as expected. Any helps would be really appreciated.
0
This is a follow-on question from https://www.experts-exchange.com/questions/29135199/In-jQuery-How-Do-You-Do-If-Test-On-Cookie.html?headerLink=workspace_answered_questions

I can create the cookie, write the message but now the message won't go away even if I manually delete the cookie, complete the order close the browser or clear the cache.  If I open a new tab and create a new order the message is still there.  The message is still there if I go to a different browser too.

There is no cache software on my test site.


Here is the code

<script>

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!");
			});

jQuery(function($) {
  checkCookie();

  function getCookie(cname) 
  {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

  function checkCookie() 
  {
    //document.write("Print this in the function");
    var username = getCookie("wantmembership");
    //document.write("Print this after the get");
    if (username= "wantmembership") {
      //document.write("Print this after the if test");
      

Open in new window

0
Does Angular 7 NEED jQuery?

I will be starting a new project which includes:

KendoUI
Angular 7
jQuery

but my experiences with Angular 4 showed me that when you think you need jQuery, you have not looked hard enough at solving the problem using the features of Angular.

But I see this association between Angular, Kendo UI and jQuery.

https://www.progress.com/kendo-ui

How do these all fit together?

Curious.

Thanks,
0
Need a quick refresher in jQuery. Video might be a great way, but also tutorials can be great.

Thanks
0
i have the following codes, and everything is working except the outhtml's size is too big but i do not know how big.
so I added some settings on webconfig but it is till not working.
Can you share with me whatelse I need to do to max the size of accepting data size?
[HttpPost]
        public JsonResult GetAgingReport(string invoicestartandenddate, string receiptstartandenddate, string chargecode)
        {
             
            Domain.Accounting.Report r = new Domain.Accounting.Report();             
            r.invoicestartdate = invoicestartdate;
            r.invoiceendate = invoiceenddate;
            r.receiptstartdate = receiptstartdate;
            r.receiptenddate = receiptenddate;
            r.chargecode = chargecode;
    
            MasterController.ServiceAccounting sa = new MasterController.ServiceAccounting();
            List<Domain.Accounting.Report> agingInDetail= sa.AgingInDetails(r);
            string returnStrInHTML = sa.AgingInDetailsInHTML(agingInDetail);
       
             r.outputHTML = returnStrInHTML;
            return Json(r, JsonRequestBehavior.AllowGet);
        }

Open in new window

  $.ajax({
                url: "/Accounting/GetAgingReport",
                datatype: "text",
                data:
                {
                    'invoicestartandenddate': invoicestartandenddatevalue,
                    'receiptstartandenddate': depositstartandenddatevalue,                   
                    'chargecode': chargecodevalue
                },
                type: "POST",
                success: function (data) {
                    var id = data.outputHTML;
                    alert("Success");
                         
                },
                error: function (error) {
                    alert("Error " + error);

                }
            }); 

Open in new window

 <system.web>
    <customErrors mode="Off"/>
    <compilation debug="true" targetFramework="4.6.1"/>
    <httpRuntime targetFramework="4.6.1" executionTimeout="100000" maxRequestLength="214748364" />
  </system.web>
  <system.web.extensions>
    <scripting>
      <webServices>
        <jsonSerialization maxJsonLength="2147483647" />
      </webServices>
    </scripting>
  </system.web.extensions>
  <system.webServer>
     <security>
      <requestFiltering>
        <requestLimits  maxAllowedContentLength="2147483647"  />
      </requestFiltering>
    </security>
  </system.webServer>

Open in new window

0
var nestedtablesettings = {
    "iDisplayLength": 20,
    "bLengthChange": false,
    "bFilter": true,
    "bSort": true,
    "bInfo": false,
    "drawCallback" : function() {
        var appendDownloadLink = $("table table td .dataTables_filter");
        appendDownloadLink.each(function(i, e) {
            var label = $('label', e);
            $(e).html('<a class="export-circuits" href >Export circuits</a>').append(label);

            $(".export-circuits").on("click", function(e){
                circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
                hpath = "exportCircuits?organisationID="+getbusinessID+"&interfaceName="+circuit;
                $(this).attr("href", hpath);
            });
        });
    }
};

Open in new window


I am trying to add an export link on the nested datatable.  When I try to see my result on Chrome and Firefox, it is working perfectly.

The result on chrome and Firefox
<div id="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0_filter" class="dataTables_filter"><a class="export-circuits" href="">Export circuits</a><label>Search:<input type="search" class="" placeholder="" aria-controls="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0"></label></div>

Open in new window


On the IE, it removed the data from label elements.
<div id="nested-datatable-covertab_0_row_0_tab_0_row_0_tab_0_filter" class="dataTables_filter"><a class="export-circuits" href="">Export circuits</a>
<label></label>
</div>

Open in new window


From my research, IE has got some issue with jquery append method.

Any helps would be highly appreciated.
0
I have got two select elements and I would like hide the option values if it is greater than the first select options values.

<select name="upgradeQuoteDetails[0].currentBearer">
            <option value="10">
            10 Mbps</option>
            <option value="100">
            100 Mbps</option>
            <option value="1000">
            1 Gbps</option>
            <option value="10000">
            10 Gbps</option>
            <option value="0">
            Other</option>
    </select>
    
<select name="upgradeQuoteDetails[0].quotedBandwidths">
            <option value="10">
            10 Mbps</option>
            <option value="20">
            20 Mbps</option>
            <option value="30">
            30 Mbps</option>
            <option value="50">
            50 Mbps</option>
            <option value="100">
            100 Mbps</option>
            <option value="1000">
            1 Gbps</option>
            <option value="10000">
            10 Gbps</option>
            <option value="0">
            Other</option>
    </select>

Open in new window





$("select[name='upgradeQuoteDetails[0].currentBearer']").change(function(){
        	var selectedBearer =$(this).children("option:selected").val();
          
          
          var options = 		            $("select[name='upgradeQuoteDetails[0].quotedBandwidths'] option");

    var values = $.map(options ,function(option) {
        return option.value;
    });
    
    for (var i=0; i<values.length; i++){
    console.log(values[i]);
  
    		if (values[i] >= selectedBearer) {
        	        
                      $("select[name='upgradeQuoteDetails[0].quotedBandwidths']").children('option[value='+values[i]+']').hide();

        }
    }

       
});
   

Open in new window


The bandwidth option value should always be less then the bearer options values.  For example, if the bearer option 100, the bandwidth should show 10, 20, 30, 50 and 100 only.jsfiddle
0
Hi everybody.
A client wants I implement a simple chat in order to get in touch with the visitors of his website. So I don't need to build a chat room but a one-to-one chat between the website owner and the website visitor. I'd need some guidance about hot to do it using jQuery and Php. I have found some script around the web, but, for instance, I don't understand how to manage the website owner side: It can happen that many visitors want to chat at the same moment and I can't guess how I have to manage this.

Can you give me some idea, suggestions and help?

Thank you so much
0
Dear Experts,

I use below function to post the data, it works perfectly fine.

however, it posts the data as soon as the page is ready, but I want to post the data if my button is clicked.

how can I do that?

thank you

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
       $.post("print.php",
        {
          bayikodu: "buraya",
          tutanak: "3"
        });        
});
</script>

Open in new window

1
Experts,
 We have some java script and reading data from sharepoint list. Some list item has more space and we need to trim it before we compare. The  original value is "California&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " and we need to replace to "California".

Can you please help me write some code?

original code
  var spClientContext = SP.ClientContext.get_current();
        var parentListName = 'DM Nomination List'; 
		var spList = spClientContext.get_web().get_lists().getByTitle(parentListName);
		var objResult;
		    
		    arrLstDMNomination = [];
		    
			var viewXml = "<View><Query><Where><Eq><FieldRef Name='Nominated' /><Value Type='Text'>1</Value></Eq></Where>";
				viewXml += "<GroupBy Collapse=\"TRUE\" ><FieldRef Name=\"Territory\"/></GroupBy></Query><ViewFields><FieldRef Name=\"LinkTitle\"/>";
				viewXml += "<FieldRef Name=\"Title\"/><FieldRef Name=\"Territory\"/></ViewFields><Aggregations Value=\"On\">";
				viewXml += "<FieldRef Name=\"Nominated\" Type=\"COUNT\"/></Aggregations></View>";
			 var groupBy = spList.renderListData(viewXml);
			 spClientContext.executeQueryAsync(function(){
			 objResults = JSON.parse(groupBy.m_value);
 			 
			  $.each(objResults.Row, function(idx, obj){
                var vTerritoryName = obj["Territory"];
			 	var vNominatedCnt = obj["Territory.COUNT.group"];
			 	arrLstDMNomination[idx] = { 'TerritoryName' : vTerritoryName, 'NominatedCount' : vNominatedCnt  };
              });	 
            

Open in new window

0
I have got a nested datatable, I am adding a link in the inner data table. When I try to click another row, it duplicated the links.

jsfiddle

var settings = {
  "iDisplayLength": 20,
  "bLengthChange": false,
  "bFilter": true,
  "bSort": true,
  "bInfo": false,
   "drawCallback" : function() {
                       		var appendDownloadLink = $("table table td .dataTables_filter label");
                        		appendDownloadLink.each(function(i, e) {
                        		  $(e).before('<a class="take" href>Export departments</a>');
                           });
                           
                            $(".take").on("click", function(e){
                   	   console.log("export links");
                   	   e.preventDefault();
                         circuit = $(this).closest('tr').prev('tr').children('td').eq(1).text();
                         console.log(circuit);
                         hpath = "exportCircuits?organisationID="+"hello"+"&interfaceName="+circuit;
                         console.log(hpath);
                         $(this).attr("href", hpath);

                   });
                           
                           
                         }
};

var table = new nestedTables.TableHierarchy("example", dataInJson, settings);
table.initializeTableHierarchy();

Open in new window


How I can remove the duplication of the link ?
0
I am upgrading a site from javascript and jquery to Angular 7.

The site makes API calls to a server to deliver the HTML code.

What I am running into is that the code that comes from the server does not work.  For example, here is a test example from my html component that shows the problem.

<div [innerHTML]="pageInfo.text | safeHtml"></div>
<p><button class="btn btn-default" (click)="btnclck('btngo')">Test</button></p>

Open in new window


The first line is loaded in on initiation when the site loads and then changes when you move to a new page.
The second is a test line that I placed in there just to illustrate my problem.

The second line works exactly as it is supposed to.

But if the same button code comes in from an api read from the database, it doesn't work.

If you look at the code in the code inspector, you will see that the Angular coding has been applied to the second, but not to the first.

Angular Button Description
My assumption is that because this dynamic text is loaded after the rest of the site, the angular coding is not applied to the button tag and as such, the onclick doesn't work.

How do I get around this?  

The code has to come dynamically from a database.
0
I'm attempting to display part of an array from JSON when the user clicks on an ID in the dropdown. The data is loading data twice and then subsequent clicks just layer array upon array even though I have set my array to clear when update() is fired. I'm also getting a "update is not defined at HTMLAnchorElement.onclick" although that function itself is firing when the page loads.

How can I resolve the error and only display the one set of matching data? Here is a fiddle: https://jsfiddle.net/dtepdc/4e6mfoct/

Here is the code:

let dataset = [
    {
        "scene": "IR0006426320",
        "scene_start_time": "2018-02-05T15:03:30",
        "chips": [
        {
            "chip": "2018.02.05.150",
            "start_date": "2018-02-05T00:05:07",
            "end_date": "2018-02-05T01:26:23",
            "co_num":["None"],
            "cause": false
        },
        {
            "chip": "2018.02.05.192",
            "start_date": "2018-02-05T15:48:08",
            "end_date": "2018-02-05T17:22:34",
            "co_num": [
                "C03619354",
                "C03618763",
                "C03619064",
                "C03619325"
            ],
            "cause": false
        },
        {
            "chip": "2018.02.05.26",
            "start_date": "2018-02-05T16:38:56",
            "end_date": "2018-02-05T21:08:00",
            "co_num": [
                "C03610724"
            ],
            "cause": false
        },
        {
            "chip": 

Open in new window

0
I don't understand why I needed to use == instead of === in code below. When I use ===, code doesn't go down the correct if else block

<select class="form-control valid" id="ddlRoles" name="ddlRoles" aria-invalid="false">

						<option value="1">CSI STL - User</option>
						<option value="2">Ferguson - User</option>
						<option value="3">CSI Demo - User</option>
						<option value="4">Customer Admin - US/Canada</option>
						<option value="5">Customer Manager - US/Canada</option>
						<option value="6">Customer User - US/Canada</option>
						<option value="7">CSI AE - US/Canada</option>
					</select>

Open in new window


This works but if I change it === ... only else block gets executed

$('#ddlRoles').change(function() {    
		console.log($('#ddlRoles').val());

		if ($('#ddlRoles').val() == 3) {

			$("#camilladefault").hide();
			$("#camilladivtest").show();
			$("#camilladivtestFer").hide();
			}
		else if ($('#ddlRoles').val() == 2)
			{
				$("#camilladefault").hide();
				$("#camilladivtest").hide();
				$("#camilladivtestFer").show();
			}
		 else {
			$("#camilladefault").show();
			$("#camilladivtest").hide();
			$("#camilladivtestFer").hide();
		}
    });

Open in new window

0
Using jQuery, is there a way to cross fade two pages?  Meaning if I go from page 1 to page 2 they cross fade to the next instead of an abrupt change?  Is there an example?
0
 var element = CKEDITOR.document.getById( 'quick_email' );
          element.show();
        

Open in new window


im using CKEDITOR

and what i am trying to do is append a link onto it without replacing the content typed in by the user, ino SetData adds content but it overwrites the old content where i want to append onto it but im not sure how to get this to work, anyone any exp or tips on this ?
0
I had this question after viewing Adding a link on the nested data table.

I would like to pass the the department name into the export link, which I have created in drawcallback

So the link should be like that;

 $(".export").on("click", function(){
		 console.log("button is clicked");
       
    $(this).attr("href", "departmentName={departmentName}");

});

<a class="export" href="#" target="_blank">Export</a>
href= should be the parent first td ( department name) 

Open in new window


Any helps would be really appricated.

Thanks
JSFiddle
0
Experts,
  We are reading current user automatically by java script. The value store as a "i:0#.w|domain\username". I need to separate domain and username in another variable by javascript.

Can you please help me to write some script to retrieve username and domain?

 
 var input = "i:0#.w|domain\username"l
 var user = "" // Need to Populate
 var domain = "" // Need to Populate

Open in new window

0
I have a site (it's an intranet, so I can't give a link) which uses jQuery.ui dialogs to show messages.
It uses only jQuery and jQuery.UI plus some of our own JS and CSS.
When the page content is much bigger than the view port (the browser window) (so there is vertical scroll bar appears) the dialog is shown at the bottom of the browser's window. Also the opposite is true, when the page content is much less to the browser's window, the dialog is aligned to the top edge.
I've found out that on this site the following expression is always equals true (in Chrome and Mozilla, but not in IE) and I believe that is the reason for the dialog misplacing.
$(document).height()===$(window).height() 

Open in new window

On other sites these two methods return different sizes of the page content and the viewport accordingly.
What could be a cause for that?
0
Hello Experts,
 We have created the web service to check the user is belongs to Active Directory or not for our Access Denied Page. Now we have to use Rest Api to use the method. The web service has three parameters 1. Security Group 2. Username 3. Domain.

I will need to pass current user name and domain to this web service. This method return Boolean.  Based on value i have to display different html. I may have to use SPcontext to read current username and domain.

Function call()
{
setData="{'SecurityGroup':'','UserName':'','domainName':''}";
    $.ajax({
        type: "POST",
        url: _spPageContextInfo.webAbsoluteUrl+"/_layouts/15/FindUserSecGroupMembership/CheckUserADMembership.aspx/IsMemberOf",
       data:setData,
        async: false,
        contentType: 'application/json; charset=utf-8',
        success: function(data) {
                                                //debugger;
               //if(data.d.length>0){
                console.log(data)
           //}
                },
        error: function (error) {debugger;
            console.log(JSON.stringify(error));
        }
    });
}

Open in new window


Can you please help me to write code to pass username and domain and display html based on output?
0
Experts,
 We have created the custom page in java script. we are displaying data in view. When we click on individual item and save items not display. And that's only when we have "&" symbol in url. We save filter criteria in local storage.

Before Save url :

http://ABC.aspx?#InplviewHash97428e6a-5c1a-4445-a133-336fd3805e7c=FilterField1%3Dfield1-FilterValue1%3DABC%2520%2526%2520Xyz#InplviewHashd1f5ace6-ff21-41ae-a01e-6e088d5b1f42=FilterField1%3Dfield1-FilterValue1%3DABC%2520%2526%2520Xyz
After Save url:

http://abc.aspx?#InplviewHash97428e6a-5c1a-4445-a133-336fd3805e7c=FilterField1=field1-FilterValue1=ABC%20%26%20XYZ#InplviewHashd1f5ace6-ff21-41ae-a01e-6e088d5b1f42=FilterField1=field1-FilterValue1=ABC%20%26%20XYZ

Looks like if we replace "%" to %25% then it should work. Can you please me to fix this issue?
0
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

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