plugin development – How to override core/paragraph onChange handler

Below is the code, in this case it replacing the original core/paragraph with RichText and removes the original core/paragraph setting panel.
How can I override only onChange handler of core/paragraph block? Thanks in advance.

var withInspectorControls = wp.compose.createHigherOrderComponent( function (BlockEdit) {
        return function ( props ) {
            if(props.name !== 'core/paragraph'){
                return el( BlockEdit, props );
            }
            var blockProps = wp.blockEditor.useBlockProps({style: blockStyle});
            return wp.element.createElement( wp.blockEditor.RichText, Object.assign( blockProps, {
                tagName: 'p',
                value: props.attributes.content,
                onChange: function( content ) {
                    props.setAttributes( { content: content } );
                    var contentLength = String(content).length;
                    console.log(contentLength);
                    props.setAttributes({className: ''});
                    if(contentLength > 23){
                        props.setAttributes({className: 'text-orange'});
                    }
                    if(contentLength > 26) props.setAttributes({className: 'text-red'});
                }
            } ) );
            console.log(wp.element);
            /*return el(
                wp.element.Fragment,
                {},
                el( BlockEdit, props ),
                el(
                    wp.blockEditor.InspectorControls,
                    {},
                    el( wp.components.PanelBody, {}, 'My custom control' )
                )
            );*/
        };
    },
    'withInspectorControls' );
    
    wp.hooks.addFilter(
        'editor.BlockEdit',
        'my-plugin/with-inspector-controls',
        withInspectorControls
    );

mysql – como enviar el valor de varias variables onchange varios selects por ajax a un archivo php para hacer un consulta y mostrar los datos en un select

es decir que varie y que cambie dependiendo de la seleccion de los selects si cambia uno que filtre la condicion que si cambia a otro que lo filtre y asi etc.. he intentado enviando las variables del valor onchange de los selects por ajax a un archivo php hacer la consulta y mostrar pero solo se cumple con una variable
este el codigo de la conexion

mysql = new mysqli(Constantes::HOST, Constantes::USER, Constantes::PASSWORD, $bd);
mysqli_set_charset($this->mysql, “utf8”);
return $this->mysql;

}

public function consulta($query)
{
$i = 0;
$contenedor = array();
$result = mysqli_query($this->mysql, $query) or die(“Error en la consulta: $query “.mysqli_error());

while($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$contenedor($i) = $row;
$i++;
}

return $contenedor;
}

public function actualizacion($query)
{
mysqli_query($this->mysql, $query) or die(“Error en la consulta: $query “.mysqli_error());
}

public function desconectarDB()
{
mysqli_close($this->mysql);
}

}

asi muestro los selects principales

Departamento

Seleccione
conectarBD();
$consulta = “SELECT id_departamento,departamento FROM departamentos”;
$rst1 = $conf->consulta($consulta);
for($i = 0; $i ‘.$rst1($i)(“departamento”).”;
}
$conf->desconectarDB();
?>

                </select>
                <br>

asi hago el siguiente select junto la funcion ajax para que carguen los municipios acorde al departamento
Municipio

                <select id="id_municipio" name="municipio" class="select-css" style="width:190px;">
                    <option value="0">Seleccione</option>
                </select>
                <!--funcion ajax para traer el municipio acorde al departamento-->
                <script>
                     $(document).ready(function() {
                    var municipio = $('#id_municipio');
                         $('#id_departamento').change(function() {
                             var id_departamento = $(this).val();
                            $.ajax({
                                   data: {
                                      id_departamento: id_departamento
                                },
                                    dataType: 'html',
                                   type: 'POST',
                                   url: '../../getmunicipio.php',
                               }).done(function(data) {
                                   municipio.html(data);
                               });
                          });
                       });
                </script>



 

trigger for onChange on add new row only

I want the trigger which work for ‘add new row’ only, but not other edit function. Right now the changeType of the onChange are Edit(include add new row), INSERT_ROW (but not add new row), etc., which is strange. Since onEdit is not including ‘add new row’, so we need to use onChange. But when in onChange it defines the ‘add new row’ as ‘EDIT’.
So it makes a mess, since it will trigger everytime people edit anything, not just adding the new row.

google sheets – How to trigger onChange trigger on inserts only

I am trying to create a trigger that sends emails when lines are appended or inserted to a sheet. The problem I have is that the python script that is connected to the google sheet purges sheet “new_strikes” then inserts new information in the same Google sheet. I have a onChange trigger like so:

