admin管理员组文章数量:1402299
In my code I'm creating a product list dynamically using PHP(see image) and the currosponding labels and image paths are stored into hidden fields(created dynamically using PHP) now on document.ready() method i set the first list item's imagepath to img's src and its remarks to label remarks using first hidden fields for remark and imagepath.
and on listitem click i want to change it my function set these values to img and label rightly(checked using alerts) but when function ends it set the image src and remarks innertext to default that is set on document.ready() method
now my question is can i prevent the document.ready() to be executed next time on javascript function call
My View : As the images are reloaded so the page rendering is done again so the document.ready is called again and set these values again to default.
Note :
My page is not reloading any time only images and labels are being changed
The listshown in image is just one group other group is also created dynamically .
server side code in PHP
<?php
for($j=0;$j<count($productstr);$j++) {
$valuerem = $productstr[$j]["pcode"];
$idrem = "rem".$j.$grp;
$valueimg =$productstr[$j]["imgpath"];
$idimg = "img".$j.$grp;
echo "<input type='hidden' value='$valuerem' id='$idrem' />" ;
echo "<input type='hidden' value='$valueimg' id='$idimg' />" ;
}?>
<script>
$(document).ready(function() {
idrv < ? PHP echo $grp; ? > = 'rem0<?PHP echo $grp; ?>';
idmv < ? PHP echo $grp; ? > = 'img0<?PHP echo $grp; ?>';
$('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? ).value);
alert($('#txt<?PHP echo $grp; ?>').text());
$('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
alert($('#img<?PHP echo $grp; ?>').attr('src'));
});
function Change(id) {
idrv < ? PHP echo $grp; ? > = 'rem' + id;
idmv < ? PHP echo $grp; ? > = 'img' + id;
$('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? > ).value);
alert($('#txt<?PHP echo $grp; ?>').text());
$('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
alert($('#img<?PHP echo $grp; ?>').attr('src'));
return true;
}
</script>
alerts are used just to test the values
the code that are being generated at client browser
<tr>
<td width="220px" valign="top" align="left">
<input id="YN" type="hidden" value="true">
<input id="rem00" type="hidden" value="SPL FUNNEL 1">
<input id="img00" type="hidden" value="adminpanel/product_images/4f8e530154d74155.jpg">
<input id="rem10" type="hidden" value="SPL FUNNEL 2">
<input id="img10" type="hidden" value="adminpanel/product_images/4f8e53daf13e6156.jpg">
<input id="rem20" type="hidden" value="SPL FUNNEL 3">
<input id="img20" type="hidden" value="adminpanel/product_images/4f8e543100eaf157.jpg">
<input id="rem30" type="hidden" value="SPL FUNNEL 4">
<input id="img30" type="hidden" value="adminpanel/product_images/4f8e545a829e1158.jpg">
<script>
$(document).ready(function() {
idrv0 = 'rem00';
idmv0 = 'img00';
$('#txt0').text(document.getElementById(idrv0).value);
alert($('#txt0').text());
$('#img0').attr('src', document.getElementById(idmv0).value);
alert($('#img0').attr('src'));
});
function Change(id) {
$('#YN').val('false');
idrv0 = 'rem' + id;
idmv0 = 'img' + id;
$('#txt0').text(document.getElementById(idrv0).value);
alert($('#txt0').text());
$('#img0').attr('src', document.getElementById(idmv0).value);
alert($('#img0').attr('src'));
return true;
}
</script>
<ul>
<li>
<a id="00" style="text-decoration: none; text-size: 1.1em; color: "
onclick=" Change(this.id); alert($('#txt0').text()); alert($('#img0').attr('src'));">
SPL FUNNEL 1</a>
</li>
<li>
<li>
<li>
</ul>
</td>
<td valign="bottom" align="left" colspan="2">
<td width="110px" valign="bottom" align="left" style="width: 180px">
</tr>
In my code I'm creating a product list dynamically using PHP(see image) and the currosponding labels and image paths are stored into hidden fields(created dynamically using PHP) now on document.ready() method i set the first list item's imagepath to img's src and its remarks to label remarks using first hidden fields for remark and imagepath.
and on listitem click i want to change it my function set these values to img and label rightly(checked using alerts) but when function ends it set the image src and remarks innertext to default that is set on document.ready() method
now my question is can i prevent the document.ready() to be executed next time on javascript function call
My View : As the images are reloaded so the page rendering is done again so the document.ready is called again and set these values again to default.
Note :
My page is not reloading any time only images and labels are being changed
The listshown in image is just one group other group is also created dynamically .
server side code in PHP
<?php
for($j=0;$j<count($productstr);$j++) {
$valuerem = $productstr[$j]["pcode"];
$idrem = "rem".$j.$grp;
$valueimg =$productstr[$j]["imgpath"];
$idimg = "img".$j.$grp;
echo "<input type='hidden' value='$valuerem' id='$idrem' />" ;
echo "<input type='hidden' value='$valueimg' id='$idimg' />" ;
}?>
<script>
$(document).ready(function() {
idrv < ? PHP echo $grp; ? > = 'rem0<?PHP echo $grp; ?>';
idmv < ? PHP echo $grp; ? > = 'img0<?PHP echo $grp; ?>';
$('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? ).value);
alert($('#txt<?PHP echo $grp; ?>').text());
$('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
alert($('#img<?PHP echo $grp; ?>').attr('src'));
});
function Change(id) {
idrv < ? PHP echo $grp; ? > = 'rem' + id;
idmv < ? PHP echo $grp; ? > = 'img' + id;
$('#txt<?PHP echo $grp; ?>').text(document.getElementById(idrv < ? PHP echo $grp; ? > ).value);
alert($('#txt<?PHP echo $grp; ?>').text());
$('#img<?PHP echo $grp; ?>').attr('src', document.getElementById(idmv < ? PHP echo $grp; ? > ).value);
alert($('#img<?PHP echo $grp; ?>').attr('src'));
return true;
}
</script>
alerts are used just to test the values
the code that are being generated at client browser
<tr>
<td width="220px" valign="top" align="left">
<input id="YN" type="hidden" value="true">
<input id="rem00" type="hidden" value="SPL FUNNEL 1">
<input id="img00" type="hidden" value="adminpanel/product_images/4f8e530154d74155.jpg">
<input id="rem10" type="hidden" value="SPL FUNNEL 2">
<input id="img10" type="hidden" value="adminpanel/product_images/4f8e53daf13e6156.jpg">
<input id="rem20" type="hidden" value="SPL FUNNEL 3">
<input id="img20" type="hidden" value="adminpanel/product_images/4f8e543100eaf157.jpg">
<input id="rem30" type="hidden" value="SPL FUNNEL 4">
<input id="img30" type="hidden" value="adminpanel/product_images/4f8e545a829e1158.jpg">
<script>
$(document).ready(function() {
idrv0 = 'rem00';
idmv0 = 'img00';
$('#txt0').text(document.getElementById(idrv0).value);
alert($('#txt0').text());
$('#img0').attr('src', document.getElementById(idmv0).value);
alert($('#img0').attr('src'));
});
function Change(id) {
$('#YN').val('false');
idrv0 = 'rem' + id;
idmv0 = 'img' + id;
$('#txt0').text(document.getElementById(idrv0).value);
alert($('#txt0').text());
$('#img0').attr('src', document.getElementById(idmv0).value);
alert($('#img0').attr('src'));
return true;
}
</script>
<ul>
<li>
<a id="00" style="text-decoration: none; text-size: 1.1em; color: "
onclick=" Change(this.id); alert($('#txt0').text()); alert($('#img0').attr('src'));">
SPL FUNNEL 1</a>
</li>
<li>
<li>
<li>
</ul>
</td>
<td valign="bottom" align="left" colspan="2">
<td width="110px" valign="bottom" align="left" style="width: 180px">
</tr>
-
1
+1 for the awesome descriptiveness of the hand-draw MS-Paint spray circle. On-topic,
$(document).ready()shouldn't fire more than once unless you refresh the page, could you show us some of your JS? – Fabrício Matté Commented May 31, 2012 at 6:06 - 4 Picture is nice, but how about showing the relevant code too? – nnnnnn Commented May 31, 2012 at 6:10
- @thecodeparadox : no my page is not reloaded only using js i just change the src of image and innertext of label – Mohit Commented May 31, 2012 at 6:23
- @FabrícioMatté : ya my page is not refreshed but the image's src is being changed so the page is rerendered so that document.ready() is recalled i think – Mohit Commented May 31, 2012 at 7:33
4 Answers
Reset to default 5You need to stop the reload on click like below.
$('a.availableProducts').click(function(e){
e.preventDefault();
// your code
});
Gonna take a guess that each time you're clicking an anchor, its executing a new page load. If so, you likely need to add preventDefault to the anchors onClick method.
Assuming that your code looks something like this, add the preventDefault() where appropriate:
$('a.availableProducts').click(function(ev){
ev.preventDefault();
//do image stuff or whatever
});
now my question is can i prevent the document.ready() to be executed next time on javascript function call
The (document).ready() should only be used to detect page load. It will also fire if you load and append HTML to the DOM (via ajax for example) that contains a (document).ready() inside.
(document).ready() is a way of you to tell jQuery (execute this code when the DOM is loaded and scriptable). This way you don't need to put the javascript in the end of the HTML to be sure everything is already loaded (although it's still a good practice).
Thanks for the support of others and thanks for their answers but none of the answer gave me solution
a different approach solved my problem
My problem has been solved doing this
Server Side code
<tr>
<td width="220px" align="left" valign="top"><?php for($j=0;$j<count($productstr);$j++)
{
$valuerem = $productstr[$j]["remark"];
$idrem = "rem".$j.$grp;
$valueimg =$productstr[$j]["imgpath"];
$idimg = "img".$j.$grp;
$valuepid = $productstr[$j]["pid"];
$idpid ="pid".$j.$grp;
$image = $productstr[0]["imgpath"];
$remark = $productstr[0]["remark"];
$pid = $productstr[0]["pid"];
echo "<input type='hidden' value='$valuerem' id='$idrem' />" ;
echo "<input type='hidden' value='$valueimg' id='$idimg' />" ;
echo "<input type='hidden' value='$valuepid' id='$idpid' />" ;
}
?> <script>
txt = '#txt<?PHP echo $grp; ?>';
img = '#img<?PHP echo $grp; ?>';
alink = '#aimg<?PHP echo $grp; ?>';
function Change<?PHP echo $grp; ?>(id){
idrv<?PHP echo $grp; ?> = 'rem'+id;
idmv<?PHP echo $grp; ?> = 'img'+id;
idpv<?PHP echo $grp; ?> = 'pid'+id;
$('#txt<?PHP echo $grp; ?>').html(document.getElementById(idrv<?PHP echo $grp; ?>).value);
$('#img<?PHP echo $grp; ?>').attr('src',document.getElementById(idmv<?PHP echo $grp; ?>).value);
$('#aimg<?PHP echo $grp; ?>').attr('href',"view_large.php?mid="+document.getElementById(idpv<?PHP echo $grp; ?>).value);
return false;
}
</script>
<ul>
<?php for($j=0;$j<count($productstr);$j++){
$imgarray[ $productstr[$j]["imgpath"].'#'.$productstr[$j]["pid"]] = $j+1;
?>
<li><a id='<?PHP echo $j.$grp;?>'
onclick="Change<?PHP echo $grp; ?>(this.id);"
style="text-decoration: none; text-size: 1.3em; cursor: pointer;"
title='Click to see'> <?php echo
$productstr[$j]["pcode"]; ?> </a></li>
<?php } $randomdata = array_rand($imgarray,1); $randompic = explode('#',$randomdata);
?>
</ul>
</td>
<td align="left" valign="bottom" colspan="2"><label
id="txt<?PHP
echo $grp; ?>"><?PHP echo $remark; ?></label></td>
<td width="110px" align="left" valign="bottom" style="width: 180px"><span
class="color-4_inner p1" style="text-align: center;"> <a
id="aimg<?PHP echo $grp; ?>"
href="view_large.php?mid=<?PHP echo $pid; ?>"
onclick="return hs.htmlExpand(this, { objectType: 'ajax'} )"> <img
title='Click to view Full image!' id="img<?PHP echo $grp; ?>"
src="<?PHP echo $image; ?>" border="0" width="102" height="110" /> </a>
</span></td>
</tr>
本文标签： php(document)ready(function() executed every time on onclick event of HyperlinkStack Overflow
版权声明：本文标题：php - $(document).ready(function(){ executed every time on onclick event of Hyperlink? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744351321a2602067.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论