I have a page where ID is generated dynamically and be fetch from database and I put the result inside <a> tag :
<?php while($row = mysql_fetch_array($result))
{ ?>
ID Number 1<br />
ID Number 2
<?php } ?>
and when user click the link, the javascript myfunc() function will be trigger.
function myFunc(){
$("#div").load("get_id.php?","id="+"SHOW THE $row['id'] HERE"); }
But I don't know how to retrieve href value and put it inside the load() method. Can someone show me the correct way?
Thank you
-mike
Make sure that you generate a complete href attribute:
ID Number 1
and then attach a click handler unobtrusively (don't mix markup and javascript):
$(function() {
$('a').click(function() {
$('#div').load(this.href);
return false;
});
});
Related
I have form1.php and preview.php files.In form1.php file,i have an html table which contains data from database.In every row,i have a column called "Preview" and there is an icon inside the cell.When the user clicks the icon,i want to redirect to preview.php and based on rowID,i will build a query and fill the form with extra data.Any ideas?
In form1.php file:
<script>
function GetValue()
{
var X = document.getElementById("myTable").rows[x.rowIndex].cells[5].innerHTML;
}
</script>
With alert() function i test the above script and it's working( eg. X = 3 ).How can i pass this variable into preview.php and create an if statement based on this variable?I tried $_SESSION variables but i couldnt find a solution.Thanks in advance!
you can use $_GET[rowid] to get valu through URL
<script>
function GetValue()
{
var X = document.getElementById("myTable").rows[x.rowIndex].cells[5].innerHTML;
window.location="./prerview.php?rowid="+X;
}
</script>
in preview.php
use $_GET[rowid] to get row value from form1.php
eg
<?php
echo $_GET[rowid];//it will print value passed from form1.php
?>
I am creating a drag and drop system using redips javascript.
This is my script using html and php to generate the data
<div id="base">
<table>
<tbody>
<?php
foreach($deviceID as $row)
{
echo '<tr><td><div class="drag">'.$row['description'].'<input type="hidden" id="bus" value="'.$row['description'].'"></div></td></tr>';
}
?>
</tbody>
</table>
</div>
This is the fragment of my javascript file.
var redips_init;
redips_init = function () {
// reference to the REDIPS.drag
var rd = REDIPS.drag;
// initialization
rd.init();
rd.drop_option = 'shift';
rd.animation_shift = true;
rd.myhandler_dropped = function () {
alert($('#bus').val());
}
};
I am not good with php but what i usually do in jsp is create a local index variable and append it to each of the ID attribute in the loop.
So your code would look something like this
<?php
$index=0;
foreach($deviceID as $row)
{
echo '<tr><td><div class="drag">'.$row['description'].'<input type="hidden" id="bus'.$index++.'" value="'.$row['description'].'"></div></td></tr>';
}
?>
In javascript, your dragAndDrop event should return an index location by which u can get appropriate value.
Now you can use this dynamic ID in your JavaScript to do whatever you want to do.
REDIPS.drag contains save_content() method to scan all DIV elements in a table and to return the result as Query string or JSON object. Input parameters are table id and type of returned result (default is query string). If this is not good enough, you can search for save_content() source and make customization. Method is simple and it uses several loops to scan table content.
On the other hand, if you need to know ID of dropped DIV element that can be written inside myhandler_dropped event hander. Here is code snippet:
rd.myhandler_dropped = function () {
// define DIV id
var id = rd.obj.id;
// write DIV id to the console
console.log(id)
};
Hope this answer will be helpful.
I have a view of teasers in Drupal. Each teaser has a click() handler which is supposed to send its node id as an argument to load a view via ajax. I've tried 2 different jquery approaches, but am having no luck.
The first example sends the nid for only the last node in the view. So that no matter what teaser I click only the nid for the last teaser gets sent.
Drupal.behaviors.ajaxview = function(context) {
$(".ajaxclick").click(function(){
$(".container").load(Drupal.settings.basePath + "myajax/" + <?php echo $node->nid;?>;);
});
}
In the second approach, a click on a button of class "ajaxview" will send the correct nid but but instead of sending for just the one clicked button to it's corresponding div, it will send a nid for EACH button with a class of "ajaxview" into EACH div with a class of "container". So I end up with the contents of every single view generated from every single teaser into every single div. WAAAAY too much!
$(document).ready(function() {
$(".ajaxclick").click(function(){
$(".container").load(Drupal.settings.basePath + "myajax/" + <?php echo $node->nid; ?>);
});
});
Here is the button;
<button class="ajaxclick">click</button>
And the div:
<div class="container"></div>
Any idea how I can get each click to send the nid of that teaser clicked upon as the argument and load only that view?
Your code is javascript.
You can't use:
<?php echo $node->nid; ?>
You will have to use jQuery approach to get the nid you want.
For example, if you have the nid in a hidden filed like:
<input type="hidden" id="ID" value="100" />
You can use the following jQuery to get the nid:
var nid = $("#ID").val();
Turns out I was able to get it working using a revision of Ionut.A's suggestion;
Drupal.behaviors.ajaxview = function(context) {
$(".ajaxclick").click(function(){
var nid = $(".mynid").eq($('.ajaxclick').index( $(this) )).val();
$('.container').eq($('.ajaxclick').index( $(this) )).load(Drupal.settings.basePath + 'myajax/' + nid);
return false;
});
}
and for the html;
<input type="hidden" class="mynid" value=<?php echo $node->nid;?> />
I had to use class instead of id as the id would only return the id from the first node.
In a PHP page i have several rows of one table like this
echo '<tr><td>Click</td></tr>';
The $id is dynamically generated from a database
So I want to define the function in jQuery but to pass the parameter to the jQuery function.
For each button I click there will be another parameter passed
Why not use the ID as an identifier for the link like this:
Click me
In jQuery you can bind to the onclick event like this:
// Execute on load
$(document).ready(function(){
// Bind to click
$('a.myjquerylink').click(function(){
// Get the id
var id = $(this).attr('id');
// Do something with the id.
doSomething(id);
});
});
What exactly do you want to do ?
Here's a sample function (it's not using jQuery!) to alert the user that the linked has been pressed and to stop propagating the event, so that it doesn't jump to another page on click
<script type="text/javascript">
function myFunction( param ) {
alert('The button with the id ' + param + ' has been pressed!');
return false;
}
</script>
Well in a dirty way you can assign your id's in rel tag like this:
echo '<tr><td>Click</td></tr>';
than you can search for mybutton class in jquery an add events to it:
$("a.mylink").click(function(){
alert($(this).attr('rel'));
});
So in this case $(this).attr('rel') should be your ID.
As other poster started saying, bind a function to an event. Say you assign a css class to your a tags to make it easier:
echo '<tr><td><a class="specialLinks" href="#" onclick="myFunction('.$id.')">Click</a></td></tr>';
Then you would bind to your class like this:
$('.specialLink').bind('click', function() {
this.preventDefault();
alert($(this.attr("id"));
});
you need to modify your html a bit:
echo '<tr><td><a class="someclass" href="#" id='".$id.'">Click</a></td></tr>';
then you can call it by it's class in JQuery and do what you want:
"$(this)" will be a reference to the clicked item.
$(".someclass").live('click',function(e){ e.preventDefault(); alert($(this).text())});
I am doing an AJAX request with Jquery and PHP what I am doing is looping through an array and producing a table, each loop a new is created and an id is given to it, when they click the read me link the ajax and some more content is returned, on clicking read more I want the associated table row to be removed from the table is this possible, you can see my attempt so far below.
<div id="new" class="tabdiv">
<table>
<?php
$colours = array("#f9f9f9", "#f3f3f3"); $count = 0;
if(isset($newSuggestions)) {
foreach($newSuggestions as $row) {
if($row['commentRead'] == 0) {
?>
<tr id="<?=$row['thoughtId'];?>" bgcolor="<?php echo $colours[$count++ % count($colours)];?>">
<?php
echo "<td>".substr($row['thought'], 0,50)."...</td>";
echo "<td class='read'><a href='".base_url()."thought/readSuggestion/".$row['thoughtId']."' class='readMore'>Read More</a>";
echo "</tr>";
}
}
} else {
echo "You have no new suggestions";
}
?>
</table>
$('a.readMore').click(function(){
$('#readMore').fadeIn(500);
var url = $('a.readMore').attr('href');
$.ajax({
url : url,
type : "POST",
success : function(html) {
$('#readMore').html(html)
},
complete : function() {
$('tr').remove()
}
});
return false;
});
You can get the id of the row like this:
$(this).parent().parent().attr("id")
$(this) wraps the a element, the first parent gets the td and the next one the tr. Call this inside the click callback. Make sure that the id starts with a letter; it is not allowed to start a number. To delete it, define a variable:
var row = $(this).parent().parent();
You can then delete it at the callbacks:
row.delete();
As kgiannakakis points out you'll need a reference to the element that was clicked.
To find out what went wrong, consider the following lines of your code:
$('a.readMore').click(function(){
var url = $('a.readMore').attr('href');
...
return false;
});
What you do here is add an event handler to all a elements with a readMore class.
When the link is clicked you again select all a elements with a readMore class and retreive the href attribute from the first matched element.
What you want to do is get the attribute from the element that was clicked.
$('a.readMore').click(function(){
var url = $(this).attr('href');
...
return false;
});
The same problem occurs in the success and complete handlers of your ajax request, note that you can't use this in the success/complete handlers because it will probably point to another object so you need to store it in a var before calling the ajax function.