I have a bit of code to record a certain action
$('#record').click(function(){
$.get("../confirm.php", { "id": '<?php echo $record; ?>' }, function(data){});
});
Which works fine, but i don't want the page to be full of javascript and such as i have other things like this on it too, so i am trying to move it to a js file.
In the php file
<script type="text/javascript">var record = "<?= $record ?>";</script>
<script type="text/javascript" src="jsfile.js"></script>
In the js file
$('#record').click(function(){
$.get("../confirm.php", { id: record}, function(data){});
});
But it doesnt want to play ball, any ideas how to do this?
Make 'record' as class of div and assign php variable $record as its id.Use event.target.id to get variable $record from div.
<div class="record" id="<?php echo $record;?>">
Your code here
</div>
And Use this
$('.record').click(function(event){
var record=event.target.id;
//your code here
});
If I may a suggestion to you. Set in the view on the element the ID. Then when the action is clicked, get the id for the data.
Example:
<input type="text" name="inputName" id="<?php echo $record; ?>" class="btnToRecord" />
$('.btnToRecord').click(function(){
var clickedElement = $(this);
$.get("../confirm.php", { id: clickedElement.attr("id") }, function(data){});
});
Edit: Correction for $(this) was pointing to the get instead to the element, putting in a var will fix the problem
Related
I'm a JQUERY begginner. I'm trying to pass a PHP variable to a js file so that i can use it in JQUERY! But found no resource to learn to do so. I'm able to pass a JQUERY variable to a different php file but I couldn't pass PHP variable to a Jquery file. Is really possible to do so?
function.php:
<?php $variable = $fetch['username']; ?>
app.js : How can use this variable in app.js file below?
$(document).ready(function(){
var flwbtn = $(".findrowpplfollowbtn");
flwbtn.click(function(){
var selectflwusername = $(this).parent().prev().last().find(".findpplrowusername").text();
$.post("../php/flw.php",{flwusernameselected:selectflwusername})
});
});
Echo it to HTML temaplate. If it's some structure/array use for example json format.
<script>
<?php $variable = $fetch['username']; ?>
var js_variable = <?php echo json_encode($variable); ?>
</script>
or
echo some hidden element like
<input type="hidden" id="custId" name="custId" value="<?php echo($fetch['username']); ?>">
and grab if with Jquery like
<script>
$( "#custId" ).value();
</script>
with your code
JS:
$(document).ready(function(){ var flwbtn = $(".findrowpplfollowbtn");
flwbtn.click(function(){
var selectflwusername = $(this).parent().prev().last().find(".findpplrowusername").text();
$.post("../php/flw.php",{$( "#custId" ).value()})
});
});
I am new to jquery and ajax. I have a PHP while loop which display contents from database. What I need is simply alert the "content_id" on click of each contents.
My script
<script type="text/javascript">
$(function() {
$(".show_id").click(function() {
var test = $(".contentid").val();
alert(test);
});
</script>
PHP Code
//code to fetch contents from database
foreach($stmt as $row)
{
echo $row['content'];
?>
<form action="" method="post">
<input type="hidden" class="contentid" value="<?php echo $row['content_id']; ?>">
<div class="show_id" ></div>
</form>
<?php
}
?>
It Alerts the id for each content, But only the first id always .
How to alert id for each contents respectively ?.
Thanks for any help...
This would work:
$(function() {
$(".show_id").click(function() {
var cur = $(".show_id").index($(this)); // get the index of the clicked button within the collection
var test = $(".contentid").eq(cur).val(); // find the input with the contentid class at the same index and get its value
alert(test);
});
});
Note that this assumes that the two classes are always paired together like you show and not used elsewhere in your html, which seems a reasonable assumption here
<script type="text/javascript">
$(function() {
$(".show_id").click(function() {
var test = $(this).prev(".contentid").val();
alert(test);
});
})
</script>
I have two divs, and when one is clicked it empties the div. I want to be able to load data into that div once it's been emptied. I've got it so it loads in both, but I only want to load data into the div that's been emptied.
HTML (I have two of these)
<div class="fl person">
<div class="maintain_size">
<input type="hidden" name="userSaved" value="<?php echo $user_one['id']; ?>" />
<img src="<?php echo "http://graph.facebook.com/".$user_one['id']."/picture?type=large"; ?>" class="circle-mask" />
<img class="hoverimage" src="images/fire_extinguisher.png" />
<div class="meta_data">
<h2><?php echo $user_one['name']; ?></h2>
</div>
</div>
</div>
Javascript
<script>
$("div.person img").click(function () {
$(this).parent("div").fadeOut(1000, function () {
var saved_id_user_who_voted_val = "<?php echo $_SESSION['id']; ?>";
var saved_id_user_voted_on_val = $(this).parent('div').find('input:hidden');
var saved_id_user_voted_on_val = saved_id_user_voted_on_val.val();
$(this).parent("div").empty();
// Load in new data
var current_div = $(this).parent("div");
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
});
});
</script>
The data seems to come through fine if I select a div that's not the current one, or I just use an alert to see if the data is there--which it is, but if I try load the data into the current div it just doesn't work. Any ideas? Thanks.
The code that I think is wrong:
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
Edit: The div I'm trying to get the data into is: div.person - although, there are 2 of these.
Once you empty the div your 'this' is no longer there. Try just declaring var current_div before you empty.
var current_div = $(this).parent("div");
current_div.empty();
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
See fiddle
You need to delegate the event as you are replacing old content with new one
$(document.body).on('click',"div.person img",function () {
Use live() function
Example
$("div.person img").live("click",function () {
//Your code goes here
});
I have this script thats send a post via jquery.form addon:
$(document).ready(function() {
$('#submit_btn').on('click', function(e) {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview',
success: afterSuccess //call function after
});
});
});
function afterSuccess()
{
$('#imageform').resetForm();
$('.ImgStatus').appendTo('.img');
}
and gets a html respond.
<div id="<?php echo $RandNumber; ?>" class="ImgStatus">
<input id="<?php echo $RandNumber; ?>" type="checkbox" name="<?php echo $RandNumber; ?>" />
<img src='upload/<?php echo $actual_image_name; ?>' class='preview'>
</div>
And what I'm trying to do is to remove the div that corresponds to the checkbox ID, when the delete button is clicked. And also to send a $_POST to a php page with the checked divs. Until now I have something like this but When I press the button its not removing the element...
$("#clickme").click(function(e){
var selected = $(".img input:checked").map(function(i,el){return el.name;}).get();
$(selected).remove();
});
jsfiddle.net/aHr6v/3
You can simply select the parent of the selected input field (the div), and remove it like this:
$("#clickme").click(function(e){
var selected = $(".img input:checked").parent();
$(selected).remove();
});
Here's a working example: http://jsfiddle.net/aHr6v/5/
check this: http://jsfiddle.net/aHr6v/6/
Based on what you said in your comment, I added the following line which search the div by its id and remove it
$("div#"+selected).remove();
I'd suggest:
$("#clickme").click(function (e) {
$('div.img input:checked').closest('div').remove();
});
JS Fiddle demo.
This looks at all inputs that are checked, finds the closest parent ancestor that's a div and then removes that/those elements from the DOM.
References:
closest().
remove().
selected is an array. What you want to do is pass one or more elements of that array as a selector:
$.each(selector, function(){
$('#' + this).remove();
})
Just change
$(selected).remove();
To
$('#'+selected).remove();
Edit: Or To (to remove all selected divs)
$.each(selected, function(){
$('#' + this).remove();
});
Ok, I have this code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function get() {
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
}
</script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" href="javascript: get()">haller</a>
<div id="age">See your name</div>
</body>
</html>
Here's what I want: get the id of an anchor tag from the anchor tag that has been clicked by the user via jQuery and then past that to a PHP file. The PHP file will then echo the id name of the anchor tag that was clicked by the user back to the jQuery which will then display the output into the specified element.
Here's the PHP file:
<?
$name=$_POST['name'];
if ($name==NULL)
{
echo "No text";
}
else
{
echo $name;
}
?>
Bind your event like this, since you are using jQuery
$('a').click(function(){
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
});
And remove the javascript from the href
<a id="grabe" href="#">haller</a>
<a id="kane" href="#">haller 2</a>
$('#grabe').click(function() {
$('#age').load('yourphp.php', {'name':$(this).prop('id')});
});
You can use $(this) to access almost anything about "what brought you here" in the code. You'll also need a listener for the event. In this way too brief example below, I have it listening for any clicks to <span class="edit_area"> spans.
<script>
$(document).ready(function(){
$('span.edit_area').click( function(){
var fieldname = $(this).attr('id');
...
});
});
I dont know why you want to send an id to a server and then receive that id back again from the ajax call as it is already there in your client script. Anyway this is the code.
This code will does this functionalirty for all a tag with a class called"crazyLink" and show the data received from the server page in a div with id anotherCrazyDiv
HTML
<a class="crazyLink" href="#">I am crazy</a>
<a class="crazyLink" href="#">I am crazy2</a>
<div id="anotherCrazyDiv"></div>
Script
$(function(){
$(".crazyLink").click(function(){
var id=$(this).attr("id");
$.post("data.php", { name : id } ,function(data){
$("#anotherCrazyDiv").html(data);
});
return false; // to prevent normal navigation if there is a valid href value
});
});
Keep in mind that, in your scenario, the value in id variable and value in data variable (after getting response from ajax call ) are same.
you may want to separate your javascript from your html. it makes things easier. it should probably look something like this.
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="javascript/somescript.js"></script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" class="someclass">haller</a>
<div id="age">See your name</div>
</body>
</html>
javascript
$(document).ready(function() {
$('.someclass').click(function() {
$('#age').load(
url: 'tt.php',
data: { name: $(this).attr('id')}
);
});
});