I have a span whose content (a record #, eg: 'record12345') is generated via javascript. I want to include that record # in an href.
My goal is :
Link
If I just call the span like so, I get the record # as expected:
<span id="exampleId"></span>
But I can't get it to work inside an href. Here are some things I've tried:
<a href='<?php echo "user/<span id='exampleId'></span>" ; ?>'>Link</a>
<a href='user/<?php echo "<span id='exampleId'></span>" ; ?>'>Link</a>
</span>" ;?>">Link
Link
You don't need all that PHP nonsense.
Put this Javascript somewhere
document.onload = function(){
// Get the inner stuff from the span
var url = document.getElementById('exampleId').innerHTML;
var link = document.getElementById('myLink');
link.setAttribute("href",url);
}
Then assuming your span has the link inside of it, and the <a> tag has an id='myLink' this will work.
Here's a JSFIDDLE...
Using jQuery
$('span').click(function() {
window.location.href="user/"+$(this).attr('id');
});
what you are attempting to do above is inject client side code back into the server script
Related
I am stuck in a problem and in need of support from you guys.
My problem is I want to pass a php variable(dynamically called through database in loop) to another div on the same page without page refresh
//This is a loop
<td><a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a></td>
//The div which should get the above php variable
<div class="tabright" id="existingcase">
<?php
$c_id = $_GET['case_id'];
echo $c_id;
?>
</div>
//the javascript code for calling divs on the same page
<script>
$(".linkright").click(function(){
$(".tabright").hide();
theDiv = $(this).attr("href");
$(theDiv).slideToggle();
});
</script>
It shows in the url like this index.php#existingcase?case_id=2012001 but never passes the case id to #existingcase. And also #existingcase div does not load either but without passing caseid value, #existingcase loads.
Any suggestions would be great.
I think you want to print clicked case_id in div without page load. To do this, you don't want to pass it using url. you can simply achieve it using javascript.
If your div id existingcase is just change your code like this below.
you are printing that same case_id as a text of anchor tag using $row_mycases['case_id'];. So, you can easily get that text using javascript and you can easily print it in your #existingcasediv.
<td><a class="linkright" href="#existingcase"><?php echo $row_mycases['case_id']; ?></a></td>
I don't know about your other scripts. in .linkright click function place this code like this
$(".linkright").click(function(){
$('#existingcase').text($(this).text()); //if your div id is existingcase it will print your case id.
});
try this code. And let me know the result.
SEE THIS FIDDLE DEMO
UPDATED:
To pass client side value to serverside without page reload, you can use jquery.post() method.
Place this PHP code at the top of your page.
<?php
if (isset($_POST['id'])) {
$caseid = $_POST['id'];
return print_r($caseid);
}
?>
$caseid will contain currently clicked case_id value. So, you can use this $caseid wherever you want in this page. If you click on the another case id, it will update with respect to currently clicked case_id
replace your js with below code,
$(".linkright").click(function () {
$(".tabright").hide();
theDiv = $(this).attr("href");
$(theDiv).slideToggle();
$.post("yourPHPFile.php", { //use your current php file name instead of "yourPHPFile.php"
id: $(this).text()
}, function (caseid) {
$('#existingcase').text(caseid);
});
});
id : $(this).text() means, get the current element .text() and assign it to $_POST variable name of id. It will post to yourPHPFile.php. And you can retrieve that value like $caseid = $_POST['id'];.
In function (caseid) {, caseid contains the value of $caseid. So, only in this code, I assigned $caseid = $_POST['id'];
By this you can directly print clicked case_id text to your #exixtingcase div.
Any values after # are not sent to the server. Since PHP is a server technology you php code will never see the values after #
<a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">
try doing
<a class="linkright" href="existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">
instead and your php code should fill the div.
In my understanding of your explanation I think you are making a mistake. You are trying to mix Javascript and PHP with out page refresh. This is not possible through your code as PHP is server side and only works on the server. You can't do href within the same page and expect PHP code inside this div to be executed. The PHP code will not be there. You can try "view source" in your browser and check it out.
I think the only way to solve your problem is to make AJAX call using Javascript, get the response and put wherever you want (without refreshing the page)
Hope this helps and excuse my English
EDIT : Here is a working example for making a simple AJAX call using Jquery.
Your table should be some thing like this:
<td>
<a class="linkright" href="#" data-id="<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a>
</td>
You will notice I added "data-id" attribute. We will use this id in our AJAX call. Put this in your JS :
// Create Jquery ajax request
$("a.linkright").click( function() {
$.get("example.php", // Put your php page here
{ case_id : $(this).attr("data-id") }, // Get data, taken from the a tag
function(data) { // Call back function displays the response
$(".tabright").html("<p>" + data + "</p>");
}); // Get
}); // click event
}); // Document Ready
I tested the code and it is working. You will need to customize it to work for you. If all of this AJAX is new to you I suggest these links for you :
http://www.w3schools.com/ajax/default.ASP
http://learn.jquery.com/ajax/
I am trying to make a dropbox-like custom context menu. What I need is that when the user right-clicks an element, the options such as "Edit" and "Delete" that pop up in the context menu link to "edit" and "delete" for that specific element. The context menu:
<div class="screenlock-transparent">
<div class="context-menu-wrapper">
<ul class="context-menu">
<li><i class="icon-edit" style="margin-right: 10px;"></i>Edit</li>
<li><i class="icon-trash" style="margin-right: 10px;"></i>Delete</li>
</ul>
</div>
</div>
The way I have gone about this is to user jQuery to fire an event when the user right-clicks an element:
<script type="text/javascript">
$(document).ready(function(){
// Launch on-right-click on element
$(".custom-context-menu").mousedown(function(){
if(event.which == 3) {
if ($(this).hasClass("ul-all-years-faculty")) { // If on the general faculty ul
// Load external php here to build url string specific to the element
// Replace current href value with the url string produced by the external php script
} else if ($(this).hasClass("ul-year-specific-faculty")) {
} else if ($(this).hasClass("ul-semester")) {
} else if ($(this).hasClass("ul-subject")) {
}
}
});
});
</script>
Where you see the quotes if the if statement is where I am trying to write the code that will call my external php script and replace the href of the, for example, "Edit" link in the context menu with an href of a url containing variables specific to the element that was right-clicked.
I know how to use .load() for a div - $("#ID").load(...) will load in the echoed content inside that div. However, what about loading inside the href of a link (a) ?
Thank you so much. I greatly appreciate your help.
If I understand you correctly, and you want to change the href of an a tag, you want to use the .attr() function
http://api.jquery.com/attr/
so it would look something like this
$("a").attr("href", "http://newlink.com")
I have a table in which there are small href links assigned in each row which i have set using below code working fine:
<h10>(check status)</h10>
Now I do not want to display the same above href link as static but want to send my variable value to the pop window and need to get data displayed separately for each row.
In short i want to pass my variable $name in the popup window. I am trying below code but but isn't happening. Even i tried <FORM> by GET
<?php echo "<h10>(check status)</h10>";?>
On popup.php page:
<?php echo $id = $_GET["id"]; ?>
What i want want is to pass variable using any method (GET or HREF), and it should open in new popup window not in next tab or forwarded window
change this
<?php echo "<h10>(check status)</h10>";?>
to
<?php echo "<a target='_blank' href='popup.php?id=".$name."' onclick=\"window.open(this.href, 'popupwindow', width=400,height=300,scrollbars,resizable');return false;\"><h10>(check status)</h10></a>";?>
^ ^ ^ ^// here was the mistake
You have not concatenated the strings properly and you missed ' for herf attribute.
Use target="_blank" for opening link in new tab or new browser.
I have some javascript/jquery code in PHP:
$theframe='thisbox';
echo "<a href='#' onClick=\"\$('#$theframe').attr('src','http://google.com';\">
<span class='lin'>$titlehere</span></a>";
When clicked, I want it to update the iframe on the page with id='theframe' to something else (like google here) and without refreshing the page.
It's not working. Any ideas?
EDIT: For future reference, here is what I've used.
Foo
<iframe name="myiframe"></iframe>
From:
Basic jQuery question: How to change iframe src by clicking a link?
Give the frame a name, then use the target attribute, forget JS.
Example
<iframe name="myFrame" src="http://example.com/">
Alternative content for non-frame systems
</iframe>
create a new div and set its "innerHTML" value by each click. The innerHTML value then contains a new iframe with its source.
you need to prevent the link's default behaviour with event.preventDefault().
I'd also split html and javascript:
PHP:
echo "<a href='#' id='someID'><span class='lin'>$titlehere</span></a>";
JS:
$('#someID').click(function(ev){
$('#theframe').attr('src','http://google.com');
ev.preventDefault();
});
I have the following jQuery code in my PHP file (edited Jan 19 2010 # 10:40 MST):
<?php
$count = 0;
foreach($attachments as $attachment) :
echo '<script type="text/javascript">
$(\'#a_'.$count.'\').click(function() {
$(\'#d_'.$count.'\').show(200);
});
// if "no" is clicked
$(\'#d_'.$count.' .no\').click(function() {
$(\'#d_'.$count.'\').hide(200);
});
// if "yes" is clicked
$(\'#d_'.$count.' .yes\').click(function() {
$(\'#d_'.$count.'\').hide(200);
// update database table -- this is why I need the script inside the for loop!
var jsonURL = \'http://path/to/update_db_script.php\';
$.getJSON(jsonURL, {\'post_id\' : '.$attachment->ID.'}, function(data) {
alert(\'Thank you. Your approval was received.\');
});
$(\'#a_'.$count.'\').replaceWith(\'<span>Approved</span>\');
});
</script>';
echo '<li>';
if($attachment->post_excerpt == 'approved') {
// Check the proof's status to see if it reads "approved"
echo '<span>Approved</span>';
} else { ?>
// If not yet approved, show options
<a class="approve" id="a_<?php echo $count; ?>" href="#">Click to Approve</a>
<div class="confirm-approval" id="d_<?php echo $count; ?>">
<p>Please confirm that you would like to approve this proof:</p>
<a class="yes" href="#">Yes, I approve</a>
<a class="no" href="#">No, not yet</a>
</div><?php
} ?>
</li>
<?php $count++;
endforeach; ?>
The page in question is available here. The "click to approve" links do not work (that's my problem).
When I view source, the PHP variables appear to have echoed properly inside the jQuery:
<script type="text/javascript">
$('#a_0').click(function() {
$('#d_0').show(200);
});
... etc ...
</script>
This looks correct, but nothing happens when I click any of the links. However, when I replace the PHP echo statements with plain numbers (0, 1, etc.) the click functions work as expected.
You may be asking: why on earth do you have this inside a for loop? The reason is that I need to retrieve the attachment->ID variable and pass it to an external PHP script. When someone clicks "approve" and confirms, the external script takes the attachment->ID and updates a database value to read "approved".
Why won't the click function fire when PHP is in place? Is there some kind of greater force at work here (e.g., hosting limitation), or am I missing a fundamental piece of how PHP and JavaScript interact?
Since you didn't post your HTML its a little hard to troubleshoot.
First, I am not sure why one is working and the other is not since the code it is outputting looks correct. Either way, I still would make some changes. Move your a_0,a_1, etc and d_0,d_1, etc into the id attribute instead of a class:
<div>Click Me</div>
<div class="confirm_approval" id="d_0">Show Me</div>
<div>Click Me</div>
<div class="confirm_approval" id="d_1">Show Me</div>
Now, instead of outputting your code in a loop in PHP, place this jQuery code once on your page:
$(document).ready(function(){
$("a.approve[id^='a_']").click(function(e){
var id = this.id.replace('a_',''); // Get the id for this link
$('#d_' + id + '.confirm-approval').show(200);
e.preventDefault();
});
});
This code finds any a element with the approve class that has an id that starts with a_. When this is clicked, it grabs the number off the id a_0 = 0 and uses that id to find the confirm-approval element and show it.
Since the javascript is run on the client and has no way of knowing whether the script was generated using PHP or not, I think that particular part is a wild goose chase...
When I replace the PHP echo statements
with plain numbers (0, 1, etc.) the
click function works as expected.
Do this again and compare the actual output using view-source in a browser. I'll bet you find that there is a difference between the working and failing scripts, other than one of them being generated by PHP.
It seems that the problem is in jQuery selectors. Instead of dynamically binding click() events on multiple objects with an output of PHP code, use just one class selector and bind to objects with this class. And you can specify an id attribute to make them unique.
Something strange too is to have the script tag and the
$(document).ready(function()
in the loop. I don't know if this causes any problems, but it's sure not very efficient, one time is enough.