In jquery, how can I show a link that is generated on the fly inside a table?
I will have the link stored in my database, but I want it to be shown by a name and then take me to the correct link accordingly.
I have an array of strings like [ {Name1:Link1} ] stored, and I want it to be shown inside the table as Name1 linking to Link1.
Please tell me how to do so.
You need to store them in a (object) map instead of an array.
var linksMap = {
'google': 'http://google.com',
'stackoverflow': 'http://stackoverflow.com',
'jquery': 'http://jquery.com'
};
Then, assuming that you've the following table,
<table id="links">
<tr><td>google</td></tr>
<tr><td>stackoverflow</td></tr>
<tr><td>jquery</td></tr>
</table>
you can use the following jQuery script to create links and put them in the cells:
$('#links>tbody td:nth-child(1)').each(function() {
var $td = $(this);
var name = $td.text();
var link = linksMap[name];
var $a = $('<a>').attr('href', link).text(name);
$td.html($a);
});
Related
How can i get all data-id and amount from this HTML page using jquery. After getting those value... I want to push it to array then post via ajax. This is a laravel project. I am not using Form here.
This is that image, from where I want to get value
//Here is the Html code
<?php $i=1 ?>
#foreach($expanse as $expanse)
<tr>
<td class="text-center">{{$i}}</td>
<td>
<h4 class="expVal" data-id="{{$expanse->id}}">{{$expanse->name}}</h4>
</td>
<td class="text-right">
{{$expanse->rent}}
</td>
</tr>
<?php $i++ ?>
#endforeach
You can get all the data Ids and amount like this
var ids = [],amounts = [];
$(".expVal").each(function(){
ids.push($(this).data('id'));
var b = $(this).parent().next().find('a.expanseRent').text();
amounts.push(b);
})
Another method would be
var datas=[];
$(".expVal").each(function(){
var a = $(this).data('id');
var b = $(this).parent().next().find('a.expanseRent').text();
datas.push(a+":"+b);
})
You can loop through the each .expVal elements in jquery and then you can get the data-id attribute using jquery.
After that, you can push this values into some array.
var data_id_array=[];
$( ".expVal" ).each(function( index ) {
data_id_array.push($(this).attr('data-id'));
});
For rent, add rent in data-rent attribute like this.
{{$expanse->rent}}
then, do same process like this to get rent.
var rent_array=[];
$( ".expanseRent" ).each(function( index ) {
rent_array.push($(this).attr('data-rent'));
});
So, for your output,as you mentioned in comment,loop through the data_id_array array and create json item like you want and push it into the finalArray like this.
var finalArray = [];
var i;
for (i = 0; i < data_id_array.length; ++i) {
var itemArr={};
itemArr[data_id_array[i]] = rent_array[i];
finalArray.push(itemArr);
}
So at the end, finalArray will contain all the items like [{1:1200},{2:3000}] like this.
You can get data-* using jquery's data() like this
$(".expVal").data("id")
*assuming you have .expVal class in each <td>.
var attrs = [];
var vals = [];
$(".expVal").each(function(){
attrs.push($(this).attributes.nodeName);
vals.push($(this).data("id")+":"+$(this).data("rent"));
})
Then pass it into your ajax POST call like this
$.ajax({
type: 'POST',
url: "url",
data: dataIDs
});
You can do a query like, which will return you an object indexed in the order of occurrence of the element in the DOM.
$("[data-id]")
Additionally i would also include the amount as a data attribute in the same element, something like
<h4 class="expVal" data-id="{{$expanse->id}}" data-amount="{{$expanse->rent}}">{{$expanse->name}}</h4>
and now through dataset property you will be able to access,
$("[data-id]")[0].dataset.amount
here is the documentation on the data attribute
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
I have created a dynamic table. DEMO to my project.
I have placed this dynamic table in the form under a div named 'box'
<div id="box">
</div>.
I am creating dynamic hidden variables table using Jquery which I need to store in DB. This is how I am creating the hash to submit to server.
criteria = $('form_name').serialize(true);
criteria = Object.toJSON(criteria);
// Build the object to store the parameters for the AJAX post request
parameters = {
title : $('report_title').value,
description : $('report_description').value,
criteria : criteria
}
// Make the AJAX post request
new Ajax.Request( URL, {
method: 'post',
parameters: parameters,
onSuccess: function( response ) {
$('messageSpan').innerHTML = response.responseText;
$('spinner').style.display='none';
}
});
I am not able to capture the dynamically created values in the criteria.
How to solve this?
In the dynamically created section, I tried adding a submit button and see if the values can be fetched. I am able to fetch and iterate all the hidden variables.
$('#jquerysaveButton').click(function(){
jsonObj = [];
$("input[id=rubric_cell]").each(function () {
var id = "cell_" + row + "_" + col;
item = {}
item["id"] = id;
item["selected_rubric"] = $(this).val();
jsonObj.push(item);
});
console.log(jsonObj); //I am getting the required values here
});
How to get these values in the criteria = $('form_name').serialize(true);. Am I doing some thing wrong? Please help me. thanks in advance.
DEMO to my project
You need to make sure that your hidden input fields have a name attribute set otherwise $.serialize will not process them.
In my codeigniter project i'm using a Table in which it is dynamically generated by Ajax. on the each row there is a button to Delete the corresponding row from Html Table and Mysql table too.
i tried it already. and i get the code to remove Html table row , and it follows
$(document).on('click', '#deleteRow', function() {
$(this).parent().parent().remove();
});
and it worked. but i want to delete that corresponding row from Mysql too. so first of all , it needs to be pass the corresponding row informations from javascript. then pass this to the Controller via URL.?
window.location.href = "<?php echo base_url("settings/remove_company"); ?>?id="+current;
How i get corresponding row informations such as company_id, lic_id (field names of html table).?
any help would be greatly appreciated .
Add attributes to the <tr>
<tr data-companyId="<?php echo $companyId;?>" data-licId="<?php echo $licId;?>">
In your jQuery, get those attributes on click of delete link:
$(document).on('click', '#deleteRow', function() {
var companyId = $(this).parent().parent().attr('data-companyId');
var licId = $(this).parent().parent().attr('data-licId');
$(this).parent().parent().remove();
});
Even, you can do object caching (using variable instead of object to improve performance.
$(document).on('click', '#deleteRow', function() {
var obj = $(this).parent().parent();
var companyId = obj.attr('data-companyId');
var licId = obj.attr('data-licId');
obj.remove();
});
I'm using chap links library https://github.com/almende/chap-links-library/tree/master/js/src/network for drawing an area of objects.
I want to be able to use the id that I have set to an object upon click, I have this code
function onselect() {
var sel = network.getSelection();
console.log("selected "+sel[0].row);
}
It works fine, only it retrieves the row number from the dynamically created table. I want to retrieve a value from that row (an object id that I set) but I don't know how to access it.
I have tired things like
sel[0].row.id
sel[0].row.getId()
sel[0].row[0]
But I don't know how they structure the data in their thing...
Anyonw run into this before and solved it?
This is the way I set the data
nodesTable.addRow([45, "myObjectName", "image", "images/container_icons/icon.png"]);
For my app I solved it by creating a parallel array...
//rendera objekt
window.clickHelper = []; //keep track of container id in conjunction with hierarchy-canvas-object's id
var i = 0; //counter for above
Populating it upon every node creation...
nodesTable.addRow([{{ c.id }}, "{{ c.name }}", "image", "{{ asset('images/container_icons/'~c.icon~'.png') }}"]);
clickHelper[i]={{c.id}};
i++;
Then calling in data from that array on my onSelect event...
function onselect() {
//get selected node from network
var sel = network.getSelection();
sel = sel[0].row;
//get path base structure
var path = '{{ path('editGroup') }}';
//fix path with the DB id of the clicked object
path = path+clickHelper[sel];
window.location.href = path;
}
The double {{ }} are TWIG templating for those unfamiliar with that. Mixed javascript and TWIG ServerSide code here, sorry.
I have a Dojo EnhancedGrid. Suppose in one column I want to display the employee's name as a link, and aart of the URL contains must employee ID.
The row in the grid:
structure:[
{name:"Name", field:"name", datatype:"string", formatter:createLink},
...
The formatter:
var createLink = new function(name){
return "" + name + "";
}
How do I get the value of employeeID in the formatter?
Completely different approaches very welcome as well!
p.s. if it's relevant, the grid is using an ObjectStore wrapping an instance of JsonRest.
function formatter(value, idx) {
var gridRow = theGrid.getItem(idx);
//gridRow["property"]; //some property from the store
}
This works for me. Hope it helps.