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

I am trying to use jQuery SelectListActions in an Update Form.  I need to pass the results of the 2nd listbox to my controller.  I don't have a View Model for this View since I am updating data and already have the data populated on the form from a Table with a variable passed to it.  The 2nd List Box is not defined in the Model but I need to get the contents of it and pass to my controller.  Is there a way to do this?  I really just need to get a list of data from a Multi-Select List Box back to my controller.
0
Hello Experts,

I'm new to MVC and JQuery web development. I'm trying to bind the data to my datatable using JSon object. Below is the sample code:

View
<div id="mdlMsg" class="modal fade" tabindex="-1" role="dialog">
            <div class="table-responsive m-t-40">
                <table id="dtData" class="display nowrap table  dataTable" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Col1</th>
                            <th>Col2</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>
        </div>

Open in new window


Controller
public async Task<ActionResult> Test()
{
 string resp = "";
  var msg = new Dictionary<int, string>();
msg .Add(1, 'Row 1');               
msg .Add(2, 'Row 2');       
      resp= Newtonsoft.Json.JsonConvert.SerializeObject(msg, Newtonsoft.Json.Formatting.Indented);
return resp;
}

Open in new window


Javascript
$.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (resp) {
 $('#mdlMsg').modal({ show: true })
                var jsonTst = $.parseJSON(resp);
                $('#dtData').dataTable({
                    "bAutoWidth": false,
                    "aaData": jsonTst.data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
                    "aoColumns": [{
                        "jsonTst": "Col1"
                    }, {
                            "jsonTst": "Col2"
                    }]
                });
});

Open in new window


The modal popup shows with no data and also I want to fix my Modal popup to be middle of the page.

Thanks,
ASPDEV
0
http://localhost:3835/Home/Hello

In javascript, how to get Hello?
0
Hello Experts,

I'm new to MVC devlopment, I was using Viewbag to pass the data from my controller to JS(jquery function). I want to know how can I read the List data and then assign to my grid. This is the sample code, I was getting error while reading the ViewBag.MyList in my JS function. How can I do this so I can get the list object. Later part once I get the list object, then I will bind the data with the grid.

Controller
public async Task<ActionResult> TestData(
string resp = "";
 var test = new List<Tuple<int, string>>();
test.Add(new Tuple<int, string>(1, 'R1'));
test.Add(new Tuple<int, string>(2, 'R2'));

if (test.Count > 0) {
ViewBag.MyList= Newtonsoft.Json.JsonConvert.SerializeObject(test);
}

resp = "test";
}

Open in new window


JavaScript
$.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (response) {

 if (response == 'test')
{
var testList= JSON.parse('@Html.Raw(ViewBag.MyList)');
}
}

Open in new window

0
I am using a datatable that, when certain features are added, such as the scroll feature, a second header is added.

The second header, is outside of the main table, and that is the one I am using for my table, since it's the one that allows me to click the header to sort the columns. The other header doesn't do it for some reason.

The issue I am having is, I have a class called "cards" that I add and remove to the table with javascript when a button is clicked. This allows me to switch the table between grid and card view.

I have the cards class in the table by default, but it adds it to the second header as well per the dataTable code. When I use javascript to remove the "cards" class it only removes it from the first header, not the second header because it's using the table id to do so.

I tried using tag name to remove the class, but that doesn't seem to be working. The table for this second header doesn't have an id, and as far as I know, there isn't a way to add an id for it. Is there a way I can use javascript to toggle(add and remove) the cards class from the second header?

Here is a simplified version of the code to offer a better understanding.

<div class="dataTables_scrollHead">
<table class="cards">
<thead>
<tr>
<th>Second Header added by Datatable</th>
</tr>
</thead>
</table>
</div>
<div class="dataTables_scrollBody">
<table id="TableTeamGrid" class="cards">
<thead>
<tr>
<th>First Header</th>
</tr>
</thead>
</table>
</div>

Open in new window

The …
0
Hi Team, my popup code is below please let me know how to do pagination on popup window.

<script>
		jQuery(function($) {
		   $(".openPopup").on("click", function(event) {
			   event.preventDefault();
			   $("#myModal").show();
			   $("#divForCSSPopup").load("/path/to/your/page.jsp body", function() {
				   $("form", "#divForCSSPopup").submit(function(event) {
					   event.preventDefault();
					   var listOfCheckbox = [];
					   var trs = ["<tr><td>ID</td><td>NAME</td></tr>"];
					   $(":checkbox", this).each(function() {
						   // your checkbox must be like
						   // <input type="checkbox" data-id="123" data-name="someName" value="456" />
                           trs.push("<tr><td>" + $(this).data("id") + "</td><td>" + $(this).data("name") + "</td></tr>");
						   listOfCheckbox.push({employeeID: $(this).data("id"), employeeName: $(this).data("name")})
					   });
					   // checking
					   alert(JSON.stringify(listOfCheckbox));
                       $("#putMyEmployeeInfosHere").html( "<table>" + trs.join("") + "</table>" );
					   $("#myModal").hide();
				   });
			   });
		   });
		});
	</script>