function trigFunc(e){
  var activeSheet = e.source.getActiveSheet();
  if(activeSheet.getName() != 'new_strikes') return;
  Utilities.sleep(30);
  sendEmail();
}

The problem is when I purge then insert data into this sheet, the script runs twice–once for the purge and once for the edit. Since the trigger sends an email, I get two emails. How do I modify the code or trigger so that it only tracks the insertion of data and therefore sends one email?

javascript – Onchange behavior of Safari input type=”date”

I have a 700-line HTML/JavaScript page that, among other things, validates dates. It works on Chrome, Edge, and Firefox, and fails on iOS Safari 14.4 because the change event on input type="date" fires before the user makes a selection. A mostly-minimal example is this:

<form name="test" >
<input type="date" name="date1" id="date1"><br>
<br>
</form>
<button id="ckValue">Check Value</button>
<script type="text/javascript">
document.getElementById("date1").addEventListener("change",dtChange);
document.getElementById("ckValue").addEventListener("click",getValue);
function dtChange(evt) {
    var val=document.getElementById("date1").value;
    alert('Change event signaled; value='+val);
}
function getValue() {
    var val=document.getElementById("date1").value;
    alert("Value of date ="+val);
}
</script>

It’s in a fiddle here: https://jsfiddle.net/1jnqf5aL/1/

In this example run on Safari, when the form is initially loaded and the date item is touched/tapped, the change event fires immediately and the value of the input item is the current date. My application detects the change event and emits a “Departure date must be in the future” error message before the user has had an opportunity to select a date.

With other browsers, e.g. Chrome, Edge, Firefox, the change event does not fire until the user has selected a date in the calendar form.

I can make Safari behave, sort-of, by providing an initial value= attribute on the input element where the value is the current date in ISO 8601 format. The trouble with that is, the current date is not a valid date in this application, so I don’t want to show it to the user of the application. Browser sniffing will fail if/when Safari is changed to behave similarly to other browsers.

My question: How can I accommodate, or “program around” this behavior of Safari without browser sniffing? Or, have I missed something obvious and fundamental?

php – problema pattern e onchange alguém me ajduar

<input type="text" id="register_username" name="register_username" pattern = "/^S+w{12,32}/" onchange="this.setCustomValidity(this.validity.patternMismatch ? 'Ao escolher um username para seu perfil não use espaço ou caractere especial.' : ''); if(this.checkValidity()) form.confirmUsername.pattern = this.value;" class="form-control" placeholder="<?php echo $this->lang->line('lang_txt_username'); ?>" required>

https://i.stack.imgur.com/2YZtH.png

javascript – Añadir valor de input a un array en React onChange

Estoy creando una herramienta tipo cotizador y shopping cart que dibuja una tabla con lo que se va agregando utilizando un contexto de Shopping Cart y este arreglo se exporta a un Excel usando ExcelJS y todo anda perfecto en la exportación del Excel, pero debo agregar un campo de Descuento a la hoja de cálculo que viene de un input que el usuario puede modificar desde el carrito de compras. Mi problema es que no sé cómo agregar ese valor del input al arreglo del Excel en el onChange del input. La tabla del carrito se dibuja de esta manera:

