| 1 comments ]

Dynamic form element selector based on jquery

<html>
<head>
<title>PHPQA Test</title>
on the script side please add jquery library
<script language="javascript" type="text/javascript"
src="http://jobanjohn.googlepages.com/jquery.js"></script>

<script language="javascript">
function getallElementValue()
{
var postData = {};
var argumentList='';
//$(':input',"#phpqaFrm").each(function(){

$(':input',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
if((type!='checkbox') && (type!='button')
&&(type!='submit')&&(type!='radio'))
{
argumentList =argumentList+'&'+this.name+'='+this.value;
}
else if((type=='checkbox')||(type=='radio')){
if($(this).is(':checked')) {
argumentList =argumentList+'&'+this.name+'='+this.value;
}
}
}
});
$('select',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
argumentList =argumentList+'&'+this.name+'='+this.value;
}
});
$('textarea',"form[name=phpqaFrm]").each(function(){
var type = this.type;
if(this.value!=null){
argumentList =argumentList+'&'+this.name+'='+this.value;
}
});
return argumentList;
}

function getvalues(){
var val = getallElementValue();
alert(val);
// do ajax action if you want to post it using $.get , $.ajax, $.post
etc to a server and handle the response !!
}
</script>

<!--script part ends here -->
</head>
<body>
<!-- note the form name-->
<form name="phpqaFrm" id="phpqaFrm">
<input type="hidden" name="action" value="phpqainsertlocation" />
<table width="500">
<tr>
<td><input type="text" name="phpqaTest1" value="phpqa
Test 1"></td>
<td><input type="text" name="phpqaTest2" value="phpqa
Test 2"></td>
</tr>
<tr>
<td><input type="checkbox" name="phpqaTest3[]"
value="phpqa Test 3"></td>
<td><input type="checkbox" name="phpqaTest3[]"
value="phpqa Test 4"></td>
</tr>
<tr>
<td><input type="radio" name="phpqaTest5[]"
value="phpqa Test 5"></td>
<td><input type="radio" name="phpqaTest5[]"
value="phpqa Test 6"></td>
</tr>
<tr>
<td>
<select name="phpqaTest7">
<option value="phpqaTest8">phpqa Test 8</option>
<option value="phpqaTest9">phpqa Test 9</option>
<option value="phpqaTest10">phpqa Test 10</option>
<option value="phpqaTest11">phpqa Test 11</option>
<option value="phpqaTest12">phpqa Test 12</option>
</select>
</td>
<td>
<select name="phpqaTest13">
<option value="phpqaTest14">phpqa Test 14</option>
<option value="phpqaTest15">phpqa Test 15</option>
<option value="phpqaTest16">phpqa Test 16</option>
<option value="phpqaTest17">phpqa Test 17</option>
<option value="phpqaTest18">phpqa Test 18</option>
</select>
</td>
</tr>
<tr>
<td><textarea name="phpqaTest19" >phpqa Test 19</textarea></td>
<td><textarea name="phpqaTest20" >phpqa Test 20</textarea></td>
</tr>
<tr>
calling the java script function get form values
<td><input type="button" name="phpqa" value="check it"
onclick="javascript:getvalues()"></td>.
<td></td>
</tr>
</table>
</form>
</body>
</html>

Demo here


| 2 comments ]

qJquery based dynamic adding and removal of html elements.
it uses the some smal jquery function like append,remove,hide etc,

Enjoy jquery. less coding huray !!

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>jQuery Test on - phpqa.blogspot.com</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function addNewToPhpqa() {
var id = $('#idVal').val();
id++;
// set a maximum value for elements
if(id<10){
$("#phpqaToAppend").append("<p id='count" + id + "'><label
for='txt" + id + "'>Field " + id + "&nbsp;&nbsp;<input type='text'
size='20' name='txtName[]' id='txtName" + id + "'>&nbsp;&nbsp<a
href='javascript:void(0);' onClick='removeThis("+ id +");'>Remove
this</a><p>");
}else{
alert("you have reached maximum Thanks phpqa.blogspot.com");
}
$('#idVal').val(id);
}

function removeThisFromPhpqa(id) {
$("#count"+id).hide(1000);
// or u can use
//$("#count"+id).remove();
}
</script>
<body>
<p><a href="javascript:void(0);" onClick="addNewToPhpqa();">Add More</a></p>
<form action="#" method="get" id="phpqa">
<input type="hidden" id="idVal" value="1">
<div id="phpqaToAppend">
<p id='count1'>
<label for="txt1">
Field 1
&nbsp;&nbsp;
<input size="20" name="txtName[]" id="txtName1" type="text">
&nbsp;&nbsp;
<a href="javascript:void(0);"
onclick="removeThisFromPhpqa(1);">Remove this</a>
</label>
</p>
</div>
<label ></label>
<p><input type="submit" value="Submit" name="submit">
<input type="reset" value="Reset" name="reset"></p>
</form>
</body>
</html>


see demo here Demo

Happy Jquering !!

| 0 comments ]

Adding next link in the info box window on Google map

Hi

I have a map and it iss loading contents from an xml file. I am
displaying the markers on the map based on one particular order. I
need to to show the next infobox window from the previously opened
infobox window based on the order.

Any help appreciated !!

Thanks
jj
http://phpqa.blogspot.com

*************************************************
Larry wrote

