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 a sortable table and it is passing the order numbers just fine. But I am not sure how to pass a hidden field with sortable.

How would I add another data field in the code below?

                var order = $("#tabledivbody").sortable("serialize");
   
                $.ajax({
                type: "POST", dataType: "json", url: "/ajax/somefile.php",
                data: order,

                success: function(response) {
                    if (response.status == "success") {
                        window.location.href = window.location.href;
                    } else {
                        alert('Some error occurred');
                    }
                }
                });
0
I have an array that will have approx 3000 elements. Within each element is an array that contains two key:value pairs. I want to sort the elements of the outer array based on the value of the first key:value pairs within each element.

e.g.
array = [{"key1":"group9","key2":["20170222","20170531"]},{"key1":"group3","key2":["20170221"]},{"key1":"group7","key2":["20170321"]}, ..................]

so sorting gives e.g. (the elements are arranged based on sorting the groupX value of key key1 i.e. the first key:value pair)

array = [{"key1":"group3","key2":["20170221"]} ,{"key1":"group7","key2":["20170321"]} ,{"key1":"group9","key2":["20170222","20170531"]},................................]


I've implemented a merge sort and it works fine. But I want to look at what is the most efficient algorithm to use, as my colleagues have suggested bubble sort (I thought this was one of the worst algorithms, but it really depends on how large the dataset is).

Can anyone advise?

I'll (learn to) implement this on a webpage so I'm using Javascript/JQuery/ReactJS
0
Here's the working code:

<!DOCTYPE html>
<html>
<head>
	<title>Bruce Gust</title>
	<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body> 
Phone&nbsp;<input type="text" name="phone" maxlength="25" id="txtDate" style="width:150px;">
</body>

  <script>
$(document).ready(function() {
            $("#txtDate").keyup(function(){
                if ($(this).val().length == 2){
                    $(this).val($(this).val() + "/");
                }else if ($(this).val().length == 5){
                    $(this).val($(this).val() + "/");
                }
            });
});
  </script>
 

</html>

Open in new window


The ONLY thing that's in need of improvement is if the user goes to delete any characters in the date field. For example, if they enter "12" and they meant to enter "11," when you go to delete the 2 and the newly asserted "/," you can't do it! It's like it's getting stuck in this perpetual cycle.

Now, if you just highlight all of the characters and delete everything, that will work. But how can I craft the code so should a user go to delete a value, it doesn't get hung up?

Thanks!
0
I have created a bootstrap popup login page . When the client click on the login button it will launch the popup and the client will be asked to either login or register. Once login button is clicked I need to validate the credentials and log them in. If the login is not successful I Need to keep them on the same page and show the error message.

Also   I have 2 options forgot user name and forgot password I need to incorporate that within the same popup so it slides and another form is shown
<li class="login-link"><a href="#" data-toggle="modal" data-target="#myModal">Login</a></li>

<div id="myModal" class="modal fade" role="dialog">
			<div class="modal-dialog">
			    <!-- Modal content-->
			    <div class="modal-content">
			    	<div class="modal-header">
			        	<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h2 class="modal-title">Account Login</h2>
			    	</div>
					<div class="modal-body">
						 <form data-toggle="validator" role="form">
			        	<h3>Welcome to I Drive Smart. Please log-in to access your account.</h3>
			        	<div class="form-group">
			        		<input class="modal-username" type="text" name="firstname" class="form-control" data-error="Please enter name field." placeholder="Username" required="required">
			        			<div class="help-block with-errors"></div>
			        	</div>
			        	<div class="form-group">
			        		<input class="modal-password" type="password" 

Open in new window

0
I have an ASP.Net 4.0 website and I am looking to integrate some JQuery to a web page but I don't know how.
I want to use IP Info API to look get the IP Address and City of the users on my site.  They have provided code snippets here:
http://ipinfo.io/developers#getting-started
How can I integrate this to the client side script of my web page and populate some text boxes with the results on page load?
0
Hi I'm looking to get the rowed of the selected row from a datatable

$("#implementationworkqueueTable").contextmenu({
            delegate: "tr.selected",
            taphold: true,
            menu: [
                { title: "<kbd>Resubmit request</kbd>", cmd: "resubmit" }
            ],
            select: function (event, ui) {
                switch (ui.cmd) {
                    case "resubmit":
                        ResubmitImplementationRequest();
                        break;
                }
            },
        });

Open in new window


