I have a link on my page that id like to click with the below javascript function, but it isnt working. What I am really trying to do is use php to echo out a preclicked link. I think I have used the right function $(selector).click(), but I dont know where to put the link. I dont want to echo out the link, just the alert message. The link is actually a thickbox alert message, that is only able to be clicked on. I was hoping that i could use the .click() to activate it via php. thanks
<?php
echo "
<script type='text/javascript'>$('#link').click();</script>
<a href='wronginput.php?height=40&width=80' id='link' class='thickbox'>Link text</a>";
?>
At the time you output the javascript snippet, the link has not yet been parsed into the DOM, so $('#link') returns a null object. Either wrap it in a .ready() call, or place the javascript AFTER the link in your output.
<script>$(document).ready( function() { $('#link').click(); });</script>
<a href=...>
or
<a href=...>
<script...>
as Marc B said
<?php
echo "<a href='wronginput.php?height=40&width=80' id='link' class='thickbox'>Link text</a>
<script type='text/javascript'>$('#link').click();</script>
";
?>
or
<?php
echo "<script>$(document).ready( function() { $('#link').click(); });</script>
<a href='wronginput.php?height=40&width=80' id='link' class='thickbox'>Link text</a>
";
?>
Related
Probably a very simple answer, but I cannot seem to find a working solution. I am creating links from a php search script and it generates links based on query. I have written a sample jQuery script to open a div based on a tag being clicked, but when I click link, nothing happen. I cannot see any errors in firebug and would appreciate somke help. Thank you.
UPDATE: Added html and changed mailLink from id to class.
jQuery
$("a").click(function(e) {
e.preventDefault();
$('.mailShow').fadeIn(1500).html('This is the mailShow div');
});
PHP
<?php
while ($row = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"><?php echo $row['name_usr'];?> <?php echo $row['idcode_usr'];?></div>
<?php
}
if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}
?>
HTML
<div id="content">
<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>
<div id="sub_cont">
<div class="mailShow"></div>
</div>
</div>
Generated HTML from firebug
<div class="each_rec">Demo User DEMO</div>
In jquery you have .mailShow and in PHP you use id="mailLink". You should change .mailShow to #mailLink.
JSFiddle for testing.
JSFIDDLE
Try this code:
$(document).ready(function () {
$(document).on("click","a",function(e) {
e.preventDefault();
$('.mailShow').fadeIn(1500).html('This is the mailShow div');
});
});
<?php
while ($row = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"><?php echo $row['name_usr'];?> <?php echo $row['idcode_usr'];?></div>
<?php
}
if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}
?>
I see two probable issues:
1. You didn't use $(document).ready(); and put your code outside of it. Then you need to put the above code to docyument ready.
2. You inseert links dinamycaly - from ajax query. Thus you need to use jquery delegates instead.
In my view im doing this :
<?php if($user_can_write) {?>
<a href=<?php echo base_url('backend_controllers/users/foo')?> style="text-decoration:none">
Add</a>
<?php } ?>
I pass variable $user_can_write from my controller , which is my implementation for access control, the strange part is whenever i refresh this page , ie this view , the anchor tag is executed , ie , the foo function in user controller is called and executed , every time !Basically the foo function increments the db by one row (adds row to the db), so this is really not practical for me that on every refresh the anchor tag executes
Now if i do this implementation in the view (alternate approach) :
<?php if($user_can_write) {?>
<a href='javascript:void(0);' onclick="on_click_method_for_anchor()" style="text-decoration:none">
Add</a>
<?php } ?>
and further in my javascript i do this :
function on_click_method_for_anchor(){
$.ajax({
url: '<?php echo base_url('backend_controllers/user/foo'); ?>',
type: 'POST',
success: function(result){
$('.my_span_tag_class').html(result)
}
});
this seems to work perfect , and even if i reload the page , the foo is not called , can someone please tell me why is the anchor tag behaving like this ? am i missing out something obvious ?
I think you miss the " " part just after href properties of anchor tag.
<?php if($user_can_write) {?>
<a href="<?php echo base_url('backend_controllers/users/foo')?>" style="text-decoration:none">
Add</a>
<?php } ?>
Try this.
I think it will be ok
I know to link to a part in the same page like :
<a href='#A'>A</a>
<a name='A'>Here is A</a>
But when I designed it with jquery and php, ı have a problem. My design is like :
There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.
Here is the code :
<div class="content_letters">
<ul>
<?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
"J","K","L","M","N","O","P","R","S","Ş","T",
"U","Ü","V","Y","Z");
for ($i=0;$i<27;$i++) {
echo "<li><a id='letter_{$array_letter[$i]}'
href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>";
}
?>
</ul>
</div>
<?php
for ($i=0;$i<27;$i++) {
?>
<div class="content_letter_block">
<div class="text">
<div class="show_hide">
<a class="button" id="
<?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
</div>
<a name="<?php echo "letter_".$array_letter[$i].'">';?>
<?php echo $array_letter[$i]; ?></a> starts from here</div>
</div>
</div>
<?php } ?>
<div style='display:none' id='<?php echo "item_".$array_letter[$i];?>'>
Here is item...
</div>
Here is the jquery code :
$(document).ready(function() {
// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {
// split the letter out of the ID
// of the clicked element and use it to target
// the correct div
$("#item_" + this.id.split("_")[1]).toggle();
});
$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();
});
});
Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.
To scroll with jQuery to a specific ID in your page, use
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
You can specify an anchor in your url as well.
<a href="your-page.html#k" />
When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">
So I have a website that navigates by scrolling through a pane of DIVs that's wrapped inside a main DIV via. JQuery/javascript: http://plugins.jquery.com/project/ScrollTo
E.g.
<div id="content" style:"overflow:hidden; width 800px;">
<div id="home" class="page"></div>
<div id="about" class="page"></div>
<div id="support" class="page"></div>
</div>
It navigates and scrolls fine, but attempting to provide dynamic URLs for the pages without breaking the scrolling feature (e.g. mywebsite.com?p=home) brings a bit of trouble.
So depending on what the GET request returns, I want the PHP script to automatically set the scroll position on page load; as the scroll bars are hidden, and can only be set via. javascript.
What is the best method for this?
Probably something like this
<script>
var goTo = '<?php echo (isset($_GET['p']) ? $_GET['p'] : "default_value"); ?>';
(function($){
$(document).ready(function(){
functionThatScrolls(goTo);
});
}(jQuery));
<script>
I would do it like this, just print the value of the $_GET['p'] into the script, just make sure to print a default value, and maybe sanitize the value of p someone could insert something into it.
hope it helped.
May I suggest simply using plain old anchor tags?
The way you've described your site doesn't seem to need all this js magic in order to achieve the effect you're looking for...
<div>
<a name="home">
<div>
</div>
</a>
<a name="pix">
<div>
</div>
</a>
<a name="about us">
<div>
</div>
</a>
<a name="contact">
<div>
</div>
</a>
</div>
Then, links to http://www.mywebsite.com/#home will go do what you're looking for, plus google will index it as a subsection of http://www.mywebsite.com/
I think if you put a ! before your anchor tag names, google will actually index each as a separate page.
EDIT: Go here, and scroll down to "Step-by-step guide".
Here is something I use to get the $_GET vars:
function getQueryParams(qs) {
qs = qs.split("+").join(" ");
var params = {},
tokens,
re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
}
var $_GET = getQueryParams(document.location.search);
$(document).ready(function(){
$('html,body').animate({
scrollTop: $('#'+$_GET.p).offset().top},
'slow');
});
I have the following code (I formated it to more lines, but in my source code I have it in one line, because innerHTML doesn't like new lines somehow - but that isn't the problem...):
<?php
echo "
<img
src='1.png'
onclick='
document.getElementById(\"my_div\").innerHTML=\"
<img src=\\\"1.png\\\" onclick=\\\"alert(\\\\\\\"text\\\\\\\");\\\" />
\";
'
/>
";
?>
And somewhere in the body I have :
<div id="my_div"></div>
So, when I click on the image, i'll have the same image inside my_div. The problem is, that when I click on the 2nd image, javascript doesn't alert anything.
But when I change this:
alert(\\\\\\\"text\\\\\\\");
to this:
alert(MyText);
and add JavaScript variable MyText:
<script>
MyText = "text";
</script>
it now works.
I think the problem is with those nested quotes:
\\\\\\\"
(level 4). Any ideas? Thanks.
EDIT: please don't post here another methods of doing this, I'd like to know why those quotes doesn't work here..
SECOND EDIT: I need that php there, because this is only a piece of my code (in full code I need it to display images in cycle...)
If you want a quote character as data (instead of as an attribute delimiter) in HTML, you represent it as " not \"
There's nothing "dynamic" in your script - you're not inserting PHP variables, so why build that all from within a PHP echo? Simply have:
Or if you want to make it even cleaner:
<script type="text/javascript">
function addImg() {
document.getElementById('my_div').innerHTML='<img src="1.png" onclick="alert(\'text\')" />';
}
</script>
<img src="1.png" onclick="addImg()" />
refactor your JS into an external file (with a function that will do the onclick logic), and try outputting something simpler with php's echo
Use jQuery!
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<div id="my_div"></div>
<img src="1.png" class="my_img" />
<img src="2.png" class="my_img" />
<img src="3.png" class="my_img" />
<script type="text/javascript">
jQuery(function() {
$('.my_img').click(function() {
$('#my_div').html($(this).clone().unbind());
alert('text');
});
});
</script>