I have some code below:
transaction.executeSql('SELECT * FROM Table1 ORDER BY date DESC', [],
function(transaction, result) {
if (result != null && result.rows != null) {
for (var i = 0; i < result.rows.length; i++) {
var row = result.rows.item(i);
$('#records').append('<li>' + 'item1: ' + row['row1'] + '<br>' + 'item2: ' + row['row2'] + '<br>' + 'item3: ' + row['row3'] + '<br>' + 'item4: ' + row['row4'] + '</li>');
$( "#records" ).listview().listview("refresh");
}
}
},errorHandler);
},errorHandler,nullHandler);
As you can see, each time I input a record, all of this is displayed as a list item in a listview. But my problem is, the part where I have appended a href = "#". This is to make each list item linked, but I want a link to a different location depending on the record. Right now, each record would link to the same place.
Is there a way to put that href somewhere else so that it can depend on each list item?
the HTML where the list appears is below:
<div data-role = "content">
<ul id = "records"></ul>
</div>
Please let me know if the question isn't clear, I'll try and make it clearer. Thanks
i guess you can always change href, like that maybe
$("#records li a").each(function() {
var s = $(this).text();
if (s == "text1") {
$(this).attr("href","href1");
}
else if (s == "text2") {
$(this).attr("href","href2");
}
});
might be some syntax errors above, im not jquery expert, i wanted to show general idea
Related
I'm trying to execute this and be able to get a different value for "new_id", the data is correct when getting this API call and there are 7 different id's. However, no matter what I select produces 7 as the new_id value. Please help, sorry for my noob question in advance!
I've tried making data[0] instead of data[i] but I really don't know where to start
var new_id = "";
$(document).ready(function () {
$.ajax({
"url":api_base+"/endpoint",
"type":"GET",
"contentType":"application/json",
"success":function(data){
var s = '<option value="-1">Please Select</option>';
for (var i = 0; i < data.length; i++) {
s += '<option value="' + data[i].check_id + '">' + data[i].check + '</option>';
new_id = data[i].check_id
}
$("#check_list").html(s);
}
});
I'd like to get a different result each time I select a different value.
#Dan Winnick - So where ever the select tag is, add these attributes - id="mySelect" onchange="dropDownChangeEvent()" and in js file add - function dropDownChangeEvent() { new_id = document.getElementById("mySelect").value; }
The users on my review type of platform highlight titles (of movies, books etc) in <em class="title"> tags. So for example, it could be:
<em class="title">Pacific Rim</em>
Using jQuery, I want to grab the content within this em class and add it inside a hyperlink. To clarify, with jQuery, I want to get this result:
<em class="title">Pacific Rim</em>
How can I do this?
Try this:
var ems = document.querySelectorAll("em.title");
for (var i = 0; i < ems.length; ++i) {
if (ems[i].querySelector("a") === null) {
var em = ems[i],
text = jQuery(em).text();
var before = text[0] == " ";
var after = text[text.length-1] == " ";
text = text.trim();
while (em.nextSibling && em.nextSibling.className && em.nextSibling.className.indexOf("title") != -1) {
var tmp = em;
em = em.nextSibling;
tmp.parentNode.removeChild(tmp);
text += jQuery(em).text().trim();
++i;
}
var link = text.replace(/[^a-z \-\d']+/gi, "").replace(/\s+/g, "+");
var innerHTML = "<a target=\"_blank\" href=\"http://domain.com/?=" + link + "\">" + text + "</a>";
innerHTML = before ? " " + innerHTML: innerHTML;
innerHTML = after ? innerHTML + " " : innerHTML;
ems[i].innerHTML = innerHTML;
}
}
Here's a fiddle
Update: http://jsfiddle.net/1t5efadk/14/
Final: http://jsfiddle.net/186hwg04/8/
$("em.title").each(function() {
var content = $(this).text();
var parameter_string = content.replace(/ /g, "+").trim();
parameter_string = encodeURIComponent(parameter_string);
var new_content = '' + content + '';
$(this).html(new_content);
});
If you want to remove any kind of punctuation, refer to this other question.
$('em.title').html(function(i,html) {
return $('<a/>',{href:'http://domain.com/?='+html.trim().replace(/\s/g,'+'),text:html});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em class="title">Pacific Rim</em>
UPDATE 1
The following updated version will perform the following:
Grab the contents of the em element
Combine with the contents of the next element, if em and remove that element
Create a query string parameter from this with the following properties
Remove the characters ,.&
Remove html
Append the query parameter to a predetermined URL and wrap the unmodified contents in an e element with the new URL.
DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'');
return $('<a/>',{href:'http://domain.com/?par='+encodeURIComponent(text),html:$(this).html()});
});
Or DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
UPDATE 2
Per the comments, the above versions have two issues:
Merge two elements that may be separated by a text node.
Process an em element that's wrapped in an a element.
The following version resolves those two issues:
DEMO
$('em.title:not(:has(a))').filter(function() {
return !$(this).parent().is('a');
}).html(function() {
var nextNode = this.nextSibling;
nextNode && nextNode.nodeType != 3 &&
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
Actually,if you just want to add a click event on em.title,I suggest you use like this:
$("em.title").click(function(){
q = $(this).text()
window.location.href = "http://www.domain.com/?="+q.replace(/ /g,"+")
}
you will use less html code on browser and this seems simply.
In addition you may need to add some css on em.title,like:
em.title{
cursor:pointer;
}
Something like this?
$(document).ready(function(){
var link = $('em').text(); //or $('em.title') if you want
var link2 = link.replace(/\s/g,"+");
$('em').html('' + link + '');
});
Ofcourse you can replace the document ready with any type of handler
$('.title').each(function() {
var $this = $(this),
text = $this.text(),
textEnc = encodeURIComponent(text);
$this.empty().html('' + text + '');
});
DEMO
Hello I'm using this js to pass the url parameter and it's working just fine, but my problem is that when I define the path to the JSON file I don't want to use the id of the item...I want to use another Id. For example: I have the following item:
{"id":"1",
"name":"Winery",
"street":"Chile",
"number":"898",
"phone":"4204040",
"mail":"winery#hotmail.com",
"web":"www.winery.com",
"lat":"-32.891638",
"long":"-68.846522",
"id_localidad":"1",
"id_provincia":"1"}
I want to put id_localidad at the end of the path, to generate the listview depending on the city (id_localidad is the id of the city where the shop is), not the id of the item. And this is not working for me.
Thanks in advance!
JS FILE
$('#PuntosDeVenta').live('pageshow',function(event){
var id = getUrlVars()["id"];
$.getJSON('http://localhost/CavaOnline/json_PuntosDeVentas.php?id_localidad='+id, function(vinerias) {
//THIS IS NOT WORKING, IS THE SAME AS PUTTING id, not id_localidad
$.each(vinerias, function(index, vineria) {
$('#listviewVinerias').append( '<li><a href="FichaTecnicaVineria.php?id=' + vineria[id - 1].id + '" > ' +
'<img src="pics/' + vineria[id - 1].img_url1 + '"/>' +
'<h4>' + vineria[id - 1].name+'</h4>' +
'<p>' + vineria[id - 1].street+ ' ' + vineria[id - 1].number+ '</p>' +
'</a></li>');
$('#listviewVinerias').listview('refresh')
});
});
});
function getUrlVars() {
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
}
Div where I load the List
<div data-role="content">
<ul id="listviewVinerias" data-role="listview"></ul>
</div>
So I'm assuming your vinerias is a variable containing a list of JSON objects, even though I don't know why you are calling [id-1] everywhere.
If so, you can use the .filter() function to filter out the elements that have an id_localidad equal to the one specified.
var filteredVinerias = vinerias.filter(function(index){
return this["id_localidad"] === "1" //The localidad you want
});
I am trying to add add a button called shopping cart to my Tabs script. The new button is controlled if a checkbox is clicked. (Show). Im confused why the image is not showing. Any answers would be helpful.
Thank you.
Copy code
$(function() {
var $tabs = $('#tabs').tabs({cookie:{expires:1}});
$(".ui-tabs-panel").each(function(i){
var totalSize = $(".ui-tabs-panel").size() - 1;
var prevImage = "custom/images/prev.png";
var nextImage = "custom/images/next.png";
var atcImage = "custom/images/cart.jpg";
if (i != 0) {
prev = i;
$(this).append("<img href='#' class='prev-tab mover' rel='" + prev + "' src='" + prevImage + "'></img>");
}
if (i != totalSize) {
next = i + 2;
$(this).append("<img href='#' class='next-tab mover' rel='" + next + "' src='" + nextImage + "'></img>");
}
if (i > 1) {
atc = i + 2;
$(this).append("<img href='#' class='atc-tab mover' rel='" + next + "' src='" + atcImage + "'></img>");
}
$('input[name=FIELD_469]').click(function() {
if (this.checked) {
$("img[src*=cart]").show();
}
else {
$("img[src*=cart]").hide();
}
});
$('.next-tab, .prev-tab, .atc-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
});
Sorry, I can not ask for clarification because of low level of my rating, but there are several things that I have noticed and some recomendations.
1) Your selector should look like 'img[src~="cart"]'
http://api.jquery.com/attribute-contains-word-selector/
2) If you use class 'mover' only for that images, you can use '.mover' selector, otherwise just add new class name.
3) Test your JQuery objects with Google Chrome using console.log($("selector")) (Tools->Developer Tools->Console)
4) I think it should be not 'this' but $(this)
$('input[name=FIELD_469]').click(function() {
if (this.checked) {
$("img[src*=cart]").show();
}
If recommendations don't help, please provide more info about your form preferrably with example to see. Thanks
I'm applying DataTables
to utilize filtering, sorting and pagination on my HTML table. I'm using the following code to apply these attributes to the table:
$(document).ready(function() {
<!-- Sorting and pagination -->
var oTable = $('#mainTable').dataTable( {
"sPaginationType": "full_numbers",
"bJQueryUI": true
});
<!-- Filtering -->
$("thead td").each( function ( i ) {
<!-- Create and populate combo boxes -->
this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
<!-- Filter data when selection changes -->
$('select', this).change( function () {
oTable.fnFilter( $(this).val(), i );
});
});
});
On the function call:
fnCreateSelect( oTable.fnGetColumnData(i));
..the combo boxes are filled with the data from the table. However, the boxes are automatically sized to contain the full length of the values (some of which span many lines) and so the columns are sized too big and run way off the page. I've determined it's not a CSS issue, so what I need is a way to make the combo boxes use multiple lines per entry, or only show a portion of the value so that I can fit all these columns on one page.
Thanks in advance!
Answer for anyone following this:
I changed the code in fnCreateSelect (where the combo boxes are built) to limit how much text is stored per value in the combo boxes as such:
function fnCreateSelect(aData) {
var r = '<select><option value=""></option>', i, iLen = aData.length;
for (i = 0; i < iLen; i++) {
// If string is a URL, handle it accordingly
if (aData[i].indexOf("href") != -1) {
var url = aData[i].substring(aData[i].indexOf('http'), aData[i].indexOf('">'));
r += '<option title="' + url + '" value="' + url + '">' + url.substring(0, 25);
if (url.length > 25)
r += '...';
}
else {
r += '<option title="' + aData[i] + '" value="' + aData[i] + '">' + aData[i].substring(0, 40)
if (aData[i].length > 40)
r += '...';
}
r += '</option>';
}
return r + '</select>';
}