I have a page with a table. The table contains th elements, which contain anchors. This is what an example th looks like:
<th scope="col">
Inventory reference
</th>
What I want to do is update the anchor so that it has an extra query string parameter thus:
<th scope="col">
Inventory reference
</th>
Now, I now that I must do this:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('th[scope^=col]') ???
})
</script>
The problem is though, that I don't know what should replace ???. Does anyone have any idea? I'm thinking I need some JavaScript or JQuery code that grabs the anchor and then appends the extra query string parameter. Question is what exactly should the code be?
Thanks,
Sachin
Try this:
$(document).ready(function(){
$('th[scope^=col]').each(function(){
var old_link = "";
var new_link = "";
//Get the current href value of the child anchor tag of 'th[scope^=col]'
old_link = $(this).children('a').attr('href');
//Append the extra string required '(in this case &page=3)' to the old_link
new_link = old_link + '&page=3';
//Set the href value for the anchor tag within 'th[scope^=col]'
$(this).children('a').attr('href',new_link);
});
});
Hope this helps.
Try this
$(document).ready(function () {
$('th[scope=col] a')[0].href += "&page=3";
});
If you think the url can already contain page param in the querystring and you just have to update its value then use this code.
$(document).ready(function () {
$a[0].href = $a[0].href.replace(/([?&])page=[^&]*&?/,'$1') + '&page=3';
});
$(document).ready(function () {
$('th[scope=col] a').each(function(){
$this = $(this);
$this.attr('href', $this.attr('href') + '&page=3');
});
});
Related
I have a the following html code in a table:
<td id="description">
<input id="newdescripion" value="VOIP/DATA" type="text">
<button type="button" id="removeinput">Remove</button>
</td>
When I click the button, I would like to empty the td and add the text which is stored in a cookie. The td empties fine but I am unable to append the text. The text is in the variable as it is visible in the alert. I have used the code below to try and achive this, the commented out code is what I have tried and doesn't work.
$(document).on('click', '#removeinput', function() {
var hostname = $('#hostname').text();
//alert(hostname);
var trid = $(this).closest('tr').attr('id');
//alert(trid);
var olddesc = Cookies.get(hostname+','+trid+',description');
alert(olddesc);
$(this).closest('td').empty(); <----- THIS WORKS
$(this).closest('td').append(olddesc);
// $(this).closest('tr').find('#description').text(olddesc);
// $(this).closest('td').text(olddesc);
// $('#'+trid+' td').each(function(){
// if($(this).attr('id') == 'description'){
// $(this).append(olddesc);
// }
// })
//$(document).find('#'+trid+' td#description').append(olddesc);
})
Can anyone please help me fix this or recommend a better way of doing it?
You can use .html() to add your dynamic data to HTML tag id
var olddesc = Cookies.get(hostname+','+trid+',description');
alert(olddesc);
// Create custom / dynamic HTML
var temp = `<p>` + olddesc + `</p>`;
$(this).closest('td').empty(); <----- THIS WORKS
// Edit: Use ID of html tag
$('#description').html(temp);
This shall work for you.
$(this).closest('td').append(olddesc); runs after you've removed this from the td, therefore the td is no longer an ancestor of this. You do not need to empty the td; simply set its text to olddesc and it will be automagically emptied as part of the process of setting its text.
// (REMOVE THIS) $(this).closest('td').empty(); <----- THIS WORKS
$(this).closest('td').text(olddesc);
Just use .html
$(document).on('click', '#removeinput', function() {
var hostname = $('#hostname').text();
var olddesc = "Cokkies return"; //Cookies.get(hostname+','+trid+',description');
$(this).closest('td').html(olddesc); //<----- THIS WORKS
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="description">
<input id="newdescripion" value="VOIP/DATA" type="text">
<button type="button" id="removeinput">Remove</button>
</td>
</tr>
</table>
I want to send this HTML, minus "/modal" into a variable:
<span class="detailsLink"><object>DETAILS</object></span>
How can I add to this line to make it work?:
var eemailDetails = $('.detailsLink').html();
This ends up taking out /modal before it passes it into the variable:
var eemailDetails = $('.detailsLink a').each(function(){
this.href = this.href.replace('/modal', '');
}).html();
Thank you for your time!
The replacement should be made on the value retrieved instead of on the element's attribute.
So to retrieve the HTML markup including the targeted element, the outerHTML property can be used.
// Get the whole HTML
var eemailDetails = $('.detailsLink')[0].outerHTML;
// Remove /modal
eemailDetails = eemailDetails.replace('/modal', '');
console.log("The attribute unchanged: "+$('.detailsLink a').attr("href"));
console.log("The HTML retrieved: "+eemailDetails);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="detailsLink"><object>DETAILS</object></span>
So the each works fine, and I save the variable as a data-attribute on the element itself. Later, when it gets clicked, I can recall that data attribute as needed. Hope this helps!
$('.detailsLink a').each(function(){
var changedLink = this.href.replace('/modal', '');
$(this).data("changedLink", changedLink)
});
$(".detailsLink a").on("click", function(event){
event.preventDefault();
var returnEl = $(this).parents(".detailsLink").clone();
returnEl.find("a").attr("href", $(this).data("changedLink") );
console.log(returnEl[0].outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="detailsLink"><object>DETAILS</object></span>
<span class="detailsLink"><object>More DETAILS</object></span>
<span class="detailsLink"><object>Yet More DETAILS!</object></span>
I'm trying to doing something in jquery.
This is a part of my jquery:
console.log(tableid);
var table = $('"#'+tableid+'"').DataTable();
tableid = "Data-user1"
table is null....
but when i put table = $("#Data-user1").DataTable() it works. Whats wrong?
Because how you're initializing the datatable is incorrect. You don't need to explicitly quote quotes in the selector; you just need to concatenate the strings like this:
var table = $("#" + tableid).DataTable();
That should work.
You mean this?
console.log(tableid);
var table = $('#' + tableid).DataTable();
ID Selector correct format -> $(“#id”)
Description: Selects a single element with the given id attribute.
var table = $('#' + tableid).DataTable();
Take a look at documentation: https://api.jquery.com/id-selector/
I have long list of links which needs to be more simple for maintaining.
For example all my (100+) urls have similar format:
AAA
BBB
as You can see different urls contains same text as name of link... so what I need is simplify things with javascript probably. Getting text between tags "> </a> and putting him inside href.:
AAA
BBB
any ideas? Thanks
So why not just store the links in an array?
$links = [
['domain' => 'web1.com', 'text' => 'AAA'],
['domain' => 'web2.net', 'text' => 'BBB']
];
foreach ($links as $link) {
echo "{$link['text']}";
}
You could even add more information to the links array, if you need.
If you have no other option you can use jQuery to select all the links and edit them.
$('a').each(function() {
var text = $(this).text()
var newTarget = $(this).attr("href") + text;
$(this).attr("href", newTarget);
});
Or, the simpler version:
$('a').each(function() {
$(this).attr("href", $(this).attr("href") + $(this).text());
});
You can do like this
// a variable with common part of the link
var link ='http://web.com/';
//get all the anchor tags. If a specific anchor tag is need pass
// indetifier like class eg-document.querySelectorAll('a.className')
var getAllAnchorTags = document.querySelectorAll('a');
/Loop through the collection
getAllAnchorTags.forEach(function(item){
// get the text in the link & concat with the common part
var creatLink =link+item.textContent;
// set href attribute to the link
item.setAttribute('href',creatLink)
})
DEMO
Edit
Let the anchor tag have a default href value. Then use getAttribute to get the href & update its value
HTML
AAA
BBB
JS
var getAllAnchorTags = document.querySelectorAll('a');
getAllAnchorTags.forEach(function(item){
var creatLink =item.getAttribute('href')+item.textContent;
item.setAttribute('href',creatLink)
})
DEMO 2
Using javascript and jquery
$(document).ready(function(){
var websites[] = "";
//Websites
websites[0] = "www.website.com";
websites[1] = "www.website.net";
var things[] = "";
//Pages corresponding to website 0
things[0] = ["AAA", "CCC"];
//Pages corresponding to website 1
things[1] = ["BBB", "DDD"];
for(x=0;x<websites.length;x++) {
for(y=0;y<things.length;y++) {
$("<a href='"+websites[x]+"/"+things[x][y]+"'>"+things[x][y]+"</a>").appendTo("#yourparentelem");
}
}
});
I have many links on a page generated dynamically. Now I want to attach ids to them based on a link just before them.
I have written the following function to return me the value I want to add as id to the href I want.
<script>
function movingid(){
var res = location.href.replace(/.*student\/(.*)\/subject/, '$1');
var subjectid = res.split("/")[2];
var classid = res.split("/")[1];
var sectionid = res.split("/")[0];
return classid+"-"+sectionid+"-"+subjectid;
}
</script>
So what I did is
<a href="javascript:void(0);" id= "javascript:movingid();" >Move To</a>
But the HTML thus generated is not calling the function. Instead its adding the id as plain text form like this id= "javascript:movingid();". How can I call the function?
Please help
Create the links this way:
<a href="javascript:void(0);" id= "" >Move To</a>
Maybe wrapping the links with a div, which gets the id "mylinks". After this call a function adding the id with this code:
i = "1";
$( "div#mylinks a" ).each(function( index ) {
$(this).attr("id",i);
i++;
});
Instead of i take your code from the movingid function you already posted.