Open in new window



please let me know solution asap.
0
How to set the values dynamically using jQuery, I am trying to set the values dynamically in the translate3d but it says that it is expected one of <number>, <legnth> , <percentage>
whereas If I use simply this line(transform: "translate3d( 1099px, 136px, 0px)") it does work fine

var A1 = "1099px";
var A2 = "136px";
var A3 = "0px";

 $('#' + popoverId).css({
                transform: "translate3d( A1, A2, A3)"
            });

Open in new window

0
FullCalendar (fullcalendar.io) using agendaWeek does not allow me to drag events into the range of 00:00am to 11:59am. When dragging the event into the zone as shown on the image, it disappears or reduces itself.

FullCalendar Agenda Gridload_calendar.js
0
How can i refresh a div only once i got a response from popup.my scenario is below -

i have a Parent JSP page . in parent.jsp page there is a button which opens a popup when popup is open it fetch the table data from database . table data contains Employee_ID, Employee_Name . in popup jsp when displaying data each and every row contains a checkbox . after multiple selection of checkbox there is a submit button in popup.jsp , after submitting the page comes back to the parent.jsp page and display the popup.jsp submitted Emplyee_ID and Employee_Name.

my problem is when i m getting response back from popup.jsp to parent.jsp file my specific table is not refreshing , when i am debugging parent.jsp , list are coming with data but not displaying because it is not refresh at the moment when response are coming back from popup.jsp t parent.jsp .

Please let me know the solution.
0
Hi Experts,

I have a jQuery command that outputs all the required fields in my form as follows.

jQuery("[required='required']") to get a jQuery list

Open in new window


0: input#InsertRecordVisit_Date.cbFormTextField
1: input#InsertRecordClient_Last_Name.cbFormTextField
2: input#InsertRecordClient_First_Name.cbFormTextField
3: input#InsertRecordDate_Of_Birth.cbFormTextField
4: select#InsertRecordShift_From_Hour.cbFormSelect
5: select#InsertRecordShift_From_Minute.cbFormSelect
6: select#InsertRecordShift_To_Hour.cbFormSelect
7: select#InsertRecordShift_To_Minute.cbFormSelect

Now my question, how can I have it only displayingh the actual fields names separated by commas, like this.
Visit_Date,Client_Last_Name,Client_First_Name,...

Thanks
0
Hi Experts,

I am trying to get the company name in document.ready function. Company name is available in the model.
 jQuery(document).ready(function () {
          var CompanyName =  @Model.Company;
}

Open in new window

When the @Model.Company is any number, for example "1111" then it works fine. But when it is coming as string like "TestCompany" I am getting the error  " Uncaught ReferenceError: TestCompany is not defined" .

Any suggestion what I am doing wrong?

Thanks in advance!
0
Hi Team ,

i have a problem but i did't get any solution for it . i have a parent jsp from where a search icon is there when i click on search icon a popup jsp is open . in popup jsp i retrieve values form database and display.
there is 2 column in database Employee_ID and Employee_Name. all values come row by row and display on popup jsp . in each row there is a checkbox no my problem comes and i did't get any solution for it please help me out.there is two case -

1 Case - when i check multiple check boxes in popup.jsp and click on submit button(popup.jsp) the value of Employee_ID and Employee_Name   should display on parent.jsp.

2 Case - when i check multiple check boxes in popup.jsp and click on submit button(popup.jsp) the value of Employee_ID and Employee_Name should go to a servlet and after that servlet send that data to parent.jsp.


please let me know both of the above solutions.
0
I am trying to use the PHP database session feature as detailed in the book "PHP Advanced" by Larry Ullman except that I am using PDO rather than MySQLi.

I have this working perfectly in localhost on a different website but on the current website it is not working.  

The code to establish the database session: db_sessions.inc-PDO-.php

The attempted usage code: login.php

This works fine until about line 100.  The session is in PHPSESSID but not in the database table 'sessions'.

The only difference that I can see is that I am using jQuery validator remote (in login.php) which connects to the same database OK (without sessions) and that code all works OK.  In the AJAX-called module I do delete the PDO before returning out of the AJAX-called module.

I am mystified why sessions variables are being set but not in the database sessions table.

Any advice will be most appreciated.

Thanks, Eric.

P.S., just noticed an error message:
Fatal error: Call to a member function prepare() on a non-object in C:......................\db_sessions.inc(PDO).php on line 118
Line 118 is $r1 = $pdo123->prepare($q1); in function write_session
But this error does not appear in the other website I mentioned with identical session-establishment code??
So that probably explains why the database sessions table has no data in it but it does not explain why this fatal error is occurring.
Again, looking forward to any advice and thanking you in anticipation.
0
I have this bookmark code integrated into my website.  When clicking the book mark link it alerts the user to press CTRL-D and then when they click OK it closes the alert.  Is there any way to make the OK button actually perform the same function of CTRL-D? I would change the message to inform the user this would happen.  

Credit - Iambriansreed at StackOverflow
<script type="text/javascript">
    $(function() {
        $("#bookmarkme").click(function() {
            // Mozilla Firefox Bookmark
            if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                window.sidebar.addPanel(location.href,document.title,"");
            } else if( /*@cc_on!@*/false) { // IE Favorite
                window.external.AddFavorite(location.href,document.title); 
            } else { // webkit - safari/chrome
                alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
            }
        });
    });