*************************************************

Totally untested.
Put this in the code for your infoWindow (beware the quotes, match
them with the ones you are using):
html += '<a href="javascript: showNext('+i+');">Next</a>'

Put this function in the global scope:
function showNext(i) {
i++;
if (i >= gmarkers.length) { i = 0 }
GEvent.trigger(gmarkers[i], "click");

}

-- Larry

*************************************************
william wrote
*************************************************

Store references to your markers in an array, just like you would if you
were going to build a sidebar.

Build links similar to the ones that you would put in a sidebar, but for
the next marker, and put them inside your infowindow HTML.

Check if this is the last marker, and if so either don't add the link or
link back to gmarkers[0].

Something like this (not tested).

var gmarkers = [];
var maxMarkers = 28;

function createMarker(point,html) {
// create the marker
var marker = new GMarker(point);

// store a reference in the gmarkers array
gmarkers.push(marker);

// build the link
var n = gmarkers.length;
var link = '<br><a href="javascript:GEvent.trigger(gmarkers[' + n +
'], \'click\')"> Next </a>';

// is this the last marker?
if (n < maxMarkers) {
html += link;
}

// handle the click
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;

}

Wasn't it jey jey who wrote:

*************************************************
jj wrote

*************************************************

Thanks Larry and Mike for the answers.
It worked out for me on my map.

Thanks again for your time you have spend for.

on function createMarker, I have added " gmarkers.push(marker); "

then I wrote function ;

function myclick(i)
{
i++;
GEvent.trigger(gmarkers[i], "click");

}

then called the function like

" html += separator + '<span style="text-align:right;"><a
href="javascript:myclick(\''+ i +'\');">Next Location</a></span>'; "

Hope this helpful to somebody


thanks
jj
http://phpqa.blogspot.com

| 1 comments ]

How we can move into last changed position on info window close event On google map

Hi,

I have issue with the markers. When I clicked the marker the info
window is opening and the map positions are redrawing because the
info window is little bit larger. So I need to redraw the back to its
old position(markers) where clicked last time, In order to to get a
good user experience.

How can we achieve that ..

Is this possible in google map. if yes Please help me to solve this
issue

Thanks
JJ
http://phpqa.blogspot.com


****************************
Mike Williams wrote
****************************

Subject: Re: How we move into last changed position on info window close event


You could take a copy of map.getCenter() into a global variable just
before you open the info window, and perform a map.setCenter() to put it
back when you see an infowindowclose event. However, I reckon that that
provides a significantly worse user experience.

--
http://econym.org.uk/gmap
The Blackpool Community Church Javascript Team

****************************
jj wrote
****************************

Thanks Mike.

Can we use the "Return to last Result", the centered control between
Pan up , Pan right, Pan Bottom, Pan Left. in the map control named
GLargeMapControl. is It seems to be work here or not.

Do you have any idea that which function is used there?
jj
http:phaqa.blogspot.com

****************************
Esa wrote..
****************************

map.savePosition() saves the position

map.returnToSavedPosition() recalls the position

It is a good idea to trigger returnToSavedPosition() by
'infowindowclose' event. I been using it often. I quess this is the
first one:
http://esa.ilmari.googlepages.com/hellocolorswitch.htm

What if the user wants to see behind the info window. That is why
'closeclick' event of GInfoWindow might be better alternative.

The first setCenter saves the position. That is often forgotten by
those who are using just any initial setCenter() like (0,0) and a
function that setCenters the map by marker bounds. savePosition()
should also be triggered by that function.


try this out
****************

var marker = new GMarker(point, markerOptions);

GEvent.addListener(marker, "click", function() {
map.savePosition();
marker.openInfoWindowHtml('<div
class="nome">phpqa.blogspot.com</div>', {maxWidth:300});
});

GEvent.addListener(marker, "infowindowclose", function() {
map.returnToSavedPosition();
});

| 1 comments ]

Handling the multiple checkboxes with jquery for Check All, Uncheck All
and get values from selected values


include jquery

<script language="JavaScript" src="youserveraddres/js/jquery.js"></script>


your html

<input name="phpqa[]" type="checkbox" value="1">1
<input name="phpqa[]" type="checkbox" value="2">2
<input name="phpqa[]" type="checkbox" value="3">3
<input name="phpqa[]" type="checkbox" value="4">4
<input name="phpqa[]" type="checkbox" value="5">5
<input name="phpqa[]" type="checkbox" value="6">6
<input name="phpqa[]" type="checkbox" value="7">7
<input name="phpqa[]" type="checkbox" value="8">8

<a href="javascript:void();" onclick="markAll()">Check All</a>
<a href="javascript:void();" onclick="unMarkAll()">Uncheck All</a>
<a href="javascript:void();" onclick="getSelectedVals()">Get Checked Values</a>


// function for mark all / check all

function markAll(){
$("input[@name='phpqa[]']").each(function() {
this.checked = true;
});
}


// function for uncheck all

function unMarkAll(){
$("input[@name='phpqa[]']").each(function() {
this.checked = false;
});
}


//fetching selected values / checked values

function getSelectedVals(){
$("input[@name='phpqa[]']").each(function() {
if ($(this).attr('checked'))
{
alert($(this).val());
}
});
}

demo here


if you have any doubts lemme know..
enjoy jquerying.........