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

Good Evening Everyone

I am trying to do a registration MODAL to post using php and get back a confirmation result, I have it working in the normal submission method POST using php, which passes the variables and reloads the page to registration.php after submission.

This is the MODAL below :
           <!--Body-->
                    <div class="modal-body">
                        <form method="POST" action="/registration.php">
                      <div class="md-form form-sm mb-5">
                        <i class="fas fa-user prefix" style="color: dodgerblue "></i>
                          <input class="form-control" id="fname" name="fname" type="text" placeholder="&nbsp First Name"><br>
                      </div>

                      <div class="md-form form-sm mb-5">
                        <i class="prefix"></i>
                          <input class="form-control" id="lname" name="lname" type="text"  placeholder="Last Name"><br>
                      </div>

                      <div class="md-form form-sm mb-4">
                        <i class="fas fa-address-book prefix"></i>
                          <input class="form-control" id="address" name="address" type="text"  placeholder="Address"><br>
                      </div>
                        <div class="container">
                        <div class="form-check-inline">
                            <label class="form-check-label">
                                <input …
0
Amazon Web Services
LVL 13
Amazon Web Services

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

it's a bizarre problem the program screen starts shaking resizing slightly it's only happens when screen is shrink slightly
please advise what might be happening here
I have a clock that gets displayed in the lower right-hand corner although I had moved it to the center and it made no difference
I am using the sex State mounted to call the setinterval
function it works great until the screen is modified slightly and then it starts breathing as the right Edge moves to the left and to the right an animated fashion.
right now I'll entertain any possible solution it's weird
 
well I can't show the actualcode. I will try in and create a copy to recreate the problem.
set interval causes update of information that is then displayed
within mustaches. {{ datetimestring}}
it would almost seem like maybe it was due to variable fonts
but but then why is it triggered by resizing with screen eg shrinking the screen or adding a component div or span to screen ?

I will post an example of what I'm talking about when I get a chance
0
Hi E's,
In a part of my project, I have to check if certain images are loaded, different images, but all with the same class, like you can see in this example:
<!DOCTYPE html>
  <html>
    <head>
<meta charset="UTF-8">
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <link rel="stylesheet" href="materialize/materialize.css"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body> 
    <div class="container">
    
    <div class="row center-align">
    <img src="imagem/bw/bw_0200.jpg" alt="visible image">
    </div>
    
    <img class="0" src="imagem/bw/bw_0183.jpg" style="display: none;">
    <img class="0" src="imagem/bw/bw_0272.jpg" style="display: none;">
    <img class="0" src="imagem/bw/bw_0211.jpg" style="display: none;">
    
    </div>
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="materialize/materialize.js"></script>     
    </body>
  </html>

Open in new window

To proceed to another stage of the project, I need to know when the images are fully loaded.
I already searched the Internet for a solution and I did not find it, so I've come to ask for help here.
In jQuery or JavaScript, how can I know if images with class "0" have been fully loaded?

The best regards,
JC
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
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
I want to create a button to email an ASP.NET MVC view. More specifically, I want to send content that is inside a div tag on the view. I have been searching for the past few weeks and am running into roadblocks. The best I came up with is using jquery and ajax. If you need to see the model, I can provide that as well. I'm sure I just screwed up the syntax or am trying to do something jquery and ajax can't do.

Portion of SupplyRequest view:

@model Intranet.Models.Product

@{ViewBag.Title = "Supply Request";}

