I'm pretty new to web programming so, making a logic for a web-page, I made a mistake and now I'm in trouble.
I named some divs like "Dv_1.2.1.3" (without knowing the problems linked to using the dot) and I have issues trying to clone (via jquery called by button) some of these.
The button id contains the id of the div I want to clone, so, my logic is:
1) extract the id of the div;
2) get the div and clone it (giving a new id).
I'm stuck with getting the div because of the dots in the id.
The below code is what I've done so far:
$('.CloneDiv').click(function () {
var SplittedId = (this.id).split('_');
if (SplittedId[0]=='Clone'){
alert('SplittedId 1 =' + SplittedId[1]);
//Modify id to use it to find the div to clone
var UsableId = SplittedId[1].replace(/\./g, '\\\\.');
alert('UsableId =' + UsableId);
//Count existing elements
var ClonedNum = $('#' + 'Dv_' + UsableId + '_').length;
ClonedNum++;
var OrigElem = $('#' + 'Dv_' + UsableId).length;
alert('OrigElem =' + OrigElem); //THIS IS 0
//NO ELEMENTS FOUND BUT THE ELEMENT EXISTS
//Clone the element and give new id
var ClonedElem = $('#' + 'Dv_' + UsableId).clone().attr('id', function( i, val ) {
return val + '_' + ClonedNum;
});
ClonedElem.find("input").val("");
if (ClonedNum > 1){
ClonedNum--;
var AnteId = '#' + 'Dv_' + UsableId + '_' + ClonedNum;
alert(AnteId);
$(AnteId).after(ClonedElem);
}else{
var AnteId = '#' + 'Dv_' + UsableId;
alert('AnteId = ' + AnteId);
$(AnteId).after(ClonedElem);
};
}else if(SplittedId[0]=='Del'){
alert(SplittedId[0]);
alert('Del');
}else{
//error
};
});
Might these help: developer.mozilla.org/en-US/docs/Web/API/CSS/escape , Polyfill: github.com/mathiasbynens/CSS.escape/blob/master/css.escape.js
Related
I am working on ecommerce website.
My table gets value from session.
It looks like :
On Checkout I want to get all the values of table.
I have used jquery for this.
Here is my code:
<script>
$('#chhk').on('click',function(e) {
e.preventDefault();
alert('click');
var table = $("#tbl tbody");
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
product = $tds.eq(2).text(),
price = $tds.eq(3).text(),
quantity = $tds.eq(4).attr('value'),
total = $tds.eq(5).text();
alert('Row ' + (i + 1) + ':\nProduct: ' + product
+ '\nPrice: ' + price
+ '\nQuantity: ' + quantity
+ '\nTotal: ' + total);
});
});
</script>
Here
'#chhk' is checkout button id
'#tbl' is my table id
I am getting blank value of quantity by this script as it is input field
Any help would be appreciated..
Try replace this:
quantity = $tds.eq(4).attr('value');
with:
quantity = $tds.eq(4).val();
As .attr('value') gives the value at the start, while .val() gives current property.
More info:
jQuery .val() vs .attr("value")
replace this:
quantity = $tds.eq(4).attr('value'),
with
quantity = $tds.eq(4).find("input").val(),
well I tried to do it separately and am getting expected result.
$('#chhk').on('click',function(e) {
e.preventDefault();
alert('click');
var table = $("#tbl tbody");
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
product = $tds.eq(2).text(),
price = $tds.eq(3).text(),
total = $tds.eq(5).text();
var qty = $(this).find('td input:first').val();
alert('Row ' + (i + 1) + ':\nProduct: ' + product
+ '\nPrice: ' + price
+ '\nTotal: ' + total
+'\n Qua:' + qty);
});
});
Have dealed quantity separately.
I'll try to keep this simple and clear. I'm pretty new to using API's but I'm using the Flickr API to search for and display photos on my website based on a certain tag. For a simple, static web page this is quite simple and I've already got it working as intended. This is the jquery script I found to use:
$(function() {
var apiKey = 'MY_API_KEY_IS_IN_HERE';
var tag = '%23FFLIVE2014-09-03';
var perPage = '25';
var showOnPage = '6';
$.getJSON('http://api.flickr.com/services/rest/?format=json&method='+
'flickr.photos.search&api_key=' + apiKey +
'&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?',
function(data){
var classShown = 'class="lightbox"';
var classHidden = 'class="lightbox hidden"';
$.each(data.photos.photo, function(i, rPhoto){
var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/'
+ rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret;
var thumbPhotoURL = basePhotoURL + '_s.jpg';
var mediumPhotoURL = basePhotoURL + '.jpg';
var photoStringStart = '<a ';
var photoStringEnd = 'title="' + rPhoto.title + '" href="'+
mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' +
rPhoto.title + '"/></a>;'
var photoString = (i < showOnPage) ?
photoStringStart + classShown + photoStringEnd :
photoStringStart + classHidden + photoStringEnd;
$(photoString).appendTo("#flickr");
});
$("a.lightbox").lightBox();
});
});
Create a #flickr div on a page and load that script, photos tagged #FFLIVE2014-09-03 would be displayed, if there are any. My problem is that the site/page I want to show the photos on is dynamic with data generated from a database. So website.com/page.php is the single page, in the database is data for a certain date and a performance that happened on it (For a band).
So what I'm struggling with is how to dynamically edit the tags searched for in the script. With the above script placed in my page.php obviously page.php?id=1 and page.php?id=261 will show the same photos, because the tags searched will be the same when in fact they should be different, based on the date for the data.
So, is there some way to do this? Generate the correct date tag to search for based on the database data? I can generate the correct tag inside the PHP file itself quite easily, just echo the first part of the tag then the date. But how would I do that in relation to the javascript? I gather it is possible to use PHP within Javascript but that would be outside the database, so it wouldn't know what it was generating.
I hope that makes sense!
I have a problem with jQuery to obtain each value from jSon string and modify a div or span or other id with value obtained from a jSon string.
At the start of each PHP file i have an SQL request generate an hidden input with a jSon string as value. This is for multilanguage for example in english the generated string is
<input type="hidden" id="page_json_language_home" value='{
"label_title":"My WebSite",
"label_settings":"Settings",
"label_subscription":"Subscription"
}' />
for french :
<input type="hidden" id="page_json_language_home" value='{
"label_title":"Mon site web",
"label_settings":"Parametres",
"label_subscription":"Abonnement"
}' />
this is work fine !
After that i have a javascript using jquery to match each label_xxx with value
i have many html code like this
<title id="label_title></title>
<div id="label_settings"></div>
or
<span id="label_subscription"></span>
This is my (partial) code in my javascript file i called to obtain the json string from hidden input :
var _getPageJsonLanguage = function(id) {
if (!id)
id = "page_json_language";
else
id = "page_json_language_" + id;
var json = $("#" + id).val();
var data = bsc.data.jsonParse(json);
return data;
};
This is work fine too !
The code in problem is :
data_language = bsc.page.getPageJsonLanguage("home");
var j = 0;
var language = [];
for (i in data_language) {
console.log("i in language = " + i);
language[j] = i;
console.log("language[j] = " + language[j]);
$("#" + i).html(language[j]);
j++;
}
The result can i obtain in browser 1) undefined for each label or 2) label_xxx for each label_xxx
I need help to access each value of each label_xxx .
I can't obtain the value, this is my last try....
I believe the problem is in your for in loop, you never actually grab the value, only the key:
for (i in data_language) {
console.log("i in language = " + i);
language[j] = data_language[i]; //changed this line to actually grab the value
console.log("language[j] = " + language[j]);
$("#" + i).html(language[j]);
j++;
}
If you are receiving undefined, it may be due to the JSON not being parsed correctly. Since your using jQuery, you can always run $.parseJSON(json) to be sure.
Fiddle accessing your JSON in a for in loop and logging: http://jsfiddle.net/tymeJV/CKBLc/1/
I hope this will work -
var data_language = JSON.parse($("#page_json_language_home").val());
var language = [];
var j = 0;
for (i in data_language) {
console.log("i in language = " + i);
language[j] = data_language[i];
console.log("language[j] = " + language[j]);
$("#" + i).html(language[j]);
j++;
}
I have a link, and every time it is clicked i need to add a random id to the url, these id's can't be the same, and ideally need to be saved somewhere.
I'm working in php, which i'm pretty new to, therefore I'm not sure how to go about this.
you can do something like that
link
and by using jquery
<script>
var alreadyUsed = ""
function AppendIDToURL(){
var id ;
var loop = true;
while(loop){
id = 1 + Math.floor(Math.random() * 100);
if (alreadyUsed.indexOf("," + id + ",") == -1){
alreadyUsed += "," + id + ",";
loop = false;
}
}
var url = "temp.php/" + id;
//use ajax or any other thing to save this id.
}
</script>
I'm using jQuery clone and children concepts for my project. I'm using one table within div (class is clonedInput), by clicking one button I'm cloning the whole div and inserting it after the div. In this time:
"
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
$('#input' + num).after(newElem);
"
by using this I'm increasing the div id. At the same time I want to increase the table tr and td's id. For that I tried children.attr(). But this is not increasing the table ids. Can anyone clarify this for me?
Thanks in advance.
I have a function which creates inputs in a row with incremented ids. This is not the thing you are looking for but i am sure it will give you a fairly good idea to how to do the task.
var numbers =0
$(function() {
var newRowNum = 0;
$('#addnew').click(function() {
newRowNum++;
///////////// <a> <td> <tr>
var addRow = $(this).parent().parent();
///////////// In the line below <tr> is created
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html();
$('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
$('input', newRow).each(function(i) {
var newID = newRowNum + '_' + i;
$(this).attr('id', newID).attr('name', newID);
});
addRow.before(newRow);
$('a.remove', newRow).click(function() {
$(this).parent().parent().remove();
return false;
});
return false;
});
numbers = newRowNum;
});
It is not clear what are you trying to do, but my guess is that you can try:
var num = $('.clonedInput').length;
var newNum = new Number(num + 1);
var newElem = $('#input' + num).clone();
newElem.attr('id', 'input' + newNum);
$('#input' + num).after(newElem);
the whole
$('#input' + num).clone().attr('id', 'input' + newNum);
part may not be giving you clone object but rather boolean result or some integer.
If the problem is not resolved you may try append() function also.