We Keep Coding

Enabling input text on page load based on span value

I have a web page which consist of a <span> element and <input> element.
My requirement is to dynamically enabling/disabling the <input> element based on <span> innerHTML.
I have written following javascript:
var vale=document.getElementById("SPAN_ID").innerHTML;
But value is coming as undefined,since I guess at page loading span element is yet to be constructed.I have to perform this operation on page loading time only.Can anyone provide any suitable javascript code for this??

You can use the DOMContentLoaded event to wait for the HTML to be fully loaded and parsed before running your code:
<script>
document.addEventListener('DOMContentLoaded', function () {
var value = document.getElementById("the-span").innerHTML;
if (value) {
document.getElementById('the-input').disabled = false;
}
}, false);
</script>
<span id="the-span">Hi, I'm the span</span>
<input id="the-input" value="I'm the input" disabled>
If you delete the text inside of the span element, and re-run the snippet, you'll see that the input box remains disabled.

If page load is indeed your problem
If you are using jquery, paste the code inside
$(document).ready(function() {
});
If you are using plain js then
window.onload = yourfunctioncomeshere

Try this if your are using jquery:
$(document).ready(function() {
var spanText = $('#SPAN_ID').text();
//based on var spanText value you can disable/enable input
//To disable input
$('#INPUT_ID').attr({
'disabled': 'disabled'
});
// To enable input
if ($('#INPUT_ID').attr('disabled')) {
$('#INPUT_ID').removeAttr('disabled');
}
});

how to implement a "Read More" button with Get request

I am working on an image gallary inside a web templete. where each image is constrcuted as follow:-
<li>
<figure><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/search.png" alt=""></span></figure>
</li>
now as shown inside the markup, when the user visit the page the small.jpg will be rendered , then if he click on the small.jpg , another image named big.jpg will be shown inside a jquery slider, here is a sample on a real website http://static.livedemo00.template-help.com/wt_47767/index-2.html
now what i want to do is to replace the search.png with a button or a link (although adding a link will not work because the markup is already inside a link !!) with "Read More" label, so if the user clicks on the ReadMore either on the slider or inside the normal web page to redirect him to another page ?
can anyone adivce on this please ?
second question. i am trying this more complex scenario, is to keep the current search.png inside the web page , but to replace it with "ReadMore" on the slider ?
EDIT
i want to avoid adding additional span inside my markup since there is a script which are going to read the span and display them inside the jquery slider. so i replaced the span with a text as follow:
<li>
<figure><img src="~/img/small.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><text class="read-more" data-goto="/Home/">Read More</text></span></figure>
</li>
and here is the script:-
<script>
$(function () {
$('.read-more').on("click", function (e) {
window.location = $(this).attr('data-goto');
e.stopPropagation(); // this prevents the anchor click from triggering.
});
})
</script>
but currently inside the slider i will get the following text,
but when i click on it i will not be redirected to the home page , instead the jquery slider will be dismissed. and if i am inside the web page (not inside the jquery slider) and i lick on ReadMore i will just get the picture on my browser...
BTW here is the callback function inside the touch.jquery.js script which i wrote to add the span inside the slider:-
function loadImage(src, callback){
var img = $('<img>').on('load', function(){
callback.call(img);
});
img.attr('src', src);
var allcaptions = $("figure span");
// setTimeout is a hack here, since the ".placeholders" don't exist yet
setTimeout(function () {
$(".placeholder").each(function (i) {
// in each .placeholder, copy its caption's mark-up into it (remove the img first)
var caption = allcaptions.eq(i).clone();
caption.find("img").remove();
$(this).append("<div class='caption'>" + caption.html() + "</div>");
});
}, 500
);
}

Use a span tag with the data attribute containing your url in place of the search image.
<li>
<figure>
<a href="~/img/big.jpg" class="thumb">
<img src="~/img/small.jpg" alt=""/>
<span><strong>Project name:</strong><em>Villa</em>
<span class="read-more" data-goto='/read/more/url'>Read More</span>
</span>
</a>
</figure>
</li>
then the javascript would be:
$(function(){
$('.read-more').click(function(e){
window.location = $(this).attr('data-goto');
e.stopPropagation(); // this prevents the anchor click from triggering.
});
})

Initializing a jquery mobile widget on a page gives "Cannot read property 'jQuery....' of undefined"

Fiddle Example
The site has 2 (or more) pages defined in HTML like this:
<div id="page1" data-role="page">
<div data-role="content" id="page1-content">
Next Page
</div>
</div>
<div id="page2" data-role="page">
<div data-role="content" id="page2-content">
Go Back
</div>
</div>
In Javascript - I am at once initializing everything:
$(function(){
$('#page1-content, #page2-content').each(function(){
var ul = $('<ul>');
$.each(['one','two','three'], function(item){
ul.append('<li>'+item+'</li>');
});
ul.appendTo(this).listview();
});
});
But the page only initializes the list view on the 1st page, and the list view on the 2nd (and not currently visible) page does not initialize and gives me an error.
Cannot read property 'jQuery19107783124386332929' of undefined
What am I doing wrong?
I really want to be able to start fetching the data and at least create the DOM in every page at once in the beginning, rather than waiting till the user clicks "Next Page".
Also - the list view on the first page is overlapping the "Next" button. I see this overlapping often and would like to fix/understand this too.

