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

Using a ColdFusion function to return query results and was working fine.  Was required to change how I returned the data to SerializeJSON(). But when doing this, nothing returns. Not sure what the issue is unless it has to do with script sources.
I minimized the code to hopefully make it easier to follow. Test.cfm displays the results. TestJS is the JavaScript to call and return the data from Test.cfc file. The last bit of code is what I had that was working. Any ideas? CFDump will return results as well.

Test.cfm

<!DOCTYPE html>
<html lang="en-US">
	<head>
		
 
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
		<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
		<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
		<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
		<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
		<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
		<script 

Open in new window

0
Can any javascript.jQuery expert determine why in most browsers the select menus are initially empty instead of showing the default value? I got this off GitHub.

jQuery(function ($)
{
    var month = {
        "number": ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        "short": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        "long": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
    },
    today = new Date(), 
    todayYear = today.getFullYear(),
    todayMonth = today.getMonth() + 1,
    todayDay = today.getDate();
    updateTheBirthDayValue = function(options, $selector, selectedYear, selectedMonth, selectedDay) {
      if ((selectedYear * selectedMonth * selectedDay) != 0) {
        if (selectedMonth < 10) selectedMonth="0"+selectedMonth;
        if (selectedDay < 10) selectedDay="0"+selectedDay;
        hiddenDate = selectedDay + "-" + selectedMonth + "-" + selectedYear;
        $selector.val(hiddenDate);

        if (options.callback) {
          options.callback(hiddenDate);
        }
      }
    }
    generateBirthdayPicker = function ($parent, options) 
    {
        var parentId = $parent.attr('id').replace(/-/g, '');

        // Create the html picker skeleton
          var $fieldset = $("<fieldset class='birthdayPicker'></fieldset>"),
            $year = $("<select class='birthYear "+options.sizeClass+"' 

Open in new window

0
I am updating records using sequelize. I am testing the backend with postman.  The code seems to work as there is no error however when testing it in postman, no rows are affected (updated). I have used both put and patch methods, however, I received the same results. Perhaps, there is an error in the code that I am missing.

Here is the code:

router.put('/editstation/:id', (req, res) => {

             let newStation = req.body.station;
             let newAddress = req.body.address;
             let newMonthlycstoresales = req.body.monthlycstoresales;
             let newOperator = req.body.operator;
             let newTopsku = req.body.topsku;


   
   let values = {Station: newStation, Address: newAddress, monthlycstoresales: newMonthlycstoresales, Operator: newOperator, topsku:newTopsku};

   let selector = {
       where: {id: req.params.id}
   }
   Store.update(values, selector)
   .then((updatedPost)=>{
       console.log(updatedPost);
       res.json({
           "message": updatedPost
       })
   })
   .catch(err => {
       res.json({
           "message": err
       })
   })

});

Here is the json test in postman

{
      "ID": 6,
      "Station": "Rargain jiack",
      "Operator": "Dilly"
}

Here are the results:

{
    "message": [
        0
    ]
}
0
I have made my <blockquotes> draggable and I would like to drop them elsewhere in the text - usually inside a <p>.

How do I tell jQuery to insert the <blockquote>  inside a DOM; that is: create/insert a new node where the blockquote was dropped?

I currently have the following code:

                        $(".draggable").draggable({
                            helper: "move",
                            axis: "y"
                        });
                       
                        $('.droppable').sortable({
                            accept: '.draggable',
                            drop: function (e, ui) {
                                $(this)
                                $(ui.draggable).appendTo($(this));
                            }
                        });   

Open in new window


I am using this jQuery inside CKEDITOR. If I use appendTo() it creates/adds a new element to the editor's textbox.

Surely, there must a way to do this? I have seen  many examples where the objects are moved around the screen / pictures - but hardly any with text.

Can anyone please assist with this?
0
backdrop
I am unable to edit the entries in the bootstrap modal box due to the shadowed backdrop. The cursor is disabled at this point and the screen freezes when the modal box is opened. This only occurs on the first page or a unknown page height of the html page. I would like to enable the ability to edit the values or remove the backdrop altogether if it will solve the problem.

Please see the code below:

<h3>Inserting Data into the database</h3>
    <h3>Data List</h3>
    <div id="storesF">
    <div id="modalStationForm">
        
      <!--<form action="/upload" method="post" id="stationForm" enctype="multipart/form-data">-->
      <form id="stationForm" method="POST" action="/station" enctype="multipart/form-data" >
        <label>Store Name:</label>
        <!--When submitting a form, the name value is important and is used in php file, while the id is used for css and javascript(below)-->
        <input type="text" name="station" id="store" size="40" placeholder="Enter Store Name">
        <br><br>
        <!--
        <label for="file">Profile Photo:</label>
        <input type="file" name="image" id="image" onChange={this.uploadFile}>
        <br><br> -->

        <label>Address:</label>
        <input type="text" name="address" id="location" size="40" placeholder="Enter the store's address">
        <br><br>

        <label>Store Sales:</label>
        <input type="number" name="monthlycstoresales" id="sales" size="20">
        <br><br>

Open in new window

0
I don't understand what the "function" is that useState allegedly passes back. When I look at this:

const [count, setCount] = React.useState(0);

Open in new window


its a little difficult to understand that useState is passing back a function, in addition to the initial value, because I only see one parameter, in this case: 0. So setCount seems to be getting nothing from the call to useState, meaning: it doesn't appear to be getting assigned anything, least of all other function. Can someone explain what's going on here in a different way? If I can state my question another way: What exactly is setCount getting? "count", in the line of code above seems to be getting the value of 0, but what does setCount get? I do understand that later on in the functional component, as all of the examples have shown, one can use setCount to perform some function on the state variable ("count" in this case), but, based on all of the language that I've read about what useState does, it would seem that there should be another parameter passed in with it. Something like:

const [count, setCount] = React.useState(0, thePassedFuntion);

Open in new window


Help?
0
I'm currently working on a custom WordPress site that has a sticky menu enabled, meaning that when you scroll about 100px or so down the page, the menu then remains fixed to the top of the browser.  You can see it in action here:

http://dev.movingpicture.com/

Although I'm satisfied with the way the sticky menu is working, I would also like to reveal a small company logo in the upper lefthand corner, about 50px from the left edge, and about 25px from the top.  The logo should only be revealed only after the user has scrolled about 180px or so down the page, and should otherwise always be hidden.

Could anyone here help me achieve this?  The WordPress theme is loading the jQuery library, so I'm open to solutions that utilize it, along with whatever custom CSS might be needed.

Thanks,
- Yvan

p.s. I would prefer to implement this as something custom, rather than having to experiment with different WordPress plugins, as I have already tried a variety of different plugins (unsuccessfully).
0
I am new to sequelize and I created a middleware called "db.js" with a connection to a mysql table called "users". Everytime, I attempt to run the app.js, I am getting this error: "TypeError: app.use() requires a middleware function".

However, I have a middleware function. See the code below: Am I missing something? I have the module.exports object at the end.

Should I have initialize sequelize?

Here is the db.js file:
const Sequelize = require("sequelize");
const mysql = require("mysql");
const mysql2 = require("mysql2");

const db = {}
const sequelize = new Sequelize("smalldata", "root", "xxxx", {
    host: "localhost",
    dialect: "mysql",
    operatorsAliases: false,

    pool: {
        max: 5,
        min: 0,
        acquire: 30000,
        idle: 90000
    }
})

sequelize
    .authenticate()
    .then(() => {
        console.log('Connection has been established successfully.');
    })
    .catch(err => {
        console.error('Unable to connect to the database:', err);
    });

db.sequelize = sequelize
db.Sequelize = Sequelize

module.exports = db;

Open in new window


Here is the app.js file:


const sequelize = require("sequelize");
const db = require("./middleware/db");
const express = require("express");

//Initialize Middleware
app.use(cors());
app.use(expressLayouts);
app.use(logger);
app.use(db);

Open in new window



Here is the users.js file for the mysql table:

const Sequelize = require("sequelize");
const db = require("./db");

const User = db.sequelize.define(
    'users',
    {
        id: {
            type: Sequelize.INTEGER,
            primaryKey: true,
            autoIncrement: true
        },

        first_name: {
            type: Sequelize.STRING
        },

        last_name: {
            type: Sequelize.STRING
        },

        email: {
            type: Sequelize.STRING
        },

        password: {
            type: Sequelize.STRING
        }
    },

    {
        timestamps: true
    },
)

// Note: using `force: true` will drop the table if it already exists
User.sync({ force: true }).then(() => {
    // Now the `users` table in the database corresponds to the model 
    definition
    return User.create({
        first_name: 'John',
        last_name: 'Hancock',
        email:'johnhancock@gmail.com',
        password:'johnny'
    });
});

module.exports = User

Open in new window

0
I have a webpage with a Coldfusion / HTML form that is similar to a spreadsheet.  Users can add lines to the form via Javascript or re-sort it with the jquery sortable plugin.  Lately some users have made this form very big and then failed to hit the big save button at the bottom of the page.  They want me to make it automatically save like excel.

Is there a way to have it silently submit the form in the background occasionally?  Would it be better to try and send one field at a time to update when a field loses focus?  I have a lot of small features I have added to it over the years, so I would rather not throw out the whole thing, but maybe that's what I need to do.
0
I am trying to have a popup with a a nice alert message on my webpage, graying out the background and "OK" button has to be clicked. The page cannot be used until OK, or whatever button is clicked.

Does anyone have a working script for this? I'm assuming it is both CSS and js/jquery.

Thanks much and appreciate it!
0
Can anyone explain meaning of the code below and whether I can safely remove it?

if (typeof (console) === "undefined) {
      var console = {};
      var console.log = function() { };
      var console.error = function() { };
      var console.trace = function() { };
}

Thank you.
0
Why isn't it working ? I am trying to add and remove a class from a label checking if the label related radio input field is checked or not. Thanks :-)

$('input[type="radio"]').change(function() {

     if ($(this).prop('checked')) {	
        $(this).next("label").addClass("checked");
      } else {
          $(this).next("label").removeClass("checked");
      }
 });

Open in new window

0
Need a jQuery solution to the following:

Imagine a circle with a picture on it. Outside of the circle, and surrounding it, are more, smaller circles (let's say 5). The middle circle is a picture of Bob.  The smaller circles are information about Bob. When the user hovers over one of the smaller circles, an infobox (elsewhere) displays information for that circle.

Any help here would be greatly appreciated.
0
I have a form that I want to be submitted in the background ie: when the form submits it must stay on the same page, not redirect to the url specified in the post action. Is this possible?

<form action="https://some-external-url" method="POST" id="supportForm">

Open in new window


        $('#consult').on('click', function(e) {
            e.preventDefault();

            var form = $('#supportForm').serialize();
            $.ajax({
                url: 'validate.php',
                type: 'POST',
                dataType: 'json',
                data: form,
                beforeSend: function() {
                    $('.error-message').empty().hide();
                    $('#-consult').prop('disabled', true);
                    $('#-consult').val('Submitting...');
                    
                }
            })
            .done(function (data) {
                if(!data.success) {
                    $('.error-message').append(data.message).fadeIn();
                    $('#consult').prop('disabled', false);
                    $('#consult').val('Submit');
                    
                    
                } else {
                    $('#supportForm').submit();
                    $('#supportForm').remove();
                    $('#consult').remove();
                    $('.success-message').append(data.message).fadeIn();
                    
                }
            })
             .fail(function (jqXHR, textStatus, errorThrown) {
             

Open in new window

0
Hello Experts,

I have an unknown items (received via php and mysql).
Every ".objekt-item" container needs to get wrapped by an ".objects-row" container.
Depending on the screen size; 1 ".objekt-item" per ".objects-row" container or 2 where the max are 3.
The code below works fine yet, while looking on the code via the console I have duplicated ".objects-row" containers with empty content.
I also need to unwrap the ".objekt-item" and remove it (only the wrapper) while resizing the page.
Any help to tune the script would be appreciated !




(function($) {
	
	var windowLoaded = false;	
	
	$(window).on('load resize', function() {
	
	function wrap(elements, wrap, size) {
		var x, i = 0, c = -1, l = elements.length, n = [];
		for(i; i < l; i++) {
			(x = i % size) ? n[c][x] = elements[i] : n[++c] = [elements[i]];
		}
		l = n.length;
		for(i = 0; i < l; i++) {
			$(n[i]).wrapAll(wrap);
  	   };
	}	
	
	if ($(window).width() < 800) {		
		wrap($('.objekt-item'), '<div class="objects-row"></div>', 1);
	}
	if ($(window).width() >= 800 < 1100) {
	
		wrap($('.objekt-item'), '<div class="objects-row"></div>', 2);
	}
	if ($(window).width() >= 1100) {
		
		wrap($('.objekt-item'), '<div class="objects-row"></div>', 3);
	}
		
	});
	
		
$(window).on('load', function() {
	windowLoaded = true;

       // executing code 

 }); // end after load;

}) (jQuery);

Open in new window

0
https://www.stadriemblems.com/enamel-pins-manufacturing/

On the very top of this page, I am trying to have the four yellow bulleted points show less content on their initial state because it's just too much overwhelming text.

On #1, I have a "view more" link, which does seem to work. The only issue is that I want that "view more" link to disappear when the paragraph is expanded, otherwise it's looks weird in the middle of the paragraph like that. Then once it's collapsed again, the text can come back.  

I have a document ready function at the bottom of the page. What more do I need to add to make it behave the way I want?

 $(document).ready(function () {

            $(".slidingDiv").hide();
            $(".show_hide").show();

            $('.show_hide').click(function () {
                $(".slidingDiv").slideToggle();
            });

Open in new window

0
Can writing this

$server.bindData("GemSubscriptions", $scope, "gemSubscriptions")


instead of this

$server.bindData("GemSubscriptions", $scope, "gemSubscriptions", {
        callback: function (d) {
            console.log("Gem Reports:", d);
        }
    })


cause any issues?


Thanks.
0
I have a list of jobs on a page, you can click through on an individual list item to a printer friendly page and print the page at the moment, what i would like to be able to do is have a check box next to each list item to be able to select the list items to be printed and create a cue to be processed in the background and sent to the printer, i dont want the page to hang while it processes the request...

Site is written in ASP Classic
0
I need to be able to print off worksheets from my web pages, but i dont want the page titles and urls to be printed at top and bottom of the page, is there a way to stop this information being printed

the site is built in ASP classic,  will  use jquery/javascript to accomplish this if that is the way to go

Alternatively can you send options to the print preview screen to remove these from the page instead of having to change them in the print preview screen
0
I'm doing an ajax call to a ColdFusion function to return a query. It should return a single record with three columns for an event's title, description, and date. I want to place each of those three pieces in their corresponding divs. Everything is working fine but I can't figure out how to access the results, and the options I've Googled up have failed me. How do I get the JSON equivalent of CF's queryName.columnName? Thanks!

The jQuery I'm using is as follows:
	$('.calendar-event').click(function(){
		 var id = this.id;
		 var splitid = id.split('_');
		 var eventID = splitid[1];
				console.log(eventID);
		 // AJAX request
		 $.ajax({
			type: "POST",
			url: "/cfc/calendar.cfc?method=getEventAjax",
		  dataType: "json",
			data: {
			 returnFormat: "json",
			 eventID: eventID
		 },
			success: function(response){ 
				console.log(response);
				// Add response in Modal body
				$('#eventTitle').html(what goes here for the title?);
				$('#eventDescription').html(what goes here for the description?);
				$('#eventDate').html(what goes here for the date, and what about formatting?);
				// Display Modal
				$('#eventModal').modal('show'); 
			},
			error: function (response) {
				console.log(response);
        $("#modal-body").html("This event could not be loaded.");
				$("#eventModal").modal("show"); 
      }
		});
	 });

Open in new window


The function is simple:
<cffunction name="getEventAjax" access="remote" returntype="query" hint="returns info for single event">
		<cfargument name="eventID" type="numeric" required="yes">
		<cfquery name="qGetEvent" datasource="#APPLICATION.ds#">
			SELECT eventTitle, eventDescription, eventDate FROM calendar
			WHERE ID = <cfqueryparam value="#ARGUMENTS.eventID#" cfsqltype="CF_SQL_INTEGER">
		</cfquery>
		<cfreturn qGetEvent>
	</cffunction>

Open in new window


In the console log I'm getting
{COLUMNS(3), DATA: Array(1)},
COLUMNS: (3) ["EVENTTITLE", "EVENTDESCRIPTION", "EVENTDATE"]
DATA: Array(1)
0: Array(3)
0: "Radio Interview with Lucy Ann Lance of 1290AM"
1: "<p>Interview will take place at 8:20am EST</p>"
2: "July, 29 2019 00:00:00"
0
Can removing multiple console.log from JavaScript, jQuery, AngularJS application cause any issues?

Thanks.
0
Record Photo Error
I uploaded a new image column with images directly to an existing mysql database.  I have attempted to view the images in the frontend using an ajax call with all the other data, however, I am receiving the following error for the images:

 [object%20Object]:1 GET http://localhost:5000/[object%20Object] 404 (Not Found)

It appears that the path is not found, however, the images are within the database itself:

Please see the code below:
$(document).ready(() => {
    
    $('#allData').click(() => {
      if ($('#stores').is(':empty')) {
        console.log('It is empty, data can load');
        $.ajax({
          //$.getJSON({
          url: 'http://localhost:5000/alldata',
          type: 'GET',
          datatype: 'json',
          success: (data) => {
          var station_data = '<a href="http://localhost:5000/station" target="_blank" class="insert">Insert a new Record</a>';

         $.each(data, function (key, value) {
            station_data += '<div class="store">' + '<img src="'+ value.Image +'"    width="70" height="70">' + '<li>ID: ' + value.ID + '</li>' +
                '<li>Station: ' + value.Station + '</li>' +
                '<li>Address: ' + value.Address + '</li>' +
                '<li>Sales: ' + value['Monthly C-Store Sales'] + '</li>' +
                '<li>Operator: ' + value.Operator + '</li>' +
                '<li>Top SKU: ' + value['Top SKU'] + '</li>' + '</ul>' +
                '<div class="store-action">' +

Open in new window

1
I want a list of checkbox items. As the user selects the items, I want them to appear in a list on the right.

If possible, I want each item to have a point value and as they select them, it totals the points selected.

Is there anything quick out there I can use in javascript, or jquery, or even asp.net?

I don't want to use a database or anything fancy.

(It's for a game I host where players earn points, pick prizes and screenshot me their selected list so I can give them their prizes.)

thanks!
0
I have asked a previous question on the styling of this bar, i do have a working example but would like it to look different

I would like this bar jsfiddle loading bar demo

but would need it to show using this javascript, or one that triggers on page unload

<script>
window.addEventListener("beforeunload", function (e) {
    document.body.className = "page-loading";
}, false);
</script>

Open in new window



previous question
1
Using amchart, version 4, I would like to create various charts types (Line & Area, Pie & Donut, Column & Bar, XY & Bubble).

I wish to use an external datasource from a mysql database using node.js. How can I reference the columns of the data to be used from the database?  

I understand from the documentation on www.amcharts.com, that you can either put the raw data(such as an array) within the javascript code or you can use a "csv" file or a "json" file but I do not see any information on how to use information from a url from the server.  

See below an example using a csv file.

{
  // ...
  "dataSource": {
    "url": "/data/myData.php",
    "parser": {
      "type": "CSVParser",
      "options": {
        "useColumnNames": true
      }
    }
  }
}

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