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
Related
I have a div that includes shoutbox posts. I'm using jQuery and ajax to change the pages within the div. However, when the page changes, it loses the link to the javascript file so that the next time I try to change the page it actually continues with the link action instead of doing the ajax in the background. Then after that it's back to normal and it alternates back and forth between being linked to the file and not.
Also before, it was rendering the whole page so that my layout was being displayed on the refresh instead of just the shoutbox posts. I'm guessing that finally getting it to refresh without re displaying the whole layout again is what's causing it to lose the connection to the javascript file.
This is the code for the posts. The shoutbox_arrows contains the links to change the page. refresh_me is what I'm loading into my div to refresh the content.
<div id="shoutbox_arrows">
<?php $current_page=s tr_replace( '?', '#', getURI(fullURL())); ?>
<ul class="no_dots">
<li id="first_page"><<
</li>
<li id="previous_page"><
</li>
<li><strong>Pg#<?php if ($page > $last_page) {echo $last_page;} else {echo $_SESSION['shoutbox_page'];} ?></strong>
</li>
<li id="next_page">>
</li>
<li id="last_page">>>
</li>
</ul>
</div>
<div id="shoutbox" class="custom_scrollbar">
<div id="refresh_me">
<?php if (sizeof($shouts)==0 ) { ?>
<p>There are no posts.</p>
<?php } foreach ($shouts as $shout) { foreach ($shout as $k=>$v) { $shout[$k] = utf8_encode($v); if ($k == 'guest') { $shout[$k] = ucwords($v); } } ?>
<div class="post_info">
<div class="left">
<?php if ($shout[ 'user_id']==n ull) {echo $shout[ 'guest'];} else { ?><?php echo ucwords(userinfo($shout['user_id'])->username); ?>
<?php } ?>
</div>
<div class="right">
<?php time_format($shout[ 'created_at']); ?>
</div>
</div>
<p class="post_comment" id="shoutbox_comment_<?php echo $shout['id']; ?>">
<?php echo $shout[ 'comment']; ?>
</p>
<?php if (!$shout[ 'last_edited_by']==n ull) { ?>
<p class="last_edited">Edited by
<?php echo ucwords(userinfo($shout[ 'last_edited_by'])->username); ?>
<?php time_prefix($shout[ 'updated_at']); ?>
<?php time_format($shout[ 'updated_at']); ?>.</p>
<?php } ?>
<?php if (current_user()) { if (current_user()->user_id == $shout['user_id'] or current_user()->is_mod) { ?>
<p class="post_edit"> <span class="edit" id="<?php echo $page; ?>">
<a id="<?php echo $shout['id']; ?>" href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
edit
</a>
</span> | <span class="delete" id="<?php echo $page; ?>">
<a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
delete
</a>
</span>
<span class="hide" id="<?php echo $page; ?>">
<?php if (current_user()->is_mod) { ?> | <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
hide
</a><?php } ?>
</span>
</p>
<?php }} ?>
<?php } ?>
</div>
</div>
This is the page that my ajax request is going to.
<?php
if (isset($data['page'])) {
$_SESSION['shoutbox_page'] = intval($data['page']);
}
$redirect = ltrim(str_replace('#', '?', $data['redirect']), '/');
redirect_to($redirect);
Div that contains the content to be refreshed.
<div id="shoutbox_container">
<?php relativeInclude( 'views/shoutbox/shoutbox'); ?>
</div>
jQuery
$('#shoutbox_arrows ul li a').click(function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
So I guess to clarify the issue:
The shoutbox_container displays posts for the shoutbox. The page is controller by a session that gets passed as a variable to get the correct chunk of posts to show. Clicking on the links in shoutbox_arrows sends an ajax request to a page which changes the session variable. The div that contains the post itself (refresh_me) as well as the arrows (for the links) get refreshed. After changing the page once, the shoutbox is no longer connected to the javascript file so when you click to change the page again, instead of an ajax request, the page itself actually changes to the link.
Any ideas how I can fix this? I've spent a lot of time on this and it's getting rather frustrating. I feel like I could just settle for it as it is now but it's bugging me too much that it's not working exactly how I intend (although generally it works in terms of changing the pages).
Also just a note, I used jsfiddle to tidy up the code but it looks like it did some funky stuff (looking just at $current_page=s tr_replace). lol. So there aren't any syntax errors if that's what you're thinking. ><
Also I was going to set up a fiddle but I don't really know how to handle links in it so it would have been useless.
The issue is that you bind the click handler to the a tags on document ready (the jQuery code you provided). So when you replace the content of #shoutbox_arrows you remove the click handler you previously attached since those original handlers are removed from the DOM along with the original elements.
You need to use the jQuery .on() method and event bubbling. This will attach the handler on a parent element that will not be removed in your content replace and can continue to "watch" for the event to bubble up from it children elements.
Try replacing your jQuery code with this:
$('#shoutbox_arrows').on('click', 'ul li a', function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
For performance, you should add a class to the a, and targeting it directly with $('a.aClass')
Good ways to improve jQuery selector performance?
for example i have:
<?php foreach($query as $q): ?>
<div class="item">
<?php echo img($q->images); ?>
</div>
<?php endforeach; ?>
so this code renders 5 divs in a line, each line 5 divs, and this code:
<?php foreach($url->result() as $u): ?>
<script>
$(document).ready(function(){
$('div.item').click(function(){
setTimeout(function(){
window.open('<?php echo $u->url; ?>');
}, 500)
})
})
</script>
<?php break; ?>
<?php endforeach; ?>
doesn't matter what div we click, it will open a new window with the same url, but what if I have 5 different urls in my database, and I want that when we click the first div of each line it open one window with the first url and when we click the second it will open the second url
i thinked that this is possible by using classes, for example class="item1", item2, item3, item4, item5, but what if we have only 3 urls, not 5, in this case how can i make that the first three divs will open the first 3 urls, but the 2 left, will open the last, it is the 3 div
sorry for my poor english, maybe you have an idea of how to do this, thanks!
ps: i am using codeigniter
Instead of a class you can have id like item_1, item_2 etc. for each of the division and in javascript you can setup listeners in each of the divs separately.
<?php $index = 0;?>
<?php foreach($query as $q): ?>
<div id="item_<?php echo $index++;?>">
<?php echo img($q->images); ?>
</div>
<?php endforeach; ?>
For Javascript the code goes as:
<?php $index = 0;?>
<?php foreach($url->result() as $u): ?>
<script>
$(document).ready(function(){
$('#item_<?php echo $index++;?>').click(function(){
setTimeout(function(){
window.open('<?php echo $u->url; ?>');
}, 500)
})
})
</script>
<?php break; ?>
<?php endforeach; ?>
2 options i can think of. first is to add the url as a data attribute of the div so data-url="url here" then you can just use $(this).attr('data-url') to get the link in the javascript action (may even be able to use data() but not sure on IE compatibility).
Second option would be to have a hidden anchor in the div, then in the javascript action you can just select the anchor within the clicked div to get the URL
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>
";
?>
I have jQuery Tabs in which each tab and corresponding content are populated by a PHP foreach loop.
For each tab the user can upload a picture. I have this setup in a way so that as soon as the user chooses a file, a jquery script makes the upload begin automatically -- and the browse button is hidden and replaced by "Uploading your picture".
Here is the code (CI markup):
<ul class="tab_header">
<?php foreach ($p as $row):
echo '<li>
' . $row->p_name . '
</li>';
endforeach; ?>
</ul>
<?php foreach ($p as $row): ?>
<div id="tabs-<?php echo $row->p_id; ?>">
<?php echo form_open_multipart('/p/p_upload_picture/' . $row->p_id, 'id="upload_form"');
echo form_upload('userfile', '', 'id="file_select"');
echo form_hidden('upload','upload');
echo form_close(); ?>
<div id="loading" style="display:none;">
Uploading your picture...
</div>
</div>
<?php endforeach; ?>
<script>
$(function(){
$("#file_select").change(function(){
$("#upload_form").submit();
$("#upload_form_div").hide();
$("#loading").show();
});
});
</script>
This works perfectly but only on the first tab.
In all other tabs, the jquery script doesn't run -- as soon as I choose a file, the file name is shown in the browse button field instead, and no upload happens (form isn't submitted).
I wonder if this has to do with the script not being initialized for the other tabs.
How can I fix this?
Thanks for helping, much appreciated.
Your field has an id. Which should be unique per element.
jQuery only returns the first element it encounters with the given id, that's why your code isn't working. I would suggest adding a class instead of an id to your field.
$('.class-of-field')..change(function() {
..
});
The above should do the job.
This would be the equivalent code without jQuery:
var el = document.getElementById('file_select');
Which only returns one element, have a look at the documentation.
I have this:
while( $rowData = #mysql_fetch_assoc($selectRows2) )
{
?>
<div id="stemmeto"><a href="#" id="thelink" onclick="window.parent.OpenVote(<? echo $_GET['id']; ?>, '<? echo $rowData['username']; ?>');">
<?php echo $rowData['username']; ?> </a></div>
<div id="stemme">
<a href="#" id="thelink" onclick="window.parent.OpenVote(<? echo $_GET['id']; ?>, '<? echo $rowData['username']; ?>');">
<? echo $rowData['stemme']; ?></div></a><br />
<?
}
Now this should activate OpenVote function with (id, username) in the parent.window..
But for some reason this only works for first column, that comes out, nothing is happening when i click the others.. I have tried to remove that column, to check to see if its specially just that column, but it wasnt, its always the "first" column that echo´s out in the while(), that i can click on.. what should i do?
Here's the OpenVote script on the parent window(index.php)
function OpenVote(id, stemme) {
var postThisShit = 'battles/infoaboutvote.php?id='+id+'&stemme='+stemme;
$.post(postThisShit, function(data){
$(".showinfo").html(data).find(".getinfo").fadeIn("slow")
});
}
And the #thedialog on index.php:
<div id="thedialog" title="Showing..">
<p class="showinfo">
You shouldn't see this, something went wrong..
</p>
</div>
The id attribute must be unique across your entire document. Your loop is creating multiple elements with the same id, which will cause behavior like you're describing when trying to interact with the elements. Try appending a unique value to the end of the id, such as id-1, id-2, id-3, etc.