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 start with the following codes with mvc/json/c#
and I just want to know how to get the following items
Or there is easier way to get everything inside of json file. that will be great.


rating
open now
weekday text
viewport
photos height
photos html_attributions


https://developers.google.com/places/web-service/search

WebClient wc = new WebClient();
string jsonStr = wc.DownloadString("https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=37.753,-122.443&radius=10000&type=rv_park&key=AIzaSyCietasdfasdfasdfasdfxzD65Uc19X6DgrJFumdi-nCZYSHjg");
GooglePlacesResponse gpr = (GooglePlacesResponse)JsonConvert.DeserializeObject<GooglePlacesResponse>(jsonStr);
Response.Write(gpr.status + "<br><br>");

Open in new window

0
Cloud Class® Course: MCSA MCSE Windows Server 2012
LVL 12
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

I am trying to use the following script that is on GITHUB: click here

I'm debugging the code and it shows that I enter the function, but the j$boxes variable is empty. In the console, it shows the length is empty. I'm new to jquery and still struggling with learning how to properly select elements on the page and properly debug using the browser tools.

Here is  my code with my debug statements. I'm also attaching an image of the output from the debug console.
j$ = jQuery.noConflict();

j$(document).ready(function() {
	
	if(j$) {
		//alert('Jquery loaded successfully...');
	}
	j$('input[id$=btnSearch]').click(function(){
		console.log('******************** search button has been clicked');
		j$('input[type="checkbox"]').shiftSelectable();
	});		
});

