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 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
I am on Wordpress 4.9.8 and WooCommerce 3.5.4.

I am trying to get a button using jquery to change background color and change the text in the button onClick.  I have come up with this code but when I try to save it I get an error.  

JavaScript error: ReferenceError: jQuery is not defined on line 6

Open in new window

this is line 6
e.preventDefault();

Open in new window


<script type="text/javascript">

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

</script>

Open in new window


I am very new to jQuery.

Please tell me how to fix this code to change the background-color and the text both.

Thanks,
0
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

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