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

Hi Experts,
It is possible to delete all the  <li> items from a <ul> where the attribute is data-select-id="SelectState" using jQuery?

<div data-select-id="SelectState">
	<ul class="opts" style="display:none">
		<li> Test1 </li>
		<li> Test2 </li>
	</ul>
</div>

Open in new window


Thanks in advance!
0
Here's the code that's getting triggered by the "user-form-show" method:

$(window).on('user-form-show', function(e, userId, opts){
    // prep the modal
    $uModal.find('.loading').show();
    $uModal.find('.main').hide();

    // show the modal loading screen
    $.magnificPopup.open({
      alignTop: true,
      items: {
        src: $uModal, // can be a HTML string, jQuery object, or CSS selector
        type: 'inline'
      }
    });

    // clear the cached data
    data = {};

    // clear the form from any previous data
    clearForm();
           

    // load the data if a valid id is provided
    if (typeof userId != 'undefined' && userId != 'new') {
      loadFormData(userId);
    } else {
      // set the id for a new user
        loadedUserId = 'new';
        // load drag & drop members 
        teamDragula(userId);

        $form.find('#user-role').attr('data-user-id', loadedUserId);
      // force the password fields
      $form.find('.btn-change-password').replaceWith( $passwordForm.clone() );
      $form.find('.btn-cancel-password').closest('.col').remove();

      // show the form
      $uModal.find('.loading').hide();
      $uModal.find('.main').show();
    }
  });

Open in new window


The line that I'm wanting to understand is this:

$form.find('#user-role').attr('data-user-id', loadedUserId);

Earlier in the file, $uModal was defined like this:

