jQuery

16K

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'm wanting to show a .gif while some processing goes on in the background, but I'm not able to get it to show, not even sure if it will 'animate', but I'm gonna hope for the best, once I can get it to show.

In my master page I have this:

    <style type="text/css">
        .lnkBtnTFBlue {
            display: none;
        }

        .LockOff {
            display: none;
            visibility: hidden;
        }

        .LockOn {
            font: arial;
            font-size: xx-large;
            font-weight: bolder;
            display: block;
            visibility: visible;
            position: absolute;
            z-index: 50000;
            top: 0px;
            left: 0px;
            width: 105%;
            height: 105%;
            background-color: #CCC;
            text-align: center;
            padding-top: 20%;
            filter: alpha(opacity=75);
            opacity: 1.5;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function (jQuery) {
            function LockScreen(str) {
                var lock = document.getElementById('LockPane');
                if (lock)
                    lock.className = 'LockOn';

                if (str != '') {
                    lock.innerHTML = str;
                }
            }
        });
</script>
.
.
.
    </form>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/response.min.js"></script>
    

Open in new window

0
Free Tool: IP Lookup
LVL 10
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

I have put 2 tabs into a bootstrap modal, one for selecting images and one for uploading images with dropzone. The image uploads but it doesn't display correctly and the standard progress bar never shows either. (see attached image as reference) I did notice when playing around that the issue may be that the drop zone form is within another form but I am not 100% sure.

drop zone
I tried to use a div instead and call the drop zone uploader with jQuery but that didn't make a difference.

<div class="row">
	<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
		<div class="form-wrapper clearfix">
			<form class="form-contact" id="accom-form">
				<div class="inputs-wrapper">
					<select name="category">
						<option value="" selected>Select Type</option>
						<option value="Option1">Option1</option>
						<option value="Option2">Option2</option>
					</select>
					<input type="text" placeholder="Name" name="name">
					<textarea name="description" rows="9" placeholder="Description"></textarea>
				</div>
				<input type="submit" value="Add" id="add-accom">
				<button type="button" class="btn btn-primary btn-filled select-images" data-toggle="modal" data-target="#gallery">Select Images</button>
				<input type="hidden" name="form_token" id="form_token" value="<?php echo make_form_token(); ?>">
				<div class="submitting"></div>
				<div class="form-success"></div>
				<div class="form-error"></div>
				<div class="thumbs"></div>
				

Open in new window

0
I the footer of my site I want to add a function that loads a script if the body has a specific class.
<script>
if($("body").hasClass("product")) {
 load  <script src="/js/product.js"></script>
}

Open in new window


