Develop Reference

For Loops in Blogger, Replacing all characters in a string with the give character Java Script for Blogger

This is a simple question i have,
I have a simple script here :
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
var returnt=filename.substring((filename.lastIndexOf('/'))+1,filename.lastIndexOf('.'));
var returna=filename.substring((filename.lastIndexOf('/'))+1,filename.lastIndexOf('.'));
<b:loop values='returnt.length'>
var ctitle=returnt.replace("%2B", " ");
var calt=returna.replace("%2B", " ");
</b:loop>
$img.attr('title', ctitle);
$img.attr('alt', calt);
});
});
//]]>
I wanted all the %2B in the returnt and returna to be replace with space and stored in ctitle and calt respectively, but without a loop it won't work.
I tried something like
for(int i=0;i<returnt.length;i++)
{
var ctitle=returnt.replace("%2B", " ");
var calt=returna.replace("%2B", " ");
}
But didn't work, now I have put the values='returnt.length' in the script but it's still not working.
I know something is missing and is wrong somewhere, please tell me how to do it.
I want the loop to work like the given above for loop.
And I tried .replaceAll("","") method but didn't work. :(
I want a method to replace all the characters or info on how to write the above for loop in blogger FOR LOOP method.

You can use regex matching in replace. The code will look like -
$(document).ready(function() {
$('img').each(function() {
var $img = $(this);
var filename = $img.attr('src')
var returnt = filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
var returna = filename.substring((filename.lastIndexOf('/')) + 1, filename.lastIndexOf('.'));
var ctitle = returnt.replace(/%2B/g," ");
var calt = returna.replace(/%2B/g," ");
$img.attr('title', ctitle);
$img.attr('alt', calt);
});
});
The b:loop tag is native to Blogger platform. Its values attribute only accepts data tags present in Blogger and not custom JavaScript variables. Refer to the documentation here
The general format for using loops is this:
<b:loop var='identifier' values='set-of-data'>
[repeated content goes here]
</b:loop>
The 'identifier' (i) part can be any name you choose, and will be used
to stand in for each new item in the list, each time through the loop.
The set of data you specify for the values can be any piece of data
described in the data tags article as being a list of items.

How to add a javascript variable to div?

I have some code that is roughly along the lines of this:
exportValue = [];
function reduceArray() {
//does something
exportValue = parseFloat(exportValue)
}
From that, I get that exportValue is 73951. I then have to add that number to the page... so I tried both of these:
$("#exportValueDiv").append(exportValue);
$("#exportValueDiv").append("<li>" + exportValue + "</li>");
But that doesn't work.. I'm confused on how to add something like a variable to the DOM....
If I do something like:
$( "#exportValueDiv" ).append( "<li>value</li>")
it works, but I don't want to add a string, I want to add the value of the variable. I looked this up, but I'm still confused, so any help would be greatly appreciated!!!

Look into jQuery manipulation
$("#exportValueDiv").text(exportValue); //Replaces text of #exportValueDiv
$("#exportValueDiv").html('<span>'+exportValue+'</span>'); //Replaces inner html of #exportValueDiv
$("#exportValueDiv").append('<span>'+exportValue+'</span>'); //Adds to the inner html of #exportValueDiv

The .append() contract expects a DOM element or HTML String. You will need to do:
$("#exportValueDiv").append("<div>" + exportValue + "</div>");

Try this:
$("#exportValueDiv").append("<div>" + exportValue + "</div>");

The following appends your variable to a div that already has information:
<div id="exportValueDiv">
<p>
Some information.
</p>
</div>
<script>
var exportValue = "Hello world.";
$("#exportValueDiv").append('<p>'+ exportValue +'</p>');
</script>
https://jsfiddle.net/supadave57/f9tqw0d4/

Having difficulty building a form summary with JS

Sorry for the noobish question but, I am trying to build a form summary that will populate a div (immediately) with all of the fields being used. Here is a small sample of the field: Fiddle
For some reason the JS is not working as I would expect it to, can anyone point out what I am doing wrong?
For example, I would like it to output: "AND name: john EXCEPT number 222".
I would also like to be able click on a result to remove it, and clear the field. Thank you
$(".allS").change(function () {
if ($(this).next('.textArea').not(':empty'))
// varible to hold string
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("#text_here").text(str);
}).change();
$('.textArea').change(function(){
var $inputs = $('form#form :input[type="text"]'),
result = "";
$inputs.each(function(){
// access the individual input as jQuery object via $(this)
result += $(this).val()+"<br>";
});
// store result in some div
$('div#text_here').text(result);
}).change();

There were many mistakes in your code. I simplified it to a very short code that only does what's needed to get the output you requested. Here's the working fiddle.
$(".allS, .textArea").change(function () {
var str = '';
if ($('#name').val().length > 0 && $('#number').val().length > 0)
var str = $('#nameMod>option:selected').text() + ' name:' + $('#name').val() + ' ' + $('#numberMod>option:selected').text() + ' number ' + $('#number').val();
$("#text_here").html(str);
});
Basically, what this does is attach a change event handler to both classes (.alls, .textArea), and when the event is triggered, both input fields are tested for any content. If this test passes, a string is composed out of all the relevant values, and the div content is set. If the test failed (no content), the str variable contains an empty string and the div is cleared.

Just glancing at the code, the selector 'form#form :input[type="text"]' looks wrong. For starters, input is not a pseudoclass. Also, attribute matching shouldn't have the quotes.
This may or may not be what you want (I think it is, from looking at your html):
'form#form input[type=text]'
Also your <br>'s are not working because you called text(). call html() instead.

Jqgrid inline mode with select2

