Get a value from an attribute and add it as another attribute? - javascript

How can I use jQuery to get a string of text from the onclick attribute and set it as the href attribute.
Here's the fiddle I'm working with: http://jsfiddle.net/MBmt5/
I want to take only TrackPackage.asp?track=95213&ship=OTHER&ShippingMethod=3 from the onclick attribute and prop it to an href attribute
So that it would end up looking like this: http://jsfiddle.net/52Nha/
Unfortunately, I have no idea how to accomplish this. Can anybody help me? Must be compatible with jQuery 1.4.2. Thanks.
Update
Of course I'd begin with:
$(document).ready(function(){
$('span.trackpackagebutton').closest('a').removeAttr('href');
});
​

Ugly but I hope this will help you.
$('a').attr('href',
$('a')[0].getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
Working demo - http://jsfiddle.net/MBmt5/5/
Note: Based on your markup structure you can use the right selector and reuse the above code.
E.g: The below code will execute this logic for all the anchors on the page which have onclick attribute which has window.open.
$('a[onclick^="window.open"]').each(function(){
$(this).attr('href',
this.getAttribute('onclick')
.replace("window.open('", '').split(',')[0].replace("'", ''))
.removeAttr('onclick');​​​​​​​​​​​​​​​
});

Here's one way:
http://jsfiddle.net/MBmt5/2/

http://jsfiddle.net/GaZGv/1
var $a = $('span.trackpackagebutton').closest('a');
var href = $a.attr('onclick').split('(')[1].split(',')[0].replace(/'/g, '');
$a.attr('href', href).removeAttr('onclick');
alert(href)​

Related

How to add a new attribute for a HTML element before added to DOM with jQuery

Actually it could happen that's the title it's not exactly correct, so sorry.
My problem is the following. I have a variable (what contains html), what it get from ajax response and i would like to add new attribute a few element. And after it insert to the dom.
For example, here this:
ajaxString = "<b>asd</b>";
replaced = $("b", $(ajaxString) ).css('background','#ff0000');
$("body").html(replaced);
But it's doesn't work. I hope, somebody have an idea!
Thanks for the Help!
This can be done using a virtual element:
var ajaxString = "<b>asd</b>",
virtualDiv = $('<div>', {html: ajaxString});
$("b", $(virtualDiv)).css('background', '#ff0000');
$("body").html($("b", $(virtualDiv))[0]);
As per your comment you can use this to get all the html of virtual div:
$("body").html($(virtualDiv).html());
You can create the element in a jQuery object first, then amend its attributes before appending it. Try this:
$("<b>asd</b>").css('background', '#ff0000').appendTo('body');
here is a working fiddle of what you try to achieve
you should use filter
var newhtml = $('<b>asd</b><p>asd</p>');
newhtml.filter('b').each(function(){
$(this).css('font-size','50px')
$(this).css('color','blue')
});
newhtml.filter('p').each(function(){
$(this).css('font-size','20px')
$(this).css('color','red')
});
$('body').html(newhtml);
https://jsfiddle.net/c7a6spaj/
Cheers

Split value of a html tag

I would like to split some content from an "a" html tag. I was starting over with jquery. My code is like this but it is not working:
$("a.uribb").each(function() {
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).append(+id+);
});
​
And the HTML tag is this:
<a href="http://dereferer.org/?http://example.com/" target="_blank" class="uribb">
http://example.com/
</a>
I wanted to split out the http://dereferer.org/? part and leave the other there. How could I do this?
Try to use .text() instead of .append() if you want to replace the content. Also, there is no need for the + before and after the id.
You could try this instead:
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).text(id);
Update
Reading through the question again, I'm not sure if you want to replace the content of the a-tag or the the value of the href. In case of the latter, try this:
var id = $(this).attr("href").replace("http://dereferer.org/?", "");
$(this).attr("href", id);
Notice
Since jQuery 1.6, it is preferred to use .prop() instead of .attr().
How about that?
$("a.uribb").attr("href", function(i, val) {
return val.substring(val.indexOf("?") + 1);
});​
DEMO: http://jsfiddle.net/zQdL4/
It's interesting but for your markup the following code should also work :)
$("a.uribb").attr("href", function() {
return $.trim(this.innerHTML);
});​
Right, so what you want is this.
<a href="http://example.com/">...
Try this.
$("a.uribb").each(function() {
var indirect_url = $(this).prop("href");
var direct_url = indirect_url.replace("http://dereferer.org/?", "")
$(this).prop('href', direct_url);
});
You could of course do this in fewer lines, but this way it's clear what's going on. Specifically, replace() does not modify the string it operates on.

