jQuery

16K

Solutions

31

Content

i
The collection of articles, videos, and posts on this topic.

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 using a JS library to drag the controls on my PAGE to perform different functions. Checkout the demo by clicking on this link:
http://iamfashionphotographer.com/del/cb-m-1/final.html

Open in new window


1) When the page loads, see the right side and click on the icon.
2) Then you will see a snippet there. Just drag it on the page.
3) After that a button will be visible on PAge. Click on it and fill the form fields and fill the data with integer values and click on save.
4) The values are stored in DB.

What I want:
1) When you click on Table or button, you will notice that some additional buttons/controls  will appear. Click on the last icon which is a delete icon. You will notice that control will be deleted from the page. But values are still saved in Database.

I want that if user click on delete icon then its data from the table must be deleted from the database.

Need code help that on which event I will set the ajax call to delete data against that control.

Note: If user drag a control on page then following event is called:
	$('.ui-droppable').on('sortstop', function(e,i) {
	});

Open in new window


Looking for expert opinion

Thanks
0
1 Comment
Free Tool: Port Scanner
LVL 12
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Now
I have developed a list filter page which updates using ajax. Everything works well until I have discovered that search engines do not see this content!

Is there anything I can do to make this content visible to search engines using ajax, before I start a redevelopment?
0
7 Comments
How to get attendance per day of a student in jquery? I have combo box where there are 2 options "full day", "subject wise". On click of subject wise entire teacher data, date time is shown but if its full day then how to write in jquery to get student attendance for the entire day?
0
0 Comments
My carousel images are stacked instead of carouseling.

Any help is appreciated

https://oala.ca/test-home/
0
2 Comments
Is it possible in jQuery to check if a div with a certain class name exists (for example "myDiVClass") if not display a message?

I need to display another message on the screen if this is not there but also keep checking to see if it does appear (at which time the first message will be removed)

Again, though I need it to keep checking for the "myDiVClass" div as I need the message replaced as soon as the "myDiVClass" div is removed again


example, no <div class="myDiVClass">
"Sorry, were not here right now"

<div class="myDiVClass"> appears:

"sorry...) message removed

keeps checking for <div class="myDiVClass"> ……….

when <div class="myDiVClass"> disappears show "Sorry, were not here right now" again.

Hope that makes sense?

Neil
0
2 Comments
I need to pass params to the coldfusion cfc using Bootstrap table toolbar.

When I click the apply button I am serializing the form into array and now I need to split the variable. I have the code bu I get the  error message Uncaught SyntaxError: missing ) after argument list

