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();
    }
  });

Select all 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,}/
      };

Select all 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?

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();
    }
  });

Select all 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!

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;
 

Select all Open in new window

…

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'
      }
    

Select all Open in new window

…

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'); 
});

Select all Open in new window

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';
    }

Select all Open in new window

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" 

Select all Open in new window

…

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:


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 

Select all Open in new window

…

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.' + 

Select all Open in new window

…

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.

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 =

Select all Open in new window

…