What am I missing?
0
in my code i want to dynamically  generate textboxes and radio buttons to enable me add new staff information. I have succeeded in doing this but every time i selected the gender of staff1 radio button , the gender of staff2 radio will deselect. for example if staff1 was a male and staff2  also a male, selecting staff2 deselect staff1 because the radio button name generated is the same. please help!! i have been struggling with problem for almost a week.

can you also show me how to store the values in mysql database?
0
Hi,

I am hoping someone can help me with an issue I am having whilst using Jquery and Classic ASP.

This code works perfectly..


  <script type="text/javascript">

    $(document).ready(function() {
             $('ul.sf-menu').sooperfish();
    });

</script>


BUT as soon as I add in the code for my ajax form submit it does not work..


  <script type="text/javascript">
    $(document).ready(function() {
       
        
         $('#submitButton').click(function() {
    $.ajax({
            type: "POST",
            url: "test.asp",
            data:  $("#form1").serialize(),
            cache: false,
            dataType: "html",
            success: function(responseText){
                alert(responseText);
            },
            error: function(resposeText){
                alert(resposeText);
            },
        });

    return false;
});

        
             $('ul.sf-menu').sooperfish();
 
    });
0
Hello,

I install the lib on my server and upload work fine.
I want now to connect the script to mysql, to insert files data in a table, as explain in https://github.com/blueimp/jQuery-File-Upload/wiki/PHP-MySQL-database-integration.

I replace all the data as explained in the tutorial, set my connexions data, ... But nothing go to the database table, and I get an error for each file : SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

Could you  explain me what is wrong in the tutorial ? Or give me the corrected modified files ?

Thanks !
0
I had this question after viewing Angular - why isn't this table working?.

I got help above and the solution works. But it doesn't work when I deploy it to our hosting server. It works locally.

This is the issue Solution    and this one Solution 2

1. I fixed one file but applying the fix to the second file doesn't work.

2. You can see it here. Login with admin@admin.com/ Password321$    http://147.75.0.124:88/

3. I found this link with different ways of injecting Article with solutions

I have this
var app = angular.module("lawApp", ['smart-table']);

Open in new window