<div class="col-md-12" id="Envelopes">
    <h2>
        Envelopes
    </h2>

    <p>
        Please enter the quantity and click submit email to send an email to the appropriate purchasing department.
    </p>
    <p>
        <table class="table" id="EnvelopeTable">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@Html.DropDownList("Products", "Select Products")</td>
                    @*<td><input type=""</td>*@
                </tr>
            </tbody>
        </table>
    </p>
    <div>
        <p>
            <script>
            $(function () {
            //send email button click event
                $(".button").click(function (emailEnvContent) {
                //get the div content
                var divvalue = "<div id=Envelopes>" + $(".div").html() + "</div>";
          

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
Angular JS  HTTP Error 405.0 - Method Not Allowed

whenever i add the phone in data , the page throws HTTP Error 405.0 - Method Not Allowed

data: { name: $scope.Name, email: $scope.Email, phone: $scope.Phone, comments: $scope.Comments },


Html:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div class="row"  ng-app="MyApp" ng-controller="MyController">
            <form id="contact" action="" method="post" >
                <div class="row">
                    <div class="col-md-12">
                        <fieldset>
                            <input name="name" type="text" class="form-control" ng-model="Name" id="name" placeholder="Your name..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        <fieldset>
                            <input name="email" type="email" class="form-control" ng-model="Email" id="email" placeholder="Your email..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        <fieldset>
                            <input name="phone" type="text" maxlength="10" ng-model="Phone" class="form-control" id="phone" placeholder="Your Phone..." required="">
                        </fieldset>
                    </div>
                    <div class="col-md-12">
                        

Open in new window

0
I want to print the contents of a dropdown list and the other items in my view. Rather than printing the selected content in the dropdown list, it just prints the first item in the list. I pasted a portion of my controller code below. I am using jQuery within an ASP.NET MVC 5 project.

(sidenote: I do not have a submit button yet. My plan is to use the submit button to send the completed form by email to the purchasing department. That is the next hurdle I have to tackle.)

<div class="col-md-12" , id="Envelopes">
    <h2>
        Envelopes
    </h2>

    <p>
        Please enter the quantity and click submit to send an email to the appropriate purchasing department.
    </p>
    <p>
        <table class="table" , id="EnvelopeTable">
            <thead>
                <tr>
                    <th>Product</th>
                    <th>Quantity</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>@Html.DropDownList("Products", "Select Products")</td>
                    <td><input type=""</td>
                </tr>
            </tbody>
        </table>
    </p>
    <div>
        @*jQuery script below creates a print contents of a div. Give the div tag an id*@
        <p>
            <script>
                function printContent(el) {
                    var restorepage = $('body').html();
                    var printcontent = $('#' + el).clone();
                    $('body').empty().html(printcontent);
  

Open in new window

0
We are using a SignalR to update records on a webapp.

1. We are experiencing performance issue when there are many records are coming in.
2. A function that is updating the records on average takes 30ms when the SignalR is not busy. When busy the time taken grows to even 200ms per record. The JS function involved uses Jquery to change the table records attributes, such as text, css class etc.
3. Memory usage is steady while CPU usage remains as high as 100% and even more on the Google Chrome Task bar
4. An estimate of 30 records per seconds are working well but beyond that, the application becomes sluggish and unresponsive.
5. Each record is about 60bytes

What can we do to make the browser able to handle high loads of the incoming signalR records?
0
Rowby Goren Makes an Impact on Screen and Online
LVL 13
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Experts,
 We have sharepoint 2013 and i am trying to add some javascript add to layout page. We are trying to read current user and compare with sharepoit group. I have added the script but some how it's error. Looks like SP.JS is not loading. Can you please review my code and give some suggestions.

Error : Unable to get property 'SPGetCurrentUser' of undefined or null reference

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Assembly Name="Microsoft.SharePoint.ApplicationPages, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%> <%@ Page Language="C#" Inherits="Microsoft.SharePoint.ApplicationPages.AccessDeniedPage" MasterPageFile="~/_layouts/15/errorv15.master"       %> <%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="wssuc" 

Open in new window

0
How do Upgrade JQuery on a WordPress Site, Theme called Bee?

Will that happen automatically if I upgrade the theme to the latest version.

Thanks
0
Hello,
I work on a classifieds portal and I need to use a gallery plugin which can display some additional informations near the photo in zoom mode. My goal is to have something which looks like plugin used by OLX.   Could you advise a free or commercial plugin right for me?
0
Looking to write a function to query an ex4 object for a value. My problem is that when I try to extract the value and the field has not been populated, JavaScript throws an error.
I can write a try/catch statement to trap the errors, but when I try to extract many values the code starts to look clumsy.

Is there some way to pass the ex4 object to a function w/o the function throwing an error when passing a ex4.location that has not been populated ?

Example:
var msh7 = msg['MSH']['MSH.7']['MSH.7.1'].toString();    // <- this throws an error if MSH|07 has not been populated. (they didn't send a date)

Why can't I do something like this ?:
var msh7 = getValue(msg['MSH']['MSH.7']['MSH.7.1']);    //  <- but this also throws an error if the location is not populated !?

function getValue(obj){
   try{
      return obj.toString();
   }catch(e){ return '';}   // just return an empty str.
}
0
Hi,

I need to display placeholder text(hint) in the textbox using c# and asp.net. I can able to display on IE11 with enterprise mode OFF. When I turn on the Enterprise mode ON, Textbox not showing the placeholder text. So, I am using jquery code to display the placeholder text. Till then things are working.
Now I need to change the placeholder text on button click. Placeholder Text is not changing on button click. Please let me know what needs to be done.

<html>
<head><script type="text/javascript" >
      jQuery(function () {

            jQuery.support.placeholder = false;

            webkit_type = document.createElement('input');

            if ('placeholder' in webkit_type) jQuery.support.placeholder = true;

        });

        $(function () {

 

            if (!$.support.placeholder) {

 

                var active = document.activeElement;

 

                $(':text').focus(function () {

 

                    if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && $(this).val() == $(this).attr('placeholder')) {

                        $(this).val('').removeClass('hasPlaceholder');

                    }

                }).blur(function () {

                    if (($(this).attr('placeholder')) && ($(this).attr('placeholder').length > 0) && ($(this).attr('placeholder') != '') && ($(this).val() == '' || $(this).val() == $(this).attr('placeholder'))) {

                       

Open in new window

0
Experts,
 We are using out of box sharepoint list. It has some default pagination. We have more data and limited items per page so user has to navigate one by one page. User wants some kind of text box where they enter the page number and open that page.  Is it feasible to read current url , calculate page number as per total records and  modify page id?

Let me know if you need more clarification.

SearchByPageNumber.PNG
I am also using the code which i used to customize the pagination just for reference.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  (function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Footer = pagingControl;
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
  })();

  function pagingControl(ctx) 
  {
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref?ctx.ListData.PrevHref:'#';
    var next = ctx.ListData.NextHref?ctx.ListData.NextHref:'#';
    var lastRow = ctx.ListData.LastRow;
    var rowLimit = 5;
    var view = ctx.view;
    var filter = ctx.ListData.FilterLink;
    view =  view.replace(/[{}]/g, "");
 //   var totalItems = $('tr#aggWPQ2 td.ms-vb2 b').text();
 //   var totalItems = $('tr#aggWPQ2 td.ms-vb2 b').html();
 //   var totalItems = $('tr#aggWPQ2 td.ms-vb2 b').text();
  //  totalItems = 

Open in new window

0
Experts,
  We have one application where we are using Datatable plug in to display data. We have displaying max 200 rows per page. Now as per the requirement we have added Export to Excel and CSV button to export. Currently whatever we load data to grid , data export by button. User wants to export all data regardless load.

Is it possible to export all data from datatable to csv or excel?
Is there any other plug in to export all data ?

 here is the code we are using
table = $('#TableView').DataTable( {
					      
				        data: dataSet,
						"processing": true,
				        "orderClasses": false,
			         dom: 'Blfrtip',
				   		buttons: [
				   		{ 	
				   					extend:'excel',
				   					className: 'exportbutton2',
				   					text:"Export All",
				   					title:"All Items",

				   					exportOptions:{
				   						rows:[rowlist],
				   						//modifier:{selected:null},
				   						columns: [3,4,5,7 ]
				   					}
                                                                       
				   		},
						 {
                          extend: 'csv',
            text: 'Export To CSV',
			title:"All Items",
            exportOptions: {
			         rows:[rowlist],
				 columns: [3,4,5,7 ],
                modifier: {
                    search: 'none'
                }
            }
        }

Open in new window

0
I'm trying to use jQuery UI's "sortable" with Ajax. I have a test table With the columns ID (the auto-incrementing ID), sampleText (like "test item 1", "test item 2" etc.) and displayOrder which, theoretically, is an integer for the order the item should be displayed in. My code gets the information from the database and loops over it. When I drag and drop or use the up/down arrows, DevTools shows that the appropriate URL is being pinged but the table isn't updating and I'm not getting an alert (that the attempt was successful/there was an error.) This is the code for the page:

<cfquery name="qGetStuffToOrder" datasource="#APPLICATION.ds#">
	SELECT * FROM test_reordering 
	ORDER BY  displayOrder
</cfquery>
<table class="table table-striped">
	<tbody id="tabledivbody">
		<cfoutput query="qGetStuffToOrder">
		<tr class="sectionsid" id="sectionsid_#ID#">
			<td>#sampleText#</td>
			<cfif CurrentRow NEQ recordCount>
				<td><a href="javascript:void(0)" class="movedownlink"> <span class="glyphicon glyphicon-arrow-down">down</span></a></td>
			</cfif>
			<cfif CurrentRow NEQ 1>
				<td><a href="javascript:void(0)" class="moveuplink" > <span class="glyphicon glyphicon-arrow-up">up</span></a></td>
			</cfif>
		</tr>
		</cfoutput>
	</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script>
		 $("#tabledivbody").sortable({
        items: 

Open in new window

0
I had this question after viewing Woocommerce hooks for "Proceed To Checkout" and "Place Order" buttons ?.

I'm trying to show a message if a specific product category is not in the cart when the user clicks on 'Go to Checkout' or 'Place order'. Also note that there are different payment methods so when Paypal is selected the button 'Place Order' changes to 'Go to Paypal' (I'm not sure how relevant that is).

The order must not go though and instead a message should show with a link taking the customer to the category page so they can add at least 1 product to the cart before trying to place the order again. It would be great if this message was a pop-up centered in the viewport.

In the post I mentioned above, I don't understand at what point we go from checking when the buttons are clicked with jQuery("a.checkout-button").click( function(event)
to... checking the screen name? My knowledge is limited. What I've understood is that there is no native hook for this and jQuery needs to execute the php that checks the cart content:

function check_category_in_cart() {
 
	// Set $cat_in_cart to false
	$cat_in_cart = false;
	 
	// Loop through all products in the Cart        
	foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
	 
		// If Cart has category "download", set $cat_in_cart to true
		if ( has_term( 

Open in new window

0
Exploring ASP.NET Core: Fundamentals
LVL 13
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 have an MVC web application using the Telerik RadGrid. I am using inline grid editing. In the edit mode, I have dropdowns that have values for the user to select. How can I capture the selected value the user selects. I would prefer to use javascript or jquery.

 chtml with grid ----------------------------------------------
    @(Html.Kendo().Grid<npm.Models.Home.TimeEntry>
        (Model.TimeEntries)
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Job_Name).EditorTemplateName("JobsDD").Title("Job Name");
            columns.Bound(c => c.Client_Name).EditorTemplateName("ClientsDD").Title("Client Name");
            columns.Bound(c => c.Project_Name).EditorTemplateName("ProjectsDD").Title("Project Name");
            columns.Bound(c => c.Product_Name).EditorTemplateName("ProductsDD").Title("Product Name").ClientFooterTemplate("Total Hours:");
            columns.Bound(c => c.Time).Title("Hours").Width(100).ClientFooterTemplate("#=sum#");
            columns.Bound(c => c.Time_Name).EditorTemplateName("TimeDescriptionsDD").Title("Task").Width("auto");
            columns.Bound(c => c.Time_Notes).Title("Notes").Width("auto");
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(225).HtmlAttributes(new { @class = "gridcolumncommand" }); ;
        })
        .Resizable(resize => resize.Columns(true))
        .ToolBar(toolbar =>
        {
            toolbar.Create().Text("Add Time Entry");
     

Open in new window

1
I used to use a lot of JQUERY AJAX calls in our code, but recently I have been moving to using modern plain Javascript, such as fetch and promises.

A typical API block would look something like this:
$.ajax({
     url: '/piece.json',
     type: "GET",
     dataType: "json",
     success: function (data) {
         alert(data);
     }
});

Open in new window


I want to start writing my API calls using Promises, but I am a little confused, especially when it comes to chaining and error checking.

Could someone show me an example using chained promises that does the following psuedocode?

Example Login Functionality
let username = "john";
let password = "123";

if username doesn't exist
-- doesn't exits
     show message, return false
-- it exists
     check password. Is it correct?
     -- No
         Show error message, return
    -- Yes
         send then on their way to dashboard or something

Open in new window


So I know the basics of Promises, but when it comes to chaining something like that...

I know how to check them individually ( I think I am doing it correctly anyways ):

let getUserName = function(email){
    return new Promise(function(resolve, reject){
        // Apply any logic here, call our API
       //  Mock response
        if(email == "john@gmail.com"){
            resolve("found");
        }

        reject("Not found!");
    });
}

Open in new window


Then I could use my Promise like this, right?

getUserName("john@gmail.com").then((response) => {
    alert("Your username was: " + response);
    }, (e) => {
        // Handle error if we want to. BUT what error???
    alert("Error: " + e);
});

Open in new window


So even here, I am unsure of what error I am trapping. Am I just catching the reject here? Anyways...

Let's say I want to use that Promise, or something similar, but chain it as I described above. How?

Can someone help me with an example of a Promise based login using my psuedocode example code, to help me get going? Seeing it sure would help I think.

Thanks!

John
0
I have a jquery bootgrid. I am trying to display the sum of the "Time" in the footer: ID = #totalTime. I can't get this code to work.

----------Javascript
            // dynamically find columns positions
            var indexTime = -1;
            $(bootGrid).find('th').each(function (e) {
                if ($(this).attr('data-column-id') == 'time') {
                    indexTime = e;
                }
            });
            var totalTime = 0.0;
            $(bootGrid).find('tbody tr').each(function () {
                var time = 0.0;
                // loop through rows
                $(this).find('td').each(function (i) {
                    if (i == indexTime) {
                        time = parseFloat($(this).text());
                        alert(time);
                    }
                });
                totalTime += time;
            });
            $('#totalTime').text(totalTime.toFixed(2));

Open in new window


---BootGrid
            <table class="table table-condensed table-hover table-striped" id="grid-data">
                <thead>
                    <tr class="grid-header-nav">
                        <th data-column-id="time_id" data-visible="false">Time ID</th>
                        <th data-column-id="time">Time</th>
                    </tr>
                </thead>
                <tbody>
                    @{
                        foreach (TimeInfo timeinfo in Model.TimeInfos)
                        {
                            <tr>
                                <td>@timeinfo.Time_ID</td>
                                <td>@timeinfo.Time</td>
                            </tr>
                        }
                    }
                </tbody>
                <tfoot>
                    <tr>
                        <td>Total Hours</td>
                        <td id="#totalTime"></td>
                    </tr>

                </tfoot>
            </table>

Open in new window

0
Experts,
 We have sharePoint 2013 environment with sharepoint list with few columns like Year , Month etc.  We have created the different different view by year. Now i have to create the webpart page where i need add all views together on same page.

Now i am looking for the functionality to create the Dynamic drop down with years populate and hide and show the view based the year selected. Can we create this functionality by javascript?
0
In the Add and Remove List per the link: https://www.experts-exchange.com/questions/29130898/Add-and-Remove-List.html?headerLink=workspace_answered_questions


1) the items can be added to the list now, but starting from the second row, we cannot see the images which have been added.
2). The list area should be displayed till the user click the add button
3). The list area remains till the user removes the list items completely.
0
Hello Experts!

Please I want the ENTER KEY to perform the same function as the Submit button in the code below.

I've tried this:
$('.chat_message').keypress(function (e) {
	 var key = e.which;
	 if(key == 13)  // the enter key code
	  {
	    var to_user_id = $(this).attr('id');
        var chat_message = $('#chat_message_'+to_user_id).val();
        if (chat_message == ""){
            toastr.error("Your message is empty");
            return false;
         }
        var to_username = $('#to_username_'+to_user_id).val();
        $.ajax({
            url:"../controllers/insert_chat",
            method:"POST",
            data:{to_username:to_username, to_user_id:to_user_id, chat_message:chat_message},
            success:function(data)
            {
                $('#chat_message_'+to_user_id).val('');
                $('#chat_history_'+to_user_id).html(data);
            }
        })
	    return false;  
	  }
	});

Open in new window

Each time I press ENTER KEY, the page reloads and bootstrap modal disappears.

modal_content += '<input name="chat_message_'+to_user_id+'" id="chat_message_'+to_user_id+'" placeholder="Type your message here ..." type="text" class="form-control chat_message" autocomplete="off"><span class="input-group-btn"><button name="send_chat" id="'+to_user_id+'" class="btn btn-sm btn-info no-radius send_chat" type="button"><i class="ace-icon fa fa-share"></i>Send</button></span></div></div>';

Open in new window


AJAX:
$(document).on('click', '.send_chat', function(){
        var to_user_id = $(this).attr('id');
        var chat_message = $('#chat_message_'+to_user_id).val();
        if (chat_message == ""){
            toastr.error("Your message is empty");
            return false;
         }
        var to_username = $('#to_username_'+to_user_id).val();
        $.ajax({
            url:"../../insert_chat",
            method:"POST",
            data:{to_username:to_username, to_user_id:to_user_id, chat_message:chat_message},
            success:function(data)
            {
                $('#chat_message_'+to_user_id).val('');
                $('#chat_history_'+to_user_id).html(data);
            }
        })
    });

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