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

Can we create our own alert window to override the existing "alert(" xxx") in JavaScript ?
0
Learn Ruby Fundamentals
LVL 19
Learn Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

Is there any example on using JQuery to display each column of a selected row in a HTML table ?

Thx
0
1. In the code below, what's "buttons.not(this)" means ? What does "this" refer to ?  Thx
2.  for the statement : if( !$("#formfield").val() ),  does formfield value return undefine if it is not set, and ! make the whole statement return true ?
3. What does $(function() means ?

Thx

<head>
    <link rel="stylesheet" href="day.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

<button id="day" disabled>Day</button>
<button id="night">Night</button>

<script type="text/javascript">
    $(function() {
        var link = $('link[href="day.css"]'),
            buttons = $('button');
        buttons.on('click', function() {
            link.attr('href', this.id+'.css');
            buttons.not(this).removeAttr('disabled');
            $(this).attr('disabled', 'disabled');
        });
    });
</script>

Open in new window

0
Hi Experts,

I would like to apply the following to my logic page (designed in Caspio).

Check if PWD_Date is older than 90 days, then it should redirect user to the change PWD screen.

This is the article showing how to accomplish this.

I have tried the following, but so far its not working...

<script>


var date = new Date('[@authfield:PWD_Date]');
date.setDate(date.getDate() + 90);
var dateTodate = new Date();

if (date < dateTodate) {
    alert('[@authfield:PWD_Date]'.toString());
    
alert('Please change your Password');
window.location.href = 'http://localhost/staff/profile-change-password.php';
};


	if ('[@authfield:Role_ID]' == '1234') {
		window.location.href = './admin';
	} else {
		window.location.href = './staff';
	}


</script>

Open in new window


Thanks
1
jQuery UI Autocomplete integration with Wordpress.

I have been working on integrating jQuery UI Autocomplete within my wordpress theme. I have been following this guide: https://gabrieleromanato.name/adding-jquery-ui-autocomplete-to-the-wordpress-search-form

--

Currently it is working as intended, I have on search the right results, and with them being able to log in the right div. But along with the post_title I want to fetch the posts custom taxonomy 'services_cat' - So then I can separate my search results within these categories. At the moment my below code will show the results all with the EXACT same category. So it's not actually pulling the posts right category, it's just pulling what I assume is first in the list.

Here is my code.

jQuery
(function( $ ) {
	$(function() {
		var url = MyAutocomplete.url + "?action=my_search";
		
		function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }
    function log( message ) {
      $( "<div>" ).text( message ).prependTo( ".selected-results" );
      $( ".selected-results" ).scrollTop( 0 );
    }
		
		$( "#autocomplete" ).autocomplete({
			source: url,
			appendTo: ".search-results",
      search: function() {
        // custom minLength
        var term = extractLast( this.value );
        if ( term.length < 2 ) {
          return false;
        }
      },
      focus: function() {
        // prevent value inserted on focus
   

Open in new window

0
I was implementing below plunker in my application & popover doesn't seem to work. While inspecting DOM i noticed event listeners are not being generated. I tried with popover-trigger="'click'" & also with popover-trigger="'focus'"

UI bootstrap Popover


how do we resolve this issue
0
I'm having some strange behaviours with the jQuery ValidatorEnable.

What's happening is this:

When the page first loads the validator is disabled, when I select that part of the page I run

				function toggleAppointment(visible) {
					document.getElementById("pnlBookAppointment").style.display = visible ? 'block' : 'none';
					ValidatorEnable($get('rfvBookAppointment'), visible);
					ValidatorEnable($get('rfvApptIn'), visible);

				}

Open in new window

Where rfvApptIn is my validator control and visible = true, this enables the validator control
Page works OK.


There are a set of radio buttons that if I select one runs a JS function to clear the number text box, and re enables the validator control (may have been disabled elsewhere)

				function toggleBookAppt() {
					var txt = document.getElementById('txtAppointmentIn');
					$('#txtAppointmentIn').val("");
					//Removed the validation if Next Available is selected
					if ((document.getElementById('rdoApptIn_3').checked) || (document.getElementById('rdoApptIn_4').checked)) {
						ValidatorEnable($get('rfvApptIn'), false);
						$('#txtAppointmentIn').prop("disabled", true);
					} else {
						txt.focus();
						ValidatorEnable($get('rfvApptIn'), true);
						$('#txtAppointmentIn').prop("disabled", false);
					}
				}

Open in new window


Now after this the validator fails if I input the same number as previous. but if I type in a new number its OK. ALso the validator doesn't respond straight away, rather it waits for the submit before showing.

I have attached a small video showing this.

Why should enabling the validator control cause this?

I know its not a working example of code but hopefully some one has seen this before.

Andy
JS-Issue.mp4
0
I'm not sure what to call it, but you know how when a page needs to load thousands of records, it loads only some of them and as you scroll down (think Youtube) it has a spinner and loads some more.

We are using DataTables, it has a drop down to select how many rows show per page, it has a pager showing how many pages. Then it loads all of the data to client side.

On our huge clients, that can take a loooong time.

Is there a way using DataTables to load partial data so that it appears to load immediately, then only load the other pages as you select them, etc.

The problem I see is with the little search panel, now that data isn't client side, so it can't do the quick searches. But these huge page loads are killing us time-wise. So we need to do something else quick.

Can someone direct me to an example of DataTables and what we can do with huge amounts of data?

We use ASP.NET.

Thanks!
0
In response i have data as below:
<!DOCTYPE html>
<html>
<head>
<body>
.............
<div id="divtag">
                   
<table id='tblMainResult' width='100%' style='border: 0.5px solid #999999;' class='UploadAdjustmentTable'><tr style='height: 40px;'><td width='100%'><strong style='font-size: 12pt;'> XML Validation Results for: 30-Aug-2019</strong><br /><br /></td></tr><tr style='background-color: lightgray; height: 25px;'><td width='100%'><strong>Validate Presence of all 10 reports in XML </strong> </td></tr><tr><td width='100%' align='left' valign='top'><br /> Check 1:-Confirm XML contains 10 reports - <span style='color:green; font-weight: bold'>PASS </span><BR/><br /></td></tr><tr style='background-color: lightgray; height: 25px;'><td  width='100%'>
..........................
</td></tr></table></div><br /></td></tr><tr><td><br /> </td></tr>
</table>
</div>
...................
</body>
</head>
</html>

how to display only <div id="divtag"> content on page?


i need to display below after  success: function (response) { line?

   $.ajax({
                    url: '@Url.Action("CreateAndSubmitXML", "ExternalSubmission")',
                    data: JSON.stringify({
                        SelectedBusinessDate: selectedCobDate,
                        SelectedBusinessName: businessDatesText,
                        Reason: adjComments
                    }),
                    type: 'POST',
                    datatype: 'json',
            …
0
Hi,

i am getting html response in below variable which is bold below line:
     success: function (response) {

i need help on how to bind this html response to DIV tag which is below:

Code:

  $.ajax({
                    url: '@Url.Action("CreateAndSubmitXML", "ExternalSubmission")',
                    data: JSON.stringify({
                        SelectedBusinessDate: selectedCobDate,
                        SelectedBusinessName: businessDatesText,
                        Reason: adjComments
                    }),
                    type: 'POST',
                    datatype: 'json',
                    contentType: 'application/json; charset=utf-8',
                    success: function ([b]response[/b]) {
                        //alert("show");
                        debugger;
                        alert(response);
                        $('#divtag').html(response);

Open in new window




tried with below but not working:
1.   $('#divtag').html(response);

2. $(".result").html(response);
$(".result").append(response);
$(".result").txtresult(response);
<div class="result">
0
C++ 11 Fundamentals
LVL 19
C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

Hi,
I am using MVC with jquery.

below code is not working means divLoadingOnSub is showing but not hiding.

before it used to work but i changed button type from submit to button then it is not working.
how can i hide divLoadingOnSub?

 function pleaseWaitLoadingOnSubmission() {

            var url = '@Url.Action("CreateAndSubmitXML", "ExternalSubmission")';
            $("#divLoadingOnSub").show();
            $.post(url, null,
                function (data) {
                    $("#divLoadingOnSub").hide();
                });
        }

Open in new window

0
I am using MVC with Jquery architecture. When i create button with submit type Request.Form is getting value but after i change this button type to button then
Request.Form["selectedDate"] in controller is not working. Please help on this.

when Request.Form["selectedDate"] in controller has selected value in dropdown when button type is submit.

when Request.Form["selectedDate"] in controller has null value when button type is button.
how to resolve this?
0
Hi Experts,

My page is not functioning the way is supposed to, by looking at a screen like the attached, how can I figure out what is the cause?
Tried clicking on the red icon showing 2 errors but nothing comes up. (wondering why not...)
Besides I had those two errors before, so they're not the cause.

Thanks
Capture.PNG
0
in javascript, with xml string "<people><firstname>John</firstname><lastname>John</lastname></people>"

how can loop them like?

foreach ()
alert(xml<firstname> = 'john')
next

I do not want to call one by one. I just want to loop through all the nodes.

thanks
0
Hi Experts,

I have the following code that prevents users from saving w/o entering all required fields.

// set required to true or false
function setRequired(flag) {
  if (flag == true) {
    // get the current sig, default = []
    var sig = $('input[name="output"]').val();
    $('#cb_sign_wrapper').signaturePad({drawOnly : true}).regenerate( (sig) ? sig : [] );

    $('.req').each(function() {
      $(this).closest('tr').next().find('input').attr('required',true);
    });

    $('.req').each(function() {
      $(this).closest('tr').next().find('textarea').attr('required',true);
    });

    $('.req').each(function() {
        $(this).closest('tr').next().find('select').attr('required',true);
    });
  } else {

    $('input:required').each(function() {
      $(this).prop('required',false);
    });

    $('textarea:required').each(function() {
      $(this).prop('required',false);
    });

    $('select:required').each(function() {
      $(this).prop('required',false);
    });
  }
}

Open in new window


This are the tags used for setting up something as required.
Shift From Hour <span class="req">*</span>
Shift From, Minute <span class="req">*</span>
AM/PM <span class="req">*</span>
Shift To Hour <span class="req">*</span>
Shift To, Minute: <span class="req">*</span>
AM/PM <span class="req">*</span>

Open in new window


Trying to figure out why are some passing thru w/o being filled in?
Capture.PNG
0
I am using the handlebars template in node.js. Currently, the thumbnail images from the database are displaying at a width and height of 70 which is specified in the code. See below. How can I allow the user to click on the image in handlebars and see a larger rendition of the photo?
The current images are too small to see but I would only like for them to be increased upon clicking them.

<img id="img" src="/uploads/{{photo_image}}" width="70" height="70">
0
Hi,

I have a sass mixin looking like this:
@mixin BannerTop($url, $height) {
  position: relative;
  height: $height;
  background-color: #000;

  &::before {
    content: " ";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.5;
    //background-image: url(../../Images/AdobeStock_27182189_Preview.jpeg);
    background-image: url($url);
    //background-color: rgba(0, 0, 0, 0.8);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    //background-size: 100%;
    height: $height;
  }

  &-TextBlock {
    z-index: 2;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;

    h3 {
      color: white;
      
      font-size: 4rem;
      font-family: $font-display;
      font-weight: 700;
      
      margin-bottom: 2rem;     
    }
  }
}

Open in new window


I then uses it like this:
  .TopBanner {
        @include BannerTop("../../Images/volvo_v90_490922.jpg", 50rem);
      }

Open in new window


My qustion is if it's possible to in someway load the background image dynamically (say from a db request)?

I would like to be able to use the same sass/css but have a different image depending on what id is loaded från the db.

Thanks for help!

Peter
0
H team i worked with DataTable its a tabular structure i wan to do the  same thing with div only how can i implement it .
0
i have a jsp page where i m uploading a file my requirement is that file should not be save in any folder once i click a upload button in a jsp page request go to
servlet where i want to read the file path only .
0
Microsoft Azure 2017
LVL 19
Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Hello i have a requirement where user pressed back button of the browser it should logout automatically my technology is asp.net mvc  how can i achieve it thanks in advance
0
I use vector map. and I hope to capture the selected US state (california) on click when California area is clicked, and then pop up a modal. so I can take the selected state (California) and develop some api call.

Do you know how to do that? Just capture the state and get modal up.



http://jvectormap.com/maps/countries/usa/
0
hi i am looking for onkeypress javascript code for <input> just want mask phone like (xxx)xxx-xxxx
0
popover moves slightly to the right when the first time user clicks popover button twice.

steps to reproduce:
1. Use link  https://jsfiddle.net/girinishantg/m1p75fbx/1/
2. click on popOver button, a popover appears, drag this to any location, let's say the end of the line.
3. click again popover button, the popover will disappear.
4. click on the popover button again, this time popover will appear but slightly to the right where the user left it earlier.

Expected Behaviour: It should appear exactly the same location where left earlier.
0
creating a file manager in coldfusion and having some troubling viewing the directory contents

Here is the code I am using

<div class="col-sm-3 sidenav">
<div class="panel panel-default">
    <div class="panel-heading">Folders</div>
    <div class="panel-body">
    	<div id="drivestree"></div>
    </div>
</div>

Open in new window



jqueryFile.cfm

<cfset drives = {}>
<cfset alphabet = "abcdefghijklmnopqrstuvwxyz">

<cfloop from="1" to="#len(alphabet)#" index="i">
	<cftry>
		<cfset thisdrive = mid(alphabet,i,1)>
		<cfset checkDrive = Application.fileManager.manager.getDirectories(path=thisdrive & ":\",addHasDirs=true,hidehidden=true)>
        <cfif checkDrive.directories.recordcount>
            <cfset drives[thisdrive] = checkDrive>
        </cfif>
		<cfcatch><!--- failed Silently ---></cfcatch>
	</cftry>
</cfloop>

<ul class="jqueryFileTree"<!---  style="display: none;" --->>
    <cfif not structisempty(drives)>
        <cfset drivelist = listsort(structkeylist(drives),"text","asc")>
        <cfoutput>
        <cfloop list="#drivelist#" item="d">
            <cftry> 
                <cfif drives[d].directories.recordcount> 
                    <li class="directory collapsed"><a href="##" rel="#URLDecode(d)#">#d#:\</a>
                    <ul>
                    <cfloop query="drives[d].directories">
                        <cfif type eq "dir">
                            <li class="directory collapsed"><a href="##" rel="#URLDecode(name)#/">#name#</a></li>
     

Open in new window

0
I need to change Add new Item to add new recognition for the list I am working on and also I need to change the title and web part is not giving me editing options.
I saw the aspx code for the views on the list and i see where there is a newItem parameter binding
<ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />
but I am hesitant to change that thinking there would be changes to every add new item list.
i know some forums are mentioning jscript and I have tried that, it doesn't work in 2016. Can someone please point to right direction?
Capture.PNG
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