I have found the #Olegs answer for FORM based select2 integration to jQgid, but I need help to get it to work in inline mode,, this jsfiddle is my attempt to get my problem online somehow I'm new with fiddle so please be patient :)
http://jsfiddle.net/mkdizajn/Qaa7L/58/
function(){ ... } // empty fn, take a look on jsfiddle
On this fiddle I can't make it to work to simulate the issue I have in my local network but the problem with this select2 component is that when I update some record(via local or ajax), the grid does not pick up my change and it sends null for values where select2 fields are!
I'm sorry that I can't make jsfiddle to work like on my PC :(
Thanks for any help you can think off that may be the issue here..
P.S. one veeeery strange thing is that when I console.log( select2-fields ), before, and after the value is picked up correctly but I suspect that the grid loose that value somewhere in between .. and send null values to server..

I'm posting this in a good will that I think will help anyone if come to close incounter with similar problem like me..
I'll try to bullet this problem out step by step..
first, on my server side I generate one html tag somewhere near grid table that holds info what columns, fields are lookup type.. like this:
<div id="hold_lookup_<?=$unique_id?>" style="display: none"><?php echo $lokki; ?></div>
that gives me output like this:
<div id="hold_lookup_table1" style="display: none">col1+++col2+++col3</div>
define onselectrow event somewhere
$onSelectRow = "function(){
f = $(this).attr('id'); // grid name
try{
n = $('#hold_lookup_' + f).text().split('+++');
}catch(e){
console.log(e)
}
rez = ''; // results
temp = 'textarea[name='; // template
$.each(n, function(index, item){
rez += temp + item + '],'
});
rez = rez.slice(0,-1); // rezemo zadnji zarez
$( rez ).select2({ .. define my ajax, my init etc.. });
}";
$dg->add_event("jqGridInlineEditRow", $onSelectRow);
last but very tricky part is here.. I destroy select2 columns before sending to database in jqgrid.src file where function for SAVE inline method is.. like this
if (o.save) {
$($t).jqGrid('navButtonAdd', elem, {
caption: o.savetext || '',
title: o.savetitle || 'Save row',
buttonicon: o.saveicon,
position: "first",
id: $t.p.id + "_ilsave",
onClickButton: function() {
var sr = $t.p.savedRow[0].id;
rez = rez.split(',');
rez1 = '';
$.each(rez, function(index, item) {
rez1 += item + ','
})
rez1 = rez1.slice(0, -1);
rez1 = rez1.split(',');
$.each(rez1, function(index, item) {
$(item).select2('destroy');
});
you can see that I inserted the code onclickbutton event via same 'rez' variable that was defined in my php file where I created grid..
That's it, I hope that helped someone, event if not in this particular problem, but with methods that was used here :)
cheers, kreso

jquery: "Exception thrown and not caught" in IE8, but works in other browsers

My code works fine in other browsers, but in IE8 I get "error on page" - and when I click that it says:
"Exception thrown and not caught Line: 16 Char: 15120 Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
I tried linking to jquery.js (rather than jquery.min.js) and to 1.5.1/jquery.min.js,
but problem still remains.
Can someone correct/improve my code for me, or guide me as to where to look. Thanks
<script type="text/javascript">
function fbFetch()
{
var token = "<<tag_removed>>&expires_in=0";
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/<<ID_REMOVED>>?&callback=?&access_token=" + token;
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url, function(json)
{
json.data = json.data.reverse(); // need to reverse it as FB outputs it as earliest last!
var html = "<div class='facebook'>";
//loop through and within data array's retrieve the message variable.
$.each(json.data, function(i, fb)
{
html += "<div class='n' >" + fb.name;
html += "<div class='t'>" + (dateFormat(fb.start_time, "ddd, mmm dS, yyyy")) + " at " + (dateFormat(fb.start_time, "h:MMtt")) + "</div >";
html += "<div class='l'>" + fb.location + "</div >";
html += '<div class="i"><a target="_blank" title="opens in NEW window" href="https://www.facebook.com/pages/<<id_removed>>#!/event.php?eid=' + fb.id + '" >more info...</a></div>';
html += "</div >";
}
);
html += "</div>";
//A little animation once fetched
$('.facebookfeed').animate({opacity: 0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity: 1}, 500);
});
};

Does the code do the job in IE8 or does it break? The reason I ask is because if it works as expected you could just wrap it in a try{ } catch{ \\do nothing } block and put it down to another thing IE is rubbish at.
You may be better off creating an object for the creation of the facebook div. Something like...
var html = $('<div />');
html.attr('class', 'facebook');
Then in your each loop you can do this...
$('<div />').attr('class', 'n').append(fb.name).appendTo(html);
$('<div />').attr('class', 't').append etc...
Then append html to the facebookfeed object
Doing this may remove the scope for error when using single quotes and double quotes when joining strings together, which in turn may solve your issue in IE8
$('.facebookfeed').fadeOut(500, function(){
$(this).append(html).fadeIn(500);
});
Hope this helps!
UPDATE
The append method is used to add stuff to a jquery object. For more info see here
So to surround the div's as you mentioned in the comments you would do something like this...
var nDiv = $('<div />').attr('class', 'n').append(fb.name);
$('<div />').attr('class', 't').append(fb.somethingElse).appendTo(nDiv);
// etc
And then you would need to append that to the html div like so...
html.append(nDiv);
So that would give you
<div class="facebook">
<div class="n">
value of fb.name
<div class="t">
value of fb.somethingElse
</div>
</div>
</div>
So what you have done is created a new jquery object and appended to that, then appended that to the html object which you have then appended to the facebookfeed div. Confusing huh?!