I have the following code
jQuery(document).ready(function($)
{
$("#deleteorderb").click(function()
{
$("#deleteorder").attr('href','/deleteorder.php?id=' + $('#deleteorderb').val());
})
});
<a onclick="jQuery('#modal-2').modal('show');" id="deleteorderb" name="deleteorderb"
value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
When I click the link, it opens a popup modal, which has a but of text saying are you sure you want to delete, and then there's a link, herf, I want to update that herf to equal the the other href's value which will be a database query to get the id. the ink updates with the above but not the id. I have checked the source code and the a hrefs value IS set.
You want to grab element attribute value, so instead of
$('#deleteorderb').val()
try
$('#deleteorderb').attr('value')
Try something like this, *note the use of .attr("value") not .val():
<a onclick="dialog();" id="deleteorderb" name="deleteorderb" value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left"> Cancel</a>
<script>
$(document).ready(function() {
$("#deleteorderb").click(function() {
var a = $('#deleteorderb').attr("value");
var link = "/deleteorder.php?id=" + a;
$("#deleteorder").attr("href", link);
});
function dialog() {
$('#modal-2').modal('show');
};
});
</script>
The value attribute is normally used on form fields. So in your case it would make sense to use a data attribute as follows:
<a id="deleteorderb" name="deleteorderb" data-value="<?php echo $r['id']; ?>" .....
And in your JavaScript you could access it like so:
$('#deleteorderb').data('value');
BONUS
I would not recommend using inline JS. Instead just use jQuery to setup a click event listener in your DM ready callback:
$('#deleteorderb').on('click', function( e ) {
e.preventDefault();
$('#modal-2').modal('show');
});
Updated html:
<a
id="deleteorderb"
name="deleteorderb"
data-value="<?php echo $r['id']; ?>"
class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
Related
I am trying to trigger a click on the following element, and then get the innertext of it.
<a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a>
After "onClick" has been triggered, it should look like this:
<a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">1 : 2</a>
This is the code I've tried:
$winner = $this->data->find('.btn-sm', 0)->onclick->innertext;
I am trying to get the 1 : 2 from "innertext".
It is not working, and I don't know if it even does. But any help is appreciated.
You can try it using textContent() and jQuery on event handler:
<?php
//php code
?>
<script>
$('.btn-sm').on('click', function() {
var txt = $(this).textContent();
})
</script>
I have a button that leads to a modal view. I try to intercept the value with JS.
It works like this:
<button type="button" class="btn btn-outline-primary btn-sm"
data-toggle="modal" data-target="#myModal" data-person-id="something">
Edit
</button>
JaveScript:
var bookId = $(e.relatedTarget).data('person-id');
It doesn't work like this:
<button type="button" class="btn btn-outline-primary btn-sm" data-toggle="modal"
data-target="#myModal" data-th-id="${person.getId()}">
Edit
</button>
JS:
var bookId = $(e.relatedTarget).data('id');
or
var bookId = $(e.relatedTarget).data('th-id');
var is undefined it says.
Since I use Thymeleaf I need to catch the value with data-th-id.
Any idea how to get the value
Complete JS
$('#myModal').on('shown.bs.modal', function (e) {
$('#myInput').focus();
var bookId = $(e.relatedTarget).data('id');
alert(e.relatedTarget.nodeName);
alert(bookId);
});
data-person-id="something" is a data attribute, and is accessed with $('...').data('person-id').
data-th-id="${person.getId()}" isn't a data attribute. It's just a different way of saying th:id, which outputs the id="..." attribute of a tag. You can't use jQuery's .data() method on non-data attributes, instead you use attr() -- $(e.relatedTarget).attr('id');
i am using php codeigniter. I am sending data in an array to my view. In my view i have a foreach loop in place which iterates through the array and displays the data in my view. Also inside this foreach loop i am displaying some action buttons.
<?php
foreach($studentList as $r)
{
echo '<tr>';
echo $r->id;
echo '</tr>'?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php
} ?>
What i want to do is to display the lock button by default, when someone clicks on this button lock should get hidden and unlock button should get displayed. in my jquery i am doing it like this but clicking on single button accounts for changing the buttons on the whole page.
I know the reason as i am accessing the element using class which all of them have common but i haven't yet figured out how to do that using id which will account for single elements.
$('.unlock').click(function() {
var id = $(this).attr("data-id");
console.log(id);
$('.unlock').addClass("hidden");
$('.lock').removeClass("hidden");
});
This slight modification should help you.
$('.unlock').click(function(){
var id = $(this).attr("data-id").split('_')[0];
console.log(id);
$(this).addClass("hidden");
$('[data-id='+id+'_unlock]').removeClass("hidden");
});
OK, so first off, you're putting the anchors outside of the <tr>'s. Is this intended?
If you have code like this:
<?php
foreach($studentList as $r)
{
echo '<tr>';
echo $r->id;?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php
echo '</tr>';
} ?>
You can simply do:
$('.unlock').click(function(){
var id = $(this).attr("data-id");
console.log(id);
$(this).parent('tr').find('.unlock').addClass("hidden");
$(this).parent('tr').find('.lock').removeClass("hidden");
});
Also have a look here on information on how to fetch siblings, as an alternative way to locate the element you're looking for.
First of all, your html is semantically wrong, tr should contain th or td depending of what you want to do. Even when the browsers doesn't complaint for bad html doesn't mean it is correct. So, this is what a recommend:
Supposing we have this
<table id="myTable">
<tbody>
<?php foreach($studentList as $r) { ?>
<?php echo '<tr><td>'; ?>
<?php echo $r->id; ?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php echo '</td></tr>'; ?>
<?php } ?>
</tbody>
</table>
Bind a single event to both anchors:
$("#myTable tr a").click(function(){
//save the element for future reference and avoid repeat $(this)
var elm = $(this),
id = elm.attr("data-id"),
elmtoShow = elm.hasClass('unlock') ? '.lock' : '.unlock';
console.log(id);
elm.addClass("hidden");
//we can pass a second param to jQuery to query into
//that single element instead the whole document
$(elmtoShow, this.parentNode).removeClass("hidden");
});
Please, note that I added an id to the table to make the query to all anchors, also read the comments in the code. Hope it helps
I want to create a bootstrap modal for social sharing buttons in my wordpress blog. For the modal to be visible, I have to place it outside the post (loop) but its trigger (button) inside the post. I want to pass the URL and Title of the post to the Sharing Buttons inside the modal.
I have created two variables inside the post to get its URL and title:
<?php
// Get current post URL
$URL = get_permalink();
// Get current post title
$Title = str_replace( ' ', '%20', get_the_title()); ?>
Then, I created the trigger inside the post to display the modal
<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>
And in the modal body, I have many buttons, like
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>
What I want to do is to replace the $URL in href of Facebook and Twitter with the URL of the post and likewise the title.
I know that I have to use JavaScript, but I'm unable to figure out the correct syntax.
Will be thankful for help. :)
I did it like this:
In the trigger button, I set the data attributes as follows:
<button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>
then got the facebook and twitter URLs in separate variables and then set the href attributes as follows:
<script>
$(document).on("click", "#socialbtn", function () {
var url = $(this).data('url');
var title = $(this).data('title');
var fburl = "https://www.facebook.com/sharer.php?u="+url;
var twurl = "https://twitter.com/share?url="+url+"&text="+title;
$("#facebook").attr("href", fburl);
$("#twitter").attr("href", twurl);
</script>
And in the modal body, used the anchor tags as follows:
<a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>
You have to output them using PHP:
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>
$(".ssk-facebook").attr("href", "YourNewURL");
$(".ssk-twitter").attr("href", "YourNewURL");
$( "#socialbtn" ).click(function() {
$(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");
$(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");
});
You have to identify which button the user have clicked on.
You can archive that by using unique IDs OR by adding hidden inputs or divs containing the correct hrefs for each post.
Then select those "href-container" relatively to the button and change the modal. ("closest(), parent(), nextAll() etc.)
Do you need code examples?
Use data attribute to add link with every post's share button:-
HTML
<!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>
<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Share </h3>
</div>
<div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>
<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>
</div>
</div>
JS
<script>
$(document).on("click", ".open-share", function () {
var url = $(this).data('url');
var title = $(this).data('title');
$('#facebook').attr("href", "http://facebook.com?share="+url);
$('#facebook').attr("title", "http://twitter.com?share"+title);
$('#twitter').attr("href", url);
$('#twitter').attr("title", title);
// Initialize popup with Javascript.
$('#sharepopup').modal('show');
});
</script>
Maybe is my question trivial, but I could not found a answer. Maybe I have been to much hours in front of the monitor :)
I have this situation:
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list" id="protokol"> List Studens</a>
</div>
This represent a button and with the click event, using MVC, the controller Student is called and the function list executed. But I need to send a parameter to this function that is the value of a HTML component.
<input type='text' id='parm' value=''>
How I can do this using the same structure? I tryed this, but is not correct
<div class="col-xs-3" style='margin-left: -50px;'>
<a class="btn btn-primary" href="?c=Student&a=list&v=<script>$('param').val();</script>" id="protokol"> List Studens</a>
</div>
If you're using jQuery you can attach a click handler to that element which appends the current value of the input. Try this:
$(function() {
$('#protokol').click(function(e) {
e.preventDefault(); // prevent the browser going to the default URL
var url = $(this).attr('href') + '&v=' + $('#param').val();
window.location.assign(url);
});
});
try this instead
<div class="col-xs-3" style='margin-left: -50px;'>
<a id="targetLink" class="btn btn-primary" href="?c=Student&a=list&v=<script></script>" id="protokol"> List Studens</a>
</div>
//document ready
$(function(){
var parameter = $('param').val();
$('#targetLink').attr('href', '?c=Student&a=list&v=' + parameter);
});