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
I'm trying to loop through some JSON data on a closed system so I can't upload a sample
Could someone give me a clue where to start?

                $.ajax( {
                                url : link,
                                type : 'get',
                                datatype: json,
                                success : function( resp ) {
                                                console.dir(resp);
                                                var elm;
                                                $.each(resp.features, function(key, value){
                                                                elm.append('<tr />');
                                                                $.each(value.attributes, function(key, value){
                                                                                elm.append('<td>' + key.name + ‘</td>’ …);
                                                                });
                                                });
                                                elm.appendTo('#Results');

                                }
                });

Open in new window


CONSOLE output
displayFieldName: "SORT_NAME"
features:Array[1000]
                0:Object
                attributes:Object
           NAME: "My place"
           LONG_: 123
           LAT: 56
...........
   length: 1000
fieldAliases: Object
      NAME: NAME
      LONG_: LONG
      LAT:LAT

Open in new window

0
I would like to add a download link, just before search box. I am using third level nested data table. This data creates dynamically on AJAX respond data.
I am using the following plugins;
Datatable
nested data table

 Second and third level of table is shown, when user click on the table rows. How I can add download link for the last level of the datatable ?

 var appendDownloadLink = $(".dataTables_filter");
    		                    
appendDownloadLink.prepend('<a class="download">Download</a>');

Open in new window


JSfiddle
0
I have created a cookie via jquery called 'wantmembership', my tests work and display the correct message if the cookie is present.  With the exception, if someone is a guest the message doesn't go away.  This is even after deleting the cookie and clearing the cache.  

I am using FF and I cleared the browser cache via FF.  However reading further, this seems to be why the message is still showing up.

As a result, your cookie may only work as expected when logged in to the WordPress Admin Dashboard. This is because logged-in user sessions specifically bypass the page cache layer, and will be processed by PHP every time.

Open in new window


This is a XAMPP localhost test site and there are no cache plugins installed.

I am running WooCommerce 3.5.4 and WordPress 4.9.8.  This function writes in the Order Notes box 'I Want Membership' if they have pressed the button for membership.

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'])) {
    $fields['order']['order_comments']['default'] = 'I Want Membership';
	}
    return $fields ;	
}

Open in new window


This is the jquery that creates the cookie

<script type="text/javascript">

