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 have a button in my WordPress admin to add hotels images.
 when it is clicked it display an upload image link and a hidden text field to take the selected image.
the id of each button is incremented, so on select i can populate the right fields.
 when i click the button the media library does open and i can populate the right field, but only regarding the first selected button, since it retain the first id.
 i realize it is a scope issue, but i cannot make it work.
 the second one i click, is the correct is when on click, but after selection it is the first id. this is my code:
 var mediaUploader;
    $(document.body).on('click','.upload_hotel_image',function(e){
        var that = $(this);
        var thethisid = that[0].id.split('-')[1];

        console.log('outside id: ', thethisid);
    if (mediaUploader) {
  mediaUploader.open();
  return;
    }
    mediaUploader = wp.media.frames.file_frame = wp.media({
  title: 'Choose Image',
  button: {
  text: 'Choose Image'
    }, multiple: false });
    // When a file is selected, grab the URL and set it as the text field's value
mediaUploader.on('select', function() {
        var attachment = mediaUploader.state().get('selection').first().toJSON();
        console.log('inside id: ', thethisid);
});
    mediaUploader.open();
    return false;
    });

Open in new window


now, if i comment the return in the if statement, everything works, but then the media modal does't close. i believe it is a scope issue. i just need the same id in the select part as in the click part.

any suggestions?
0
Cloud Class® Course: Certified Penetration Testing
LVL 12
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

Hi Experts

Could you point how to disable buttons by using jQuery depending on a bale column value?

Accordingly to

img003
When the column value of the Staus column is "Concluido" the buttons must to be disabled.

PHP
<td>
	<a href="http://<?php echo APP_HOST; ?>/produto/edicao/<?php echo $produto->getId(); ?>" class="btn btn-info btn-sm">Editar</a>
	<a href="http://<?php echo APP_HOST; ?>/produto/exclusao/<?php echo $produto->getId(); ?>" class="btn btn-danger btn-sm">Excluir</a>
</td>

Open in new window


jQuery (using previous reply)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
	$('.table tr').each(function(i,e) {
		if ($('td:eq(4)', this).text() == 'Concluido') {
			$(this).css({backgroundColor: 'green'});

                         // It doesn't works
                         $('.btn btn-info btn-sm').prop('disabled', false);
                         $('.btn btn-danger btn-sm').prop('disabled', false);

		}
	});
});
</script>

Open in new window


Thanks in advance!
0
Hi Experts

Could you point how to change the background color based on a column value?

Accordingly to:
img001
The background color of the line must be changed to green if the column "Situação" has the value "Ativo"

