I have an element in my html with this markup:
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" role="tabpanel" style="width: 98px; display: block;">
I would like to know how to remove the width attribute using jQuery
I am using this tree grid directive github.com, and below css is taken directly from this library.
.tree-grid .level-2 .indented {
position : relative;
left : 20px;
}
<td><a ng-click="user_clicks_branch(row.branch)"><i ng-class="row.tree_icon" ng-click="row.branch.expanded = !row.branch.expanded" class="indented tree-icon"></i></a><span class="indented tree-label tree-grid-row level-2>
Citi Corporate and Investment Banking</span>
</td>
The problem i am having is that span inside td is overflow and showing in the next column, for that purpose i need to add right:20px, but it is not working.
Is there any solution to this problem
plnkr.co
What is wrong with this piece of code:
jQuery('<iframe id="groundplan_popup" class="groundplan_hidden" />').appendTo("#popup_holder");
var iframe = jQuery("#groundplan_popup");
iframe.attr("src","::censored::" + filename);
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));
So i have to dynamically create an iframe element which will open up .pdf file in a popup and that part works. What I can’t manage to do is create a div with an id of “groundplan_popup_exit” within that iframe. I don’t know exactly why this doesnt’ work and what exactly I’m doing wrong. When i inspect the iframe window console brings out this warning:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more
details.
Dont know if it has anything to do with the reason why this isn’t working.
EDIT:
This is what my code looks like now.
Console prtscr:
Iframe console elements prtscr:
So i’m basically confused about the whole situation as I’m not that experienced in using jquery in general and this is my first time using it with iframes. I’m not even sure if the #groundplan_popup_exit div is even created and how do I find it if it is.
I see some problems:
var iframe_body = iframe.contents().find('body').append('<div id="groundplan_popup_exit"></div>');
Here you are already appending the element to the body.
var exit_btn_gp = iframe_body.append(jQuery("#groundplan_popup_exit"));
After you have appended above, you are trying to append again with jQuery("#groundplan_popup_exit") which does not even exists.
Fix (untested) would be something like this:
var iframe_body = iframe.contents().find('body');
var exit_btn_gp = iframe_body.append('<div id="groundplan_popup_exit"></div>');
I have the following code, for learning porpose. In short, I want to grab some data from a database, with the help of a drop-down menu. My problem is that now I’m using a submit button to make the submit action. And the improvement that I want, is to get rid of the submit button, and grab the infos when the drop-down changes.
I’ve tried to make a function for the code between line 1 and 12, and call it with: <body onload="process()">, but it’s not working. Then I tried to put the onchange="this.form.submit()" attribute to the <select> element, but this doesn’t work also, because it sends the data to process.php like any normal submission when not using ajax.
Anyone know any fix? Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body onload="viewdata()">
<form action="process.php" method="post" id="form">
<select name="select" id="select">
<option value="">Choose</option>
<option value="1">supervizor</option>
<option value="2">sef locatie</option>
<option value="3">muncitor</option>
<option value="0">toti</option>
</select><br/>
<input type="submit" value="Go"/>
</form>
<script type="text/javascript">
var frm = $('#form'); // **LINE 1**
frm.submit(function (ev) {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
$('#show').html(data);
}
});
ev.preventDefault();
}); // **LINE 12**
function viewdata(){
$.ajax({
type: "GET",
url: "process.php"
}).done(function( data ) {
$('#show').html(data);
});
}
</script>
<br/><br/>
<div id="show"></div>
</body>
</html>
You need to bind your processing on the change event of your drop down box.
$("#select").on("change", function(ev) {
// Your ajax processing
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
$('#show').html(data);
}
});
ev.preventDefault();
});
I have this script
var portfolio_in_arrears = [];
var portfolio_future = [];
var portfolio_good_standing = [];
var portfolio_ingrace_period = [];
$.each(JSON.parse(response.portfolio), function(index, value){
portfolio_in_arrears.push(value.in_arrears);
portfolio_future.push(value.future_clients);
portfolio_good_standing.push(value.good_standing);
portfolio_ingrace_period.push(value.grace_period);
});
and this part of the highchart options
series: [{
name: 'Future',
data: portfolio_future //sample [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period //sample [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Arrears',
data: portfolio_in_arrears //sample [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'Good standing',
data: portfolio_good_standing //sample [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
I did successfully retrieved and parse the data from the json response and put on there corresponding array
var portfolio_in_arrears = [];
var portfolio_future = [];
var portfolio_good_standing = [];
var portfolio_ingrace_period = [];
but sadly when i tried to bind those array on the series option, it didnt work. When i check it on the console e.g. console.log(portfolio_future), I see the array like this
["146", "143", "123", "106", "106", "94", "76", "71", "69", "83", "66", "66", "98", "98", "96", "90", "85", "102", "102", "94", "135", "126", "111", "125", "116", "116", "108", "129", "113", "93", "102", "86", "86", "68", "81"]
which the proper array for the series option is
[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
so any ideas how to turn this
["146", "143", "123", "106", "106", "94", "76", "71", "69", "83", "66", "66", "98", "98", "96", "90", "85", "102", "102", "94", "135", "126", "111", "125", "116", "116", "108", "129", "113", "93", "102", "86", "86", "68", "81"]
to
[146, 143, 123, 106, 106, 94, 76, 71, 69, 83, 66, 66, 98, 98, 96, 90, 85, 102, 102, 94, 135, 126, 111, 125, 116, 116, 108, 129, 113, 93, 102, 86, 86, 68, 81]
as you can see, there’s no double qoutes stuff on each of the number.
I have a page which has a form/table.
I want to be able to click on a button at the end of a row, or the row itself and copy this data into another form on a separate html page, which can then be edited.
I know it probably has something to do with JQuery, however I have little to no experience with that.
If you require more details, I will happily provide.
EDIT:
Here is what it looks like now (it’s a table which has retrieved data from an xml file using SimpleXML):
<form name ="editEvent" method="post" action="editEvent.php">
<table border="1">
<tr bgcolor="#FFA500">
<th>ID #</th>
<th>Name</th>
<th>Start Time</th>
<th>End Time</th>
<th>Category</th>
<th>Description</th>
<th>Location</th>
<th>Picture Path</th>
<th>Edit/Delete</th>
</tr> <tr>
<td>1
<td>Climbing</td>
<td>09:00</td>
<td>09:30</td>
<td>Physical</td>
<td>Description of what is going on</td>
<td>where it is</td>
<td>a photo link</td>
<td><input type="submit" name="edit" class ="box" value="Edit/Delete"/></td>
</tr>
</table>
I want it to end up in a table like this:
<tr>
<td><input type="text" name="name" placeholder="Enter new event name..."/></td>
<td><input type="text" name="time" placeholder="Enter event start time..."/></td>
<td><input type="text" name="endtime" placeholder="Enter event end time..."/></td>
<td><input type="text" name="category"/></td>
<td><input type="text" name="description" placeholder="Enter a description of the event..."/></td>
<td><input type="text" name="loc"/></td>
<td><input type="text" name="picturePath" placeholder="Enter link to picture..."/></td>
<td><input type="submit" name="create" class="box" value="Create"/></td>
</tr>
Honestly, any help or even pointers in the right direction would be appreciated. I really don’t know what to do here. I’ve tried searching these forums and Google, but all I found is stuff on SQL and databases. I just want to transfer some HTML table row data on one page to a HTML form on another to be edited.
You need some methods of identification on the columns like class name. For eg: <td class="name">Climbing</td> then you can attach an event handler on the td of the row and fetch all the data and populate the form.
$("td").on('click', function() {
var tr = $(this).parent('tr');
var name = tr.find(".name").text();
// Grab other values like this
// and later populate the form
});
However, Instead of copying the data, an efficient solution would be to hold the primary key of the row in one of the td or on one of the data attributes and use it to fetch the record from the database and then fill up the form.
I understand you can use .on() to attach a single click event to an element and then specify which child elements receive the click. So, for example:
$(this.el).on("click", "span", function () {
alert("Bloop!");
});
I need to be a bit more specific and target selectors with a particular attribute, like this:
$(this.el).on("click", "span[data-placeholder]", function () {
alert("Bloop!");
});
That doesn’t seem to work, though. As soon as I add the attribute it stops working. No errors, just doesn’t seem to find the elements.
Is that the expected behavior? Is there a way around it?
CLARITY
$(this.el) is just a div that contains a number of elements, some of which are <span data-placeholder="First Name"></span> tags. There could be dozens of those <span> tags and I didn’t want that many event listeners, so I thought I’d use .on() to add the click to the parent container.
You can choose to filter your spans
$('span', this.el).filter(function() {
return $(this).hasAttr('data-placeholder');
}).on('click', function() {
//This is for all the spans having data-placeholder
//...
});
Or if the placeholder is set via data api:
$(this.el).filter(function() {
return $(this).data('placeholder') != 'undefined';
}).on('click', function() {
//This is for all the spans having data-placeholder
//...
});
This functions above select those elements specifically, if event delegation on the OP is needed, then you can do the following:
$('span', this.el).on('click', 'span', function() {
if($(this).data('placeholder') != 'undefined') {
alert('bloop');
}
});
I’ve searched hi and low but couldn’t find a solution. I’ve tried everything.. but can’t get this thing to work.
NOTE: Can’t use “.on()” . Using an older version of jQuery that only supports .live/.delegate
basically, I have a very involved webpage.. and there are event handlers flying everwhere.. BUT, I basically want to attach a click event on the body BUT exclude certain id’s. Great. Figured it would be easy.
tried:
jQuery('body').delegate('.not("#mainID #anotherID")','click', function(e){
// do something
})
jQuery('body').delegate(':not(".class1 .class2")','click', function(e){
// do something
})
etc…
and a bunch bunch more.. basically, cannot get this thing to work. No matter what I do, the whole page is clickable.
when I do something simple like: Great it works.
jQuery('body').delegate('#someID','click', function(e){
// do something
})
But that isn’t what i need. I need to basically allow for clicking on the whole body except for two subsets, smaller sections of the page. I figured this would be trivial.. but for some reason, just not working.
The two items I want to exclude are:
id: mainID w/ a class of “.class1”
id: anotherID w/ a class of “.class2”
another note: mainID sits outside of anotherID – two distinct sections of the page. Both divs.
Let me point out few things related to event delegation:
First of all, use .on() function, .delegate() is deprecated.
Second, .class1 .class2 will match class2 which is inside of class1
jQuery('body').on('click', ':not(.class1, .class2)', function(e) {
// do something
})
But, this is also not what you need, you need:
$(".class1, .class2").on('click', function() { return false; });
If you are using older versions of jQuery and for some reason cannot change it, use .live() or normal .click() handler:
$(".class1, .class2").click(function() { return false; });
Now, if you click on .class1 and .class2 nothing will happen. If you want to select only specific class within a id you can use #mainID .class1 as selector. Or with older event delegation:
jQuery('body').delegate(':not(.class1, .class2)','click', function(e){
// do something
// but this will execute on every where you click except .class1, .class2
})
I have the data array return of the server :
data.arr = [[Date.UTC(2013, 9, 17),1],[Date.UTC(2013, 9, 18),5],[Date.UTC(2013, 9, 19),2],[Date.UTC(2013, 9, 20),4]]
[0] "[Date.UTC(2013, 9, 17),1]" String
[1] "[Date.UTC(2013, 9, 18),5]" String
[2] "[Date.UTC(2013, 9, 19),2]" String
[3] "[Date.UTC(2013, 9, 20),4]" String
I need to pass only value to a function that recepeit an array[i,y], i need that stay following; i need to remove the “”.
[0] [Date.UTC(2013, 9, 17),1]
[1] [Date.UTC(2013, 9, 18),5]
[2] [Date.UTC(2013, 9, 19),2]
[3] [Date.UTC(2013, 9, 20),4]
How to do it?
data.arr = [[Date.UTC(2013, 9, 17),1],[Date.UTC(2013, 9, 18),5], [Date.UTC(2013, 9, 19),2],[Date.UTC(2013, 9, 20),4]]
This code should already give you a timestamp value, but I am assuming you are asking about when it is treated as string so as suggested in comments, you can use eval to evaluate the string as Data Object.
for(var i = 0; i < data.arr.length; i++) {
data.arr[i] = [data.arr[i][0], eval(data.arr[i][1])];
}
Here is a demo: http://jsfiddle.net/8eLEH/
I have a textarea that isn’t very wide. I want as the user enters text for there to be line break once a line has 50 characters. I don’t want any wrapped text. Just line breaks. Is there a way to make this happen?
I tried to test something basic out on one line and failed.
$('#textarea').keypress(function (e) {
if ($(this).val().length == 50) {
$(this).val()[51] == 'n'
}
})
I clearly am not very experienced. I don’t know if I should start looking into the regExp object.
I can’t allow wrapped text because I need to measure what each line of the textarea has. After the user has submitted the form, I need to be able to use something like this:
var line = $('#textarea').val().split('n');
for(i = 0; i < line.length; i++){
// do something
}
Try
$('textarea').keypress(function () {
var length = $(this).val().length;
if (length % 51 == 0 &&
length > 0) {
var val = $(this).val();
$(this).val(val + 'n');
}
});
