jQuery("#megathread").addClass("questions").show();

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > jQuery("#megathread").addClass("questions").show();

«‹›54 »

huhu: Feb 24, 2006

I've got a setup where there's a large image, with a bunch of thumbnails below it. Currently, I'm using bootstrap to shrink the full sized images to thumbnails. I'm using a click event to load the thumbnail image, full size, where the current large image is. My question is, if I actually modify all the thumbnails resized by bootstrap into actual thumbnails, would that only load the full sized image if someone clicked on the thumbnail? If true, I'm guessing this is a good way to get the webpage to load much quicker? (Hopefully this all makes sense, I've been coding for several hours now...about to go to bed.)

# ? Apr 10, 2015 05:29

Adbot: ADBOT LOVES YOU

# ? May 5, 2024 00:13

hedgecore: May 2, 2004

If you're just resizing the full size images down to whatever you consider thumbnail sized, it's already downloading the full image anyway. Open up the Network tab in developer tools (just assuming you're in Chrome) and refresh the page to see the files downloaded by the browser.

Ideally, you cut thumbnail sized images and store them on the server too. Store a data attribute (like <img data-full="path/to/fullsize.jpg" src="path/to/thumbnail.jpg" />) and then write a helper function where on click, it changes the source of the full size image container to the data attribute's value of the thumbnail you clicked on.

# ? Apr 10, 2015 06:22

huhu: Feb 24, 2006

hedgecore posted:

If you're just resizing the full size images down to whatever you consider thumbnail sized, it's already downloading the full image anyway. Open up the Network tab in developer tools (just assuming you're in Chrome) and refresh the page to see the files downloaded by the browser.

Ideally, you cut thumbnail sized images and store them on the server too. Store a data attribute (like <img data-full="path/to/fullsize.jpg" src="path/to/thumbnail.jpg" />) and then write a helper function where on click, it changes the source of the full size image container to the data attribute's value of the thumbnail you clicked on.

Sorry this is my first time implementing jQuery on a page...

Here's the webpage in question now that I've got it setup: http://travisbumgarner.github.io/projects.html

As an example, for senior design project, those first six "thumbnails" are actually the full sized images modified using bootstrap. There's jQuery on the page to run:

code:

  
$('#sd1').click(function(){
	$("#sdHeader").attr('src','images/projects/seniorDesign/sd1.jpg');
});

When the second image, with ID #sd1, is clicked, it loads sd1.jpg to the larger space. If I replace those six "thumbnails" with actual scaled down thumbnails, is it correct to assume that although the jQuery code mentions sd1.jpg, it won't load until the click event occurs? Therefore, the page would only load one large image instead of several large images?

# ? Apr 10, 2015 20:41

hedgecore: May 2, 2004

Yep, that assumption is correct. If you just scale down the full size images for the thumbnails using CSS (bootstrap in this case), though, it will download all of the full size images every time you load the page. If you serve separate thumbnail files, it will be more requests but the initial page load will be much faster. Though there will be a moment's delay when you click an image (to download the full size version).

As for the data attribute suggestion, it's so instead of writing this:

code:

$('#sd0').click(function(){$("#sdHeader").attr('src','images/projects/seniorDesign/sd0.jpg');});
$('#sd1').click(function(){$("#sdHeader").attr('src','images/projects/seniorDesign/sd1.jpg');});
$('#sd2').click(function(){$("#sdHeader").attr('src','images/projects/seniorDesign/sd2.jpg');});
$('#sd3').click(function(){$("#sdHeader").attr('src','images/projects/seniorDesign/sd3.jpg');});
$('#sd4').click(function(){$("#sdHeader").attr('src','images/projects/seniorDesign/sd4.jpg');});
$('#sd5').click(function(){$("#sdHeader").attr('src','images/projects/seniorDesign/sd5.jpg');});

You can just write one function. If you want to add new thumbnails, you don't need to update the JS.
Here are the two changes you'd have to make:

1. Add 2 data attributes to each of the thumbnail image tags - "data-src" for the path to the full-size image in the thumbnail, and "data-target" for where the image should display.

code:

<img src="images/_thumbnails/projects/seniorDesign/sd0.jpg" alt="Control system on breadboard with temperature sensors hooked up." id="sd0" data-src="/images/projects/seniorDesign/sd0.jpg" data-target="sdHeader">

2. Replace the individual click functions as you have now with:

code:

$('.highlights>img').click(function (e) { // on click of any img tags within a .highlights div, do the following
	var $target = $('#' + $(this).data('target')),  // stores the selector for the full size img 
		path = $(this).data('full'); // gets the image path to the full size variable

	$target.attr('src', path); // sets the full size img src to the one designated by the thumbnail
});

# ? Apr 11, 2015 18:35

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

darthbob88 posted:

That would work, and next time the problem comes up I'll have to try it.

New question: Sometimes a client will load jQuery multiple times on one page, so depending on when certain scripts load, one of the plugins I need might attach to one version while another plugin gets another version. As a result, when my code attempts to call $("#thingy").plugin(), I get an error because $.fn.plugin is undefined, and everything breaks. Is there some way to choose which version of jQuery I use for a given plugin, or should I just continue yelling and screaming at clients to only load jQuery once?

Yell at them to only load jquery once. If you set a globally scoped variable like "$" and then it gets set to something else later, there's nothing you can do to tell it to use the "other version" of that variable, as it is long gone (overwritten that is).

Your other option of course is to modify the offending plugin to work better with the various versions of jquery they might have loading, but that is going to be a pain in the rear end to maintain.

# ? Apr 12, 2015 04:11

darthbob88: Oct 13, 2011; YOSPOS

subx posted:

Yell at them to only load jquery once.

That's what I thought, thanks for the confirmation and justification for yelling at clients. As many problems as I have at work, it's always nice to find things that somebody else needs to fix.

# ? Apr 12, 2015 11:20

RICHUNCLEPENNYBAGS: Dec 21, 2010

darthbob88 posted:

That would work, and next time the problem comes up I'll have to try it.

New question: Sometimes a client will load jQuery multiple times on one page, so depending on when certain scripts load, one of the plugins I need might attach to one version while another plugin gets another version. As a result, when my code attempts to call $("#thingy").plugin(), I get an error because $.fn.plugin is undefined, and everything breaks. Is there some way to choose which version of jQuery I use for a given plugin, or should I just continue yelling and screaming at clients to only load jQuery once?

You could do something like if (!$('#obj').plugin) {$.fn.plugin = someFunctionFromSomewhere;} if you want to support this scenario.

# ? Apr 15, 2015 03:28

sausage king of Chicago: Jun 13, 2001

I have a basic sortable list

code:

<ul id="sortable1" class="connectedSortable">        
    <li class="ui-state-default" id="1">1</li>
    <li class="ui-state-default" id="2">2</li>
    <li class="ui-state-default" id="3>3</li>
    <li class="ui-state-default" id="a">a</li>
    <li class="ui-state-default" id="b">b</li>
    <li class="ui-state-default" id="c">c</li>
</ul>

    <div id="sortedFields">
        <ul id="sortable2" class="connectedSortable"></ul>
    </div>

which works fine. What I'd like to do, but have no idea how, is to have some fields dependant on others. So, if I drag field "1" over to "sortable2", then field "a" automatically gets placed in "sortable2". If I drag "2" over, "b" automatically gets placed in "sortable2".

Pretty new to this so not sure if this is possible, or if this is something that's super easy. Have been looking on the sortable site but nothing has popped up.

# ? Apr 22, 2015 16:14

subx: Jan 12, 2003; If we hit that bullseye, the rest of the dominoes should fall like a house of cards. Checkmate.

idontcare posted:

I have a basic sortable list
code:
<ul id="sortable1" class="connectedSortable">        
    <li class="ui-state-default" id="1">1</li>
    <li class="ui-state-default" id="2">2</li>
    <li class="ui-state-default" id="3>3</li>
    <li class="ui-state-default" id="a">a</li>
    <li class="ui-state-default" id="b">b</li>
    <li class="ui-state-default" id="c">c</li>
</ul>

    <div id="sortedFields">
        <ul id="sortable2" class="connectedSortable"></ul>
    </div>
which works fine. What I'd like to do, but have no idea how, is to have some fields dependant on others. So, if I drag field "1" over to "sortable2", then field "a" automatically gets placed in "sortable2". If I drag "2" over, "b" automatically gets placed in "sortable2".

Pretty new to this so not sure if this is possible, or if this is something that's super easy. Have been looking on the sortable site but nothing has popped up.

You just need to trigger an event whenever something gets dropped into sortable2 that looks for its "attached" field and moves it to the sortable2 element.

If you are using some sort of drag and drop plugin, it should have a callback that fires when you drop, just check to see if it is now in the sortable2 element.

Not hard to do but I can't write the code on a phone.

# ? Apr 22, 2015 18:14

sausage king of Chicago: Jun 13, 2001

subx posted:

You just need to trigger an event whenever something gets dropped into sortable2 that looks for its "attached" field and moves it to the sortable2 element.

If you are using some sort of drag and drop plugin, it should have a callback that fires when you drop, just check to see if it is now in the sortable2 element.

Not hard to do but I can't write the code on a phone.

Thanks for the reply. I've been googling and screwing around with this and have something that appears to work:

code:


<ul class="connectedSortable">

    <li>foo1</li>
    <li>foo2</li>
    <li>foo3</li>

</ul>

<hr>

<ul class="connectedSortable new"></ul>   

$(function() {
    
    initSort($('.connectedSortable'));
    
});

function initSort(element) {
    
    element.sortable({
		connectWith: '.connectedSortable',
		beforeStop: function(event, ui) {
			var parent = ui.helper.parent();
            
            if(parent.hasClass('new')) {
                if(parent.find('li').text() === 'foo3'){    
                    $('li').filter(function() { return $.text([this]) === 'foo2'; }).remove();
                    parent.append('<li>foo2</li>');                
                }	            
            }
		}
	}).disableSelection();
    
}

so if I drag foo3 down, foo2 goes down too (my jsfiddle). Is this the right way to do it, or is there a better way?

# ? Apr 22, 2015 20:52

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

JavaScript-wise the code is perfectly fine, but I want to steer you away from two specific things:

Avoid using classes as selectors for jQuery, because when you start moving stuff around to modify your styles, you can end up easily breaking your JS code.
Avoid putting anything data-related into your code (=== 'foo3'). Doing this even once encourages you to do it more and more, and this is how you end up with a wall of IF statements, and code that's specific to a certain subset of data, rather than doing it properly the first time through.

I'd personally do something more like this:
https://jsfiddle.net/rngv2fow/4/

The biggest change is obviously how the HTML now defines the data relationship between items.

code:

<ul data-container="sortable-items" class="connectedSortable">
    <li data-id="2">foo2</li>
    <li data-id="3" data-dependencies="[2,5]">foo3</li>

The code uses the data-* attributes to store both an ID, and an array of dependencies for a specific item in the list.
This way if your data or dependencies get modified, you only have to modify the HTML, which fully represents the data of the item, and the logic of the JavaScript is only responsible for resolving and handling the dependencies. A clear separation between data and logic.

The code also uses data-container="sortable-items" to define the HTML containers that are sortable. This is another separation of simple JS selectors from CSS styles.
I also refactored the code to jQuery plugin style, but that's just because I wanted to define all the parameters outside the function, making the code reusable.

Fun things to try at home:

Make the code able to handle a dependency with a dependency
Make the code able to handle circular dependencies without locking up

# ? Apr 25, 2015 04:53

Bob Morales: Aug 18, 2006; ~~Just wear the fucking mask, Bob~~

I don't care how many people I probably infected with COVID-19 while refusing to wear a mask, my comfort is far more important than the health and safety of everyone around me!

I have an element defined in my HTML

code:

 <div id='whatever' height='100px' width='100px'><canvas id='some_canvas' height='100' width='100'></canvas></div>

Near the beginning of my code I have a $('some_canvas').position() call, and it returns the actual position of the div in the browser in Firefox, but it only works like 1/4 of the time in Chrome. The rest of the time it returns 8,8.

Do I need to wait for some sort of event to let me know when the browser is done positioning poo poo? If I call position() later (in my event loop, for example) it gives me the expected result.

# ? Apr 25, 2015 19:56

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

You mean like $(document).ready(), or what?

If not, is it possible for you provide an example, preferably on jsfiddle.net?

# ? Apr 26, 2015 06:20

obstipator: Nov 8, 2009; by FactsAreUseless

IIRC, there's weirdness between browsers for .offset(), .position(), and probably others, mostly because of position styles (absolute, fixed, none). So if .position() is broken, try .offset() or .offsetParent(). You'll probably have to add more math on nearby elements as a result.

# ? Apr 26, 2015 19:47

huhu: Feb 24, 2006

code:

<div class="row">
	<div class="all-projects col-xs-4 js"><img src="http://placehold.it/200x200"><br><h1>JS</h1></div>
	<div class="all-projects col-xs-4 html "><img src="http://placehold.it/200x200"><br><h1>HTML</h1></div>
	<div class="all-projects col-xs-4 html css"><img src="http://placehold.it/200x200"><br><h1>HTML, CSS</h1></div>
	<div class="all-projects col-xs-4 js html"><img src="http://placehold.it/200x200"><br><h1>JS, HTML</h1></div>
	<div class="all-projects col-xs-4 css"><img src="http://placehold.it/200x200"><br><h1>CSS</h1></div>
	<div class="all-projects col-xs-4 js"><img src="http://placehold.it/200x200"><br><h1>JS</h1></div>
	<div class="all-projects col-xs-4 html "><img src="http://placehold.it/200x200"><br><h1>HTML</h1></div>
	<div class="all-projects col-xs-4 css"><img src="http://placehold.it/200x200"><br><h1>CSS</h1></div>
</div>


		$("#js-filter").click(function(){
			$(".html").fadeOut();
			$(".css").fadeOut();
			$(".js").fadeIn();

Got these two sections of code. Basically what happens is when you click on #js-filter, all the div's that have JavaScript in them appear, and everything else disappears. However, if I have a JavaScript div with HTML and/or CSS, those get hidden because of $(".html").fadeOut();. How can I make it so that jQuery only hides elements that only have HTML and/or CSS?

# ? May 22, 2015 21:44

Spatulater bro!: Aug 19, 2003; Punch! Punch! Punch!

huhu posted:

code:

<div class="row">
	<div class="all-projects col-xs-4 js"><img src="http://placehold.it/200x200"><br><h1>JS</h1></div>
	<div class="all-projects col-xs-4 html "><img src="http://placehold.it/200x200"><br><h1>HTML</h1></div>
	<div class="all-projects col-xs-4 html css"><img src="http://placehold.it/200x200"><br><h1>HTML, CSS</h1></div>
	<div class="all-projects col-xs-4 js html"><img src="http://placehold.it/200x200"><br><h1>JS, HTML</h1></div>
	<div class="all-projects col-xs-4 css"><img src="http://placehold.it/200x200"><br><h1>CSS</h1></div>
	<div class="all-projects col-xs-4 js"><img src="http://placehold.it/200x200"><br><h1>JS</h1></div>
	<div class="all-projects col-xs-4 html "><img src="http://placehold.it/200x200"><br><h1>HTML</h1></div>
	<div class="all-projects col-xs-4 css"><img src="http://placehold.it/200x200"><br><h1>CSS</h1></div>
</div>


		$("#js-filter").click(function(){
			$(".html").fadeOut();
			$(".css").fadeOut();
			$(".js").fadeIn();

Maybe the .not() function?

code:

$(".html").not(".js, .css").fadeOut();

But more practically you should probably just assign your elements different classes that don't overlap with one another.

# ? May 22, 2015 22:05

huhu: Feb 24, 2006

caiman posted:

Maybe the .not() function?
code:
$(".html").not(".js, .css").fadeOut();
But more practically you should probably just assign your elements different classes that don't overlap with one another.

Awesome thanks.

Think it'd be a bit complicated to assign unique classes for all of them. Unless I'm missing some feature of jQuery.

# ? May 23, 2015 00:26

Hughmoris: Apr 21, 2007; Let's go to the abyss!

*Ignore my poorly worded ramblings, I found a solution.

Hughmoris fucked around with this message at 04:10 on Jun 26, 2015

# ? Jun 26, 2015 01:19

stoops: Jun 11, 2001

I was having some trouble, so perhaps someone can tell me where i'm going wrong.

I have a list of about 20 ajax links. Each link opens up a specific div. Sorta like a MORE INFO div. You click on div 1, goes to a controller, and it opens div-MoreInfo-1 with the new information, etc

Okay, that works.

Now, what I would like to do is have an "open all" button, that when clicked, will open each of the ajax links.

I thought i could run a trigger on each link and open them up, but what ends up happening on Chrome and Firefox is that it stops after about the 13th link. (It opens 13 links and then opens nothing else.)

On Safari, it opens all of them up correctly.

I thought maybe it's hitting the controller function too fast, so I put a delay of 3 seconds, thinking that may be the problem, but it still opens all the links rather fast and quits after the 13th.

my OpenAll button code looks like this. I didn't put all the trigger links, only a few.

code:

<script>
$(document).ready(function(){
	
	$( "#openAll" ).click(function() {
				
		setTimeout(function () { $('#Link-2617').trigger('click'); }, 3000);		
		setTimeout(function () { $('#Link-2616').trigger('click'); }, 3000);		
		setTimeout(function () { $('#Link-2615').trigger('click'); }, 3000);		
		setTimeout(function () { $('#Link-2614').trigger('click'); }, 3000);		
		setTimeout(function () { $('#Link-2613').trigger('click'); }, 3000);		
	});

});
</script>

Any help is appreciated. Thanks.

# ? Jul 1, 2015 18:42

obstipator: Nov 8, 2009; by FactsAreUseless

Maybe the ajax calls are failing for some reason? Check the dev tools network tab and see if theyre all giving the expected response and that theres 20 of them.

Or perhaps not all the elements with click events being triggered exist? If that's the case, it might be simpler to give each div a common class and then triggering the click on $(".piss") or whatever the class name is to make sure theyre all being hit.

# ? Jul 2, 2015 04:01

stoops: Jun 11, 2001

obstipator posted:

Maybe the ajax calls are failing for some reason? Check the dev tools network tab and see if theyre all giving the expected response and that theres 20 of them.

Or perhaps not all the elements with click events being triggered exist? If that's the case, it might be simpler to give each div a common class and then triggering the click on $(".piss") or whatever the class name is to make sure theyre all being hit.

i checked the dev tools and i see that 7 of them, the url fails.

But when i rightclick and open the url, it works.

Does Ajax or php timeout if being hit pretty quickly?

# ? Jul 2, 2015 15:29

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

stoops posted:

i checked the dev tools and i see that 7 of them, the url fails.

But when i rightclick and open the url, it works.

Does Ajax or php timeout if being hit pretty quickly?

What's the error? Is a cross-domain request involved, perhaps? https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

# ? Jul 3, 2015 05:38

His Divine Shadow: Aug 7, 2000; I'm not a fascist. I'm a priest. Fascists dress up in black and tell people what to do.

I have a simple line of jquery code that is supposed to reload part of the opened page when you click on an element. It works just fine except this part of the page that should be reloaded has it's own embedded jquery scripts and they are not run with the partial reload, so those parts go blank instead of changing. What can I do to also get the scripts to reload?

Simplified the relevant code looks like this:

code:

$("#header").load("/path/file.php #header")

# ? Feb 22, 2016 12:50

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

His Divine Shadow posted:

I have a simple line of jquery code that is supposed to reload part of the opened page when you click on an element. It works just fine except this part of the page that should be reloaded has it's own embedded jquery scripts and they are not run with the partial reload, so those parts go blank instead of changing. What can I do to also get the scripts to reload?

Simplified the relevant code looks like this:
code:
$("#header").load("/path/file.php #header")

Do you control that part of the page on the server end, too? If so, you should probably move that code out of that part of the page and run it in .load's callback. You could also make it self-executing, but that's a kludge. If you don't control that part of the page, you're going to need to call the code from the callback, anyway.

# ? Feb 22, 2016 15:58

His Divine Shadow: Aug 7, 2000; I'm not a fascist. I'm a priest. Fascists dress up in black and tell people what to do.

I got it working using this example from stack overflow:
https://stackoverflow.com/a/7330106/1005173

Plonked in that bit of code after the load and tweaked it to suit. Works!

# ? Feb 23, 2016 10:24

mooky: Jan 14, 2012

I'm no javascript or jquery expert but I do a pretty good job of figuring things out.

I have a group of radio buttons, when certain ones are selected, a textarea field is displayed.
I figured out how to display the field when the proper radio buttons are selected but I have an issue with displaying the field when a radio button is checked by default.

This is my change function and it works great. If I appended .change() to it, it doesn't work for the radio that is selected by default.

code:

$('input[type=radio]').on('change',function () {
    hideLabel();
    hideField();

    if (($(this).attr('id') == 'apple' && $(this).is(':checked')) || ($(this).attr('id') == 'orange' && $(this).is(':checked'))) {
        showLabel();
        showField(true);
    }

    if ($(this).attr('id') == 'banana' && $(this).is(':checked')) {
        showLabel();
        showField(false);
    }
});

To address that issue I created this which also works:

code:

var checkedRadioId = $('input[type=radio]:checked').attr('id');
if (checkedRadioId === 'apple' || checkedRadioId === 'orange') {
    showLabel();
    showField(true);
}

if (checkedRadioId == 'banana') {
    showLabel();
    showField(false);
}

My question...
How do I combine the two to accomplish what I want?
Or, better yet, what's the best practice method to accomplish onChange behavior along with setting a default value for a radio group?

# ? Feb 25, 2016 16:37

hedgecore: May 2, 2004

I think you could probably just tack on a .click() or a .trigger('click') to the selector once the change function has been bound.

# ? Feb 26, 2016 02:53

mooky: Jan 14, 2012

hedgecore posted:

I think you could probably just tack on a .click() or a .trigger('click') to the selector once the change function has been bound.

Goddamnit, I wasted way too much time on this.

Thanks for the suggestion, that did exactly what I wanted.

Edit: nevermind, it didn't work.
It just selects the last option, not the active one.

mooky fucked around with this message at 05:21 on Feb 26, 2016

# ? Feb 26, 2016 03:14

DrBobChoco: Jan 12, 2006

Calling

code:

$('input[type=radio]:checked').trigger('change');

after the change handler's bound has worked for me in the past.

# ? Feb 27, 2016 01:08

stoops: Jun 11, 2001

I have 2 dropdowns that each call the same function.

code:

<select name="data[Data][limit]" class="form-control" onchange="javascript: changeResults ();" data-for="Limit" id="DataLimit">
    <option value="10">10</option>
    <option value="20">20</option>
</select>

<select name="data[Data][view]" class="form-control" onchange="javascript: changeResults ();" data-for="View" id="DataView">
    <option value="icon">Icon</option>
    <option value="list">List</option>
</select>


<script>
function changeResults () {
    console.log($(this));                     //[Window]
    console.log($(this).attr('data-for'));    //Undefined
</script>

I want to know which dropdown called the function.

I found two ways I could do this, both console.logged up there.

The first console.log gives me [Window] which is a huge array that I can't make sense of, and the second one gives me Undefined.

I know this is probably an easy question, but any help is appreciated.

# ? Mar 2, 2016 19:16

kloa: Feb 14, 2007

Change your onchange to "changeResults(this);" and then change the logging to:

code:


function changeResults(select) {
    console.log(select.id);
}

# ? Mar 2, 2016 19:43

stoops: Jun 11, 2001

kloa posted:

Change your onchange to "changeResults(this);" and then change the logging to:
code:
function changeResults(select) {
    console.log(select.id);
}

Thanks, that worked.

One quick question. In a php function, i dont have to pass a variable by doing this

code:

function changeResults(select = null) {
}

Can I do the same in Jquery or Javascript?

# ? Mar 2, 2016 19:54

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

stoops posted:

Thanks, that worked.

One quick question. In a php function, i dont have to pass a variable by doing this
code:
function changeResults(select = null) {
}
Can I do the same in Jquery or Javascript?

JS function arguments are not required at the call site.

JavaScript code:

function doSomething(withThis){
   if(withThis == undefined) {//the call works fine and this runs
      throw "I actually needed that";
   }
   //do stuff
}
doSomething();

# ? Mar 2, 2016 20:58

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

I am trying to implement a find and replace for a table and was wondering how can I select the rows, and then update the specific pieces of data.

The user will pick which column they want to search, and then provide From/To values. The catch is that there is generally a secondary field I have to update based on which value they are changing to.

For example: They need to be able to see column EIA and Frequency (EIA is ID, Frequency is Description). They want to mass update the EIA columns: replace EIA 1 with EIA 2, but the frequency record needs to change too.

Example table:

code:

 <table class="table table-bordered table-hover table-condensed table-responsive sortable" id="tblMaps">
  <tbody>
<tr id="map2ch320" class="dirty-channel">
        <td data-value="
            51
        ">
            <a href="javascript:;" class="edit-eia linked-edit" id="Eia" data-eia="51" data-channel="320" data-map="2">51</a>
        </td>
        <td data-value="
            387000
        ">
            <a href="javascript:;" class="edit-eia linked-edit" id="Frequency" data-eia="51" data-channel="320" data-map="2">387000</a>
        </td>
        <td data-value="
             Save
        ">
            <button type="submit" class="btn btn-primary btn-sm save-row"><i class="fa fa-floppy-o"></i> Save</button>
        </td>
    </tr>
</tbody>
</table>

So in this example, I need to search all rows for the "From" value (51) and replace it with the "To" value (let's say 40), and then lookup the Frequency value for EIA of 40 and then update the Frequent value too.

I'm not really sure where to start! Any ideas?

# ? Apr 4, 2016 20:02

Uziel: Jun 28, 2004; Ask me about losing 200lbs, and becoming the Viking God of W&W.

OK as it always goes, once you ask the question, you start getting ideas:

code:

 $("td:has(> a:contains('from value'))").parent

Then I can iterate through the collection of rows, check the value that matches the item ID for a match else keep on moving?

# ? Apr 4, 2016 20:23

huhu: Feb 24, 2006

Edit: nevermind.

huhu fucked around with this message at 21:11 on May 30, 2016

# ? May 30, 2016 21:03

stoops: Jun 11, 2001

I have a bunch of li's with different nodeids and different nodetexts.

code:

<li data-nodeid="2" data-nodetext="mms1:hpca:brst">

What is the best way for me to get the nodeid by just knowing the nodetext?

# ? Dec 5, 2016 20:31

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

stoops posted:

I have a bunch of li's with different nodeids and different nodetexts.
code:
<li data-nodeid="2" data-nodetext="mms1:hpca:brst">
What is the best way for me to get the nodeid by just knowing the nodetext?

code:

$('li[data-nodetext="' + node_text_here + '"]);

That'll probably be pretty slow, so consider preceding it with a parent, preferably one with an ID or unique class:

code:

$('#parent li[data-nodetext="' + node_text_here + '"]);

# ? Dec 5, 2016 20:46

stoops: Jun 11, 2001

Munkeymon posted:

code:
$('li[data-nodetext="' + node_text_here + '"]);
That'll probably be pretty slow, so consider preceding it with a parent, preferably one with an ID or unique class:
code:
$('#parent li[data-nodetext="' + node_text_here + '"]);

i tried to get the nodeid like so but my value keeps coming back undefined.

value = $("li[data-nodetext='" + value + "']");

console.log(value.nodeid);

# ? Dec 5, 2016 21:02

Adbot: ADBOT LOVES YOU

# ? May 5, 2024 00:13

YO MAMA HEAD: Sep 11, 2007

you need extra quotes around value

e: nevermind! variable-width fonts make quotes hard to read

YO MAMA HEAD fucked around with this message at 21:58 on Dec 5, 2016

# ? Dec 5, 2016 21:20

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > jQuery("#megathread").addClass("questions").show();

«‹›54 »