Jquery - how to use $() - javascript

How do I convert the following javascript to using JQuery?
document.getElementById("asc").removeAttribute("href");
document.getElementById("asc").onclick = "";
document.getElementById("asc").style.textDecoration = "underline"
I think I'm close using the below code but this doesn't quite work.
$('#asc').attr('href', '').click(function() {return false}).css('text-decoration', 'underline');

Why not just
$('#asc').replaceWith($('#asc').text())
which will replace the link with just ordinary text, and save you having to worry about all the aspects of a link.

The only differences I can see is that the href attribute isn't actually being removed. You're also creating an event handler when the first example doesn't have one.
This will remove the attribute instead:
$('#asc').removeAttr('href').css('text-decoration', 'underline');
If there's already an onclick handler on it, try this:
$('#asc').removeAttr('href').attr('onclick', '').css('text-decoration', 'underline');

If you can't decide between two of them you want the following...
$('#asc').removeAttr('href').click(function() {return false}).css({'text-decoration' : 'underline'});

why assigning a new event handler if you want to get the rid of it
$("#asc")
.attr("href", "")
.unbind("click")
.attr("style", "text-decoration:underline");

Related

Change outerHTML in javascript

$(editor[i])[0].outerHTML has a value of:
<p style="color: red;" data-mce-style="color: red;">some string</p>
I want data-mce-style="color: red;" to disappear.
I'm doing that like this:
$(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
But it's not replacing it.
.replace creates a new transformed string; it does not alter the original variable. You're simply creating a new string and not storing the new string back into outerHTML, like:
$(editor[i])[0].outerHTML = $(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
However, this only solves your immediate problem -- there are vastly better ways to accomplish what you need than stringifying and re-parsing your <p> element. Since you're using jQuery, the most obvious way would be to use the removeAttr method:
$(editor[i]).removeAttr('data-mce-style')​;​
Try:
$(editor[i]).removeAttr('data-mce-style')
http://api.jquery.com/removeAttr/
Of course this will apply to all elements in your selector. If you just want to apply this to element 0 then use:
$(editor[i]).first().removeAttr('data-mce-style')
element.setAttribute(attr, null)
or
element.removeAttribute
No need for outerHTML and replace. Note that replacing HTML will remove event listeners (other than attribute event handlers).
$(editor[i]).removeAttr('data-mce-style')​;​
FIDDLE
Try to use jQuery removeData():
$(editor[i]).removeData('mce-style');
you need to change/remove a particular attribute, for that you need to use
$(editor[i]).removeAttr('data-mce-style');
for more info check the following links:
http://api.jquery.com/removeAttr/
if you need to change the value of a particular attribute then do:
attr(attributeName, value);
for more info about the same check the following link:
http://api.jquery.com/attr/

Jquery binding to keyup

I'm having some problems binding to the keyup event of a textarea control. I'm trying the below
var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find($('textarea[title="Short Description"]'));
// this doesn't work
shortDescInput.bind('keyup', function () {
countShortDescChars();
});
// Nor this
shortDescInput.keyup(function () {
countShortDescChars();
});
Am I missing something here that's really obvious? This is working for other controls, for example binding events to radiobuttons. I've checked and I'm defiantly selecting the right textarea with
var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find($('textarea[title="Short Description"]'));
I just never seem to get the keyup event....
find($('textarea[title="Short Description"]')) is highly inefficient. For your purposes, find should take a selector as it's argument.
When you pass in a jQuery object to find, jQuery first queries the DOM from the top and finds all elements that match that selector. Then, find loops through all of these results until it finds one that matches the specified parents.
You should, instead, use:
find('textarea[title="Short Description"]')
Also, use .on instead of .bind. .bind is set to be deprecated in future releases for it's inefficiency.
shortDescInput.on("keyup", countShortDescChars);
And the revised code:
$(function () {
var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]');
shortDescInput.on("keyup", countShortDescChars);
});
To verify that a selector is working use .length with a console.log() or old fashioned alert() :
var shortDescInput = $('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]');
alert(shortDescInput.length);
You can also go step by step to identify the one not returning anything :
alert($('nobr:contains("Short Description")').length);
alert($('nobr:contains("Short Description")').closest('tr').length);
alert($('nobr:contains("Short Description")').closest('tr').find('textarea[title="Short Description"]').length);
Second try. using .on() instead of .bind() :
shortDescInput.on('keyup',function(){countShortDescChars();});
So I played along with your fiddle and...
There IS something wrong with your selector.
First I remove the script tags from the js part.
then remove the script tag in your html cause it broke the fiddle.
Switched to jQuery 1.8.0 cause MooTools is not what we want.
added shortDescInput = $('textarea'); after your giant selector, event is triggered!
Added again shortDescInput = $('textarea'); in your function to make the counter work.
So again, let's now try to figure why your selector is not working :-)
Edit:
Found it!
I replaced your .closest() with .parent().next() because I kind of think .closest() was targeting the parent .
var shortDescInput = $('nobr:contains("Short Description")').parent().next().find('textarea[title="Short Description"]');
The problem is that at least in the fiddle, the <tr> wasn't in a <table>and so it was removed from the DOM by the browser. Wrapping the <tr> in a <table> made the fiddle work.
Demo: http://jsfiddle.net/kNkXE/9/

Not adding event in jquery

Not tuch events on input if i use filter "not".
In task i need event blur add to all elements except input in
div with id ending on "cont".
this not work
$("input[id$=inp]").not($("div[id$=cont]").children()).live("blur",someFoo);
and this dot work too
$("input[id$=inp]").not("div[id$=cont]:children").live("blur",someFoo);
Any idea why it hapan ?
How solve this problem ?
Update: live Has to be called directly on the result set.. This works:
$("input[id$='inp']:not(div[id$='cont'] input)").live(...)
DEMO
The children call looks wrong here. Try:
$("input[id$='inp']")
.not("div[id$='cont'] input")
.live("blur",someFoo);
If you are not adding these elements dynamically, then there is no need to use .live:
$("input[id$='inp']")
.not("div[id$='cont'] input")
.blur(someFoo);

jQuery toggle();

I am loading data dynamically by AJAX into a cluetip (http://plugins.learningjquery.com/cluetip/#).
I want to toggle the results from a link like so:
$(document).ready(function() {
$("#calendarLink").live("click",( function() {
$("#result").toggle();
}));
});
For some reason the above will not work. Can you suggest an alternative?
Couple of questions/points
Do you really need to use .live() You're using an ID selector, so there should only ever be one of these.
Also, you have an extra set of brakets. Probably not a problem, but you could remove them:
$(document).ready(function() {
$("#calendarLink").click( function() {
$("#result").toggle();
});
});
Perhaps the toggle() function isn't be used properly?
See here http://api.jquery.com/toggle/
I'm not sure if this is new functionality only for jQuery 1.4 but it appears the toggle function requires parameters.
The following code is correct (demo online - http://jsbin.com/ehate/edit):
$("#calendarLink").live("click", function(e){
$("#result").toggle();
});
You use $.live() only if #calendarLink will be added dynamically later. If it isn't, use a regular click:
$("#calendarLink").click(function(e){
$("#result").toggle();
});
If this is not working for you, be sure to check your #calendarLink and #result elements in your HTML. Make sure the ID values are correct. Mainly, be sure your casing is correct.
Two elements in the same page can't have the same id.
u used
$("#result").toggle();
'I want to toggle the results from a link ...'
So the result elements should have the same class , not id.
The code should be :
$(".result").toggle();
'#' changed into '.'

How to clear all <div>s’ contents inside a parent <div>?

I have a div <div id="masterdiv"> which has several child <div>s.
Example:
<div id="masterdiv">
<div id="childdiv1" />
<div id="childdiv2" />
<div id="childdiv3" />
</div>
How to clear the contents of all child <div>s inside the master <div> using jQuery?
jQuery's empty() function does just that:
$('#masterdiv').empty();
clears the master div.
$('#masterdiv div').empty();
clears all the child divs, but leaves the master intact.
jQuery('#masterdiv div').html('');
Use jQuery's CSS selector syntax to select all div elements inside the element with id masterdiv. Then call empty() to clear the contents.
$('#masterdiv div').empty();
Using text('') or html('') will cause some string parsing to take place, which generally is a bad idea when working with the DOM. Try and use DOM manipulation methods that do not involve string representations of DOM objects wherever possible.
I know this is a jQuery related question, but I believe someone might get here expecting a pure Javascript solution. So, if you were trying to do this using js, you could use the innerHTML property and set it to an empty string.
document.getElementById('masterdiv').innerHTML = '';
jQuery recommend you use ".empty()",".remove()",".detach()"
if you needed delete all element in element, use this code :
$('#target_id').empty();
if you needed delete all element, Use this code:
$('#target_id').remove();
i and jQuery group not recommend for use SET FUNCTION like .html() .attr() .text() , what is that? it's IF YOU WANT TO SET ANYTHING YOU NEED
ref :https://learn.jquery.com/using-jquery-core/manipulating-elements/
If all the divs inside that masterdiv needs to be cleared, it this.
$('#masterdiv div').html('');
else, you need to iterate on all the div children of #masterdiv, and check if the id starts with childdiv.
$('#masterdiv div').each(
function(element){
if(element.attr('id').substr(0, 8) == "childdiv")
{
element.html('');
}
}
);
The better way is :
$( ".masterdiv" ).empty();
$("#masterdiv div").text("");
$("#masterdiv > *").text("")
or
$("#masterdiv").children().text("")
$('#div_id').empty();
or
$('.div_class').empty();
Works Fine to remove contents inside a div
You can use .empty() function to clear all the child elements
$(document).ready(function () {
$("#button").click(function () {
//only the content inside of the element will be deleted
$("#masterdiv").empty();
});
});
To see the comparison between jquery .empty(), .hide(), .remove() and .detach() follow here http://www.voidtricks.com/jquery-empty-hide-remove-detach/
When you are appending data into div by id using any service or database, first try it empty, like this:
var json = jsonParse(data.d);
$('#divname').empty();
$("#masterdiv div[id^='childdiv']").each(function(el){$(el).empty();});
or
$("#masterdiv").find("div[id^='childdiv']").each(function(el){$(el).empty();});
try them if it help.
$('.div_parent .div_child').empty();
$('#div_parent #div_child').empty();

Categories