</script>

Open in new window

And the link...
<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

Open in new window

And the library...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Open in new window

1
Hello Experts,

is ther any way to optimize the search function from a JQuery DataTable.

I have to find lines with similar content.

Example:
Search for "Müller" is to make the following results.

Müller Peter
Mueller Hans

etc.

a = ae
ü = ue
ö = oe

Both spellings must be found.

I hope there is a possibility to solve this Pproblem.

Many thanks

Talki
0
We are using CKEDITOR 4 for our system and we are writing various plugins for it.
I have been asked to create a plugin that counts the number of words inside a blockquote tag.

While I am able to count the number of words and characters for the entire content (or selection of it), I find it difficult to count the words within a specific tag like blockquote. What is the best way to do this in jQuery?

On line 72 I have a jQuery object $content. This is a div that contains all the text. Shouldn't I be able to loop through all blockquotes and then count the words and the blockqoutes?

Any help would be appreciated.

Massimo

	/**
	 * CKEDITOR
	 */
	initCountCommand: function(editor) {
	        editor.addCommand("gaCountCommand", {
	            exec: function(editor) {
	                var map = _PPSEditorApi._count(editor, true);

	                var args = [map[MODE_CHARACTER_COUNT], map[MODE_WORD_COUNT]];

	                var notification = PPSEditorApi.getTMSText("pps", "editor.wordCount.ui.info.notification", args);
	                PPSEditorApi.notification(notification, "info"); //TODO move this function to API and make sure that text is TMS friendly.
	            }
	        });
	    },


	    /**
	     * Internal, private API for this plugin
	     */
	    var _PPSEditorApi = {
	        _update: function(editor) {
	            var map = this._count(editor);
	            var editorName = editor.name.replace("[", "\\[").replace("]", 

Open in new window

0
I am using the latest version of datatables.net with the Keys extension with an inline editor.  

Our table rows contains a mix of editable and non-editable cells.  We want clicking the arrow and tab keys to skip over the non-editable to the next editable cell.  Below illustrates what we want but we are at loss to make it happen:

table
0
1. Use link https://jsfiddle.net/girinishantg/w9cgzayj/72/
2. click on popover button.
3. popover appears, drag and drop anywhere on the screen
4. now click twice the popover button, the popover will disappear and then on the second click reappear.
5. popover appears again on the same location where left earlier.
6. But for a fraction of second flickering happens.
 
Is there any way to avoid this flickering, please suggest?
0
Hi Team,

Have made the popover which appears when the user clicks on the button, the user can scroll wherever the user wants.

The issue I am facing when I click on popover again it resets its position that means that popover appears from its default location rather appearing from the location where it was left earlier.

Enclosing the running code example, please suggest?

Click on 'POpover' button brings popover, you can drag and drop the popover wherever you want but the moment you click the button again it resets its position whereas expected is it should appear from the last location.

https://jsfiddle.net/girinishantg/w9cgzayj/12/
0
structure
I am attempting to render a view through the template engine "handlebars" for node.js with the express framework. Please see attached my file structure.  After running the route below, I keep receiving the following error: [Error: Failed to lookup view "layout" in views directory "C:\Users\frontstart\Dropbox\Web Design\nodetest\views"]. Can someone please help me locate my error.


router.get("/alldata", (req, res) =>
  Store.findAll()
    .then(stores => {
        path is //views/gigs.handlebars
        res.render('gigs', {
              stores
        });
       })
    .catch(err => console.log(err)));

module.exports = router;

Here is the backend app.js

const fs = require("fs");
const express = require("express");
const expressSession = require("express-session");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const cors = require("cors");
const path = require("path");
const expressLayouts = require("express-ejs-layouts");
const mysql = require("mysql");
const mysql2 = require("mysql2");
const multer = require("multer");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcrypt");
const Joi = require("@hapi/joi");
const connectFlash = require("connect-flash");
const morgan = require("morgan");
const passport = require("passport");
const passportLocal = require("passport-local");
const Sequelize = require("sequelize");
const db = require("./middleware/db.js");
const 

Open in new window

0
I am using  Joi (Happy) module in node.js to validate entries into a form to a mysql database.  However, the validation does not work. I am receiving a "TypeError: Cannot read property 'path' of undefined" every time I leave the file field empty.  Nothing occurs when I leave any other field empty.  In other words, the validation simply does not work and no field message is being sent to the user based on the entry criteria. Please see the backend and the frontend code using sequelize. Without validation, the form works fine.

FRONTEND CODE WITH FORM:

<!DOCTYPE html>
<html lang="en">
<head>
  <!--JQuery UI: default css (smoothness)(always first)-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <!--JQuery (always first)-->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>

<!--JQuery UI core (always first)-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<!--JQuery UI(after JQuery UI core) - Controls Dialog Modal -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

</head>
<body>
  <!---(8)-->
  <h3>Inserting Data into the database</h3>
  <h3>Data List</h3>
  <div id="storesF">
  <div 

Open in new window

0
Trying to make a draggable popup, provided below is the code which works fine but is not perfect that is I am able to drag the popover but the moment I take the popper below screen mouse up event does not fire and popper does not come-up smoothly. Can any expert help in handling the popper smoothly.

Appreciate your early response.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        div { width: 200px; height: 200px; border: 1px solid black; }
    </style>
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script language="JavaScript" type="text/javascript">
        $(document).ready(function () {
            var $dragging = null;
            $('#demo').on("mousedown",
                function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).attr('unselectable', 'on').addClass('draggable');
                    var parentOffset = $(this).offset();
                    var el_w = $('.draggable').outerWidth(),
                        el_h = $('.draggable').outerHeight();
                    console.log(parentOffset);
                    var relX = e.pageX - parentOffset.left;
                    var relY = e.pageY - parentOffset.top;
                    console.log(relX + ' / ' + relY);
                    $('#demo').on("mousemove",
                        function(e) {
                            if ($dragging) {
                                

Open in new window

0
Hello,

I got a data object like below. This is a part of RestAPI method return. But when i call REST API using Jquery AJAX , I am getting Name, Address correct but the List of ProductName is coming is empty.

Is there any reason whey List is empty. I checked the method it is having the values but at the side of Jquery Ajax response i am getting it as empty.

public class TotalRectificationOverTime
    {
       
        public string Name;
       
        public int Address;

        public List<string> ProductName;

    }
0
what is the use of react.js when compared to angular and jquery?
can you please provide a working example with all the js files for react.js?
0
I am using sequelize to upload to a mysql database.  I am able to upload the image but I am not able to load the other fields which are all null. I keep getting a "TypeError: Cannot read property 'path' of undefined" error.

Please see the sequelize log below as it is only capturing the "Id" and the "Image."


Executing (default): INSERT INTO `stores` (`ID`,`Image`,`createdAt`,`updatedAt`) VALUES (DEFAULT,?,?,?);
Station record was successfully created: [object SequelizeInstance:stores]

router.post("/station", (req, res) => {
upload(req,res,(err)=>{
if(err){
        res.send(err);
        }else{
  let newStation = req.body.Station;
  let newImage = req.file.path.replace(/\\/g, "/");
  let newAddress = req.body.Address;
  let newMonthlycstoresales = req.body['Monthly C-Store Sales'];
  let newOperator = req.body.Operator;
  let newTopsku = req.body['Top SKU'];

  let data = {Station: newStation, Image: newImage, Address: newAddress, ['Monthly C-Store Sales']: newMonthlycstoresales, Operator: newOperator, ['Top SKU']:newTopsku };

Store.create(data)
              .then(stores => {
                 console.log('Station record was successfully created: ' + stores);
                 res.send(req.file);
             })
              .catch(err => {
                 res.send('error: ' + err)
             
                })
               }
              })
            })

I am using multer to upload the files.

const 

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