I'm not 100% sure what the syntax is
0
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>

    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
           
            $(".monthPicker").datepicker({
                dateFormat: 'MM yy',
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,

                onClose: function (dateText, inst) {
                    var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                    var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                    $(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
                }
            });

            $(".monthPicker").focus(function () {
                $(".ui-datepicker-calendar").hide();
                $("#ui-datepicker-div").position({
                    my: "center top",
                    at: "center bottom",
                    of: $(this)
                });
            });

            $(function () {
                $('.monthPicker').live('click', function () {
                    $(this).datepicker({
                        …
0
I have a page that is supposed to be categorized by sections.  My data is coming from a SharePoint list that has about 14 columns.  Each category needs to display on the page with associated items right beneath it.  Each category is a heading with a colspan=14.  As I loop through my items, I am able to successfully append items to the correct category but they take on the colspan instead of the heading of the 14 columns.  See below

by categoryThe data looks concatenated together instead being in their corresponding column.

Here's the code:
for(var i =0; i < data.d.results.length; i++) 
                                {              
                                                headingName = data.d.results[i].ContractType;
                                                //alert(headingName);
                                                if (typeArray.indexOf(headingName) === -1){
                                                                typeArray.push(headingName);
                                                                //console.log(typeArray);
                                                                
                                                                contractHeadHtml = "<tr><td colspan='14' id='" + headingName + "' style='background-color:#eeeeee'><b>" + headingName + "</b></td></tr>";
                                                                console.dir(contractHeadHtml);
                                 

Open in new window

0
I have some jQuery that does exactly what I want but only if I click a button. If I try to get it to work upon document ready it doesn't? Is there an obvious reason for this?

Here is the code for clicking the button.

   
$( ".select-images" ).on("click", function() {
    	$( ".thumb-wrapper" ).each(function() {
    			var picNames = $(this).data("name");
    			$( 'input[data-name="'+ picNames + '"]' ).prop("checked", true);		
    	});
    });	

Open in new window

And code without:

   
 $(function () {
    		$( ".thumb-wrapper" ).each(function() {
    		var picNames = $(this).data("name");
    		$( 'input[data-name="'+ picNames + '"]' ).prop("checked", true);
    	});			
    });

Open in new window

0
Hello,

I have a url and I would like to encrypt or encode one of the parameters and also be able to decrypt it using javaScript.  Here's the situation.
I have a form that has a save and submit button.  If the form is saved, there's a link on another page where the url is link so (http://mypage.com?status='save')

I don't want the user's playing around with the value ('save'), so I wan to scramble it into something else and then in my code have the ability to unscramble it so I can run my conditional based on 'save'.

Thanks for any help you can provide.
0
I am using the code below to limit a text box to letters and dashes. Can someone tell me what to add to the regular expression to make it also allow spaces?

    $('.LetterDash').on('keydown keypress keyup paste input', function () {
		$(this).val($(this).val().replace(/[^a-z\-]/gi, ''));
		return true;
	});

Open in new window

0
Hi , I am trying to Wrap the div with a link using Jquery. I have tried using the below code but it seems not to be working.

$('div.wpsl-search-btn-wrap::after').each(function() {
  var link = $(this).html();
  $(this).contents().wrap('<a href="http://nixnine.com.au/janome/find-a-dealer/"></a>');
});

Open in new window


how can I make this work in the following page, The button was added as Content using ::after. but haven't been able to figure out the link part... can this be using Javascript not Jquery

http://nixnine.com.au/janome/
get-sample-link.png
0
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
 

  <script type="text/javascript">
    $(document).ready(function() {
        resizeContent();
    $('#example').DataTable( {
        // "pagingType": "list-box",
        "dom": '<"top"il>rt<"top"f><"clear">',
        "scrollY": true,
        "scrollX": true,
        "searching":false


    });
    
    $(".glyphicon").click(function(){
      $(this).toggleClass('glyphicon-plus  glyphicon-minus')
      $('.panel-body').toggle();
    });
    $(window).resize(function(){
            resizeContent();
        });

} );
    function resizeContent(){
  var mainwindow = $(window).height();
  var header  = $('.panel-body').outerHeight();
  var oxynet  = mainwindow - header;

  $(".dataTables_scrollBody").css("height", oxynet  - 190 + "px");
  

   
}
  </script>
  <style type="text/css">
    table{
      margin-bottom: 0px!important;
    }
    table th , td{
      

Open in new window

0
Technology Partners: We Want Your Opinion!
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

I am using the JS validate plugin to validate a form.  However, I am validating only sections of the form at a time.  I'm using a next and previous button to move through the form.
My first validation works but the second section does not. It sees it as valid and runs the next function.   Any clues will be greatly appreciated
$(function() {
	$.validator.setDefaults({
		errorClass: 'form_error'
	});
	$('#business_info_next').click(function() {
 var businessValidate = $("#sole-proprietor");
		businessValidate.validate({
			rules: {
				trade_name_doing_business_as: {
					required: true,
                                        minlength:1,
					maxlength: 256
				},
				address: {
					required: true,
					minlength: 1,
					maxlength: 150
				},
				city: {
					required: true,
					minlength: 1,
					maxlength: 36
				},
				state: {
					required: true
				},
				zip_code: {
					required: true,
					number: true,
					minlength: 5,
					maxlength: 5
				},
				county: {
					required: true,
					maxlength: 36
				},
				phone_number: {
					required: true,
					phoneUS: true,
					maxlength: 14
				},
				mailing_address: {
					required: function() {
						if ($("input[type='radio'][name='would_you_like_documents_sent_to_a_different_address']:checked").val() == "Yes") {
							return true;
						} else {
							return false;
						}
					},
					minlength: 1,
					maxlength: 150
				},
				mailing_city: {
					required: function() {
						if 

Open in new window

0
Can anyone tell me where the domain name checker function is located in WHMCS and what its called?? I just want to add a jQuery function to it to make the page scroll down to the results.

Screen-Shot-2017-10-15-at-18.16.39.png
Here is the url : https://crazyhost.co.uk/account/cart.php?a=add&pid=1
0
We have always linked CRM with Sharepoint. Currently we have a CRM 2013 version that uses an iframe link to display documents related to a contact or an account.

This is the jquery in the container.

function Form_ontab()
{
if ((Xrm.Page.ui.getFormType() == 2 || Xrm.Page.ui.getFormType() == 3 || Xrm.Page.ui.getFormType() == 4) && Xrm.Page.getAttribute("new_accountidentity").getValue() != null)
 {
      var Iframe = Xrm.Page.ui.controls.get("IFRAME_docs");
      var Url  = Iframe.getSrc();
Iframe.setSrc('http://CrmServer/ssp/admin/Accounts/Forms/AllItems.aspx?RootFolder=/ssp/admin/Accounts/' + Xrm.Page.getAttribute("new_accountidentity").getValue());
}
}

function Form_onload()
{
Xrm.Page.ui.tabs.get("Documents").setDisplayState('collapsed');
}


My question is - when we move to CRM 2016 with Sharepoint 2016 will we still use this method or is there an integration between the two systems that will map previous contacts/accounts with their relevant files.

If the above is the only way to keep the docs with the contacts/accounts, how do I enable the iframe to show in CRM. At the moment, i am getting this message.

This content cannot be displayed in a frame
To help protect the security of information you enter into this website, the publisher of this content does not allow it to be displayed in a frame.
 
I have enable the address in HTML Field Security in sharepoint and try to add in
<WebPartPages:AllowFraming runat="server" /> to the master …
0
I'm guessing this mobile menu isn't working because of SSL. But the bootstrap CDM I'm linking to is https.

Any ideas? The URL is consolidatedutilities.com.
0
Hi guys,

I am having some trouble with my jQuery scroll function, Basically it works however, Only after the second time you click the button

You can see an example here : https://crazyhost.co.uk/account/cart.php?a=add&pid=1

I want it to start the domain name search and scroll down at the same time on the 1st click.

I am using WHMCS so Im not 100% sure if its calling the domain name check function on the 1st click then the scroll on the second click??

any suggestions is highly appreciated, Thanks.
0
I want to add html to a page before and after certain div's.
<script>
$(document).ready(function () {
    $("#personal_information").before("<div class='personal-info-cont'>");
    $(".email_text").after("<div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</div></div>");

//  AND I HAVE TRIED

 $("<div class='personal-info-cont'>").insertBefore("#personal_information");
    $("<div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</div></div>").insertAfter(".email_text");

Open in new window


As you can see I added the closing div after: $(".email_text").after
But that does not work.  <div class='personal-info-cont'></div> automatically closes itself when I do it this way.  
And The closing div here ($(".email_text").after("<div class='suffix_text_wccpf_fields'><button id='personal_info_next' type='button'>NEXT</div></div>");) Does not show up.
I want to surround a few fields on a form with a div that I can hide.
0
Using Angular alone, I have trouble setting the "left" and the "top" for the following image tag. But you can see I am successfully updating  the src value with a variable called "id."

 template: `<img id="#PuzzePiece{{ id }}" style="left:10px; top:10px; position:absolute; width:100px; height:100px;"
                  src="../../../assets/images/PuzzleCompleted_{{ id+1 }}.gif"/>`
})

So I am trying to use jquery with no luck. I am just doing a test, trying to get left and top set to 100. I verified the jquery is correct.

The page thrown no errors so I assume I installed jquery correctly.


  ngOnInit() {
    this.id = this.data.id;    
    this.updateImageCoordinates();
  }

  updateImageCoordinates()
  {
    var imageId = "#PuzzlePiece" + this.id.toString();
    $(imageId).css({"left":100,"top":100});
  }
 
What am I missing?

Thanks
0
I was wondering if someone knows a script or could help get me started with a script (jquery, jquery mobile, javascript, CSS or combination) that simulate what the attachment shows. Basically, if they select an item to order it should appear in one window and the items to select from should be in the other window and some sort of animation should indicate that is happening. It is a phone interface but the click event should be able to make it useful from a regular web window. Thank  you.
sliding-screen-shot-666-.png
0
Scenario:
<form id="a">
Form collecting data (Name, Email, Address)
Submitting to Firebase
</form>

<form id="b">
Upload field to send file to Dropbox
</form>

Using:
Jquery, Bootstrap
Firebase

Not tied to any of these if suggested to change.


1. Added Form with fields ( in a <form> ) container
2. click submit to add to firebase
This works

3. Added a second <form> to hold the upload control
4. Added javascript to upload to dropbox
5. Has a "add files" button to add the files (javascript also located in main.js)
This does not work.  No errors, just does not fire. No console responses either.

I'm thinking maybe they need to be combined into 1 <form>??  Partial code below.

HTML for uploader
<section class="container main">

    <form onSubmit="return uploadFile()">
        <input type="file" id="file-upload" />
        <button type="submit">Add Files</button>
    </form>

    <!-- A place to show the status of the upload -->
    <h2 id="results"></h2>
</section>
            </div>
        </div>
    </div>
    <script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
    <script src="main.js"></script>

Open in new window


Javascript for uploader
function uploadFile() {
    var ACCESS_TOKEN = 'abababababTHISISAFAKEACCESSTOKENababababababab';
    var dbx = new Dropbox({
        accessToken: ACCESS_TOKEN
    });
    var fileInput = document.getElementById('file-upload');
    var file = fileInput.files[0];
    dbx.filesUpload({
            path: '/testLFL' + file.name,
            contents: file
        })
        .then(function (response) {
            var results = document.getElementById('results');
            results.appendChild(document.createTextNode('File uploaded!'));
            console.log(response);
        })
        .catch(function (error) {
            console.error(error);
        });
        
    return false;
}

Open in new window

0
How to Use the Help Bell
LVL 10
How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

when I update this:

constructor()
{
}
 
to be this:

constructor(public _id:Number, public _X:Number, public _Y:Number)
{
}

I get the attached error:

error
and the page fails to load.

Clearly, the declaration of PuzzlePieceComponent in the app.module.ts Module is setting up the expectation for a version with no parameters. How do I et around this?

Are these params needed if I use:

  @Input() id:Number;
  @Input() X:Number;
  @Input() Y:Number;

Thanks.
0
When i am going to open POS on Odoo 11,it showing an error:

point_of_sale.assets.js:124 TypeError: url.indexOf is not a function
    at Object.loaded (point_of_sale.assets.js:465)
    at Object.<anonymous> (point_of_sale.assets.js:124)
    at Object.<anonymous> (web.assets_common.js:802)
    at fire (web.assets_common.js:796)
    at Object.fireWith [as resolveWith] (web.assets_common.js:801)
    at Object.<anonymous> (web.assets_common.js:802)
    at fire (web.assets_common.js:796)
    at Object.fireWith [as resolveWith] (web.assets_common.js:801)
    at done (web.assets_common.js:1192)
    at XMLHttpRequest.callback (web.assets_common.js:1212)

How to solve this problem?
0
I have a simple form where a user fills in a few text fields. There is also a button which when pressed, launches a modal with images in it. The user can select multiple images and then close the modal. The image names are stored with HTML 5 local storage.

The user should be able to then submit the form with the text fields inserting into one database table, and the image names inserted into another table. The issue I am having is with the foreach loop when inserting the image names. I think that the issue may be the way in which the image names are sent via ajax and the format in which they are sent.

This code displays the images and after selecting and clicking the submit button for the image modal, the names are stored in local storage and outputted on the screen.

$(function () {
        $.get('t2637.php', function (resp) {
            $('#gallery').html(resp);
        });
        $('#gallery').on('click', 'img-box', function (i, e) {
            $(e).toggleClass('selected');
        });
        $(".btn-danger").on("click", function (e) {
            e.preventDefault();
            var form = $("#imgs").serialize();
            $.ajax({
                    url: 'reflect.php',
                    type: 'POST',
                    data: form,
                })
                .done(function (data) {
                    localStorage.setItem("picnames", data);
                    $("#filenames").empty().append(localStorage.getItem("picnames"));
                

Open in new window

0
I'd like to use jQuery input mask to do this if possible. I'd like to limit a text box to only allow letters and dashes, and deny all other characters and numbers. Can anyone assist?
0
I have mvc app and when the page is load,
I want to populate the list of state e.g. California (CA) to the code <select> below.
How can I get the list from MVC Controller to the front end.




 <div class="form-group">
                            <label class="col-sm-4 control-label">Bond State</label>
                            <div class="col-sm-8">
                                <select class="select2" id="bondState" name="bondState" onchange="fnSaveSingleData(this.name,'1')" data-placeholder="Choose Bond State...">
                                    <option value=""></option>
                                    <option value="CA">California(CA)</option>
                                    <option value="TX">Texas(TX)</option>
                                    <option value="FL">Florida(FL)</option>
                                </select>
                            </div>
                        </div>

Open in new window

0
I have the text and I am trying to show/hide answers using jquery /javascript

<div class="cushycms" title="Body Text">
<p class="question">Q: How old do I have to be to take driver education in Maryland?</p>
<p>15 years old.</p>
<p class="question">Q: Do I need to have a learner's permit to take driver education in Maryland?</p>
<p>"As of October 1, 2008, MVA Regulations allow students who do not yet possess a Learner's Permit to complete the 30 hours of in-class instruction, but require students to have a Maryland Learner's Permit to participate in the 6 hours of behind-the-wheel training."</p>
</div>

Open in new window


What i want is to show questions and then if somebody clicks on the question or may be the plus sign to show the answer

Here is my attempt:

 $('.cushycms').each(function(){
			 	var $this = $(this);
				if ($( this ).is( ".question" )){
					$this.closest('p').fadeOut();	
				}
					
				
			 })

Open in new window

0

jQuery

16K

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