jQuery

16K

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

I am trying to upload multiple images and the file names are storing in the database like I want but I get a console error that says: $.each(...).done is not a function

$("#edit_pic").on("click", function (e) {
			e.preventDefault();
			var files = $('input[name="file"]').val()
			var data = JSON.parse(files)
		}

		$.each(data, function (index, item) {

			$.ajax({
				url: 'functions/add-support-images.php',
				type: 'POST',
				dataType: 'json',
				data: {
					data: item.file_name
				},
				beforeSend: function () {
					$("#edit_pic").prop("disabled", true).html("Uploading...");
				},
			});
		})

		.done(function (data) {
			if (!data.success) {
				console.log(data.message);


			} else {

				console.log(data.message);

			}

		})

		.fail(function (jqXHR, textStatus, errorThrown) {
			console.log(textStatus + ': ' + errorThrown);
			console.warn(jqXHR.responseText);
		});

Open in new window

0
Independent Software Vendors: We Want Your Opinion
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Hi E's,
I Have 3 buttons and a Materialize Modal that contains a HTML Select with Four options to choose from. 0 by default and 1, 2, and 3, and each number between 1 to 3 are associated to each button.
The objective is, when I click in any button, open the Modal and change the select view for the correspondent number.
I try change the selected with jQuery in this way:
$("#numbers[value=3]").attr("selected", "selected");
but not work.
In attach image you can see what appear regardless of which button I click.Modal view
<!DOCTYPE html>
 <html>
   <head>
     <!--Import Google Icon Font-->
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   </head>
   <body>
<a class="waves-effect waves-light btn b1">button one</a>
<a class="waves-effect waves-light btn b2">button two</a>
<a class="waves-effect waves-light btn b3">button 333</a>

<!-- Modal Structure -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>Header</h4>
  <div class="input-field col s12">
  <select id="numbers">
    <option value="0" selected>Choose your number</option>
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">3333</option>
  </select>
  

Open in new window

0
I have a Single Page App and I want to scroll to another section from a link on my landing page to another section.  What in your opinion is the best way to do that with current technology?  Javascritpt, Jquery, Other??  And how.
0
I Created a WebGrid using MVC but when i try to run I am getting this Error Message "SqlException: Execution Timeout Expired. The timeout period elapsed prior to completion of the operation or the server is not responding.", I Checked SQL Server Logs but it is not even Connecting the Database, It is timing out after 1 minute, I Included these Timeouts but it is not working, Please help.
binding name="basicHttpBinding"  				 
closeTimeout="00:10:00" openTimeout="00:10:00" receiveTimeout="00:10:00" 
sendTimeout="00:10:00"

Open in new window

2
I have a table with Babies as rows.

In each row, user needs to select
  Gender (DropDownList, Male/Femal)
  then select baby Name (DropDownList)

But user cannot repeat the same selection/combo select in a different row.

How can I prevent the duplicate select options. If I use disable option, then the values do not POST to server.

__________
<tbody id="TS">
 <tr class="rowCss">        //ROW 1

<td>
  <span class="project">
    <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList">
      <option value="">Male</option>
      <option value="1">Female</option>
      <option value="2">Male</option>
    </select>
  </span>
</td>
<td>
  <input type="hidden" name="Records.Index" value="0">
    <span class="billingcodeCss">
      <select class="form-control timecodeDdlId" id="Records_0__SelectedBillingCodesFromList" name="Records[0].SelectedBillingCodesFromList">
        <option value="">John</option>
        <option selected="selected" value="5">Sam </option>
        <option value="6">Mel       </option>
      </select>
    </span>
  </td>
</tr>
<tr class="rowCss"> //ROW 2

  <td>
    <span class="project">
      <select class="form-control projectcodeid" id="Records_0__SelectedProjectFromList" name="Records[0].SelectedProjectFromList">
        <option value="">Female</option>
        <option value="1">Male</option>
        <option value="2">Female</option>
      </select>
    </span>

Open in new window

0
I have a form that posts via javascript / jquery / ajax

I am trying to validate some fields server side before actual submission I was doing this to set the variable

myVar=$('#myVarFormID').val();

Open in new window


when I check the console, my variable is set appropriately and shows as intended, but when I go like this after setting it
nextFunction(myVar);

Open in new window


The function thinks the variable is [htmlInputElement]

I dont understand why the output shows fine but the script function wont take it in.  Is there something extra I need to do to pass this form element into a different function?
0
Head out to this page: https://deaconess_spouse.ezonlineregistration.net/

You don't have to add any data, just click on "Verify." You should get an alert that says, "Hello, Jenny!" It works in Chrome, but not in IE.

Why? What do I need to improve?

Thanks!
0
I am very new to programming js, and am trying to just replicate an example found here:

https://github.com/nicolaskruchten/pivottable

The particular example is:
https://pivottable.js.org/examples/simple.html

Even though they provide the exact js code for the function, I don't understand what the full html code would look like (including where to place the js code, and how to call the function so that the table appears).

Thanks for any help.  I'm stuck at step 1 :-(
0
I have 3 tabs inside my Project and i have query which i have described in my attachment
ActiveTab.docx
0
I have a div tag "tab-hidden" inside my master-page.aspx file and i am including my master-page in all my pages present in my project. But the issue is i have to hide that div tag from some pages in my project.

 <div class="tab-hidden" style="margin-top: 60px; margin-left: 203px;">  
         <div class="tabbing" id="ipi1">
             <a href="Client_PlaningInformation.aspx" onclick="landingdetails('ipi')">
               
                 Important planning information
            </a>
         </div>
         <div class="tabbing" id="ots1">
             <a href="Client_OrderYourStand.aspx" onclick="landingdetails('ots')">
                
                 Order Your Stand Services
             </a>
         </div>
         <div class="tabbing" id="marketing1" runat="server">
             <a href="#" onclick="landingdetails('marketing')">
               
                 Marketing
             </a>
         </div>
     </div>

Open in new window

0
Industry Leaders: We Want Your Opinion!
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Hello CSS experts!

I have some css that I only want to affect devices that are in landscape mode.   Specifically iphone, ipad and android.  (I think that covers all popular devices :)

Here's the current css:  
.video-section iframe {
    height: 527px;
    width: 100%;
    margin-top: -80px;
}

Open in new window


Thanks!

Rowby
0
Hi - I'm using jQuery ticker found here: https://github.com/gluhbirne/TickerMePink

I'm pulling ticker news via recordset. However when I change the default ticker speed to slow duration, i.e. 5000,  it creates a longer load time.  It delays the duration by 5 extra seconds for first item to even show.  How would I go about Increasing the initial speed so first item displays right away then keep with the 5 second duration?

<script type="text/javascript">
      $(function(){
      $('#ticker').tickerme({
            duration: 5000,
            control_rollover: '#099'
      });
});
      </script>
1
I am trying to get the id value in the url via ajax like this but don't know how to get the url parameter (id value in this case) via jquery.

$.ajax({
		url: 'functions/selected-cat.php',
		type: 'GET',
		dataType: 'json',
                data: {}
	})

Open in new window


When I try to console.log() the request I get a console error that says the id is an undefined index.


$safe_url = filter_var($_GET['id'], FILTER_SANITIZE_URL);

Open in new window


I put that into an array and json_encode it so that part is right. Is it not possible to get a url value in this way? Does it have to be done using javascript/jquery as opposed to php?
0
I'm helping a friend with their WP site and I'm using Presstiger's Simple Job Board plugin. I'm getting the following output errors thrown when after pressing the SUBMIT button:

errors
Any help from the community would be great.

thank you.
errors.png
0
Hi EE community, just wondering if anyone can help me solve this problem.  Is there anyway to temporarily disable a function or class, until re-enabled. For example, See code below, if the first 'edit' is clicked, how to disable the second/third 'edit' until it is re-enabled.

<a class="edit">edit</a>
<a class="edit">edit</a>
<a class="edit">edit</a>

$('.edit').click(function(e){
  e.preventDefault();
  // do something 
  // once complete re-enable function
});

Open in new window


Thanks!
0
Hi

In my call to API using AJAX, I get the response in HTTP Status code as shown below.

response.png
In my code, when I get any status code that starts with 4 it goes into error function. Is there a way in error function to identify the value sent back in response? So that, i can display different error message for different status code.

I did try adding this below code,

          statusCode: {
            202: function() {
              $formRoot.find('.form-validation .message').html(successMsg);
              $formRoot.find('.email-link-form').hide();
              $formRoot.find('.form-validation').show();
            },
            429: function() {
              showResult(validationError.tooMany);
           },
            422: function() {
              showResult(validationError.contact);
           },
            404: function() {
              alert ('404 error');
           }
         }

but this doesnt even get called.

any help appreciated.

Thanks.
0
I've got an ajax call that returns the following object:

d:
[{"Name":"Elvis", "Num":"100", "Phone":"Y"},{"Name":"Presely", "Num":"101", "Phone":"N"},{"Name":"Maria", "Num":"103", "Phone":"Y"}]


I'm trying to loop over everything so I can capture the values. The variable that contains this object is json.  I've tried the following code and haven't gotten any where and I'm stuck:
jQuery.each(json, function (i, val) {
  $.each(val, function (j, v) {
            alert( v.Name +  v.Num + v.phone)
                });

Open in new window


Any thoughts?
0
I have a select box called mfr colors which has manufacturer colors. Here is my select box with a couple of options but in general there a lot more options.

<select id="tmcp_select_1" class="tmcp-field tm-epo-field tmcp-select tm-valid" name="tmcp_select_0" data-price="" data-rules="" tabindex="1" aria-required="true" aria-invalid="false">
<option value="Custom_0" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" >Custom</option>
<option value="Black Roof Orange Body_1" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" >Black Roof Orange Body</option>
<option value="Red Body White Roof_2" class="tc-multiple-option tc-select-option" data-imagep="" data-price="" >Red Body White Roof</option>
</select>

Open in new window


Now each mfr color has 4 thread colors namely primary, secondary, third and fourth. I have a custom post type called manu-color and each manu color has all the four thread colors. What I am trying to do is display the four colors based on the mfr color selected above from the select box.

here is my code for the custom post type

function pcfa_create_post_type() {
	// set up labels for Colors
		$labels = array(
 		'name' => 'Manufacturer Colors',
    	'singular_name' => 'Manufacturer Color',
    	'add_new' => 'Add New Manufacturer Color',
    	'add_new_item' => 'Add New Manufacturer Color',
    	'edit_item' => 'Edit Manufacturer Color',
    	'new_item' => 'New Manufacturer Color',
    	'all_items' => 'All 

Open in new window

0
Hi Guys,

I would like to get the property names from a Javascript object to build a table dynamically. Example:

var data = [{
        Name: "xxxx",
        Last: "bbbbb"
                },
{
        Name: "ddddd",
        Last: "sssss"
}]

Now imagine this properties (Name , Last) come in different name from the database so how could I retrieve the property data from the json array with javascript.

Thank.
0
WordPress Tutorial 3: Plugins, Themes, and Widgets
WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Hello Sir,
Actually i write simple jquery that is:
<script>
$(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
where myTable is id of html table. all functionality works good but show entries and pagination not working,not even button is clickable.
I am using php here.
Here is its screenshot:
prob.png
0
I'm using the JQuery DataTables library and would like to add a total row to the footer of the table. The totals displayed in the row should update each time a filter is applied (number of rows to display or using the search filter). Does anyone have an example of how this can be done? Thanks
0
Used jquery ui sortable function for the first time this week. It was really easy to create a drag and drop list and serializing the order to save in a database was really easy. Not sure why I hadn't tried to use it before.
5
I had this question after viewing Angular - difference between these 2 pagination methods.

I'm following this example (please scroll down pipe/ajax plugin section here http://lorenzofox3.github.io/smart-table-website/)

In the related question above, I want to do this
"From the page number you can calculate from which index your query will start returning data up to your page limit."

I think I have 2 issues. One is how to get the next index and second...I think I call the database every time user clicks on the next page.

I'll go step by step

1. I changed the stored proc to have row_number. Suppose this. I call it with 1 and 50 and get 50 rows.
create procedure usp_test
@start int,
@end int
as
begin
Select * From( Select *,ROW_NUMBER() OVER(ORDER BY Table.Col) row FROM TableName ) R WHERE row BETWEEN @srart AND @end

end

Open in new window


2. Razor has this (just like the Smart table example)

<table class="table" st-pipe="callServer" st-table="mc.displayedCollectionTest">

Open in new window


3. controller.js has this like the example

 $scopr.callServer = function callServer(tableState) {

    ctrl.isLoading = true;

    var pagination = tableState.pagination;

    var start = pagination.start || 0;     // This is NOT the page number, but the index of item in the list that you want to use to display the table.
    var number = pagination.number || 10;  // Number of entries showed per page.

    cContactService.getPage(start, number, tableState).then(function (result) {
      $scope.displayedCollectionTest = result.data;
      tableState.pagination.numberOfPages = result.numberOfPages;//set the number of pages so the pagination can update
      
    });
  };

Open in new window


4. Issue 1: Here, I don't think this is correct. Database keeps getting called but should it? the example has randomsItems as their datasource but not called on each "page" click to go to next page

In ContactService.js


Open in new window

1
I have write script for body smooth scrolling, but it is not working in Mozilla Firefox

$('.arrow').click(function() {
                  $('html body').animate({scrollTop:0}, 1200);  
                   return false;      
                  });
0
I am using a zip code API which retrieves results for matching city and state.  Its an ajax request and it works fine as written below, however, I am trying to HIDE the city and state fields until results come back.

I gave a div the ID of "formDiv" and I set the default style="display:none"

In the code below, I want to set style="display:block" but only if results are being returned to the form with AJAX.  I added the line with asterisks and it does not change the style property.  Not sure how to also add that function in addition to the other results. I omitted the remainder of the code to keep it simple, but if I need to do something different on ajax side to trigger the style change when successful, I will post that as well.

Thanks

$(function() {

	var container = $("#example1");
	var errorDiv = container.find("div.text-error");
	
	/** Handle successful response */
	function handleResp(data){

		// Check for error
		if (data.error_msg)

			errorDiv.text(data.error_msg);

		else if ("city" in data){
******************
			function(){
			document.getElementById("formDiv").style.display = "block";
			}
******************			
			// Set city and state
			container.find("input[name='city']").val(data.city);
			container.find("input[name='state']").val(data.state);

		}

	}
}

Open in new window

0

jQuery

16K

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