jQuery load issue. Don't know how to approach this AJAX call

$("[littleBox]").load("ajax.php?eid="+$(this).attr("littlebox"));
the $(this).attr("little box") portion of the code returns undefined.
I'm trying to get the individual attribute of the initial $("[littleBox]").
this particular line of code is called as the soon as the document is ready.
when I put predefined values, such as
$("[littleBox]").load("ajax.php?eid=1");
It works as expected. Unfortunately, I need it to load specific content based on that element's attribute. Any idea how to make this work?
Loop through all items with proper this:
$("[littleBox]").each(function() {
var $this = $(this)
$this.load("ajax.php?eid="+ $this.attr("littlebox"));
});
this will not refer to $("[littleBox]") in that context, you'll have to repeat the selector - or select the element already and re-use it:
var $box = $("[littleBox]");
$box.load("ajax.php?eid=" + $box.attr("littlebox"));
post yout html that cotnain attr "little box" in it.
is it like
<a attr="little box" id="test">test<a/>
then it work like
$('#test').click(function(){
alert($(this).attr('little box'));
});

How to make jquery click() work with css button?

I have a .button made in css and added to the html 4 times like this
<a class="button icon Call" id="nupp2" href="#"><span>CALL</span></a>
and a .js with the following inside
$(document).ready(function(){
$("nupp2").click(function(){
var name=prompt("Please enter your name","blabla");
});
});
The buttons appear if I open the html with firefox and they change if I hover over them
But if I press the button, it doesn't do anything. I didn't forget to point to the files in the html file.
Am I even doing this right? Or is jquery more complex than I think?
Selectors in jQuery work a lot like the ones in CSS. $("nupp2") becomes $("#nupp2"), see?
This is wrong:
$("nupp2").click(function(){
The correct is:
$("#nupp2").click(function(){
The string inside the parens is a jQuery selector. Since you want to select an element by id, the proper selector is a hash sign followed by the id.
you need to add a hash sign (#) before the ID of the element - $('#npp')
You missed the hash on your selector:
$("#nupp2").click(function(){ // <----- #nupp2
var name=prompt("Please enter your name","blabla");
});
To call an ID you need to add a # in front of the selector (Like CSS)
So your jQuery selector should be $("#nupp2")
Just try this
$(document).ready(function(){
$("#nupp2").click(function(){
var name=prompt("Please enter your name","blabla");
});
Try this:
$(document).ready(function(){
$(a#nupp).click(function(){
var name=prompt("Please enter your name","blabla");
});
});

Remove anchor, but not arguments, via JavaScript

I want to change the following example URL
http://www.mydomain.net/site?argument1=test1&argument2=test2#anchor
to
http://www.mydomain.net/site?argument1=test1&argument2=test2
with JavaScript. How would I best do that?
EDIT: With 'anchor' and the other text elements, I meant generic elements. So the anchor could also be another text. Sorry.
If you're trying to change the current location's anchor, it's better to change window.location.hash:
window.location.hash = '';
In some browsers this will avoid a reload of the page as the URL changes.
Try this:
window.location = window.location.replace(/#anchor/,"");
OK, so I tried this, and it worked perfectly fine:
var url=window.location.toString();
url=url.replace(/#anchor/,'');
window.location=url;
This should replace #anchor but also #anchor_etc or #anchor-etc from your url
var url = "http://www.mydomain.net/site?argument1=test1&argument2=test2#anchor";
url = url.replace(/\#[a-z\-\_]+/i, '');
window.location = window.location.replace('#anchor','');

Categories