jQuery(function() {
	jQuery('#result').text(listCookies);
	jQuery('#cook').click(function(e) {
		e.preventDefault();
		document.cookie = "wantmembership=1; 

Open in new window

0
jQuery Animation to build a visual display.  I want to build a visual display from info/data in my DB but I am not 100% certain on where to start.  It is just visual display but I need to calculate the results of data from my DB.  My question is, where would you start in developing this visual and what skills should be needed to complete this?  Any input is welcome.
I query the DB for results and that will be a few figures.  How would you translate those figures into graphics?  CSS? jQuery? SVG?
How To
0
Hi

I have a radioButtonList, that is being populated server side.

There is a temp requirement to disable 1 of the options. There is no config for this so I'm looking to identify the element in the list and either hide it or disable it with JS or JQ

Can anyone offer any help?

Andy
0
Hello There,

Here is my product layout of my test site.

Test Product Layout

I am showing a preview of the dog tag a customer selects and customize it. So for example when a customer types some thing in Line 1 that text is being displayed and so on.

Where I am stuck is I am not able to display the typed text onto the center of the preview image, its always showing below the image. I have tried using position relative and absolute and its no use.

Also I am stuck is when text is entered in the second line on the preview image the first line text needs to move up a little to display the second line text underneath it and so on. If there is no text in second line, the first line text needs to 100% centered.

Any advise is appreciated


Thanks
0
<select required="" class="form-control input-md" name="act_lnk" id="act_lnk">
<option selected="selected" value="0">( Contact) - Level </option><option value="702279 ">( Lead ) -  testing open status</option>
<option value="702266 ">( Lead ) -  alex test dealtime</option>
<option value="702251 ">( Deal ) -  test</option>
</select>

Open in new window


here my select input,

is their a way in jq to change it selected prop?
1
I have a setup I am re-writing that uses tabs for different functions. Two of those tabs are related forms that are submitted together. Another tab holds a table with pagination and column sorting. This creates a problem as every page change or change in sorting or row size in the paginated table requires a page refresh, which clears the forms. Ideally, I would just rewrite the table and use Ajax. The more expedient thing to do would be to just serialize the form on any form change, and refill the form from that serialized data if and when the user returns to the form in the same session.
$('#FormName').on('keyup change paste', 'input, select, textarea', function()
{
    // Do something here
}

Open in new window

What I am looking for:
1. I am not sure how best to store that serialized data (HTML5 local storage would be okay) or how best to refill the forms.
2. Perhaps there is a better way to do this altogether.
0
I have a button that on click makes an ajax call and returns another subset of buttons like an accordion. This works perfectly.

Now, if the user clicks one of these subset of buttons (active-client), i want it to return another list below that item. I cant seem to get the jquery selector to even pick up on the second click, what am i doing wrong?

HTML
<div class="period-wrapper">
<!-- When user clicks this button it returns the data below -->
<button class="accordion today active" data-attribute="today">30<br>Today</button>

<!-- We found some data! -->
<div class="client-wrapper">
<!-- If i click this button i want to do some stuff not even getting any errors-->
<button class="accordion active-child" data-attribute="3077">8<br>Client_1</button>
<div class="card-wrapper"></div>
<button class="accordion active-child" data-attribute="33">5<br>Client_2</button>
<div class="card-wrapper"></div>
/div>

</div>

Open in new window


JQUERY

$('.accordion.active-child').click(function(e) { 

console.log($(this).data('attribute'));

});

Open in new window

0
I'm trying to build a SPA using jQuery AJAX and .NET Web Services and I am stuck trying to figure out why my ajax call is returning a 500 internal server error.

Assume id = 0 and an instance of a shopping list is returned to the ajax call. For some reason it is always hitting the error handler and showing "something went wrong".

JS code:
function getShoppingListById(id) {
    console.info(id);

    $.ajax({
        type: "GET",
        dataType: "json",
        url: "api/ShoppingList/" + id,
        success: function(result) {
            currentList = result;
            showShoppingList();
            drawItems();
        },
        error: function() {
            console.error("Something went wrong");
        }
    });
}

$(document).ready(function () {
    console.info("ready");
    $("#shoppingListName").focus();
    $("#shoppingListName").keyup(function(event) {
        if (event.keyCode === 13) {
            createShoppingList();
        }
    });

    var pageUrl = window.location.href;
    var idIndex = pageUrl.indexOf("?id=");
    if (idIndex !== -1) {
        getShoppingListById(pageUrl.substring(idIndex + 4));
    }
});

Open in new window


C# code:
        
public IHttpActionResult Get(int id)
        {
            var result = shoppingLists.FirstOrDefault(s => s.Id == id);

            if (result == null)
            {
                return NotFound();
            }

            return Ok(result);
       }

Open in new window

0
would like to add sorting arrow on the table headers. We have got 3 nested data table.

var getTableHeader = $(".dataTable th");
[url="https://jsfiddle.net/yakupme/vfgjy726/"]Jsfiddle code[/url]
getTableHeader.append('');

getTableHeader.click(function(e){
e.preventDefault();
console.log("table header is clicked");
$(this).find('span').toggleClass('ascArr descArr');

Open in new window


https://jsfiddle.net/yakupme/vfgjy726/

It does not add on the 2 and 3.level datatable header.  Can anyone help me on this issue please ?
0
With javascript, is there a way to have a hidden input field and have that value be populated by a handful of other input fields.  So I had a list of of first and last name inputs and there are three sets of fields that each have a different first and last name.  Can I then, on submit take those six names and comma separated them into the value of a hidden input?
So I guess the first and last name will be an array because there may be endless first and last names.
<input type ="text" class="first-name-1" name ="first-name[ ]" value="" />
<input type ="text" class="last-name-1" name ="last-name[ ]" value="" />

<input type ="text" class="first-name-2" name ="first-name[ ]" value="" />
<input type ="text" class="last-name-2" name ="last-name[ ]" value="" />

<input type ="text" class="first-name-3" name ="first-name[ ]" value="" />
<input type ="text" class="last-name-3" name ="last-name[ ]" value="" />


<input type="hidden" id="name" name="name" value="" />

<script>
 $('#name').attr('value', $('.first-name').valuel() + $('.last-name').valuel() );

Open in new window

0
Hi All,

I need to create a web application/site in ASP.NET C# that uses a calendar-like table,
but I don't know where to start and how to accomplish this table.

calendar-like-control.PNG
The idea is, that the user:
-can navigate to previous week and next week
-can't use the Prev.Week button if it's on the current week ( the previous week button should be disabled)
-selects the right check-boxes and saves it in the DB

I tried to find a similar table, but I couldn't find one.

A source code would be helpful or a control.

thanks advanced
0
The code below. I would like to convert to   public string GetTextBoxValue1(Control parent)
and the return value will be  finalstr


Can you show me how to change it?


 public void GetTextBoxValue1(Control parent)
    {
        string str = string.Empty;
        string str1 = string.Empty;
        string  finalstr = string.Empty;
        foreach (Control x in parent.Controls)
        {
            if ((x.GetType() == typeof(TextBox)))
            {
                TextBox t = ((TextBox)(x));
                //Response.Write(t.ID + " " + t.Text + "<br>");
                finalstr=finalstr + "&" + t.ID + "=" + t.Text;
                str = str + ("&" + t.ID + "=" + t.Text);
            }
            if (x.HasControls())
            {
                //Response.Write("NONE");
                  GetTextBoxValue1(x);
            }
        }
        
    }

Open in new window

0
I have modal and I also have a simple checkbox action. when the checkbox is checked, I want to create a <input type="text" value="selected value"> after event checked is completed.
When the checkbox is unchecked, it will remove the <input type="text" value="selected value">

Can you show me how to do that?

<form>
<div id="optionalArea">

</div>

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                   <div class="row with-forms  margin-top-0">
                    <h4 class="headline margin-top-10 margin-bottom-10">Table</h4>
                       <button type="button" style="float:left;" class="btn btn-default" data-dismiss="modal">Close</button>
                    <table class="basic-table">
                        <tr>
                            <th>Description</th>
                            <th>Cost</th>
                            <th>Count</th>
                            <th>Total</th>
                            <th>Action</th>
                        </tr>
                        <tr>
                            <th colspan="3" 

Open in new window

0
Hi There,

I'm having a little problem with a JS snippet I have on my website, which blocks a search of California.
We don't currently hire in California and have no listings, but we have a sticky job that comes up whatever state or location is entered.
I got the below snippet code, which if you type in ('ca', 'cal', 'cali', 'california', 'california ', 'los angeles', 'san fransisco', 'san diego', '90210', ) it will block the ability to select a freight type, and thus shows no listings, plus an alert.  

This is great for that part,  but if you search for something in say new york, it will bring listings up as intended, but say you then try to enter California again, it will give you the alert, but will also load the sticky job.  

How could i modify the code, so if listings are already there, and you try to search for California jobs, the listing hide?  I was thinking something like the ul.job_listings div is set to display none if it matches criteria, and then display if not California.

Hope this makes sense.  ...  Basically want ZERO jobs to show if you enter California, or CA, or Los Angeles.  ie post 19672 to not appear for California searches.

Website - Job Search.
		<script>
			$(function() {
			$('body').on('blur', '#search_location', function() {
				var excluded_cities = ['ca', 'cal', 'cali', 'california', 'california ', 'los angeles', 'san fransisco', 'san diego', '90210',  ];
					if 

Open in new window

1
Hi all

I have a form which has multiple sets of radio buttons. Each set of radio button must have 1 option selected, how can I validate this in jQuery please? I need to be able to set a class on ALL the fieldsets missing a selection, and would also like to scroll the screen to the first missing area as well to help the user see what needs to be answered still

Thanks
Neil

example:

  <fieldset>
    <legend id="legend_ayo18">Are You Over 18 Years of Age?</legend>
    <label for="o18y">Yes</label>
    <input name="over18" id="o18y" type="radio" value="1">
    <br />
    <label for="o18n">No</label>
    <input name="over18" id="o18n" type="radio" value="0">
  </fieldset>
  
  <fieldset>
    <legend>Are you</legend>
    <input name="nationality" id="yn1" type="radio" value="1">
    <label for="yn1">A UK Citizen</label>
    <br />
    <input name="nationality" id="yn2" type="radio" value="2">
    <label for="yn2">A National of Switzerland</label>
    <br />
    <input name="nationality" id="yn3" type="radio" value="3">
    <label for="yn3">A National of the EEA</label>
    <br />
    <input name="nationality" id="yn4" type="radio" value="4">
    <label for="yn4">None of the above</label>
  </fieldset>

Open in new window

1
i have very simple web api that have get method, and it will accept 20 parameters.
On the consuming side, I will have html form and each <input id='name'> is actually the web api parameter name.

My question is: using javascript, how to post all 20 html input value in one shot, i assume there is a way to get the entire input value by looping all items inside of html form.
because each html id name is same as api parameter name.

Thanks
1
I'm working with an old code that uses Grid.MVC and I need to add a parameter to do something. I've tried C# code, and some other ways but still couldn't get what I wanted to work.

I want to try one last thing in jQuery before I break the news to my manager that this is old code and we should leave it as is.

I'll explain.

1. You see the screenshot below
grid.png
2. When user clicks on a "page" button, I want to either  add another word to end of the "page" OR tag a word to the end of the page number End of the page number would be better.

 <a href="/?page=3">3</a>

3.  I used "rightDiv" element but I think "tableMain2" is better. I somehow need to drill down to get the "a" element

$('#tableMain2').click(function (e) {

			//find the ul named "pagination" 
                       //when user clicks on "a" , tag a text... for example "hello" to it
	});

Open in new window

0
Modifying the JS Code to work one by one and based upon inside ajax post, it should process the activation

Here is the code i have

$.post('/cfc/mycfc.cfc?method=stop', {id: id}, function(data) {
			if(data.status == 1) {
				return $.post('/register.html?action=remove' {id: id, pid: $('body').attr('data-pid')},callback,'json');
				swal('',data.statusmsg,'success'); - i want to get this inside the second post so it should work properly and trying to make use of async as by using ajax so they get called one by one 
				CheckPause(data);
				$('#wrapper').load( "#Pause");
			}else {
				swal('',data.statusmsg,'error');
			}
		},'json')

Open in new window

0
try to reload the page after a success message, but it is not reloading..

i have this code

$.ajax({
				type:"post",
				url: '/action.cfm?method=quote',
				data: datastring,
				success: function(data) {
					var valid = $.trim(data);
					if(valid.toLowerCase().indexOf("error") == '-1') {
						localStorage.setItem("swal",swal({title:"Good job!", text:'Thanks',
						type:"success",showConfirmButton: true}).then(function(){
						location.reload();
						})
						);
						localStorage.getItem("swal");
					}else {
						swal("Oops",data,"error");
					}
				}
			});

Open in new window

0
The following code contains an embed tag.  However do I dynamically insert the embed tag?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ViewPDF.aspx.vb" Inherits="ViewPDF" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script>
        $(function () {
        });

        function Test() {
            //Insert <embed> tag
            alert(hfPDFViewer.Get("PDFName"));
        }
    </script>
</head>

<body id="Main" onload="Test();">
    <form id="form1" runat="server">
        <%--<embed id="PDF" src="" type="application/pdf" />--%>
        <dx:ASPxHiddenField ID="hfPDFViewer" runat="server" ClientInstanceName="hfPDFViewer">
        </dx:ASPxHiddenField>
    </form>
</body>
</html>
1
I am using the select2 drop down list for states. The problem I have is that when you tab over to it, it doesn't allow you to type in a letter to go straight to the state in the list. Yes, you can hit Enter to open it up, but I'd like it to work as the select normally does by default.

Here is my code:

$('.ddlState').select2({
placeholder: '[Select]',
matcher: function (params, data) {
    return matchStart(params, data);
    },
width: 'resolve',
selectOnClose: true
});

Open in new window


I have checked their examples to see if it's possible and find one here under Multi-select boxes (pillbox). but I'm thinking maybe that's only if I change it to multiple, which I do not want. I viewed source code and see nothing in there that would indicate an option to hot key. Don't be fooled by the first example on their page, that's what the select box looks like by default before they turn it into a select2 box.
https://select2.org/getting-started/basic-usage

It appears this just doesn't have that ability, which is too bad if it doesn't, because that makes it unusable.

If you know of a way, please share!

thanks!
0
I have the code where i want to return the true/false and because i am using that function somewhere else to see if i get false, do this else do nothing

this is my code and it is giving me callback is not defined

function CheckIfPaused(callback) {
	$.post('/cfc/cfc.cfc?method=check',{id: $('body').attr('data-id')}, function(data) {
		if(data.status == 1) {
			callback('true');
		}else {
			callback('false');
		}	
	},'json');
}

Open in new window


$document.ready(function() {
if(CheckIfPaused() == false) {
do this 
}
});

Open in new window

1
After the ajax post is success, how can i reload html div id = resultlist?
This ajax call is to add a record into the database.

<script>
                                   function AddNew(fleetid, feeDescription, priceType, cost)
                                   {
                                       $.ajax({
                                           url: "/Home/AddFeePrice",
                                           datatype: "json",
                                           data:
                                           {
                                               'feedescription': document.getElementById(feeDescription).value,
                                               'pricetype': document.getElementById(priceType).value,
                                               'cost': document.getElementById(cost).value,
                                               'stage': 'Active',
                                               'fleetId': document.getElementById(fleetid).value
                                           },
                                           type: "POST",
                                           success: function (data) {
                                               var result = data.updateFeeStatus;
                                               alert("Success " + result);
                                            },
                                           error: function (error) {
                                    

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