I'm echoing a table where each link has a unique value, which is value='$passthisvalue' as demonstrated in the example below. I'm trying to pass value='$passthisvalue' (maybe value should be called data-type instead?) when clicking each link with no page refresh. The value should be passed to note.php via GET.
php:
echo "<a href='#note' class='note' value='$passthisvalue' title='note'><img src='note.png' alt='note' title='note' border='0'></a>";
javascript:
<script>
$(".note").click(function() {
var elem = $(this);
$.get("note.php?value=$passthisvalue", function() {
refreshthediv();
});
});
</script>
You need to use the PHP script. If you want to use the passed value then use $(this).attr('value').
Try with this:
<script>
$(".note").click(function() {
var elem = $(this);
//var passthisvalue = "<?php echo $passthisvalue;?>";
//OR
passthisvalue = elem.attr('value');
//$.get("note.php?value="+passthisvalue, function() {
// refreshthediv();
//});
//OR
$.get("note.php", { value : passthisvalue }, function() {
refreshthediv();
});
});
</script>
Maybe you should add data-value to your a tag. it might help try the snippet below.
echo "<a href='#note' class='note' data-value='$passthisvalue' title='note'><img src='note.png' alt='note' title='note' border='0'></a>";
<script>
$(".note").click(function() {
var passthisvalue = $(this).data('value');
$.get("note.php", { value : passthisvalue }, function() {
refreshthediv();
});
});
</script>
Link to what you actually want to link to:
<a href='note.php?value=$passthisvalue' class='note' title='note'><img src='note.png' alt='note' title='note' border='0'></a>
And then read the href attribute with JavaScript.
$(".note").click(function(event) {
event.preventDefault()
$.get(this.href, refreshthediv);
});
});
Related
I'm using Laravel and I have two php variable in my blade view like this:
$dropDown = $formDataValue['name']
$emptyDropDown = $formDataValue['name'];
And I create a Javascript function with two parameters in same blade view:
function autoFill (dropDown, emptyDropDown) {
$("#" + dropDown ).change(function() {
$.ajax({
type: "GET",
url: "https://api.myjson.com/bins/bcnss",
success: function(response){
var dataLength = response.length;
$("#" + dropDown).empty();
$("#" + dropDown).append("<option value=''>Select</option>");
for( var i = 0; i< dataLength; i++){
var id = response[i].id;
var name = response[i].name;
$("#" + dropDown).append("<option value='"+id+"'>" + name + " </option>");
}
}
});
});
}
Then I call this:
<?php echo "<script> autoFill(".$dropDown.", ".$emptyDropDown."); </script>"; ?>
Problem is they can pass the parameters to function! I check element in browser and I see when I call this function, it's have parameters. But in the script tag, there nothing!
How I can fix this?
Thank you very much!
Seems like you forgot about quotes, when you are passing strings into function.
<script>
$(document).ready(function () {
autoFill('{{ $dropDown }}', '{{ $emptyDropDown }}');
});
</script>
You can do it this way, but you shouldn't, because Laravel Blade do it for you itself.
<?php echo "<script> autoFill('".$dropDown."', '".$emptyDropDown."'); </script>"; ?>
You can assign the php value in js variable in blade file like below:
<script>
var dropDown = '{{$formDataValue['name']}}';
var emptyDropDown = '{{$formDataValue['name']}}';
</script>
and then use js file and move the autoFill() function in js file and call that js file in blade using .
and call autoFill(dropDown, emptyDropDown); in js file on document.ready Like:
$(document).ready(function() {
autoFill(dropDown, emptyDropDown);
});
if you are using laravel try this
<script type="text/javascript">
autoFill("{{$dropDown}}","{{$emptyDropDown}}");
function autoFill(dropDown,emptyDropDown) {
console.log("hi");
}
Hope its helpfull
not using core php
<script type="text/javascript">
autoFill("<?=$dropDown?>","<?=$emptyDropDown?>");
function autoFill(dropDown,emptyDropDown) {
console.log(dropDown);
console.log(emptyDropDown);
}
You did not render the values as strings, so javascript interprets them as variables, which are not defined.
so instead of autofill(city,ward)
you want autofill('city','ward')
1000 ways to rome, this would be one:
<?php echo "<script> autoFill('$dropDown', '$emptyDropDown'); </script>"; ?>
I have a function in jquery:
function handleUpcomingUserTexts () {
$.ajax({
url: 'getjson.php',
type: "POST",
data: {
mail: '<?php echo htmlentities($_SESSION["email"]); ?>'
},
dataType:'text',
success: function(ans)
{
var data = JSON.parse(ans);
$.each(data, function(i, v) {
var upcomingText = $('<i class="fa fa-comment fa-fw"></i> '+v.Content+'<span class="pull-right text-muted small"><em>'+v.Date+'</em></span>');
$('#upcomingTexts').append(upcomingText);
var a = upcomingText.find('a').on('click',function(e){
e.preventDefault();
alert("here");
});
});
}});
};
and it fills the html nicely, but when I click the link - nothing happens and I don't see the alert message. What is wrong in here?
Because upcomingText is already a a. And you are trying to find a a in your a.
You can just write this :
var a = upcomingText.on('click',function(e){
When you write var variable = $('<a ...>...</a>');, the result is the root tag of the given html. So in your case, the <a>.
Because upcomingText is <a> and in this tag there are not any <a> tags, so you need use upcomingText like this
upcomingText.on('click',function(e) {});
but event delegation in this case better solution
// add this code before $.ajax
$('#upcomingTexts').on('click', 'a.list-group-item', function(e) {});
Try to use delegate function, on #upcomingTexts block
$('#upcomingTexts').delegate('a', 'click', function(e){
//your code here
});
I have this array = var1;var2;var3;var4;var5;var6;var6
and I want to split it with jQuery and put it in different textboxes (txt1),(txt2)...etc,
but I can't find the right code.
<script type="text/javascript">
$(document).ready(function() {
$("#cb_motor").change(function() {
$("#cb_motor option:selected").each(function() {
cb_motor = $('#cb_motor').val();
$.post("http://localhost/sag_app/index.php/motor/motor/buscar_id/", {
cb_motor : cb_motor
}, function(data) {
valores = data.split(';');
});
});
})
});
</script>
If txt1, txt2 are inputs ID and is set following DOM order, you could use:
$("[id^=txt]").val(function(i){
return valores[i];
});
Assuming cb_motor is a select with no multiple, the code can be simplified
$(function() {
$("#cb_motor").change(function() {
$.post("http://localhost/sag_app/index.php/motor/motor/buscar_id/", {
cb_motor : $(this).val()
}, function(data) {
var valores = data.split(';');
$('[name="txt_num_serie_motor"]').each(function(i) {
$(this).val(valores[i]);
});
});
});
});
if it IS multiple, then you cannot do Ajax using each for the selected values since you need to wait for each call to return
I'm trying to get it so when a button is pressed it runs a PHP function without reloading the page.
I have this button:
<div class= "obutton feature2" data-id="<?php echo $bookID;?>">
<button>Reserve Book</button>
</div>
Which I want to run:
<script>
$('button').click(function()
{
var book_id = $(this).parent().data('id'),
result = "Book #" + book_id + " has been reserved.";
$.post('reserbook.php', 'book_id');
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
});
</script>
The PHP file is, reservebook.php:
<?php
session_start();
$conn = mysql_connect('localhost', 'root', '');
mysql_select_db('library', $conn);
if(isset($_POST['jqbookID']))
{
$bookID = $_POST['jqbookID'];
mysql_query("INSERT INTO borrowing (UserID, BookID, Returned) VALUES
('".$_SESSION['userID']."', '".$bookID."', '3')", $conn);
}
?>
The js runs fine and makes the modal box fade then out displaying the variable passed to it, I just don't know how to get the post working.
I've been trying to udnerstand looking at other answers on questions such as calling php function from jquery? and How to pass jQuery variables to PHP variable?
I'm also not sure if I need a ajax specific script to be called at the start as right now all I have is
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
for my jquery.
It is probably something very simply, a rookie mistake, so all help is appreciated.
<script>
//called when button is clicked
$('button').click(function()
{
var book_id = $(this).parent().data('id'),
result = "Book #" + book_id + " has been reserved.";
//set parameter which you want to pass, url to be requested
$.ajax({ url: 'reserbook.php',
data: "book_id="+book_id,
type: 'post',
success: function(result) {
//after success it will be here and server have to send some data to be handled
alert(result);
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
}
});
});
</script>
What are you posting to reservebook.php? book_id is a string.You should send data in json or xml format to the server or using a query like key1=value1&key2=value2. $.post is a shortcut function i think it's better to use $.ajax and specify the type attribute POST.
You have to add a parameter to the post function to get the postdata in your php
{ jqbookID: book_id }
Try this :
$('button').click(function()
{
var book_id = $(this).parent().data('id'),
result = "Book #" + book_id + " has been reserved.";
$.post('reservebook.php', { jqbookID: book_id }, function() {
$('.modal-box').text(result).fadeIn(700, function()
{
setTimeout(function()
{
$('.modal-box').fadeOut();
}, 2000);
});
});
});
view.php
$(document).ready(function() {
$('.buttons > a').livequery("click",function(e){
var parent = $(this).parent();
var getID = parent.attr('id').replace('button_','');
var url = '<?php echo site_url('cart/price');?>';
$.post(url+"?id="+getID, {}, function(response){
$('#button_'+getID).html($(response).fadeIn('slow'));
});
});
});
<span class="buttons" id="button_5"><a class="btn-following" href="javascript: void(0)"></a></span>
controller:
$gid = $this->input->post('id', TRUE);
$this->Product_model->following($gid);
model:
function following($gid){
mysql_query("INSERT INTO tf_followers (following_id) VALUES('".$gid."')");
}
from this I am getting empty value to database and this is correct way to pass value through jQuery.
If you want to properly pass data to $.post, use its 3 parameter overload:
$.post(url, {id: getID}, function(response){
$('#button_'+getID).html($(response).fadeIn('slow'));
});
If you want to pass it with GET (like you were), you can't get it in the collection of POST variables on the server.