4. I tried these and none worked. Still same error

 First solution
 
  (function () {
    'use strict';
    angular.module('lawApp')
        .factory('mainService', ['$http',mainService])
		.controller('mainCntrl', ['$scope', '$window', 'mainService', mainController]);

       function mainService($http) {
          ...
      }

    function mainController($scope, $window, mainService) {
        ...
     }
  

Open in new window


Second solution

(function () {
    'use strict';
    angular.module('lawApp')
        .factory('mainService', mainService)
		.controller('mainCntrl',  mainController);
   
    function mainService($http) {
          ...
      }

  function mainController($scope, $window, mainService) {
        ...
     }

 mainController.$inject = ['$scope', '$window', 'mainService'];

  angular.module('lawApp').controller('mainCntrl', mainController); //*** I tried it with and without this

Open in new window


5. I fixed one file by doing this but the same thing didn't work for the other file

(function () {
    'use strict';
    angular.module('lawApp');

angular.module('lawApp').service("loginService", ["$http", function ($http) {
 ...
}]);

  angular.module('lawApp').controller("loginCntrl", 
      ["$scope", "loginService", function($scope, loginService) {
         ...
   }]);

Open in new window


I'll continue with the other solutions in the link above but I hope someone can help.
0
Hello
I need help to evaluate an expression using the OR statement. I have tried || but it produces errors no matter what I try in my expression. What I am trying to do is, if the item_startsWith ?? || if the size_startsWith ?? return the data.

I have posted my code and would be grateful if someone could help with this. Thanks

var dataAdapter = new $.jqx.dataAdapter(source, {
  formatData: function(data) {
    data.item_startsWith = $("#searchField").val(); 
     data.size_startsWith = $("#searchField").val();
      return data;
    }
    });

Open in new window

0
I have a coldfusion query and I need to search the query by the address with the proximity of 5 miles. The client type their home address and I need to show desired location in the radius of 5 miles
0
So,...I have a bit of jQuery running in my page that forces any characters typed to be uppercase:

<script type="text/javascript">
        $(document).ready(function (jQuery) {
            $(".inputField").bind('keyup', function (e) {
                if (e.which >= 97 && e.which <= 122) {
                    var newKey = e.which - 32;
                    // I have tried setting those
                    e.keyCode = newKey;
                    e.charCode = newKey;
                }
                $(".inputField").val(($(".inputField").val()).toUpperCase());
            });
        });
</script>

Open in new window


I have a table that holds many text boxes that live in multiple tables on my page, that I want to force this behavior on. For example:

        <tr>
            <td class="tblFieldPrompt">First Name:&nbsp;&nbsp;</td>
            <td class="addy1Prompt">
                <asp:TextBox ID="tbxBFirstName" runat="server" Width="200px" CssClass="inputField"></asp:TextBox>
            </td>
            <td class="tblFieldPrompt">Last Name:&nbsp;&nbsp;</td>
            <td class="addy1Prompt">
                <asp:TextBox ID="tbxBLastName" runat="server" Width="200px" CssClass="inputField"></asp:TextBox>
            </td>
            <td class="tblFieldPrompt">Address:&nbsp;&nbsp;</td>
            <td class="addy1Prompt" colspan="2" style="text-align: left;">
                <asp:TextBox ID="tbxBAddress" runat="server" Width="360px"></asp:TextBox>
            </td>
        </tr>

Open in new window


The mis-behavior I'm experiencing is this: As the code above stands, if I start typing in tbxBFirstName textbox, the text is forced to uppercase, however tbxBLastName will also populate with duplicate text. If I start typing in tbxBLastName then it won't hold any of the information and as soon as I'm done typing everything in tbxBLastName just disappears. If, for each textbox, I use a different class to attach the jQuery function (i.e.: inputField1 for tbxBFirstName and inputField2 for tbxBLastName) then it works just fine. But that would mean that I would have to replicate that jQuery method for each text box on my page, and I have about 40 text boxes on the page. How can I get my jQuery function to work each textbox, using one (1) class name (the same class name) for each textbox on my page?
0
Here's the code:

  $.get('/health-summary/' + id +'/'+ response_id, function(resp){
                if (resp.error) {
                    $this.html('<div class="alert alert-danger">' + resp.msg + '</div>');
                    return false;
                }
                
                $this.html(resp.data.html);
            }, 'json').fail(function(){
                $this.html('<div class="alert alert-danger">Unfortunately, something appears to have gone wrong. Please refresh the page to try again.</div>');
            });

Open in new window


The error I get is "Unfortunately..."

Now, if I change
$.get('/health-summary/' + id +'/'+ response_id, function(resp){
to...
$.get('/health-summary/' + id, function(resp){

No error and the whole app works.

The PHP function that all this is being loaded into, by the way is this:

public function _default($id='', $response_id='') {

Everything works except for when I introduce the $.get('/health-summary/' + id +'/'+ response_id, function(resp){ dynamic.

Now, there's no "response_id" being passed into the URL yet...

I don't know what function(resp) is...

Can anyone shed some light on this and tell me what I'm missing that's creating the error?
0
I am struggling with some image height/width detection issues.

Please start at this URL:
http://craigconstruction.bbdesign.com/?projects=1

Size your window very wide by not very tall (as in attached screenshot).

Click the top-left image (P 01 - Glenwild).

Why is the image sized the way it is? I am trying to detect the width of the image at this point, but it is giving me the width of the browser window, not the width of the image. I'm not sure why the width of the image is being confined to the browser width.

I think if I can determine the answer to that question, the rest of my current issue will fall into place, because my issue is relating to determining the image width.

Thanks!
1.jpg
0
Here's the code I'm trying to edit:

$('.health-summary[data-id]').each(function(i){
            
            var $this = $(this),
                id = $this.attr('data-id');
            
            if (id === '') {
                $this.html('<h3 class="text-center">Invalid health summary reference</h3>');
                return true;
            }
            
            $this.html('<h3 class="text-center"><i class="fa fa-refresh fa-spin"></i> &nbsp;Loading Health Summary...<br /><small>(This should only take a few seconds.)</small></h3>');
            
            $.get('/health-summary/' + id, function(resp){
                if (resp.error) {
                    $this.html('<div class="alert alert-danger">' + resp.msg + '</div>');
                    return false;
                }
                
                $this.html(resp.data.html);
            }, 'json').fail(function(){
                $this.html('<div class="alert alert-danger">Unfortunately, something appears to have gone wrong. Please refresh the page to try again.</div>');
            });
            
        });

Open in new window


On line 1, you've got this:

$('.health-summary[data-id]') - how do I write this so it accommodates a "response_id?"

On line 13, you've got this:

 $.get('/health-summary/' + id, function(resp){

I need to change that so it accommodates not just an "id," but also a "response_id."

In short, how do I edit this thing from top to bottom so I've got a place for a second variable?
0
Here's the HTML that sets everything in motion:

 <li role="presentation"><a href="#summary" aria-controls="summary" role="tab" data-toggle="tab">Health Summary</a></li>

"#summary" - triggers this function:

    $('a[href="#summary"]').on('click', function(){
        setTimeout(function(){
            HealthSummary.init();
        }, 250);
    });

HealthSummary.init - not sure what that means other than, "initialize." There's another script has this:

var HealthSummary = {
    
    initialized: false,
    
    init: function(){
        var self = this;
        
        if (self.initialized) {
            return true;
        }
        
        $('.health-summary[data-id]').each(function(i){
            
            var $this = $(this),
                id = $this.attr('data-id');
            
            if (id === '') {
                $this.html('<h3 class="text-center">Invalid health summary reference</h3>');
                return true;
            }
            
            $this.html('<h3 class="text-center"><i class="fa fa-refresh fa-spin"></i> &nbsp;Loading Health Summary...<br /><small>(This should only take a few seconds.)</small></h3>');
            
            $.get('/health-summary/' + id, function(resp){
                if (resp.error) {
                    $this.html('<div class="alert alert-danger">' + resp.msg + '</div>');
                    return false;
                }
                
                $this.html(resp.data.html);
   

Open in new window

0
I have a co-worker who asked for some help. He has a page with a bunch of buttons on on it. When a certain button is clicked he wants every button on the page to be disabled as to not interrupt the process of the first button being clicked. When the process completes it causes a postback and enables everything back, which is what we want. Is there a good way of disabling all the buttons on a page from a click of a button. I had given him the following code and he hasnt tried it yet but I wanted to do a little more research in case it doesnt work.
So I have the following code in my program that disables a button from a FileUpload control onchange event and thought it would work for his program..

markup:
<asp:FileUpload ID="FileUpload1" runat="server" CssClass="textbox" Width="228px" Height="25px" onchange="SetEnabled(); return false;" ></asp:FileUpload>

Open in new window


and the script looks like this:
    function SetDisabled() {
        var myButton = document.getElementById('UploadButton');
        $(myButton).attr('disabled', 'disabled');
    }
    function SetEnabled() {
        var myButton = document.getElementById('UploadButton');
        $(myButton).removeAttr('disabled');
    }

Open in new window


If this works for him then what I need to do is use the SetDisabled() to disable every button on the page.I was thinking on using a class for every button and use  javascript or jquery to identify all the classes that have a certain name and disable them that way I just dont know the syntax.
Any help would be appreciated
0
Hi experts, I have below codes working fine.
But I try to do some css inside of the repeater.

Basically, I want to create css like this website (http://nicolasgallagher.com/pure-css-speech-bubbles/demo/) and I have attached images to show you which one I prefer to look

Inside of the asp.net codes, I have ReformatBackground return two css class
'style-outbound' and 'style-outbound-reply' for table <td> class.

I tried to make it look like the images attached. Can you help me? It does not have to be exact.
I am not expert of css so need helps.

Thanks

  public string ReformatBackground(string str)
        {[embed=file 1164256]
            string tmpStr = string.Empty;
            if (str == "outbound-api") // agent sends to the customer
            {
                tmpStr = "style-outbound";
            }
            else if (str == "outbound-reply") // customer replies to the agent
            {
                tmpStr = "style-outbound-reply";
            }
            else if (str == "inbound")  // customer sends to the agent
            {
                tmpStr = "";
            }
           
            return tmpStr;
        }


<asp:Repeater runat="server" ID="conversationList" OnItemCommand="conversationList_ItemCommand">
                                                        <HeaderTemplate> 
                                                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
     

Open in new window

0
Hi EE,
please see JS Fiddle here which showns a standard "Linked Picker" as described on the Bootstrap 3 datetime picker website.
My aim and what I need a hand with is to highlight the date selected on the first picker on the second calendar.
I.E. If I select the 31of May on the first picker then this date will be highlighted on the second.

Thanks for reviewing.
NB
0
I hope someone can help me with this. I've looked at so many examples and just don't know why the search in this smart table isn't working.

1. This is our test site http://147.75.0.124:88/
You can login with admin@admin.com / Password321$

(this is our staging site. It's slow. Might have to load the page a couple of times, if it doesn't show up)

2. At the bottom, you see the smart table. It binds and data shows up.

3. Enter something in the search box and the table isn't being filtered.

4. I see smart-table.js in "source" tab of Chrome console.

what am I missing? I've spent so much time on it and looked at different examples. I don't see what I'm missing in it.
0
I don't know if this is possible. I am detecting "mouseenter" and "mouseleave" on elements like this:

$('.gallerythumbs').on('mouseenter', function(){
	$(this).children('.gallerythumbsoverlay').animate({'opacity': '1'}, 200);
});

$('.gallerythumbs').on('mouseleave', function(){
	$(this).children('.gallerythumbsoverlay').animate({'opacity': '0'}, 200);
});

Open in new window


...which works fine. The problem is that there is a transparent image position:absolute partly on top of .gallerythumbs. When you mouseover the area where the transparent image overlaps, "mouseenter" does not trigger (because the mouse is over the image, not .gallerythumbs which is in the background). When you mouseover the area where the transparent image does not overlap, "mouseenter" triggers as expected.

What I'm asking is, can I trigger mouseenter somehow "through" the transparent image that is positioned on top of .gallerythumbs?

Thanks.
0
Yep, you read the title right.

OK, I have done a LOT of updates to the site, and to the database.
I downloaded the LIVE database from "Hosting"

#1: Restores the database with a different name.
#2: Edited the tables, added in new tables.
#3: Added the Database name into the connection string.
Set Conn = CreateObject("ADODB.Connection")
Conn.ConnectionString = "Provider=SQLOLEDB;Data Source=server\instance;Database=UPDATED-DB;User ID=username;Password=password;"
Conn.Open

Open in new window


This is the javascript that is (with the new database connection) not working.

<script>
function showdiv(name){ 
var obj = (document.getElementById)? document.getElementById(name) : eval("document.all[name]"); 
if (obj.style.display=="none"){ 
obj.style.display="block"; 
}else{ 
obj.style.display="none"; 
} 
} 
</script>
<a href='#tab4' onClick="$('#tab4').load('file.asp?proid=<%=proID%>');showdiv('tab4');showdiv('paginationFB');" data-state="none">Followed By</a>

Open in new window


OK, this work: showdiv('tab4');
This does not work.: showdiv('paginationFB');

Now, if I changed the database name to the original name,
Set Conn = CreateObject("ADODB.Connection")
Conn.ConnectionString = "Provider=SQLOLEDB;Data Source=server\instance;Database=ORIGINAL-DB;User ID=username;Password=password;"
Conn.Open

Open in new window

Then everything works the way it supposed to work.

I viewed the source code, and everything is there, everything matches between the two database name changes.
Is it just that with the Updated-DB, the 2nd showdiv, will not fire.
But, as I stated, if I change it back to the original-db, then it will fire, and everything works as planned.

Any idea's on what I can check?
I have done through both DB's and I cannot see anything that is out-of-place.
I have looked at the code, I have changed things around, and still.
Will only work with the original-db, and not with the updated-db

Thanks for any and all assistance in this annoying issue.
Carrzkiss
0
jQuery('.progress', form).css('width', '0');
jQuery.ajax({

        xhr: function () {

            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    percentComplete = parseInt(percentComplete * 100);
                    jQuery('.progress', form).text(percentComplete + '%');
                    jQuery('.progress', form).css('width', percentComplete + '%');
                }
            }, false);
            return xhr;
        },
        type: 'POST',
        url: badnc_ajax.ajaxurl,
        data: data,
        success: function (data) {
            jQuery("div[id='results']", form).css('display', 'block');
            jQuery("div[id='loading']", form).css('display', 'none');
            jQuery("div[id='results']", form).html(unescape(data));
        }

    });

Open in new window


This code is showing a progress bar when I submit the form. The only problem is progress bar shows after receiving the response.

I mean progress bar shows after displaying the message from PHP file.

I want to show the percent counter increasing and whenever it reaches 100% then show the response.
0
I have created a dependant drop down select menu.
You can see it in action here http://jsfiddle.net/beaconhill/khcgmm1n/.

This my second version here http://jsfiddle.net/beaconhill/5aj1z42z/ I am attempting to use js to style the drop down select menu.  As you can see the menu styling is working great but my dependant drop down results are not being displayed.  I need some kind of re fresh mechanism that will allow the dependant drop down select menu to show its content after the first menu  has selected its item.

Help appreciated.
NB
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