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.
Related
I have three tables in my HTML form. Each table has different number of rows and upon double click of any row its value should be passed to a javascript function. These passed values should get appended to a text box present in the same form.
I have given Ids to all three tables and am passing this tableId to the function. Also, how to retrieve the value selected from the table into this javascript function.
What I have done so far is below. A small snippet of one table and the function. Am a newbie to HTML, so hoping for a few helpful answers. :)
<table id="functionTable" >
<tr>
<td class="groupObjectTitle" nowrap>Functions</td>
</tr>
<td>
<div class="easyui-panel">
<li>
<span>Mathematical</span>
<ul id="mathFunctions">
<li> + </li>
........
function transferText(table){
var i;
var k;
var tabs= document.getElementById(table);
alert("transferText called on double click");
for (i=0;i<tabs.rows.length;i++){
alert(tabs.rows[i].selected);
<!-- How to retrieve the value from the selected row. -->
}
}
Make sure your table ID's are NOT the SAME!
Solution 1
Use this and pass it as an argument to your function.
html
<a id="somevalue" href="javascript:" ondblclick="transferText('functionTable', this)"> + </a>
javascript
function transferText(table, element) {
//element = clicked elment, so if you need the ID or some other data..
var elementId = element.id;
}
Solution 2 (html5 req)
Use the html5 data attribute.
html
<a id="myid" data-mydata1="somedatavalue" data-mydata2="someothervalue" href="javascript:" ondblclick="transferText('functionTable', this)"> + </a>
javascript
function transferText(table, value) {
var mydata = document.querySelector('#myid');
var data1 = value.dataset.mydata1;
var data2 = value.dataset.mydata2;
//etc...
}
I have a table in my page that contains many rows, each row has an image which has an <a href> this <a href> has two attributes class and data-delete-id, so I have a multiple <a href> that has the same attributes and the same value for class.
each <a href> has a different value for the data-delete-id attribute.
In my JavaScript I have this code :
<script>
$(function() {
$('.deleteButton').confirmOn('click', function(e, confirmed){
// get jquery object access to the button
var $thisButton = $(this);
// this gets that data directly from the HTML
var id = $thisButton.data('delete-id');
if(confirmed) {
alert("<?php echo site_url('users/deleteUser')?>" + '/' + id);
}
});
});
</script>
So when I click on some <a href> that function well be fired, and it gets the id value from the data-delete-id attribute.
The problem is that id value it's always the value for the first <a href> in my HTML code.
I only want to get the value for the data-delete-id attribute for the clicked <a href>.
How can I do that ?
I checked the code for confirmOn here and it does not seem to register with each item in a set of selected elements. This is a bug with the plugin, but a workaround would be to wrap the whole thing in an each.
$(function() {
$('.deleteButton').each(function() {
$(this).confirmOn('click', function(e, confirmed){
// get jquery object access to the button
var $thisButton = $(this);
// this gets that data directly from the HTML
var id = $thisButton.data('delete-id');
if(confirmed) {
alert("<?php echo site_url('users/deleteUser')?>" + '/' + id);
}
});
});
});
I'm trying to get the id of an input using jquery. What I do is I get the id of a button I click, then I concatenate the string to get the id of the element I want to have. But when I get the var picloc to show, it says undefined. How do I get the id of the hidden input?
$('.photo-frame').click(function (){
var id = this.id;
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
<span class="photo-frame" id="<?php echo $filetitle2;?>">
</span>
<input id="<?php echo $filetitle2;?>_location" type="hidden">
If the hidden element is just the next of span in DOM then You can use following script.
$('.photo-frame').click(function (){
var hidden_element = $(this).next('input:hidden').val();
});
Try this:
$('.photo-frame').click(function (){
var id = $(this).attr('id');
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
var id = this.id;
has some problems.
this refers to the document's itself. You should surround it with a $() in order to point the clicked element. And I do not know if [object].id is usable.
Change the line as the following.
var id = $(this).attr('id');
Are you sure to use the above block of codes inside the $(document).ready(function(){ ... }); or the page itself.
You can try this:
var currentId = $('#element').attr('id');
This will only work provided that you have a valid jQuery object $(this), eg:
var currentId = $(this).attr('id');
I have this html code:
<div class="category" id="154"> Category </div>
<div class="category2" id="156"> Category2 </div>
<div class="category3" id="157"> Category3 </div>
<div class="category4" id="158"> Category4 </div>
<input type="text" />
So in example if I write a id in text box, how to select div .category with this ID and get inner HTML text. With jQuery
so you only need to use the ID as this is a unique value (or should be)
var html = $("#154").html();
NOTE: If you do have duplicate ID values in use then it is important to note that JQuery will only select the first one.
if you want to do this when a textbox value is entered you could do this on the textbox change event...
$("input").change(function(){
var id = $(this).val();
var element = $("#" + id);
if(element){
var html = element.html();
//do something with html here
}
});
NOTE: you may want to put an ID value on your textbox to ensure you get the correct control
Although I strongly suggest you find a way around using duplicate ID values, you could have a function like this to get the DIV you want...
function GetContent(className, id) {
var result = null;
var matchingDivs = $("." + className);
matchingDivs.each(function(index) {
var div = $(matchingDivs[index]);
if (div.attr("id") == id) {
result = div.html();
}
});
return result;
}
Click here for working example
I recommend you give the textbox an ID, in case you add other textboxes to the page.
But if you only have the 1 text input, the following would work:
var id = $('input:text:first').val();
var innerHtml = $('#' + id).html();
Here is a jsFiddle that will alert the html using this technique whenever the text in the textbox changes.
$("#id.class")
will select the necessary element by both class and ID (replacing id and class with their respective names, of course).
Adding .html() to the end will get you the content.
i.e:
$("#id.class").html()
var linksInCategory = document.id($('.CategoryTreeLabel').href);
var randomLinkArray = new Array(linksInCategory);
//CategoryTreeLabel is the class all the anchor tags have that contain the href with the link to the page I want
function goThere(link)
{
var the_url = function pickRandomURL () {
var random_url = randomLinkArray[Math.floor(Math.random()*randomLinkArray.length)];
the_url = random_url;
}
var good_url = fixURL(the_url);
var new_window = window.open(good_url,"new_window","menubar, resizeable. location, toolbar, status, scrollbars");
}
function fixURL(the_url) {
var the_first_seven = the_url.substring(0,7);
the_first_seven = the_first_seven.toLowerCase();
if (the_first_seven != 'http://')
{
the_url = "http://" + the_url;
}
return the_url;
}
</script>
</head>
<body>
<form name="the_form">
<input type="button" name="the_url" class="broadGroups" onClick="goThere(this)" src="the_url" value="Sports"></input>
<input type="button" name="the_url" class="broadGroups" onClick="goThere(this)" src="the_url" value="Film"></input>
Basically I want to create an array of all the href links within the same tag as the class="CategoryTreeLabel" Then I want to create a function goThere () that will open a new window with the URL of good_url. the_url needs to be randomly selected from the list of links we grabbed from the tags with a class of "CategoryTreeLabel" in the document.
Each of the buttons should call the goThere(this) function and pick a random URL out of the array we created, check if it has http:// (it always will redirect to a page without it, but i left it in for fun), then open that page
The return from the jQuery function is an array-like object, that is to say that it has a .length property and can be accessed with array-style [] bracket notation, so you don't really need to create a separate array variable too.
I notice that your buttons seem to be for different categories of links, like sports or film, so perhaps your intention is that the "Sports" button will select a random sports-related link while the "Film" button will select a random film-related link? If so you could have each button pass the category through to your goThere() function and select a random link from within that category. Something like this:
function goThere(category)
{
// assume that the parameter is the class name for links
// in the desired category
var $myLinks = $("a." + category);
// check if there are any matching links
if ($myLinks.length === 0) {
alert("Sorry, no links in the " + category + " category.");
return;
}
var url = fixURL($myLinks[ Math.floor(Math.random()*$myLinks.length) ].href);
var new_window = window.open(url,"new_window",
"menubar, resizeable. location, toolbar, status, scrollbars");
}
You'd then set up your anchor tags to have class names with appropriate categories, something like this:
<a class="sports" href="http://somesportssite.com">Super sports</a>
<a class="film" href="http://moviesRus.com">Movies</a>
<a class="film" href="http://animationplus.com">All about animation</a>
<a class="sports" href="http://football.com">Football site</a>
<a class="sports" href="http://skydiving.com">Let's jump!</a>
And the associated buttons would be:
<input type="button" value="Sports">
<input type="button" value="Film">
And you could set inline handlers like you had, onclick="sports", or you could do something like the following in your document.ready handler to set them all up with a single jQuery .click() call that assumes the appropriate classname/category is a lowercase version of the button label:
$('input[type="button"]').click(function() {
goThere(this.value.toLowerCase());
});