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 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
Hi

I've got this code to work with and I need to make it jquery enabled tabs

I cannot amend this code as it comes from a 3rd party web service so im hoping one of you guru's can make it tabbable, my attempts fail miserable and it all shows, then all disappears each time :(

Tab names and tab content will obviously change but the other naming conventions will always be the same

Thanks
Neil


<div id="content">

  <ul class="nav nav-tabs" id="details_tabs" data-tabs="details_tabs">
    <li class="active"><a href="#details_tab_1" data-toggle="tab">My details</a></li>
    <li><a href="#details_tab_2" data-toggle="tab">Availability</a></li>
    <li><a href="#details_tab_3" data-toggle="tab">Likes</a></li>
  </ul>
  
  <div class="tab-content" id="details_tabs_content">  
    <div class="tab-pane active" id="details_tab_1"> content for tab 1</div>
    <div class="tab-pane" id="details_tab_2"> content for tab 2</div>
    <div class="tab-pane" id="details_tab_3">content for tab 3</div>
  </div>
  
</div>

Open in new window

1
I have the following code to insert, edit and delete records from a database using node.js.  I would like to have alert messages informing the user of the successful transaction for each from the frontend if successful.  I am not certain regarding the syntax for this.

Here is the code to insert into the database:
$(document).ready(() => {
    $(document).on('click', '.insert', function (e) {
     // $('#insertD').click(() => {
      e.preventDefault();
      $("#insertE").remove();
      $("#insertD").show();
      $("#stationForm")[0].reset();
      $("#stationForm").attr({
        action: $(e.target).attr("href"),
        //action: "/station", // PATH TO POST NEW STATION DATA ?
        method: "POST"
      });
   
      $("#modalStationForm")
        .dialog("option", "title", "Inserting New Station")
        .dialog("open");
      });
[/code}


Here is the code edit code:
[code]
$(document).ready(() => {
    $(document).on('click', '.edit', function (e) {
      e.preventDefault();
      $("#insertD").hide();
      $("#insertE").show();
      $("#stationForm")[0].reset();
      $("#stationForm").attr({
        action: $(e.target).attr("href"),
        //action: "/station", // PATH TO POST NEW STATION DATA ?
        method: "PUT"
      });
      var value = $(event.target).closest("div").find("input:hidden").val();
      value = JSON.parse(value);

      $("#store", "#modalStationForm").val(value.Station);
      $("#location", 

Open in new window

0
https://www DOT stadriemblems.com/products/enamel-pins-test/

Right under the main banner of this page, you can see there is a slideshow feature that came with this template, its purpose clearly being just to showcase some images with descriptions, but I want to use it as navigation to other pages instead.

Right now, clicking on one of those four categories just jumps to its corresponding picture. I want to change the behavior so that HOVERING over the category displays the picture and CLICKING it takes the user to a different page.

I hope that makes sense. Let me know if more information is needed, and I will gladly provide it. Thanks!
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