<div class="container">
    <div class="row">
    <br>
    <div class="col-md-12">
        <a href="http://<?php echo APP_HOST; ?>/produto/cadastro" class="btn btn-success btn-sm">Adicionar</a>
        <hr>
    </div>
    <div class="col-md-12">
        <?php if($Sessao::retornaMensagem()){ ?>
            <div class="alert alert-warning" role="alert">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <?php echo $Sessao::retornaMensagem(); ?>
            </div>
        <?php } ?>

        <?php
            if(!count($viewVar['listaProdutos'])){
        ?>
            <div class="alert alert-info" role="alert">Nenhum produto encontrado</div>
        <?php
            } else {
        ?>
            
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <tr>
                        <td class="info">Nome</td>
                        <td class="info">Descrição</td>
                        <td class="info">Data de Início</td>
                        <td class="info">Data de Fim</td>
                        <td class="info">Status</td>
                        <td class="info">Situação</td>
                 

Open in new window

0
This is an example of Grid.MVC.  The project I'm working on has all Grid.MVC.  

Grid.MVC example

Is there a way to hover over a grid row and show that row's , maybe like a tooltip or a popup?

Thinking out loud... grid renders to HTML and we have the rows. Each row has an id (probably). Have a jquery .hover() and pass id of the row? (not sure)
0
Hi Experts

Could you point how to actualize a combo with the current value retrieved from the database ?

Accordingly to

img001
The status value retrieved from DB at the textbox is 3  correspondent to "Em Desenvolvimento"

How to make the combobox to assume the same value  "Em Desenvolvimento"

The code I have:
<div class="form-group">
	<label for="nome">Status</label>
	<input type="text" class="form-control"  name="idstatus" placeholder="Status" value="<?php echo $viewVar['produto']->getIdStatus(); ?>" required>
</div>

<div class="form-group">
	<label for="nome">Status</label>
	<label for="idstatus" class="validar field select">
		<select name="idstatus" id="idstatus">
			<option value="">Selecione ...</option>
			<option value="1">Pendente</option>
			<option value="2">Em Desenvolvimento</option>
			<option value="3">Em Teste</option>
			<option value="4">Concluido</option>
		</select>
	</label>
</div>

Open in new window


Thanks in advance!
0
I am using the below to validate a dynamic field. The field should have 10 numeric digits. Right now it allows the form to be submitted even if only 1 digit is entered. Can someone help me fix this so it requires 10 numbers?

        if ($("span.ppnRequired")
                   .find("input[name^='ThePPN']")
                   .filter(function() { return $.trim( this.value ).length != 10; }).length > 0 ) {
           alert("All ppn fields must contain a valid ppn.");
           return false;
        }

Open in new window

0
For the product, the mouse click options are wrote for action gear icon only. So if we left click on Task button(action icon), it will show options near to that icon.

While left clicking on gear it showing the option

and corresponding inspect html file is here:

<tr id="ember25477" class="ember-view content-row body-row-view container-view" tabindex="0" aria-label="">
<script id="metamorph-4508-start" type="text/x-placeholder">
</script>
<script id="metamorph-4531-start" type="text/x-placeholder">
</script>
<td id="ember25657" class="ember-view content-data item-number item-number-view container-view item-number-view-core_component_data-view-mixin container-view-core_component_data-view-mixin itemNumber">
<div id="ember25660" class="ember-view view">
<div>
</div>
</div>
</td>
<td id="ember25666" class="ember-view container-view">
<rs-icon id="ember25669" class="ember-view action-menu auto-actions-menu-button icon clickable-icon" style="width: 1em; height: 1em; font-size: 20px">
<icon glyph="action" class="action" style="font-size: 20px;">
</icon>
</rs-icon>
<span id="ember25672" class="ember-view view">
<td id="ember25678" class="ember-view content-data view view-core_component_data-view-mixin description">
<div class="container">
<div class="content">
<div class="aria-hidden">Empty cell</div>
</div>
</div>
</td>
</tr>

Open in new window


But Now the new requirement is options have have to wherever click (both on right click and left click) on that corresponding row. So I have tried the below code:

click: function (event) {
			var eventResult = this.get('tableView').clickRow(event, this.get('object'));
			if (eventResult !== false) {
				this.get('element').focus();
				$('.content-row').bind('contextmenu', function(e) {
					e.preventDefault();
				    var rowParentId = $(this).closest('tr').prop('id');
				    $('#'+rowParentId).find( ".action-menu" ).click();
				});
			}
			return eventResult;
		},

Open in new window


When I'm using the above code, right click option is working fine at the corresponding row. But the options are coming near to the gear icon only.  I need the options needs to come near to wherever I click on that row.

Please provide me any other suggestion for this. Your help will be appreciate. Thanks in advance.
0
I'm working on an ASP.Net/ C# / jQuery. There are lots of grids.  Some grids are editable, paging is there, sorting. There's one jqGrid and rest are Grid.MVC

I've used jQuery DataTable as well. I've worked with Telerik and don't want to use it again.

I want to push my manager to use jqGrid.  

Any arguments for and against jqGrid and Grid.MVC?
0
I wonder why this code isn't working

1. I have a button like this, note the class="jqbuttons"

<button style="background-color:lightblue;border:none;" class="jqbuttons" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button>

Open in new window


2. I put this click event both in document.ready and outside it. I click on the button and nothing happens

$(document).ready(function () {

		$(".jqbuttons").on('click',function () {
			//getvalue(this.id);
			console.log("button clicked1");
			console.log(this.id);
		});

Open in new window


This works

1. I removed the class and added this onclick='getvalue(this.id);'

<button style="background-color:lightblue;border:none;" onclick="getvalue(this.id);" id="47" type="button"><span class="glyphicon glyphicon-remove"></span></button>

Open in new window


2. The function, outside document.ready..
function getvalue(id) {
		console.log("button clicked");
		console.log(id);
	}

Open in new window


How come the first one doesn't work?
0
I'm working on a new project with lots of grids. They're all Grid.MVC except for one that's jqQuery. The project is C#, MVC, jQuery.

The grids show financial data. For example, number of equiments a company has, what country the assets are in, how many assets there are, datetime column,  .User exports to Excel or CSV.  Grids have paging and sorting.  Some grids are editable.

Only one section of the application is using jqGrid. Looks like the ex-developer wanted to develop something new and he used jqGrid.

Now, I need to decide and let my manager know which way to go. Looking at jqGrid and knowing this is a financial app with grids, I'm thinking we need to use jqGrid moving forward because it offers more functionality.

Any input on either and why and why not use them?
0
Upgrade your Question Security!
LVL 12
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

I'm new at my job and looking at the project, the previous developer who's not with the company anymore has used jqGrid. When I open the js file, I see this so we have version 5.2.0

I went to this site and the latest version is 5.3 http://www.trirand.com/blog/?page_id=6

But, looks like jqGrid is not free for commercial. Maybe ex-developer paid for it, not sure...but is jqGrid's 5.3 free?

/**
*
* @license Guriddo jqGrid JS - v5.2.0 - 2016-11-21
* Copyright(c) 2008, Tony Tomov, tony@trirand.com
* 
* License: http://guriddo.net/?page_id=103334
*/

Open in new window

0
I think the answer to my question is "no"....jqGrid's columns can't be displayed vertically...but I just wanted to double check.

I have it like this now

grid
0
Hi experts, I am using bootstrap 3
I have a page with 4 dropdown options and 4 number INPUT with different ids (see dropdown 1 below)
How can I add an eventlistener to either the dropdown or number input changes its value ?
What I am trying to accomplish is calculate the price on the fly (ajax and php)
P.S. I can calculate the price IF THE USER CLICKS A BUTTON, but I want to do the same calculations WITHOUT THE USER CLICK THE CALCULATE PRICE BUTTON

Tnx for any help or suggestions


    <div class="form-row">
     <div class="form-group col-sm-5">
        <label for="sel1" class="control-label">Select list :</label>
        <select class="input-large" id="sel1">
          <option value="399">Nativity Set - 399.00&#160;&#160; </option>
          <option value="189">Deer Set - 189.00&#160;&#160; </option>
          <option value="35">Sheep - 35.00&#160;&#160;</option>
          <option value="35">Cow - 35.00&#160;&#160;</option>
          <option value="35">Donkey - 35.00&#160;&#160;</option>
          <option value="35">Goat - 35.00&#160;&#160;</option>
        </select>
     </div>
       
     <div class="form-group">
      <label for="iQ1" class="col-sm-2 control-label">Quantity</label>
      <div class="col-sm-2">
        <input type="number" class="form-control" id="iQ1" value="1">    
      </div>  
     </div>
    </div>
0
I need a way to display the number of weeks and days until a certain date ( in my case, August 30th ) to display in a DIV on out site:



Is there a Javascript solution to figure this out?

Thank you for looking.
0
I need to find a way to close a scrollable and absolute positioned lightbox popup when a person clicks anywhere outside of the lightbox:

https://staging.royalpalm.com/property/212-alexander-palm-road/

( just click on the large header image up at the top to trigger the lightbox popup )

You'll notice that you can scroll this lightbox popup vertically, and that you can only close it by scrolling back up to the top and then clicking on the "X" in the upper righthand corner.  Ideally, I'd like to change this by doing either of the following:

1) Make is so that if you click anywhere outside of the lightbox to close it (this is the most preferred method)
2) Add a floating "X" button (that follows you as you scroll), that you can click on to close the lightbox (similar to that "Back to Top" button on the lower right of the page)

How would I accomplish either of these?

- Yvan
0
How would I loop through this GraphQL data using either jQuery or Vanilla JavaScript?

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$.post({
  url: 'https://api.graphcms.com/simple/v1/cjgp9rqoj21iq0176nzwwecoc',   
  data: JSON.stringify({ "query": " { allBlogs { id title description } } " }),
  contentType: 'application/json'
}).done(function(response) {
  //console.log('Fetched Blogs:', response);
  alert(JSON.stringify(response));  
});
</script>
</body>
</html>

Open in new window


( you can see the format of the returned GraphQL data in the JavaScript alert popup )

Please advise.

Thanks,
- Yvan
0
I have this code:

$('#call').click(function() {
    $('.check_all_hide_call').show();
    $('.check_all_call').hide();

});

Open in new window


How can I say that if I click it again, for it do the the opposite hide/show
0
Hi,

Can anyone help me implement this logic:

I Have these boxes:

instructions.png
here is there code:
          <div class="check-container" style="margin-left: 67px;margin-top: 16px;">
            <div class="img-container"> <img  src="../assets/images/check-box.png" class="checkboxs" cartcheck='1' name="inst_doorman"><img  src="../assets/images/check-box2.png" style="display: none" cartchecked="1" class='checked'></div>
              <span class="checkboxdesc">Leave with doorman</span>
          </div><br>

         <div class="check-container" style="margin-left: -205px;margin-top: 25px;">
            <div class="checkboxdesc"> <img  src="../assets/images/check-box.png" class="checkboxs" cartcheck='2' name="inst_call"><img  src="../assets/images/check-box2.png" style="display: none" cartchecked="2" class='checked'></div>
              <span class="checkboxdesc">Call upon arrival</span>
          </div><br>

          <div class="check-container" style="margin-left: -200px;margin-top: 35px;">
            <div class="checkboxdesc"> <img  src="../assets/images/check-box.png" class="checkboxs" cartcheck='3' name="inst_vestible"><img  src="../assets/images/check-box2.png" style="display: none" cartchecked="3" class='checked'></div>
              <span class="checkboxdesc">Leave in vestibule</span>
          </div><br>

           <div class="check-container" style="margin-left:-200px;margin-top:43px;">
            <div class="checkboxdesc"> <img  

Open in new window

0
Here is my fiddle
https://jsfiddle.net/r2d22k18/7gc5pwaj/2/

I'm trying to prevent typing of this </ or />

In the above fiddle when i type </ or />  the second character is deleted

Instead of deleting the second character , how do I just put a space in between.

So if I type this </ it will put a space in between and show this < /
So if I type this /> it will put a space in between and show this / >
0
Free Tool: Path Explorer
LVL 12
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

I watched a security tutorial at my previous job and one thing that was mentioned was not to have comments in JavaScript code because would-be hackers might see the comments if they do "inspect" in browser.

I'm working on a new project and I see they have the jQuery code in the page itself. Example below.

Should jQuery code be in its own js file (I think it should) and be minified?

code
0
Hi Experts

Could you check what is causing this jQuery confirm function error?

img002
and

img003
Thanks in advance!
0
Here is the code of bootstrap Modal WINDOW
<div class="bs-example">
    <!-- Button HTML (to Trigger Modal) -->
    <!--a href="#modal_video" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a-->

    <!-- Modal HTML -->
    <div id="modal_video" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">YouTube Video</h4>
                </div>
                <div class="modal-body">
                    <iframe id="cartoonVideo" width="560" height="315" src="//www.youtube.com/embed/YE7VzlLtp-4" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

Open in new window


And below  is the HTML for SLider and PHP Loop which gets picture name and some other attributes etc from database to run slider.
On each slide there is a video button. If user clicks on that button then Modal window opens with a relevant video.

The Issue is that if I place the above MODAL Window Code after the PHP LOOP( i.e. after <UL>) then the MODAL window cannot works.
Even I had tried and place the code in <li> then MODAL cannot work.

Actually I want to put MODAL WINDOW CODE in Loop because in database
I have a field i.e. Embed_code which is the video code and that video will open in MODAL WINDOW

<div class="modal-body">
    <iframe id="cartoonVideo" width="560" height="315" src="<?=$vimeo_code?>" frameborder="0" allowfullscreen></iframe>
</div>

Open in new window


And here is the complete code


Open in new window

0
Hi Experts

Could you point how to make a CakePHP  $this->element to be linked to a jQuery code?

Accordingly to

...
echo $this->element('Buttons/btn-lock', ['url' => [] ] );

Open in new window


To run this:
<script type="text/javascript">

	function ativarVendedor(id, acao){

		$.confirm({
		    title: 'Atenção!',
		    content: 'Deseja realmente ' + acao + ' o vendedor?',
		    buttons: {
		        confirmar: function() {

		        	$.get(base_url + 'admin/vendedores/ativar/' + id, function(data, status){
		        		console.log('teste');
					}, 'json');
		        	location.reload();

		        },
		        cancelar: function() {
		            $.alert('Ação cancelada!');
		        }
		    }
		});

	}

</script>

Open in new window



Thanks in advance!
0
I have this example fiddle:
https://jsfiddle.net/h6vkt3jg/2/

In this example I'm using this regex pattern:

/<\/|\/>/

With this pattern only when you type </ together or /> together does validation pass and the button becomes enabled.

When you run it, it looks like this. The button is disabled.
 
Run1.PNG
So if you type the symbols separately that doesn’t pass.

Run2ErrorMessage.PNG


If I type the </ symbols together regardless whether there is text before or after it, validation passes.
 
Run3Pass1.PNG
If I type the /> symbols together regardless whether there is text before or after it, validation passes.


Run3Pass2.PNG

How do I revised my regex example to do the opposite?
I want to add Not to this regex pattern /<\/|\/>/

So in my example the validation should pass for everything except </ or this />

The tooltip should only popup if I type </ or this />
0
This is a followup to the example in this ticket.
https://www.experts-exchange.com/questions/29098002/checking-input-of-textbox.html?anchor=a42554823

I created the example in this fiddle.
https://jsfiddle.net/2edzjg0x/1/

In this fiddle example this is what it looks like when you run it.
Notice the button is disabled. The textbox gets validated to see if user typed a less than sign < or greater than sign >

on run

I'm using a regular expression to check for a less than sign < or greater than sign > in the textbox.

If user types this < then they get this message:

S2p2.PNG
If user types this > then they get this message:

  S2p4.PNG
If they type in regular text, validation passes and the button becomes enabled.

S2p3.PNG


In this example fiddle I'm using a regular expression , I'm learning to work with regular expresssions.

How do I revise my fiddle example to check for what the example in this ticket does:

https://www.experts-exchange.com/questions/29098002/checking-input-of-textbox.html?anchor=a42554823

That ticket example test this:

  $('#tester').keyup(function() {
    var disabled = $(this).val().indexOf('/>') > 0 || $(this).val().indexOf('</') > 0;
    $('#thebutton').prop({disabled: disabled});
  });

What is the equivalient of this:  var disabled = $(this).val().indexOf('/>') > 0 || $(this).val().indexOf('</') > 0;

Using a regular expression?
S2p4.PNG
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