var $uModal = $('#modal-user-form'),
      $form = $('#user-form'),
      $passwordButton = $form.find('.btn-change-password').clone(),
      $passwordForm = $form.find('.password-template').clone().removeClass('d-none'),
      data = [],
      loadedUserId = '',
      passwordRegex = {
        upper: /[A-Z]{1,}/,
        lower: /[a-z]{1,}/,
        number: /[0-9]{1,}/,
        special: /[\!\@\#\$\%\^\&\*]{1,}/,
        total: /.{8,}/
      };

Open in new window


When you follow the trail as far as the "user-form.html.twig," you find that the portion of code that I've got in bold is referring to this:

<select id="user-role" name="user[role]" class="form-control mdb-select md-form" required>
               {% if roles is not empty %}
                {% for role in roles %}                
                    <option value="{{role}}" {{role=='Sales Representative'?'selected="selected"':''}} >{{role}}</option>
                {% endfor %}
                {% endif %}
            </select>


My question is: Where is "data-user-id?"

I'm thinking that the referenced SELECT would have a "user-id" value attached to is and the ".attr('data-user-id', loadedUserId" code is populating that value with the "loadedUserId" value, yes?

What is "att('data-user-id', loaded.UserId)" doing?
0
This is an MVC 5 project. I am having a problem getting a second view to be shown from a parent view. My parent view is a purchase order which has line items. The line items are to be added by launching a second view from the parent view. Both views use the same controller but each has their own action method. I use the below JavaScript from the PurchaseOrder view to pass data to PurchaseOrderAddItem view (child view):

$(document).ready(function () {
        $('#PurchaseOrderLineItemAddId').click(function () {
            var aPurchaseOrderViewModel = @Html.Raw(Json.Encode(Model));    
            var selectedVendorText = $('#ddlvendors option:selected').text();
            var selectedVendorValue = $('#ddlvendors option:selected').val();  
            var LineItemReqJsonObj = {};

            LineItemReqJsonObj.PurchaseOrderId = aPurchaseOrderViewModel.PurchaseOrderId;
            LineItemReqJsonObj.VendorText = selectedVendorText;
            LineItemReqJsonObj.VendorValue = selectedVendorValue;

            var dataToPass = '{aLineItemReqJsonObj: ' + JSON.stringify(LineItemReqJsonObj) + '}';

                $.ajax(
                    {
                        type: "POST",
                        //data: '{ aPurchaseOrderViewModel: ' + JSON.stringify(aPurchaseOrderViewModel) + ' }',
                        //data: aPurchaseOrderViewModelStr,
                        data: dataToPass,
                        url: '@Url.Action("PurchaseOrderAddItem")',
            

Open in new window

0
Here's my code:

$(window).on('user-form-show', function(e, userId, opts){
    // prep the modal
    $uModal.find('.loading').show();
    $uModal.find('.main').hide();

    // show the modal loading screen
    $.magnificPopup.open({
      alignTop: true,
      items: {
        src: $uModal, // can be a HTML string, jQuery object, or CSS selector
        type: 'inline'
      }
    });

    // clear the cached data
    data = {};

    // clear the form from any previous data
    clearForm();
           

    // load the data if a valid id is provided
    if (typeof userId != 'undefined' && userId != 'new') {
      loadFormData(userId);
    } else {
      // set the id for a new user
        loadedUserId = 'new';
        // load drag & drop members 
        teamDragula(userId);

        $form.find('#user-role').attr('data-user-id', loadedUserId);
      // force the password fields
      $form.find('.btn-change-password').replaceWith( $passwordForm.clone() );
      $form.find('.btn-cancel-password').closest('.col').remove();

      // show the form
      $uModal.find('.loading').hide();
      $uModal.find('.main').show();
    }
  });

Open in new window


My question is this:

In the first line, you have this:

  $(window).on('user-form-show', function(e, userId, opts){

How needful is the "e" character?

From what I can gather, under the hood in every Event Handler, the "event object" is being passed into the function as an argument. I've seen this a lot with "event.preventDefault."

Thing is, how necessary is it? The reason I ask is because you don't see "e" all the time, and yet it seems like it's always there in the background even it if's not being coded as such.

Is that correct?

Is the event object (e) always assumed even if it's not being included as part of the syntax?

Could I just as easily write the above code as $(window).on('user-form-show', function(userId, opts)?

Thanks!
0
Hi Team,
 
I build a page where one drop down is there in drop down all weeks days are coming while selecting the date all days only enable in date picker . suppose we select Monday from drop down then in date picker  only all Mondays are enable to select other days are disable .

now my requirement is that in place of days we select month from drop down then only that particular month is enable on date picker other months are disable to select .


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<script>
$(document).ready(function ()
	    {
	        //datepicker
	        $("#txtstart_date").datepicker
	        ({
	            minDate:"dateToday",
	            dateFormat: 'dd-mm-yy',
	            changeMonth: true,
	            numberOfMonths: 1,
	            onClose: function (selectedDate) {
	                $("#txtend_date").datepicker("option", "minDate", selectedDate);
	            },
	            //Code to disable dates according to selection
	            beforeShowDay: filterDate
	        });
	    });
	    //By default no day selected in dropdown. So all the days will be 

Open in new window

0
Hi Experts


Could you point what's needed to change from video upload to image/photo upload on this view?

Accordingly to this code:

<div id='box-video' class='col-md-5 text-center'>

	<video controls style='width: 100%'>
		<source id='srcVitrine' src='' />
	</video>
	
	// Change to:
	<img controls style='width: 100%'>
		<source id='srcVitrine' src='' />
	</img>
	

	<div class='col-md-12 form-group'>
		<label for='titulo'>URL (Vídeo):</label>
		<div class="input-group">
			<input type='text' id='url' name='url' disabled class='form-control'/>
			<span class="input-group-btn">
				<button class="btn btn-primary" type="button" onclick='hotsite.vitrine.subirVideo();'><i class="fa fa-camera"></i></button>
			</span>
			<input type='file' id='file' name='file' style='display:none;'/>
		</div>
	</div>
</div>


<script>
  var jqXHRData;
  $(document).ready(function() {

    
    var pars = {
        _token:$('input[name="_token"]').val()
    };

    var resultImageUpload = function (data) {
        if (!data.result.erro) {
            localizacao = data.result.retorno.localizacao;
            $('#url').val(localizacao);
            $('#srcVitrine').attr('src', localizacao);
            
			
			// This runs
			$("#box-video video")[0].load();
			
			// This doesn't run
            $("#box-video img")[0].load();
					
            return false;
        } else {
          hotsite.openModalCustom("Erro",'Erro ao subir vídeo.', "Entendi", "error");
          return false;
 

Open in new window

0
I need to run a php file in the background by clicking a input type button
without navigating away from the page that the button is placed

The php file have the following headers (basically it will prompt a file generated download)
I have no information to post.

I also would like to know in the php file which prompts the download of the file, if I can save a copy of the file on the server at the same time? how would I do this ?
	// output headers so that the file is downloaded rather than displayed
	header('Content-type: text/csv');
	header('Content-Disposition: attachment; filename="demo.csv"');

	// do not cache the file
	header('Pragma: no-cache');
	header('Expires: 0');

Open in new window

0
Working my way through a block of code that contains some elements I'm not familiar with. This will actually be a string of several questions so feel free to weigh in however and whenever you like.

Here's the code my button is triggering:

    $('#btn-add-user').on('click', function () {
        $(window).trigger('user-form-show', ['new']);
    });

I traced that to this (I'm only including a portion of the code):

$(document).ready(function(){

    $("#chk-user-active").on('change', function () {
        $('#user-active').val(this.checked);        
    });
  var $uModal = $('#modal-user-form'),
      $form = $('#user-form'),
      $passwordButton = $form.find('.btn-change-password').clone(),
      $passwordForm = $form.find('.password-template').clone().removeClass('d-none'),
      data = [],
      loadedUserId = '',
      passwordRegex = {
        upper: /[A-Z]{1,}/,
        lower: /[a-z]{1,}/,
        number: /[0-9]{1,}/,
        special: /[\!\@\#\$\%\^\&\*]{1,}/,
        total: /.{8,}/
      };

  $form.find('.field-phone').mask('000-000-0000');

  $form.find('.password-template').remove();

  $(window).on('user-form-show', function(e, userId, opts){
    // prep the modal
    $uModal.find('.loading').show();
    $uModal.find('.main').hide();

    // show the modal loading screen
    $.magnificPopup.open({
      alignTop: true,
      items: {
        src: $uModal, // can be a HTML string, jQuery object, or CSS selector
        type: 'inline'
      }
    

Open in new window

0
I m sending an ajax call in below method after return the success message i want to clear the form in same page so form also get cleared and success
 message also print in jsp page please help me out on this thanx a ton in advance.
 
 
 
 $(document).ready(function() {
	$("#data").click(function(evt) {
		evt.preventDefault();
		 if(save()){
			$.ajax({
				url: "Test.jsp",
				type: "post",
				data: {
				pS:$('#pS').val(),
				pType:$('#pType').val(),
				pCode:$('#pCode').val(),
				mYear:$('#mYear').val(),
				pDate:$('#pdate').val(),
				ppDate:$('#ppdate').val(),
				bDate:$('#bdate').val()},
				success: function(responseFromServer) {
	            	$.each(responseFromServer, function(resultMessageKey,resultMessageValue) {	
	                    $('#content').html(resultMessageKey);
	                });
	             },
	            error: function() {
	                alert(" Ajax call Failed to Update Values into Database");
	            }
			});
		 }
		 else
			 {
			 
			 }
	});
});

Open in new window

0
I have a function that toggles a sub-menu when the parent is clicked.  This works fine.  However, if I click on another menu choice (parent) the sub-menu toggles open but the prior sub-menu that was toggled open stays open.  What I want is for each toggled sub-men closes if another parent is clicked so only one sub-menu is open at a time.

$("#menu-mobile .sub-menu").hide();
   
$('#menu-mobile').children().click(function(){
    $(this).children('.sub-menu').slideToggle('slow'); 
});

Open in new window

0
Hi Experts

Could you point why a Controller method code is subtly returning to a jquery ajax without running and returning OK to JS ?

Accordingly to:

Vitrine.prototype.salvar = function(){
    
  console.log ('JS salvar');
  
  $.ajax({
    url: '/vitrine/salvar',
    
    method: "POST",
    data: {
      _token: $('input[name="_token"]').val(),
      id: $('#id').val(),
      url: $('#url').val(),
      inicio: $('#inicio').val(),
      termino: $('#termino').val(),
      title: $('#title').val(),
      description: $('#description').val(),
      points: $('#points').val()
    },
    error:function(data){
      hotsite.openModalCustom("Erro", data.responseText, "Entendi", "error");
    },
    success: function(data){
      hotsite.openModalCustom("Sucesso ao salvar", data.retorno, "Entendi", "success");
      hotsite.closeModal('mEditor');
      //hotsite.vitrine.filtrar();
    }
  });
};

Open in new window


and Controller method:


 public function salvar(Request $request){
   
	 //Forcing an error
	 //aaa;
	
	
	// Otherwise subtly exit with no traces.
	info('xxx');
   
	dd('aaa');

	$id=$request->input('id');
	$url=$request->input('url');
	$inicio=$request->input('inicio');
	$termino=$request->input('termino');

	$titulo = $request->input('title');
	$descricao = $request->input('description');
	$pontuacao = $request->input('points');

	try{
		if($id != '' &&  $id > 0){
		  $vitrine = Vitrine::find($id);
		}

		if(empty($vitrine)){
		  $vitrine = new Vitrine();
		  $vitrine->created_at=new \DateTime();
		}
			
		$vitrine->title = $titulo;
		$vitrine->description = $descricao;
		$vitrine->points = CustomFuncs::brancoParaNulo($pontuacao);
		$vitrine->url = $url;
		$vitrine->validity_start = empty($inicio) ? null : CustomFuncs::formatarDataUS($inicio);
		$vitrine->validity_end = empty($inicio) ? null : CustomFuncs::formatarDataUS($termino);
		$vitrine->updated_at=new \DateTime();
		
		info($vitrine);
		
		
		$vitrine->save();

	} catch (\Exception $e) {
		return response()->json(new Resultado(true,'','Erro ao salvar o vídeo'), 400);
	}

	return response()->json(new Resultado(false,'','Vídeo cadastrado com sucesso'));

}

Open in new window



The forced error:

img015
Thanks in advance!
0
Below js code, everything is working except

document.getElementById("row_" + eventid).style.display = 'none';

When it <a></a> is clicked, I hope to delete or invisible on the selected <div></div>
Do you know what goes wrong?


 function AddQty(eventid,qty,price) {
        var qty_value = document.getElementById(qty).value;
        var price_value = document.getElementById(price).value;
        var eventid_value = document.getElementById(eventid).value;
        
        document.getElementById("qty").value = parseInt(document.getElementById("qty").value) + parseInt(qty_value);
        document.getElementById("totalamount").value = parseFloat(document.getElementById("totalamount").value) + parseFloat(price_value);

        document.getElementById("shoppingcart").innerHTML = document.getElementById("shoppingcart").innerHTML +
       "<div id='row_' " + eventid_value  + " class='col-fs-12'>" +
            eventid_value + " " + qty_value + " " + price_value + " " + "<a style='cursor: pointer;' onclick='Remove(" + eventid_value + ")'>x</a>";
        "</div>";
    }
    function Remove(eventid) {        
        alert('Hi ' + eventid);
        document.getElementById("row_" + eventid).style.display = 'none';
    }

Open in new window

0
I'm [new to / learning] react and so I'm experimenting with code samples that I find and trying to understand concepts within the language. Why does this work when the button is clicked:

import React, { useState } from 'react';


const Home = props => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  const manipulateSomeState = () => {
        setCount(() => (count + 1));
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={manipulateSomeState}>
        Click me
      </button>
    </div>
    );
}

export default Home;

Open in new window


But this does not work when the button is clicked:
import React, { useState } from 'react';


const Home = props => {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  const manipulateSomeState = () => {
        setCount({count: count + 1});
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={manipulateSomeState}>
        Click me
      </button>
    </div>
    );
}

export default Home;

Open in new window


If I can get an explanation in "laymen" (non technical) terms that would be great.  Everything is the same except the "manipulateSomeState" function within the functional component. For what its worth, when I look at the first version of the manipulateSomeState function (the one that breaks/doesn't work) it seems straight forward. In my mind I'm adding 1 to the count state variable. In the second version of manipulateSomeState (the version that works), it seems like I'm having to use an anonymous function to accomplish the same thing and it appears to me that this is more/overly complicated. What am I not understanding.



Thanks in advance.
0
Hey There,

I need a little help tweaking my script for determining a State based on a Phone Number areacode.

I have a form, which when you enter the phone number, a hidden field will be populated with the state.   The script is working if you enter the number in 111-111-1111 or 111111111 format, but if you do (111)-111-1111 or (111)111-1111 format, it displays none.  So How do i tweak this, so it will pull the state regardless of the format.  Website here - Website

form html
<div class="rounded-lp-form">
<div class="lp-form-header">
		<h1 style="text-align: center;">Schedule a demo</h1>
		<p style="text-align: center;"><span class="text-black">Already an existing customer?</span><br />
			<a href="https://buildertrend.com/company/contact-us/">Contact us here.</a>
		</p>
  </div>
  <form id="scedule-demo-lp-form" class="" action="https://go.buildertrend.com/l/464372/2020-02-04/7lw3vg" method="get">

<div>
    <input type="text" id="full_name" name="full_name" required placeholder="Full name" required/>
    <label for="full_name" class="hide-label">Full Name</label>
 </div>  
  <div>
    <input type="email" id="email" name="email" required placeholder="Email address" />
    <label for="email" class="hide-label">Email Address</label>
  </div>
  
<div>
	<input name="phone" id="phone" type="tel" placeholder="Phone number" required>
	<label for="phone" 

Open in new window

0
I have 4 videos and 4 buttons on screen. I want to be able to efficiently loop over each on to add various javascript functions.
My code currently looks like this:

html
        <div class="video-item">
          <video controls>
            <source src="videos/testvt.mp4" type="video/mp4">
          </video>
          <button>play</button>
          <div class="video-title">Title</div>
        </div>

Open in new window


javascript
  var videoitem = document.querySelectorAll('.video-item'), i;
  for (i = 0, length = videoitem.length; i < length; i++) {
    elem = videoitem[i];

    $(elem).click(function(){
      var elemButton = elem+" button";
      openFullscreen(elemButton)
    });


    $(elem + " video").on('ended', function(){
      this.webkitExitFullscreen();
    });

  }

Open in new window

0
Hi Experts


Could you point a way to enable/ disable an like icon depending on the user had clicked the icon before or not?

Accordingly with:

img004
The user has the right of click the "Like" of  a photo once and after that he coudn't do nothing else, the like icon must to be disabled.
If the user reenter the page the like icon for the photo that had received a "like" must to stay disabled, also, by using the user's id.

The actual view:

@extends('layouts.appinterno')

@section('content')

	<div class='row'>

	{{ csrf_field() }}
    <input type="hidden" id="hdnCurtiu" value="{{ $curtiu }}">

        <div class="col-md-12 col-sm-12">
               
                <section class="row">
               
                        @foreach($vitrinesX->chunk(3) as $row)
                        
                            @foreach($row as $vitrine)
                          
                               <div class="col-sm-12 col-md-4">
                               
                                    <div class="box-noticias">
                                       	<a href="javascript:void(0);" onclick='xxx.vitrine.abrirVitrine({{$vitrine->id}});' >
                	    				{{$vitrine->titulo}}
                	    			    </a>                    
                                    </div> 
                                    
                                   	<p id="like" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id 

Open in new window

0
Hi,

I'm creating a search page

1. on the page there is a multiselect dropdown list
2. I select some options from the list
3. I click on the submit button
4. after submitting the page my selection will get cleared out

How can I get my selection back once I click on the submit button?


 $('#SelectedVersion').multiselect({
            onInitialized: function (option, checked) {
                var dropdown = $('#SelectedVersion').siblings('.multiselect-container');
  
               //Here I want to reselect the options that I have already selected after submitting my form
               onInitialized: function (option, checked) {
                var values = [];
                var $SelectedOptions = $(this).find('option:selected');
                $SelectedOptions.each(function () {
                    values.push($(this).text());
                });
            },

            enableFiltering: true,
            buttonWidth: '350px',
            maxHeight: 200,
            enableCaseInsensitiveFiltering: true,
        }); 

Open in new window




<td>
                       @Html.DropDownListFor(m => m.SelectedVersion, new SelectList(Model.VersionList, "Value", "Text"), new { @multiple = "multiple" } )
                    </td>

Open in new window

0
HI Team,

i am executing below code its working fine when i change the date then check particular row check box  then submit. but it's not working when i clicked on check box first then change the date and submit . please tell me the solution of my problem thanx a ton in advance i m new in java script and jquery so please tell me particular solution on my code .


<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<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>
<script>
  
$(document).ready(function() {

	$(".date").datepicker({dateFormat:'dd/mm/yy'});
	$('.chkValues').on('click', function() {
		//get values of dates
		var array = [];
		var parent = $(this).closest('tr');
	    
	    // Now find all the child <inpu> elements with class "date"
	    var last = 0;
	    $('.date', parent).each(function(i,e) {
	      var dt = new Date(e.value.split("/").reverse().join("-"));
	      alert(dt);
	      console.log(dt.getTime());
	      if (dt.getTime() <= last) {
	        alert('Error: ' + e.id + ' has an invalid value');
	      }
	      last = dt.getTime();
	    });
		$row = $(this).data('row'); //row1, row2, row3 etc
		$('input.' + 

Open in new window

0
What is the best way to retrieve a variable list of text inputs and values and send via jQuery AJAX to MVC controller as a virtual ICollection on a parent object?

My markup will look something like this:  (but the number of inputs will be dynamic)

<div class="questionPanel">

.<!-- ..other markup and elements here  -->

<input name="item.answerChoiceText" class="form-control txtAnswerChoice text-box single-line" type="text" value="Red" >
<input name="item.answerChoiceText" class="form-control txtAnswerChoice text-box single-line" type="text" value="Blue" >
<input name="item.answerChoiceText" class="form-control txtAnswerChoice text-box single-line" type="text" value="Green" >
</div>

Open in new window


Then my jQuery AJAX call:  ( $(this) refers to the .questionPanel div)

$.ajax({
	type: 'POST',
	cache: false,
	async: false,
	url: '/Question/Insert',
	dataType: 'json',
	data: {
		questionId: $(this).attr('questionid'),
		questionText: $(this).find('.txtQuestionText').val(),
		questionType: $(this).find('.selQuestionType').val(),N
		showCommentsBox: $(this).find('.ckShowCommentsBox').prop('checked'),
		answersRequired: $(this).find('.txtAnswersRequired').val(),
		isActive: $(this).css('display') == 'none' ? false : true,
		order: $(this).css('display') == 'none' ? 0 : orderCount,
		surveyId: $('#surveyBuilderWrapper').attr('surveyid'),
		AnswerChoice: ????????	NEED TO SEND LIST HERE  ??????
	},
	success: function (result) {
	},
	error: function (xhr, ajaxOptions, error) {
	}

Open in new window


And my MVC controller is expecting a Question object, which contains a collection of Answer Choices:

public JsonResult Insert(Question question, int order, int surveyId)
{
        // process the insert here..
}


public partial class Question
{
	[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2214:DoNotCallOverridableMethodsInConstructors")]
	public Question()
	{
		AnswerChoice = new HashSet<AnswerChoice>();
	}

	public int questionId { get; set; }

	[Required]
	[StringLength(500)]
	public string questionText { get; set; }

	public int questionType { get; set; }

	public bool showCommentsBox { get; set; }

	public int? answersRequired { get; set; }

	public bool isActive { get; set; }

	[System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Usage", "CA2227:CollectionPropertiesShouldBeReadOnly")]
	public virtual ICollection<AnswerChoice> AnswerChoice { get; set; }

}

Open in new window


Thanks!
0
I have a search button that shows a magnifying glass icon. When the user clicks the search button, I need to replace the magnifying glass icon (or it and the "Search" text, which ever is easiest) with a spinner/spinning .gif that I've been given. How can I do this with jQuery/javascript or which ever way would be best.
0
Do u know any way to develop something like DocuSign? Especially we can drag and drop for signature request ?
0
Having a problem with one of the functions in my form.js file.  For some reason it breaks alot of js functionality on the site, such as menus, columns etc.

forms.js
jQuery(document).ready(setupForms);

function setupForms(){
	
	if(jQuery(".wp-block-forms").size() === 0) return false;
	
	jQuery('#user-category').on('change', function(){
		
		var current = jQuery(this);
		var value = current.val();
		var category = jQuery('option[value="'+value+'"]', current).attr('data-cat');
		var primaryProject = jQuery('#primary-project');
		
		primaryProject.val(jQuery("option:first", primaryProject).val());

		jQuery('option.active', primaryProject).removeClass('active');
		jQuery('option[data-cat="'+category+'"]', primaryProject).addClass('active');
		
	});
	
	if(jQuery("#combine-name").size() === 0) return false;
	
	var nameFields = jQuery('#first-name, #last-name');
	
	nameFields.on('keyup', function(){
		jQuery('#combine-name').val(jQuery('#first-name').val() + ' ' + jQuery('#last-name').val());
	});
	
	jQuery('#full_name').on('blur', function() {
		var result = jQuery('#full_name').val().split(/(?<=^\S+)\s/);
	  jQuery('#first-name').val(result[0]);
	  jQuery('#last-name').val(result[1]);
	});

	//Function for passing State value through hidden field, based on phone number area code.
	jQuery('#phone').on('blur', function () {
        var pe = jQuery(this);
        var pNumber = pe.val();
        if (pNumber.length < 3) {
            return;
        }

        var areaCode =

Open in new window

0
Using jQuery or javascript, I need to toggle my spinner image. A button is clicked and on the back end a search is performed. Once that search starts I want to show my spinner image. When that search is finished I want to hid my spinner image. How do I do this?

my HTML
        <div class="divSpinner" id="divSpinner">
            <asp:Image ID="med_spinner" class="spinner" align="center" src="../images/medium_spinner.gif" runat="server" Visible="false" />
        </div>

Open in new window

0
Do you see anything wrong in javascript part?

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <br />
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h4 class="headline margin-top-0 margin-bottom-30">Tabs Style 2</h4>
            <div class="style-2">
                <!-- Tabs Navigation -->
                <ul class="tabs-nav">
                    @foreach (Domain.Event eItem in rv.EventTypeList())
                    {
                        if (eventCount == 0)
                        {
                            showActive = "Active";
                        }
                        <li class="@showActive"><a onclick="ShowSection('@eItem.EventType')"><i class="@eItem.EventIcon"></i> @eItem.EventType (@eItem.TotalCountEvent)</a></li>
                        eventCount = eventCount + 1;
                    }
                </ul>
                <!-- Tabs Content -->
                <div class="tabs-container" id="tabs-container" style="display:block;">
                    <div style="display:block;" class="tab-content">
                     <p id="tabs-data"></p>
                    </div>                    
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <br /><br />
        </div>
    </div>
</div> 
<script>
    function ShowSection(eventType)
    {
        alert(eventType);
        

Open in new window

0
Hi Experts,

I have the following code to avoid users entering "N/A" on a required field.

Now would like to add restriction of saving just space characters.

Thanks

$(":input[required]:visible").on("change", function() {
    var id = $(this).attr("id");
    var isName = id.indexOf("Last_Name")>0 || id.indexOf("First_Name")>0;
    var rgx =  isName ? /.*?N.*\/.*A/gi : /.*?N.*?A/gi;
    if($(this).val().length<6 && rgx.test($(this).val()) ) {
        $(this).val("");
        alert("N/A is not a valid input");
        var that = $(this);
        setTimeout(function(){
            that.focus();
        },350);
    }
});

Open in new window

0

jQuery

17K

Solutions

5K

Contributors

jQuery (Core) is a cross-browser JavaScript library that provides abstractions for common client-side tasks such as Document Object Model (DOM) traversal, DOM manipulation, event handling, animation and Ajax. jQuery also provides a platform to create plugins that extend jQuery's capabilities beyond those already provided by the library.

Related Topics