const cartItemsRutas =()=>{
    return (
        <div>
        <MostrarInformacionDeRutaSeparado />
        <IonRow style={{textAlign:"center"}} >
            {ItemsRutas && ItemsRutas.map((prod)=>(
            <IonCard style={{width:"100%",textAlign:"center"}} key={"rutas_"+String(RutasNum++)}>  
                <IonRow>
                    <IonCol size="12" size-Xs="10" sizeMd="10" sizeLg="1" sizeXl="2" style={{textAlign:"center"}}>
                        <h2>{prod.nombre}</h2>
                    </IonCol>
                    <IonCol size="12" size-Xs="10" sizeMd="10" sizeLg="1" sizeXl="1" style={{textAlign:"center"}}>
                        <InputText
                        type="number"
                        value={prod.cantidad}
                        required={true}
                        onChange={e=>{
                            prod.cantidad=e.target("value");
                            setCantR(e.target("value"));
                            UpdateCantidaditemsRutas2(e);
                        }
                        }
                        style={{width: "80%", border:"0px"}}
                        >
                        </InputText>
                    </IonCol>
                    <IonCol size="12" size-Xs="10" sizeMd="10" sizeLg="2" sizeXl="2" style={{textAlign:"center"}}>
                        <InputText
                            type="date"
                            value={prod.fecha_inicio}
                            required={true}
                            onChange={e=>{
                                    prod.fecha_inicio=e.target("value");
                                    setFecha_inicio_rutas(e.target("value"));
                                    UpdateFechaInicio(e);
                            }}
                            style={{width:"80%", border:"0px"}}
                        />
                    </IonCol>
                    <IonCol size="12" size-Xs="10" sizeMd="10" sizeLg="2" sizeXl="2" style={{textAlign:"center"}}>
                        <InputText
                            type="date"
                            value={prod.fecha_fin }
                            required={true}
                            onChange={e=>{
                                    prod.fecha_fin=e.target("value");
                                    setFecha_fin_rutas(e.target("value"));
                                    UpdateFechaFin(e);
                            }}

                            style={{width:"80%", border:"0px"}}
                        />
                    </IonCol>
                    <IonCol size="12" size-Xs="10" sizeMd="10" sizeLg="1" sizeXl="1" style={{textAlign:"center"}}>
                        <InputText
                        type="number" id="Descuentor" name="Descuentor" min="0" max="100"
                            //Se envía el valor al Excel
                            onChange={
                                e=>{
                                    prod.descuento=e.target("value");
                                    setDescuento(e.target("value"));
                                    UpdateDescuento(e);
                                }}
                            required={true} // <-Como es descuento de porcentaje, coloqué un min de 0 y un max de 100. Esta función de prod.descuento es lo que intenté ya que es lo que pone las fechas de acuerdo a la modificación de fecha inicio y fecha fin
                        
                        style={{width: "80%", border:"0px"}}
                        >
                        </InputText>
                    </IonCol>
                    <IonCol size="12" size-Xs="10" sizeMd="10" sizeLg="2" sizeXl="2" style={{textAlign:"center"}}>
                        <InputTextarea
                            rows={4} 
                            style={{width:"100%",border:"0px",color:"black", resize: "none"}}
                            defaultValue={prod.descripcion}
                        /> 
                    </IonCol>

El arreglo para hacer el Excel es el siguiente:

const AddDataToExcel =()=>{
        for (let index = 0; index < element.rutas.length; index++) {
            const elementr = element.rutas(index);
            dataEXcel.push({
                zona:element.etiqueta,
                tipo:"Ruta",
                producto:elementr.nombre,
                cantidad:elementr.cantidad,
                fecha_inicio:elementr.fecha_inicio,
                fecha_fin:elementr.fecha_fin,
                descripcion:elementr.descripcion,
                precio:0,
                descuento:elementr.descuento
            });
            
        }
    }


    for (let index = 0; index < productsRutas.length; index++) {
        const element = productsRutas(index);
        dataEXcel.push({
            zona:"",
            tipo:"Ruta",
            producto:element.nombre,
            cantidad:element.cantidad,
            fecha_inicio:element.fecha_inicio,
            fecha_fin:element.fecha_fin,
            descripcion:element.descripcion,
            precio:0,
            desuento: element.descuento
        });
    }
}

Muchas gracias de antemano y espero haber sido clara con el problema.

onchange – hide a div when entered value in input field is deleted in angular

I am populating book title after entering book number and clicking outside the field . It is working fine but when the user deletes the already entered value i want to hide that div, on change function doesn’t seem to work. And also search button will be enabled only if both input field has value and title is displayed. Can someone help me .

component:

export class AppComponent  {
  searchMoviesCtrl = new FormControl();
  filteredMovies: any;
  isLoading = false;
  errorMsg: string;
  title:string;
  showFlag:boolean = false;

  constructor(
    private http: HttpClient
  ) { }

  getBookDetail(){
 
    this.title ="Harry Poter";
    this.showFlag = true;

  }
}

html

<div>
    <form>
    <mat-form-field>
        <input matInput placeholder="BookNumber" #bookNumber (focusout)=getBookDetail()>
      </mat-form-field>
  
    <div *ngIf= showFlag> book {{title}}</div>
</form>
  
<button mat-raised-button color="primary" (disabled) = "!bookNumber.value || !showFlag">Search Book</button>
  </div>

javascript – How to manage order when pushing data to state and firebase at checkbox onChange in React

Hi I’m new to react and struggle with how to manage the order / process of how to setState and when to push data to the database.

I have an event list and want allow the user to save events the user likes by checking a checkbox

So I added a checkbox

<input type="checkbox" onChange={handleChange} data-id={subeventNode.node.id} checked={checked(subeventNode.node.id)} />

Within handleChange I update the state

  const handleChange = (e) => {
    setChecked({...checked, (e.target.getAttribute('data-id')) : e.target.checked });
  }

In addition I set the state if the user object has data from firestore like this

  useEffect(() => {
    if(user != null && user.events != null) {
      setChecked(user.events);
    }        
  }, (user))

Not sure if that’s a good practise with useEffect? But it seems to set the checkboxes as defined in the database when I initially load the site

My problem now is where to push data to firestore. I tested it in handleChange but it pushed the previous version of checked.

  const handleChange = (e) => {
    setChecked({...checked, (e.target.getAttribute('data-id')) : e.target.checked });

    //AWA
    //Where do it push it to the database? here? 
    firebase.updateProfile({uid: user.uid, events: checked})
    .catch(error => {
      console.log(error)
    })
  }

I could try something with await or then maybe, but to me it feels like I should watch out for some best practise now.

plugins – Onchange the category dropdown display the feature post and blog list

I have three functions.

  1. The first one is displaying my categories dropdown from the custom post.
  2. The second is displaying the latest post(I have added the checkbox in each post if the user checked that then that will display in the latest post)
    3)And the third will display my all the post.

Below is the code I am using it.

//category dropdown
    function categoriesDropdown(){
    $categories = get_categories( array(
        'orderby' => 'name',
        'order'   => 'ASC',
        'taxonomy' => 'blogs_cat',
    ) );
     $output='';
     $output.='<select>';
    foreach( $categories as $category ) {
        $output.='<option value="'.$category->term_id.'">'.$category->name.'</option>'; 
    }
        $output.='</select>';
        return $output;
    }
    add_shortcode( 'showCategoryList', 'categoriesDropdown');
    
    // Feature blog if check box selected.
    function latestBlogView( $atts ){
          $the_query =array(
          'post_type' => 'blog',
          'post_status' => 'publish',
          'posts_per_page' => 3,
          'meta_key' => 'latestblog',
          'meta_value' => 1,
          'order'      => 'DESC'
        );
        
        $postData = '';
        // The Loop
         $featured = new WP_Query($the_query);
        $postData.='<div class="latestBlogsWrapper articlesWrapper"><ul>';
        if ($featured->have_posts()): while($featured->have_posts()): $featured->the_post();
            
        $postData.= '<li><div class="grid-item"><a href="'.get_permalink($post->ID).'">
        <div class="blogBoxwrapper"> 
        <img src="'. get_the_post_thumbnail_url($post->ID, "full").'"> 
        <div class="blogCatname"><h5>'.get_the_title($post->ID).'</h5></div>
        </div></div></a></li>'; 
        
        endwhile; else:
        $postData.="Please select the feature post check box";
    
        endif;
         $postData .= '</ul></div>';
        wp_reset_postdata();
        
        return $postData; 
    }
    add_shortcode( 'latestblogs', 'latestBlogView');
    
    // Blog list
    function BlogView( $atts ){
        $args = array(  
            'post_type' => 'blog',
            'post_status' => 'publish',
            'posts_per_page' => 30, 
            'orderby' => 'title', 
            'order' => 'DESC', 
        );    $loop = new WP_Query( $args ); 
        $data ='';
        $data.='<div class="articlesWrapper"><ul>';
        while ( $loop->have_posts() ) : $loop->the_post(); 
            $tid = $loop->ID;
            $data.= ' 
              <li>
                 <a href="'.get_permalink($tid).'">
                      <div class="blogBoxwrapper">
                         <img src="'.get_the_post_thumbnail_url($tid).'">
                            <div class="blogCatname">
                              <h5>'.get_the_title($id).'</h5>
                            </div>
                     </div>
                    </a>
            </li>'; 
        endwhile;  
        $data.='</ul>
        
        <div class="pt-5 text-center btnLoadmore"><a class="blogbtn blogbtnred loadMore" href="javascript:void(0);">Read More Blog Posts</a></div>
        </div>';
        wp_reset_postdata(); 
        return $data; 
    }
    add_shortcode( 'blogandarticles', 'BlogView');

Now what I am doing is, When the user changes the category from the dropdown then I have to display the latest blog and blog list related to that category.

For example. On page load, I am displaying all the posts by default. Now I have a category called Movie in the dropdown. Once the user selects the Movie from the dropdown then I have to show the Movie related post in the latest blog and blog list.

Would you help me out with this issue?