$("#btnApply").click(function(){
		
			//alert($("#frm2").serialize());
			var vals  = $("#frm2").serializeArray();
			var str  = "";
			
			
			for (i=0; i<vals.length;i++){
   				str += '&' + $('#' + i.name) + '_title=' + $('#' + i.name').attr('title') + '&' + $('##' + i.name) + '_alt=' + $('##' + i.name').attr('alt');
			}
			 
			 alert(str);
			  
			$('#classes').bootstrapTable('refresh',{query: {str}});
			
			return false;
		})

Open in new window
0
2 Comments
Hi experts,

I have a asp.net mvc 5 application using C#, Razor, jquery.

This is a followup to this ticket:
https://www.experts-exchange.com/questions/29104238/hyperlink-in-ASP-NET-using-Razor.html?anchor=a42592893¬ificationFollowed=208651180#a42592893

in my view on my table my link is set like this it works fine:

<a id="ReportLink" target="_blank" href="http://google.com/employeeid=@item.EmployeeID">@Html.DisplayFor(modelItem => item.EmployeeID)</a>

Because on click i want user to got to
http://google.com/employeeid=1
http://google.com/employeeid=2
http://google.com/employeeid=3


<a id="ReportLink" target="_blank" href="http://google.com/employeeid=@item.EmployeeID">@Html.DisplayFor(modelItem => item.EmployeeID)</a>

Is there a way to set the href attribute to

Having a Javascript variable called firstpartofhref = "http://google.com/employeeid=" and then set it in the href before the @razor tag something like this?

 href=" firstpartofhref + @item.EmployeeID"

Or
can i just store this razor tag @item.EmployeeID in a javascript variable called secondpartofhref also?

and then set the href attribute something like this?

 href=" firstpartofhref + secondpartofhref"
0
1 Comment
Hi experts,

I'm learning to work with hyperlinks in MVC views.
So I created the example below to illustrate my question.

I have a ASP.NET MVC 5 application. I'm using C# and Razor.

I have an example that uses database first model.
I'm using the Employees table from the Northwind sql server database.

My application directory looks like this.

p1.PNG
My model looks like this:

EntityModel.PNG
My controller looks like this:

HomeController.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using NorthwindApp.Models;

namespace NorthwindApp.Controllers
{
    public class HomeController : Controller
    {
        // ASP.NET Scaffolding in Visual Studio 2013
        // http://www.asp.net/visual-studio/overview/2013/aspnet-scaffolding-overview
        // Getting Started with Entity Framework 6 Database First using MVC 5
        // http://www.asp.net/mvc/overview/getting-started/database-first-development/setting-up-database

        private NorthwindEntities db = new NorthwindEntities();

        //***************************** INDEX *****************************
        // GET: Home
        public ActionResult Index()
        {
            var employees = db.Employees.Include(e => e.Employee1);
            return View(employees.ToList());
        }
        //***************************** INDEX

Open in new window

…
0
4 Comments
I need to show a form in table format with frozen headers and columns.  I thought I could use the jquery multifreezer, but if the fields have default values in them, they are getting duplicated on submitting the form.  So instead of ending up with the form value of 'Day', I get the value 'Day, Day'.

I am guessing this has to do with the cloning that is going on in the javascript.  

Is there a way to not allow the values to duplicate?  I really don't understand.  Below is a link to the MultiFreezer and I have added the contents of the .js file which I believe is the culprit.  

https://www.jqueryscript.net/table/Freeze-Headers-Columns-In-Table-jQuery-MultiFreezer.html

(Added)
Below is a very simplified version of my form.  As soon as I comment out the line "<script src="multifreezer.js"></script>" it works fine.  I also added screenshots of the results of the form.Without multifreezerWith multifreezer
<!DOCTYPE html> 

<html>
<head>
<title>Schedule Jobs</title>

<script>
function SaveIt()
{
document.form1.action = "add_jobs-simple.cfm?save=y";
document.form1.submit();
} 
</script>

<style>
#freezer-example { width: 100%; max-height: 800px; overflow: hidden; margin: 1em auto; font-family:arial;  font-size:14px;}
#freezer-example .table th,#freezer-example .table td { white-space: nowrap; }
#freezer-example .table th { outline: 1px solid #606060; padding: 20px 2px 20px 2px; }
#freezer-example .table td { outline: 1px solid silver; padding: 20px 2px

Open in new window

…
0
9 Comments
I am trying to use Jquery or CSS (or some combination thereof) to get a dynamically created button to appear directly to the right of a dynamically created input that gets generated as part of a DataTables implementation. and follow it if the page is resized.

input:
<input type="search" class="" placeholder="" aria-controls="faq_table">

Open in new window


the button (appears somewhere else on the page at first): 
<input id="reset" type="button" onclick="reset();" value="reset" id="reset_button">

Open in new window


Any suggestions?

Thx

Adam
0
1 Comment
Cloud Class® Course: Microsoft Office 2010
LVL 12
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Start This Course
I am getting 401 error with the below ajax call. How do I fix this issue?

full error: ..................................................................................................................
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:64327' is therefore not allowed access. The response had HTTP status code 401.
/...................................................................................................................................

var call = $.ajax({
           
            url: "https://name.com/web/lists('Call Management')/items?$select=Item_x0020_ID,State,Description&$filter=(Item_x0020_ID eq %27BBB000126%27)",
            type: "GET",
            dataType: "json",
            crossDomain: true,            
            headers: {
                Accept: "application/json;odata=verbose"
            },
            success: function (result) {
                alert("it worked");
               
            }
        });
0
7 Comments
Havings issues with the first part of a jquery script that is has some quotes and an href tag and its not appearing on the page as expected. 

$('#faq_table tbody').append('<tr><td><a href="http://mywebsite.com/detail.jsp?u=' + jsonparse[i].wwid + 'target=0>' + jsonparse[i].name + '</a></td><td>' + jsonparse[i].cat + '</td><td>' + jsonparse[i].answer +'</td><td>' + jsonparse[i].keywords + '</td><td>' + jsonparse[i].responsibility + '</td></tr>');

Open in new window


The first part of the code where jsonparse[i].answer is referenced is getting cutoff and becoming part of the viewable link instead of the URL link itself.

Link ends up looking like this


wwid value>" target=0>name value

Instead of

name value (with link to the url above)

I know it has something to do with the quotes but can't figure it out.

Thanks for any help.

Adam
0
2 Comments
I am using jQuery UI & bootstrap Modals in my website. As both modals have different styling, so I want to change the styling of jQuery Ui Modals
according to the Bootstrap Modals. I have tried to change the styling in jQuery UI css but it not works. What is the best way to do this?

Any Working example?
0
7 Comments
Hello guys I Have a VAT calculator
price devided by 1.12 and less with 0.01..how cal I make the user input to automatically add thousand separator... instead of 10000000 it with display 100,000,000 also with the result. Here is my code


<head>
<link rel="stylesheet" type="text/css" href="plugins/style.css">
<style>
input[type=text], select {
    width: 100%;
    height: 50px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 46px;
    font-style: bold;
    text-align: center;
}
</style>
</head>
<br>
<center>
<div class="header">
            <h2><b>WITHHOLDING CALCULATOR</b></h2>
</div>
<form>
<br/>
<input type="text" class="price" name="price" id="price"/>
<br/>
<h2><b>Quarter</b></h2>
<h2 name="vat" id="vat">0.00</h2>
<h2><b>Less</b></h2>
<h2 name="less" id="less">0.00</h2>
<h2><b>Payable</b></h2>
<h2 name="payable" id="payable">0.00</h2>
</center>
</form>
<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var vat = $('#price').val() / 1.12;
        $('#vat').html((vat).toFixed(2));
    });
});
</script>