j$.fn.shiftSelectable = function() {
console.log('*********************** we are inside the shiftSelectable function');
    var lastChecked,
        j$boxes = this;
console.log(j$boxes);
console.table(j$boxes);
    j$boxes.click(function(evt) {
	console.log('************************** we are inside the boxes click event handler');
        if(!lastChecked) {
            lastChecked = this;
            return;
        }

        if(evt.shiftKey) {
            var start = j$boxes.index(this),
                end = j$boxes.index(lastChecked);
            j$boxes.slice(Math.min(start, end), Math.max(start, end) + 1)
                .attr('checked',

Open in new window

0
I'm rewriting and improving some jQuery code that I have inherited from a developer who's not here anymore.

I got help from Leakim and Julian here and I'm using the same method (using Template) Previous question - long thread

1. I uploaded my sample code here https://drive.google.com/file/d/1d2Gn8UDfeHfXvn560b114i-5Ob2ZP8rJ/view

Just download, unzip and click on "page.html". The corresponding JS file is "Reporting.js"

2. When page loads, you'll see one row of dropdowns. Click "Add" and now you'll see two

e1.png
3. In the first row, select something from the first dropdown. The second dropdown in the first row is enabled. This is correct.
But, the second dropdown in the second row also is enabled. This is not correct. Why is this happening?

e2.png
4. There's some existing code that the ex-developer has in this section of
$(document).on('change', '#reportBuilder select.filterField', function () {...

Open in new window

of Reporting.JS.  I think something might be off in that section now that I'm using Template and divs. I'll debug that. I wonder if I need to have an ID on these dropdown? somehow say... if user selects something on this row...only make this row enable/disabled. All that code in the 'change' event is even needed? can it be simpilfied


EDIT I fixed it by changing the below code because I don't have "tr" and "table" anymore. Can that "change" function be simpilfied?
var operatorSelect = $('select.fieldOperator', $(this).parentsUntil('tr').next());

Open in new window


to this

var operatorSelect = $('select.fieldOperator', $(this).closest('div').next());

Open in new window

0
You can see my example here. Download and click on page.html.  https://drive.google.com/file/d/1Kt2CQwvTAdY0uojPf8sf7krVu6sEz61f/view

1. When page loads, I have one row with "And" and the "X" delete.
2. I can click on Add and keep adding divs

What I want to do is:
1. The first row, remove the X
2. When on the last row ( I can have as many rows as I want)...remove And

f1.png
I thought about finding the # of divs that has X and AND. If only 1, hide "X". But that's not going to work.

I think I need to drill down these divs but still not sure how to hide X and AND

f2.png
0
Good day,

I am using server side to populate data table. This works without a problem. The data table has delete button on each row in case a user wishes to remove a row.

When the delete button is pressed, the #btn-delete is triggered. However, $text remains blank.

I am not well versed in JQUERY. Any assistance is highly appreciated.

=================================================================================


	$(document).ready(function() {
	    $('#example').dataTable({
	        "dom": '<"top"f>rtip',
	        "paging": true,
	        "bLengthChange": false,
	        "ordering": true,
	        "info": true,
	        "order": [
	            [1, 'asc']
	        ],
	        "pageLength": 10,
	        "bProcessing": true,
	        "bStateSave": true,
	        "bServerSide": true,
	        "sAjaxSource": 'ajax.cfc?method=dataTable',
	        "aoColumns": [{
	                "sName": "nr",
	                "sTitle": "Number",
	                "sWidth": "20%",
	                "bSortable": "true"
	            },
	            {
	                "sName": "LastName",
	                "sTitle": "Last Name",
	                "sWidth": "40%",
	                "bSortable": "true"
	            },
	            {
	                "sName": "FirstName",
	                "sTitle": "First Name",
	                "sWidth": "40%",
	                "bSortable": "true"
	            }
	        ],
	        "columnDefs": [{
	                "targets": [0],
	             

Open in new window

0
Hi Experts,

        I have a html5, css3, javascript, jquery, bootstrap4 application running on bright sign media player. Windows server serves these web pages.   on click event I do location.href to home page.   It takes long time nearly 5 seconds to go to home page.  This happens only with the home page.   Since it takes long to go to home page, user is clicking the button several times, to go home page.  Now the screen becomes blank. and loads home page after 5 seconds.  If the button click is done once, then after 4-5 seconds it goes to home page without blank screen.   I had even tried creating a separate java script function for click event and also tried disabling the button once clicked.  Situation remains the same.  Why it is taking long to go to home page and why the blank screen appears if clicked more than once.   Please help me in resolving this issue.

With many thanks,

Bharath AK
0
I know there has to be a way to do this. I figured out how to get the innerText of one row.

1.  I click on a button and dynamically create some controls with a div. Each div has a number
j1.png
2.  I click on X delete next to each row and remove a row. Now, the row numbers are out of order
j2.png
3. When I click on X, I call this and I get the innerText of the row I'm deleting
$("#schedgroup").on("click", ".remDelSched", function (e) { //change13 change body to schedgroup

		console.log($(this).closest('.row').children('.toggle')[0].innerText); //*** gets me the innerText of the row I'm deleting

		var numItems = $('div.schedule').length;

		if (numItems > 1) {
			$(this).closest('.row').remove();
			
		}
		else

			$(this).closest('.row').addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden

		

	
	});

Open in new window


4. Now, I want to renumber the divs

I think I need to do this when I click on an X but how in jQuery?
1. This gives me the "row" I'm deleting $(this).closest('.row')
2. I need to get its parent div which is schedgroup
3. Then get all the "row --> toggle" children of schedgroup
4. Loop thru and rename/increment. I started with zero but can start with 1

j3.png
0
I'm on a roll with my jQuery questions :) I'm close to telling my manager to just forget about this section but can't give up.

It's related to this question https://www.experts-exchange.com/questions/29107740/jQuery-code-partly-works-hide-div.html

1. I click on the X to remove a row. The row is removed. But now, I want to remove the "toggle" div as well.
j1.png
2. This is the code that removes the "schedule" div. I tried some lines (commented them out below) but still can't get it right.

$("#schedgroup").on("click", ".remDelSched", function (event) { //change13 change body to schedgroup

		console.log($(this));
		console.log($(this).parents());
		//console.log($(this).closest(".toggle"));

		//$(this).parents().children('div.rows').children('.toggle').addClass('hidden'); //try this to remove the toggle div

		var numItems = $('div.schedule').length;

		if (numItems > 1)
			$(this).closest(".schedule").remove();
		else

			$(this).closest(".schedule").addClass('hidden'); //orig code has one "schedule" as hidden. Don't remove all of them if user clicks on X. Leave one as hidden
		
		//$(this).parents().children('.schedgroup').toggleClass("hidden");  //try this to see if div toggle is removed

		//$(this).closest(".schedule").next(".toggle").addClass('hidden');//try this to see if div toggle removed
	});

Open in new window


3.  To debug/step thru it,
 This gets me the element I'm clicking on

console.log($(this));

Open in new window


Then I looked at the parents
console.log($(this).parents());

Open in new window


j2.png
I tried "next", "closet", "prev". How can I traverse this and find the "toggle" for that specific row?

EDIT - just tried this as well
$(this).closest(".schedule").closest('.toggle').addClass('hidden');

Open in new window

0
This is related to this question https://www.experts-exchange.com/questions/29108573/jQuery-click-event-doesn't-get-called.html

I'll go step by step.

1. The solution in that thread worked. I tested it by hardcoding some rows and it worked. Then, I plugged it in my actual code and that worked except that I needed to fix the position of the rows.

I had this code to add the row dynamically

 
var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
          //... some code here

            // Append the new schedule and hide it
	$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); 
 

Open in new window


The divs looked like this
d1.png
2. I made a change to the HTML to get the rows correctly. Instead of ".after", I used ".append"

	var schedule = $('.schedule:last', '#scheduleArea'); 
            var newSchedule = $(schedule).clone(true, false).html();

            // Change the 'Id' of all the elements
      //... some code here

			//console.log($(schedule));

            // Append the new schedule and hide it
			//$(schedule).after('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>'); //camilla added collapse in per stackoverflow
		    
			
$("#schedgroup").append('<div class="row"> <div class="toggle"> <div class="col-xs-4" style="background-color:rebeccapurple">left</div> </div><div id=Schedules[' + scheduleCurrentIndex + '].Type class="schedule hidden">' + newSchedule + '</div></div>')

Open in new window


Now it looked correctly
d2.png
3. I had the code in the accepted solution above but the divs weren't hiding/displaying
$('.row').on("click", ".toggle", function() {
console.log($(this).parents().children('.schedule'));
    $(this).parents().children('.frequency').toggleClass("hide");
	});

Open in new window


I saw this in console when I was clicking on the div. "click" event looked like being called twice

d3.png
4. I went to Julian's solution and that worked. Why is that? Julian has an explanation here but maybe that's what I don't understand
Julian's explanation

I think this is the key
To get around this we need to bind to a parent element that will be static -


If use #schedgroup instead of 'body'...code below works because #schedgroup is static
$('body').on("click", ".toggle", function() {

Open in new window


You can see it here

Works http://jsfiddle.net/jv2oudhg/

Doesn't work with my HTML change http://jsfiddle.net/gm5uxh7q/
0
Hi Experts,

I have a standalone web application (Html5, jquery and css3 application) which is running only on ipad pro in a safari browser.  I want to make this application full screen without address bar and title.  How to make this possible.  Please help me in resolving this issue.  

With Many thanks,

Bharath AK
0
Cloud Class® Course: CompTIA Healthcare IT Tech
LVL 12
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

I am following an example http://jsfiddle.net/glebkema/73gtkvjt/  to have have divs collapse and expand.

But I create controls dynamically so the JS code in that JSFiddle wasn't working... the divs weren't being collapsed.

I found this link that explained why dynamic controls work differently Explanation

I created this JSfiddle (forked the one above)

http://jsfiddle.net/3zw18rxe/7/

What I tried:
      
$('.toggle').on("click", ".schedule", function() {

Open in new window


Tried this but the divs won't collapse correctly...all of them will collapse

$(document).on("click",".toggle",function(){
    // code goes here
});

Open in new window


As a test, I hardcoded the id, but this didn't work either

$('.toggle').on("click", "#Schedules[0].Type", function() {

Open in new window


How can I do this when the controls are created dynamically?
0
I am listing a table which shows records from the database and each row has a checkbox with an ID value associated with it.

<label class="m-checkbox">
 <input type="checkbox" name="order_id[]" value="<?php echo sanitize($failed->order_id); ?>">
 <span></span>
</label>

Open in new window


Once the user has selected the checkboxes of the records they want to delete, the submit button is pressed and that triggers an ajax request.

$( '.delete-failed' ).on('click', function(e) {
    e.preventDefault();
    var form = $( '#delete-failed' ).serialize();
    $.ajax({
        url: url + '/TransactionsAjax/deleteFailedTransactions',
        type: 'POST',
        data: form,
        dataType: 'json',
        beforeSend: function() {
            $( 'delete-failed' ).prop('disabled', true);
        }
    })
    .done(function (data) {
        if(!data.success) {
            $( '.alert-danger' ).append(data.message).fadeIn();

        } else {


            $( '.alert-success' ).append(data.message).fadeIn();
        }
    })
            .fail(function (jqXHR, textStatus, errorThrown) {
            console.log(textStatus + ': ' + errorThrown);
            console.warn(jqXHR.responseText);
        });
});

Open in new window


That then goes to the controller:

if($_SERVER['REQUEST_METHOD'] === 'POST') {

    $response = array();
    $message = '';


    $orderId = $_POST['order_id'];

    $data = [

        'order_id' => $orderId
    ];

    if($this->TransactionsModel->deleteFailedTransactions($data)) {
        $response['success'] = true;
        $response['message'] = 'Failed transactions deleted';

    } else {

        $response['success'] = false;
        $response['message'] = 'Something went wrong. Please try again later.';
    }

    echo json_encode($response);    
}

Open in new window


Which is supposed to send the data to the model:

public function deleteFailedTransactions($data)
    {
        $this->db->beginTransaction();

        try {

            $this->db->query("DELETE FROM `order_summary` WHERE `order_id` = :order_id");
            $this->db->bind(":order_id", $order_id);

            foreach($data as $item) {
                $order_id = $item['order_id'];
                $this->db->execute();
            }


            $this->db->query("DELETE FROM `order_detail` WHERE `order_id` = :order_id");
            $this->db->bind(":order_id", $order_id);

            foreach($data as $item) {
                $order_id = $item['order_id'];
                $this->db->execute();
            }

            $this->db->commit();
            return true;
        }

        catch(Exception $e) {
            $this->db->rollBack();
            echo $e;
            return false;
        }
    }

Open in new window


The error I am getting in console is:

undefined index: order_id

It is referring to this line in the model:

$order_id = $item['order_id'];

Open in new window


I am not sure at which point the problem is, is it in the data being sent via ajax, should the foreach loop be in the controller instead, or.....?
0
1. I'm following this example http://jsfiddle.net/glebkema/73gtkvjt/
that I got from here. I'm doing the jquery version Example

2. You can download my sample code here. Unzip and just click on "page.html" to see it. The js file is Reporting.js
https://drive.google.com/open?id=17IuFhPlYPX5B7EATvE9sDES-EoB3i7gA

This is what's happening

1. I click on "Add Report Delivery" button and I see the control displayed. I click on the purple div and I can hide and display the control. This works.
j1.png
2. Click on "Add Report Delivery" again and you'll see the second control. Now, click on the puruple div and that div (control) doesn't collapse. I put debug steps in the JS code and for the second puruple div...the js code is not even called. Only the first div collapses and expands. I see I have unique Ids . Not sure what I'm missing.

j2.png

EDIT I ran a test. When I click on "add delivery schedule", the control is built dynamically. Something with this dynamic control that the "click" control on "toggle" doesn't work. Don't know why.
0
Hi Experts,

     window.location.href is not working simlarly, document.location.href is also not working in javascript.  I want to redirect to a different url on a button click.  I had tried in javascript, it is not working.  Please help me in resolving this issue.

With Many thanks,
Bharath AK
0
I recently asked a similar question but left out some important stuff. Here goes again...

Source Array
I have an array of items that looks like the following code. There can and will be many items in here.
[
    {
        "ItemId": "12345",
	"rmaId": "777",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "33",
            "34"
        ]
    },

   {
// more items will be here
}

]

Open in new window

Edit Array
I have a second array that looks like this. There will only be one object in this array.
[
    {
        "ItemId": "12345",
	"rmaId": "777",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "11112222",
            "3333344444"
        ]
    }
]

Open in new window

Based on the itemId in Edit array, I need any changes that don't match the source array returned to me in an array in this format.
For instance, if I am editing itemID 12345...
So if an item in the source array has two serial numbers, and both were changed, the result would be:

Desired Return Array
[
{
   rmaId: "777",
   itemId: "12345",
   serialNumber: "11112222",
   notes: "Some Notes",
   condition: "Good"	
},
{
   rmaId: "777",
   itemId: "12345",
   serialNumber: "3333344444",
   notes: "Some Notes",
   condition: "Good"
}

]

Open in new window


Some things to note:

1. rmaId, itemId, upc, name, qty cannot/will not be change.
2. some items may NOT have any serial numbers, so we need to still track notes and description
3. The return array only has those 5 properties, that is deliberate.

THANKS. I way above my paygrade on this one, lol
0
I have two arrays of similar data. I need to know what information has changed and a new array returned with old value, and new value. For instance,

Thank you for looking.

Array #1
[
    {
        "ItemId": "556784",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "33",
            "34"
        ]
    }
]

Open in new window


Array 2:
[
    {
        "ItemId": "556784",
        "UPC": "73343324400098",
        "Name": "Time Machine",
        "Description": "A new product you will love",
        "SerialNumberRequired": true,
        "Notes": "This is a note someone just entered",
        "Condition": 2,
        "Qty": 2,
        "SerialNumber": [
            "9999",
            "34"
        ]
    }
]

Open in new window


So in the above example, one SerialNumber was changed, so I would get back this:

[
{
    SerialNumber:  {
          old: "33",
         new: "9999"
    }
]

Open in new window

0
This code partly works but I think I need to do something with the "click" event. I'm building this dynamically.

You can download and unzip it from here. Just click on page.html to see it.
https://drive.google.com/file/d/1dU8yOCmzQJUeruaeKu1qxJLPs1-HlHF_/view

1. I click on "Add Report Delivery"
2. It calls $('#showSchedule').click(function () { in Reporting.js and adds a "schedule"
r1.png
3. Now, I click on "Add Report Delivery" again and another "schedule" is added. The first one I added is now hidden. You can add more.

r2.png
This is NOT the functiolity I'm looking for. I don't want the first one or additional ones to be hidden. I want to wrap each in a div... to be minimized...like collapse... with header.."schedule1", "schedule2", "schedule3", etc.

So, with each click...have the previous "schedule" div collapsed with a header title. I don't want them hidden. The toggle and "click" event are not working together correctly looks like it.

How can I do this? When I click on the button, each section gets an ID. Maybe I need to find the parent "div" which is "schedule" and attach the ID to the parent DIV for what I clicked on and collapse it? Here is a screenshot
r3.png
0
I am looking for an elegant and easy management solution to test my API's. For instance, we have a DEV environment, a QA environment, and a PROD environment.

Sometimes, for whatever reason, the endpoints do not match in each environment. For example...
DEV:  http://myDevEnvironment.com/Users

QA: http://myQa.com/QAGetUsers

PROD: http://mySite.com/GetAllUsers

Open in new window


So what I would like is a simple script to define the endpoints. I would like it easy to change enviromnents, and assign an alias to the method ( in the above example maybe call the alias "GetUsers"

This would be in a config file. So if I wanted to change environments, I could simply change a variable in the config file. Here is an example of how it would be used:


$.post( GetUsers, function( data ) {
  $( ".result" ).html( data );
});

Open in new window


Of course there can be many endpoints.

Can someone help me define a simple Javascript object or script to get this working?

Thank you!

John
0
I'm confusing myself by going back and forth and reading about DataTable and jqGrid.

This is my dilemma:
1. Working on a project that has lots of grids. Grid.MVC is used for the grids
2. There's one section that uses jqGrid. Probably it's because "grouping (group by)" is needed (our  ex-developer coded this).
3. I bought this template  https://keenthemes.com/preview/metronic/theme/admin_1/table_datatables_managed.html and it uses DataTable (not that I can't replace it)

This is what I need
1. "Group by" for at least one section of our site
2.  Inline edit - one of our existing grids has that
3. Performance - some grids have large amount of data to display.
4. Export to Excel and CSV but I can use EPPlus to export the data
5. Sorting
6. Nice to haves : user be able to hide/display columns
7.  jqGrid needs a license but DataTable is free. Ex-developer has coded the jqGrid but looks like he didn't ask our manager to get the license.

From what I read, jqGrid has better performance. I don't know if DataTable has "group by".

What to do? Anyone has used either? My preference is to use DataTable because it doesn't require a license but again...I don't know if it supports "group by". I looked at their site and not clear if they have it or not.

I've found these links with pros and cons:

https://www.slant.co/versus/4837/4840/~jqgrid_vs_datatables

http://debapk.blogspot.com/2012/01/jqgrid-and-datatable-comparision.html
0
Cloud Class® Course: Microsoft Azure 2017
LVL 12
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Need a simple to use, easy to implement "lightbox for dummies", I'm guessing in Jquery.

I tried featherlight, cannot make it work.

Something REAL simple.

I want to display a message (text) in a lightbox when the user clicks on an <a href="#">(text)</a>

Prefer a tool that has copious examples.

Thanks
0
I'm getting a type error: window.event is undefined.

What I'm trying to do is allow the user to select multiple rows of a table using Shift+Click. I was searching for an example and came across this article:

https://stackoverflow.com/questions/17964108/select-multiple-html-table-rows-with-ctrlclick-and-shiftclick

I was looking at the examples and tried to use one of the examples that was provided implemented with jquery.

I'm new to jquery so I don't understand all of what the code is doing.

Here is the code I implemented and trying:

j$ = jQuery.noConflict();

j$(document).ready(function() {
	
	if(j$) {
		//alert('Jquery loaded successfully...');
	}
	console.log(j$('input[id$=btnSearch]'));
	j$('input[id$=btnSearch]').click(function(){
		console.log(j$('[id$=searchTable] > tbody tr'));
		var trs = j$('[id$=searchTable] > tbody tr');
		j$('tr').on('click', function(){
			//call the RowClick function on click event
			RowClick(j$(this),false,trs)
		})
	});		
});

//declare variable to store the most recently clicked row
var lastSelectedRow;

// disable text selection
document.onselectstart = function() {
    return false;
}

function RowClick(currentrow, lock, rows) {
    //if control is held down, toggle the row
    if (window.event.ctrlKey) {
        toggleRow(currentrow);
    }

    //if there are no buttons held down...
    if 

Open in new window

0
I have this partly working but not completely

1. I create dynamic controls by clicking on a button. This is an example of having 2 rows
f1.png
2. I have an X next to each row and when user clicks on it, I want to hide the div

f2.png
3.  I have this jQuery code. It works only if I have one row and hides the div. But when I have more than one, it doesn't do anything.


How can I have.... hide the div that corresponds to this X being clicked?

$(".remDelSched").on("click", function (event) {
		console.log($(this))
		$(this).closest(".schedule").addClass('hidden');
		//event.preventDefault();
	});

Open in new window


This is the code for X delete. I wonder if I need to have a unique id for each X (delete)
	<div class="col-md-2">
									<a href="javascript:void(0);" class="remDelSched"><span style="color: red" class="glyphicon glyphicon-remove"></span></a>
								</div>

Open in new window

0
I found this JSFiddle and applied it to my code http://jsfiddle.net/hQnWG/614/

1. You can download my code from here. Unzip and click on "page_copy.html"
https://drive.google.com/file/d/1qYWpX712PZL-flacmspsVog5VzDxsm2p/view

2. It doesn't happen all the time. You might have to clear your cache to see it. I did this in Chrome

3. Click on "Billing Attention to" to select it. Now, drag it to under "Asset tax" in the right hand box. It won't get placed there. It moves back to the left hand side box.

j1.png

4. Clear cache. Now, you can drag "Billing Attention to" to the first place in the right-hand-side box. This works It's like it can be dropped anywhere but not at the last place. Again, looks like sometimes it works and sometimes it doesn't.

Very odd. I looked here https://api.jqueryui.com/sortable/ to find maybe an event or something to "sort anywhere in any position" type of event but nothing jumped out.
0
I am showing and hiding multiple radio groups based on another radio  group selection. I am able to do this part.

But now I am trying to make the ONLY VISIBLE radio groups to be required, if they are not checked, then show an error message saying they are required.

Here is my JSFiddle

JSFIDDLE

The code I am using and that's not working is as below


$("#js-add-to-cart").click(function(e) {
var check = 0
$(":radio[name^=Product_Attribute]:visible").each(function() {

            if(!$(":radio[name^=Product_Attribute]").is(':checked')){
                check = 1;
            }


});

 if(check == 1){
         $(".error").show();
          alert('Please select one option in each question.');
         e.preventDefault();	return false;
           
        }

});

Open in new window


What am I missing?

Thanks
0
I used Leaflet.js at my previous job last year. I think in C# code, we created a FeatureCollection (something like that). We also had Geometry column in the database.

1. Now, I have an address and have its longitude and latitude. I get this, for example, from Google API.  I'll save this in the database

2. In Leaflet.JS, I can use GeoJson --> https://leafletjs.com/examples/geojson/

My questions... can I just use the Longitude and Latitude of the address with Leaflet.js?  how does GeoJson come into play ... I don't know why that project had a Geometry column in the database? Why do I need GeoJson? How can I create GeoJson for an address?
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