This question already has answers here:
jQuery attribute selector for multiple values
(2 answers)
Closed 7 years ago.
This is pretty simple, but I need to be able to toggle showing columns in a table.
The idea is to have a function that will take the name of the column (all the rows have the same data-field in the same column) and hide it, adjusting the width of the table as it goes.
Using Chrome's inspector, I came up with a simple proof of concept
$('[data-id="column"],[data-field="column"]').toggle()
After running the above, I need to adjust the width of the element plus / minus 4 pixels for the table to fit correctly - The table renders a white box on the right hand side where the column(s). This is just a proof of concept and the actual width will be stored in a variable that will be manipulated to allow multiple columns to be hidden.
$(".oe_list_content").width($(window).width()+/-4)
I made a simple function to come up with the initial idea, but when I run the function, it returns undefined and doesn't make the changes. I'm fairly certain that it can, but is the jQuery selector not able to take a function variable?
function rowToggle(row){
// Verify the rows even exist in the DOM
if($('[data-id="'+row+'"]').length){
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
if($('[data-id="'+row+'"]').is(':hidden')){
$(".table").width($(window).width()+4);
}else{
$(".table").width($(window).width()-4);
}
}
}
This really seems like a variable problem because
var row = "column";
$('[data-id="'+ row +'"]').toggle();
doesn't actually toggle the field. Am I missing something?
This line
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
Should be:
$('[data-id="'+row+'"],[data-field="'+row+'"]').toggle();
It's a single selector string. Not two strings separated by a comma as you had it.
Further reference to this issue: jQuery attribute selector for multiple values
Related
This question already has an answer here:
Prepend divs without closing them
(1 answer)
Closed 7 years ago.
My jsp file contains -
<table class="container"></table>
JS file does -
$('.container').append('<thead><tr><th>Name</th>'); //step 1
/* some other events */
$('.container').append('<th>Date</th></thead></tr>'); //step 3
the <thead> and <tr> tags get closed, i.e. get appended with automatically after step one before I can actually reach step 3 and close them myself.
It is necessary for me to calculate the next heading dynamically which is why some other steps need to occue before I create the next heading.
Is there any way by which I can prevent those tags from closing upon the end of step 1 and later close them myself.
Use a single .append() in your code. Declare a variable and keep on adding the data required to it. Then append that variable to "container" at the end. Use minimum DOM manipulation wherever possible.
For example:
Var content = '<thead><tr><th>Name</th>';
//Do your manipulation and add more data to "content"
content = content + '<th>Date</th></thead></tr>';
Finally append the variable in container:
$('.container').append(content);
Basically, I'm wondering if it's possible to have a line of javascript isolate a specific hex code on a page (lets say #1166e7) and change it to another hex code (lets say #ff0000).
I know that this is a weird question because the process could easily be done by just changing the css, but in my situation, just pretend I can't access the css.
Thanks in advance.
You can go over all css properties of every element present on the page and replace the value you are looking for. You could do something like:
$("*").foreach(function() {
for(var key in this.style) {
if(this.style[key] == '#1166e7') {
this.style[key] = '#ff0000';
}
}
});
Note that I used the jQuery Framework to select all elements within the page. See Javascript: How to loop through ALL DOM elements on a page? for better approaches with wich you can iterate over all elements.
I'm currently trying to replace a piece of plain text in a page that also contains a form. I am aware that upon replacing code containing a form, the form elements get recreated. This can break forms (and it does on the webpage I'm manipulating).
Usually, I go about this by using the "getElementsByTagName" function, to make sure that I don't need to replace the code containing the form and this has always been possible so far. However at this point, I have arrived at a page where the smallest tagname is a div that contains the text I need to replace and a form. This div is further subdivided in tables so initially I thought "let's get elements by table", but exactly the piece that I need to replace is not subdivided in a table.
So I used this code to replace:
document.documentElement.innerHTML = document.documentElement.innerHTML.replace(RegEx, replaceString);
Of course, this breaks the form on the page, which is not wanted behavior.
Does anyone have any idea how to go about this without breaking the form? Is it possible to somehow get a reference to the part of the div that does not contain a table? Is it possible to alter just part of the code? Right now I take an instance of the code, replace the matches in the instance, and then overwrite the original code with the altered instance. I once remember trying document.documentElement.innerHTML.replace(RegEx, replaceString); on another page but this only returned an instance of altered code, it did not alter the original code.
This is part of the page:
<div class="BoxContent" style="background-image:url(http://static.tibia.com/images/global/content/scroll.gif);">
<TABLE></TABLE>
<BR>
Some text here.
<BR>
And some more.
<table></table>
<table></table>
</div>
I need to do some changes in the text between the tables.
I have looked around on SO and found similar question about adding things to a form with innerHTML, but this did not help my cause. So, all help is appreciated here!
Kenneth
Here - plain JS
DEMO
window.onload=function() {
var nodes = document.getElementsByClassName("BoxContent")[0].childNodes;
for (var i=0,n=nodes.length;i<n;i++) {
if (nodes[i].nodeType==3) {
// console.log(nodes[i].textContent)
nodes[i].textContent=nodes[i].textContent.replace(/some/gi,"Lots");
}
}
}
Can anyone help me with javascript that hides divs matching a specific random number? Every time I load this page it has two divs like <div id='1945498985'> the number changes every page load but remains between 9-10 in length how would I fetch the two divs on the page and remove/hide them?
Let me clarify the two divs on this page each have a random number between 9 and 10 in length.
One such div looks like this:
<div id='843401712' style='position:relative;z-index: 1000;left: 75px;top: -340px; padding:0px; margin: 0px;width: 310px; height:280px; text-align: center; border:3px gray solid'></div>
I do not have control over the generated html I am looking to run javascript alongside a page as a greasemonkey extension to hide these two divs.
Thanks for any help you guys offer, I'm new to javascript so its a big help.
Use document.getElementsByTagName() to fetch all div elements. Then, check their id using maybe a regular expression like [0-9]{9,10} and if the id matches, remove/hide them.
You have two problems with your question.
First, you're suggesting that you have two divs with the same ID, which is illegal.
Secondly, your ID is all numeric, which is also illegal.
Here (using jquery for brevity and assuming you're getting your random from a dynamically generated page like from PHP) is an example of doing what you're looking for:
<script type="text/javascript">
var pRand = '<?php echo $pRand; ?>';
document.ready(function(){
$('.el-'+pRand).hide();
});
</script>
...
<div class="el-<?php echo $pRand;?>"></div>
<div class="el-<?php echo $pRand;?>"></div>
Use jQuery filter and provide a function that does a regex match on your id:
http://api.jquery.com/filter#expr
See here:
http://jsfiddle.net/ANW8C/
In your case...
Example:
$('div').filter(function() {
return this.id.match('\\d{9,10}');
} ).hide();
I suggest to you using jquery it has some selector filters that may help you to selecting correct div
http://api.jquery.com/category/selectors/
As others have said, you should first make sure you have legal ID values. They cannot start with a number and there can only be one object with a given ID in the page.
If you have any control over the generated HTML, it would be best to put a common class name on all divs that you want to hide. You can then easily find them or add a style rule that will hide them.
<div id='a1945498985' class="hideMe"></div>
<div id='a2945498986' class="hideMe"></div>
The, you can either hide all objects with that class name. In jQuery, that would simply be this:
$(".hideMe").hide();
Here are some examples - I haven't used jQuery because you haven't suggested that you are using it. It is very useful for this kind of stuff, but you can also solve the problem without it if you need to.
http://jsfiddle.net/Sohnee/tpGqj/
There are two methods used, one relies on a parent container and the other uses the new getElementsByClassName support that some browsers have (you can roll your own getElementsByClassName if you need to support older browsers).
Ideally, you wouldn't apply a random id to an element - there seems little point in giving an element a random id. If you are setting the random id server side, you could also supply the id to the JavaScript so it can target the element with a getElementById call, which would be the most efficient.
Also, I concur with the statements about numeric ids being invalid - you should put at least one alphabetical character at the start of the id.
I feel like this is a simple question, but I am still relatively new to javascript and jquery.
I am developing a site for a touch interface that uses unordered lists and jquery .click functions to take input data. I have a section to input a m:ss time, with 3 divs, each containing a list of digits for time. I need to get the input for each column and set it as a variable. I originally designed the inputs to change form inputs, because I didn't understand javascript very much. It was easy to change the 3 hidden inputs by using div id's, but I can't figure out how to do it now with javascript variables.
Here is my original jquery code...
$("div#time>div>ul>li").click(function() {
var id = $(this).parents(".time").attr("name");
var number = $(this).html();
$("input#"+id).val(number); });
The last line sets one of 3 hidden inputs equal to whatever was clicked. I need to make it so separate variables take the inputs, then I can manipulate those variables however I want.
Here's a short snippet of the html, to have an idea of how jquery grabs it.
<div id="time">
<h1>Time</h1>
<div name="minute" class="time" id="t_minute">
M :
<ul>
The full time html is here: link text
Thanks everyone!
I've been using SO to answer many questions I've had, but I couldn't find something for this, so I figured I would join, since I'm sure I will have more questions along the way.
So I have tried adding the following, and I still can't get it to work right.
window.myValues[id] = number;
event[i].min = myValues["minute"];
event[i].sec = myValues["second"];
event[i].sin = myValues["single"];
event[i].time = String(event[i].min) + String(event[i].sec) + String(event[i].sin);
I tried it both with and without the quotation marks. I have not used window.* for anything, so I'm not very sure how to handle this.
First thing to mention here, don't be unnecessary specific. In your example
$('#time').find('li').click()
should be enough.
If I understand you well, you want to store the some data. You might want to use
jQuery's $.data method. Example:
$('#time').find('li').click(function(){
var $this = $(this);
var name = $this.closest('.time').attr('name');
$.data(document.body, name, $this.html());
});
This would store the html of the clicked li in a global Object, which can be accessed like
alert($.data(document.body, 'minute'));
you should be able to reference the variable from the window[] object, so something like window[id] should do the trick for referencing the variable.