Page data-role=page in jQuery Mobile passes through different stages, as shown in the diagram below.
Image / diagram source: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html
Enhancing widgets manually should be called on active page only, otherwise it will result in a error.
To do add fresh elements on different pages, you need to do this when pagecreate or pagebeforecreate events occur, without the need to call any enhancement method. As the widget will be auto-initialized/enhanced during that stage.
Also, you have a mistake in your code where you didn't close ul tag. However, this didn't cause the error.
The below code shows how to add elements to different pages without the need to call any enhancement method manually.
$(document).on("pagecreate", "[data-role=page]", function (e) {
var ul = $('<ul data-role="listview" data-inset="true"></ul>'),
html = '';
$.each(['one', 'two', 'three'], function (item) {
html += '<li>' + item + '</li>';
});
ul.append(html);
$('[data-role=content]', this).append(ul);
});
Demo

This might be a particular issue of the versions combination you're using, but before checking that, I would try delegating on the 'pageinit' event instead of the regular document ready.
Please try this:
$(document).on('pageinit',function(){
$('#page1-content, #page2-content').each(function(){
var ul = $('<ul>');
$.each(['one','two','three'], function(item){
ul.append('<li>'+item+'</li>');
});
ul.appendTo(this).listview();
});
});

jQuery - how to determine which link was clicked

I have a simple piece of PHP which generates n copies of the following code:
<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p>
<div class="divSDB_L2">
</div>
It is generated using PHP, so the number of copies is unknown up front.
On another page I have the following Javascript (using jQuery)
function FSD_L2(dbG,SlID)
{
$(".divSDB_L2").load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
When the text above (Click Here to See Data) is clicked, it should add the contents of test15.php between the the two DIV tags.
#Test15.php
<?php
$dbG = $_GET['dbG'];
$SlID = $_GET['SlID'];
print $dbG . " & " . $SlID;
?>
The problem I have is how to determine which of the links was clicked? At present, if I have three copies, and click one, all three copies are activated.
I hope I have made this clear enough. I'm sure there must be a simple way, but I'm quite new to Javascript/jQuery.

Like Brian said, you could just put the same class on all of your links and use the $(this) keyword in jQuery inside of a click function to find out which link was clicked.
Here's a basic example of changing link colors on a nav using this technique: http://jsfiddle.net/9E7WW/
HTML:
<a class="nav">Test</a>
<a class="nav">Test2</a>
<a class="nav">Test3</a>
<a class="nav">Test4</a>
Javascript:
$(document).ready(function(){
$('.nav').click(function(){
// change all to black, then change the one I clicked to red
$('.nav').css('color', 'black');
$(this).css('color', 'red');
});
});

Am not sure I fully understand what it is you are having difficulty with, but the following is how I would do it.
<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
$(document).ready(function() {
$(document).on('click', 'p.ShowSDB_L2', function(evt) {
var $p = $(evt.currentTarget),
dbG = $p.data('dbg'),
slid = $p.data('slid'),
$div = $p.next();
FSD_L2(dbG, slid, $div);
});
});
function FSD_L2(dbG, SlID, $div)
{
$div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block');
}
The click handler is not hardcoded to each p tag. Instead with each p tag we store the required data, ie dbg & slid.
The click handler is then attached once at document ready. jQuery abstracts over the various browsers and passes to its handlers the event object as its first parameter. This object can then be used to find the element on which the event occurred. Refer: http://api.jquery.com/on/
Finally, we fetch the required data from the clicked element, find the div that needs to be updated and then call your custom function.

Here is a cross-browser way to find the element (target) that triggered the event (e):
function getTarget(e){
// non-ie or ie?
e=e||window.event;
return (e.target||e.srcElement);
};

Add the complete URL to your link (or p in this case) using a data attribute:
<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p>
<div class="divSDB_L2"></div>
Then do all the binding directly in your jQuery so you have direct access to the link that was clicked:
$(document).ready(function() {
$('.ShowSDB_L2').on('click', function(e) {
e.preventDefault();
$('.divSDB_L2').empty().load($(this).data('loadurl')).show();
});
});

javascript: swap DOM nodes

What i want to do is swapping two HTML DOM nodes.
Let's take the following HTML list and the swap button below:
<ul class="center-text">
<li>0</li>
<li>1</li>
<li>2</li>
</ul>
<form class="center-text">
<button id="swapButton">Swap</button>
</form>
And here is my JS code:
// the "ready" method is the only jQuery method used in the code
$(document).ready(function(){
document.getElementById("swapButton").onclick = function() {
var ul = document.getElementsByTagName("ul")[0];
// pseudo-swapping: insert "child2" before "child0"
// (indexes are 1 and 5 because of the TextNodes between list nodes)
ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1));
}
});
So here is what happens when clicking the swap button:
The items are swaped indeed. But Somehow after (let's say 1/4) seconds they are restored to their original position, i.e. swaped back automatically.
My question is: WHY?
PS: the code is merely for educational purposes and i only try to understand what's going on behind the doors, so please do NOT post any alternative jQuery method.

$(document).ready(function(){
document.getElementById("swapButton").onclick = function(e) {
e.preventDefault();
var ul = document.getElementsByTagName("ul")[0];
ul.insertBefore(ul.childNodes.item(5), ul.childNodes.item(1));
}
});
This is because button redirects the page to same page. And reverts all. You need to prevent the default behaviour of button.