<script  type="text/javascript">
$(document).ready(function() {
    $('#price').keyup(function(ev){
var tot1 = $('#price').val();
        var less = $('#price').val() / 1.12 * 0.01;
        $('#less').html((less).toFixed(2));
   …
0
23 Comments
two pop up calendar .... see https://rvshare.com/. Do you know where I can find the codes pop up 2 calendar?
0
16 Comments
Hi there. On my WordPress site, we are using BeaverBuilder and we have a plugin called PowerPack Addon installed and are using the Modal Popup module. We also are using Foobox Pro installed. On this page https://ccdenver.org/engage/ the video modal popup automatically pops up and starts to play the video in Firefox on a PC. However, on a Mac the popup modal opens but the video hangs. Any ideas on how to get that to autoplay like it does on a PC? Also, I have ?rel=0&autoplay=1 at the end of the YouTube string.

Any ideas experts?
0
0 Comments
I'm using Postman to send a command to an API method. I put a debug step and the code stops in the API method but one of the parameters comes out as NULL.

1. This is the API method signature. I see that "[FromBody]". Not sure if this is what's causing the null

 [IncludeInApiExplorer]
        [Route("CMDB/Asset/{id}")]
        public ResultModel Post(Guid id, [FromBody]CMDB_Asset asset)
        {

Open in new window


2. Documentation has this as sample request format

api
or this

image
3.  I used postman to build the parameters and I have this. I'm doing it on my local code.

http://localhost:3180/CMDB/Asset/6da60bdc-0272-4f04-89e6-fb48dbc51d31?CMDB_ID=fe0d7fe1dbdd5704b3b33cae7c9619a5
&Schedule=206UK&Serial=7JRDNN2&Manufacturer=test Inc.&Model=test&CustomerReference&CDF01=425003yyy7-TASK0089972&CDF02&CDF03&CDF04&CDF05=GBLHR04&CDF06&CDF07=In stock&CDF08=Available&CDF09&CDF10&SiteAddress=test, Springfield Dr&SiteCity=Leatherhead&SiteState=Surrey&SiteLocale&SiteRegion&SitePostalCode&SiteCountry=GB

Open in new window


4. I run it in Postman. Step thru the code. It gets to this line of code but asset is null. "id" is not null..id comes out as 6da60bdc-0272-4f04-89e6-fb48dbc51d31.

 public ResultModel Post(Guid id, [FromBody]CMDB_Asset asset)

How do I need to call this API?
0
9 Comments
Hi Guys,
I wrote a jquery function for drag and drop:

 var dragme = $("#attachmentContainer ul li a");
    var container = $("#cartcontainerid");
    dragme.draggable({
        revert: "invalid",
        stack: ".draggable",
        helper: 'clone'
    });

    container.droppable({
        drop: function (event, ui) {
            debugger;
            //var linkDragedText = ui.draggable[0].textContent;
            var containerList = $("#cartcontainerid ul li")
            var droppable = $(this);

            if (containerList.length == 0) {
                accept: dragme;
                var draggable = ui.draggable;
                draggable.clone().appendTo(droppable);
            }
        }
    });

Open in new window


the dragme element looks like <a onclick="LoadAttachment('https://images/pdf/leadtools.pdf')" href="#">leadtools.pdf</a>.
when I drag this element above and drop it into container (see code above). I can see this full element into my container.droppable, but if I want to add let's sey 3 spans like:

<li>
<a onclick="LoadAttachment('https://images/pdf/leadtools.pdf')" href="#">leadtools.pdf</a>.
 <span style="margin-left: 30px; color: rgb(35, 65, 35); border: 1px solid gray">Email</span>
                        <span style="margin-left: 30px; color: rgb(35, 65, 35)">Print</span>
                        <span style="margin-left: 30px; color: rgb(35, 65, 35)">Download</span>
</li>

Open in new window


my question is how can I add more element when I drop ?
also How can I verify that the user didn't drag the same element and if yes prevent them to do it.

Thank you.
0
9 Comments
I am currently working on a project that uses jQuery/jqGrid(Version 4.4.4, old version, I know...).

I have a custom formatter which gives me the ability to click on a hyperlink for editing, saving, and canceling. Code is posted below
"<a href='javascript:void(0)' class='anchor usergroup_name link' onclick=\"editRow.call(this,'" + rowobject.rowId + "')\">edit</a>" + "|"
                    + "<a style='display:none' href='javascript:void(0)' class='anchor usergroup_name link' onClick=\"saveRow.call(this,'" + rowobject.rowId + "')\">save</a>" + "|"
                    + "<a href='javascript:void(0)' style = 'display:none' class='anchor usergroup_name link' onClick=\"cancelRow.call(this,'" + rowobject.rowId+ "' )\">" + 'cancel' + "</a>";

Open in new window


I pass the hyperlink itself, and I pass a value (rowObject.rowId = the unique identifier of the rowObject).  

Now when the user clicks a hyperlink, it will eventually call $(this).closest(".ui-jqgrid-btable").jqGrid('saveRow', rowId) or editRow or restoreRow. For items 1-10 it works fine, but when I get to the second page of items, it stops working.

This is because the JQgrid has the rowId set back to one, where the item has an iD of 11. Picture of what I mean below.
[embed=fiexample of rowId mismatchle 1329000]

So in short, each object that is passed to the JQgrid has a unique identifier. I try to access that row by calling the objects unique identifier. However, on page changes, the rowId for jqGrid reverts back to 1.

How can I make it so I can edit these objects on the second page

Thank you for you help.
0
2 Comments
Free Tool: Path Explorer
LVL 12
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Access It Instantly
I have an array of checkboxes coming from a collection.

See below:

<div class="form-group">
    Select days in a week :
    <td class="even" *ngFor="let item of dayList">
    <input value="{{item.check}}" type="checkbox" checked="item.check" formControlName = "selectedDays">  {{item}}
   </div>

Open in new window


formControlName I am set as selectedDays.

I need to generate JSON object for the selected checkbox values.

Currently, i am getting boolean value in selectedDays. But I am supposed to get an array of checked values in an array inside JSON object.

this.dayList = ['Sun', 'Mon', 'Tue','Wed',"Thu","Fri","Sat"];

JSON Object looks like below, please note the value of selectedDays, it is supposed to be "Sun, Mon" based on selection, but it is showing as true.


  
Object
    date
    :
    "2"
    day
    :
    "Mon"
    hour
    :
    "3"
    minute
    :
    "3"
    schedulerjobtype
    :
    "Daily"
    selectedDays
    :
    true
    useCase
    :
    "UC 2"
    zone
    :
    "Zone 3"

Open in new window


How can I implement this?
0
3 Comments
I can't figure this out and I've spend too much time on it....

1. I used this plugin https://lirancohen.github.io/stickUp/
to make the top navigation bar stick when user scrolls down

2. In IE and Chrome, when I scroll down...the navigation bar on top stays put and it works.

3. In Edge, I scroll down and the navigation bar flickers the first time user scrolls down...the transition is not smooth. . Only happens one time and then if you keep scrolling up and down...the navigation bar doesn't flicker.

You can see it here http://147.75.0.35/

On the front page, under "DoctorAccessNow Login", I have this "Click here to see the page". Click it and you'll see my sample page.

In chrome, there are some errors in the console. That's because I created a sample page out of the project. Still works in Chrome and IE.

What's causing it to flicker in Edge?
0
9 Comments
When a particular button is clicked, an ajax request takes place and upon success, a modal is stored in a variable and then the modal is launched. There is a button inside the modal that I want by default to be hidden or disabled. I cannot seem to get that to happen. 

	   $( '.outlet' ).on('click', function(e) {
		   e.preventDefault();
		   var prodName = $(this).data('prodname');
		   var prodId = $(this).data('id');
		   
		   $.ajax({
			   url: url + '/CartAjax/ajaxModal',
			   type: 'POST',
			   data: {prodId: prodId},
			   beforeSend: function() {
			   $( '.outlet' ).prop('disabled', true);
			   $( '.obtext' ).hide();
			   $( '#outletspinner' ).show();
			   
		   },
		   })
		   .done(function (data) {
			     var modal = `

					<div id="myModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h4 class="modal-title">${prodName} </h4>
								</div>
								<div class="modal-body">

								<div>
									<select class="form-control" id="branches">
										<option value="">Select Outlet</option>
										${data}
									</select>
	   							</div>

								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default closeBranchModal">Close</button>
				                  <button class="btn

Open in new window

…
0
2 Comments
How would i get all child elements of a root element by class name using a regex pattern?

something like this

var items = $("#root_element_id").children("div:regex(class,\_[a-z0-9]{4})");
0
1 Comment
The below code is not populating dropdown values

<div class="col-md-4">
  <div class="form-group">
    Usecase:
    <select id="select" formControlName="schedulerjobtype">
      <option *ngFor="let g of scheduleTypeList" [value]="g"> {{g}}
      </option>
    </select>
  </div>
</div>

Open in new window

But the below code is populating dropdown values

<div class="col-md-12">
  <div class="form-group">
    Usecase:
    <select id="select" formControlName="schedulerjobtype">
      <option *ngFor="let g of scheduleTypeList" [value]="g"> {{g}}
      </option>
    </select>
  </div>
</div>

Open in new window

When I increase the column width of the bootstrap grid from col-md-4 to col-md-12 (which is 3 cells to 1 cell) I am able to populate the drop-down. What would I do to populate the drop-down populated when the grid column width is 4?
0
3 Comments
best books for these topics so that we can understand these without anyones's help.

also provide me the name of best websites(if any) to learn these .
0
6 Comments

jQuery

16K

Solutions

31

Content

i
The collection of articles, videos, and posts on this topic.

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

Advertise Here
Advertise Here