I made a Modal Dialog that opens when you click the link
Edit Name
So after clicking that link the modal appears but the problem is that I don't know how to pass a usr variable for me to extract while at the same time opening the id called #modalDialog, something like this:
Edit Name
This other method redirects the page and opens the id, but the point is that I'm trying to avoid refreshing or redirecting to other pages just to edit a simple name, it goes like this:
Edit Name
I would to say thanks in advance!
I think you will want to use a data-* attribute within the anchor. Then access it using Javascript or JQuery.
<a href="#modalDialog" data-itemid="1" class="edit-name-link" >Edit Name</a>
Then in JQuery
$(".edit-name-link").click(
function()
{
var itemid = $(this).attr("data-itemid"); // this will get the clicked itemid
//now open your modal however you opened it before, and do something with itemid
});
Related
I have a worked example for passing data from child window to parent window
this is the example :
http://www.plus2net.com/javascript_tutorial/window-child3-demo.php
but what I'm looking for is to pass data from div popup and not window popup
to parent form;
any idea ?
If the div popup is a modal window of some description, i.e. it is a div overlaying the current page but within the same document, then you can do so by listening for the click event on the modal button and when you see this click, taking the value of the input inside the modal.
Assuming your page setup is similar to the example in the link you posted, if you had an input with an id of input1, and a modal containing an input with id input2, and button with an id of button, then this would be a pure javascript method for achieving the effect you describe.
window.onload = function() {
document.getElementById('button').onclick = function(event) {
event.preventDefault();
document.getElementById('input1').value = document.getElementById('input2').value;
}
};
Here is a fiddle which shows the function working: http://jsfiddle.net/8Z7hg/
The key thing to remember is that you need a way to query the element which contains the data you want to capture (in this case I gave the input an id of 'input2', which I could query using document.getElementById('input2').value and a way to listen to the event which triggers you capturing the data - in this example I created an anonymous function which I bound to the onclick event of the element with an id of button
i have simple coding problem. i have created a page with textbox and share button. the page also contains one Points up button.
i had a problem with that points up button that when the user click on that button and refresh the page ... a window ask for resend of information
for that i have used following code which works fine.
`header('Location: samepageurl.php');
exit;`
but the problem with above code is when user scroll down page and click the button. the page automatically scrolls up. and user have to manually scroll it down.
what i want is the page should refresh but it should be on the same location where it was.
if the problem is still unclear please refer the following images
You can set a fragment identifier.
eg:
<a name="points_up"></a> <!-- this needs to be near that button, the page will scroll exactly where the element is -->
and redirect him to:
header('Location: samepageurl.php#points_up');
die;
Mihai answer is correct, but as you said that fragment identifier is not working because each user has points up button, you can pass user id as a fragment identifier and make a hidden(display : none;) <a> tag and pass the user id in front of each user...
Like this:
You can set a prefix before a user id too (optional)
<a name="pu12345" style="display: none;"></a>
<?php
header('Location: whatever.php#pu12345');
exit;
?>
You can send the request via ajax instead relying on the normal form submission. That will not affect the scrolling of the current page.
Add this line at the bottom of your page before the the <\body> tag
<button id="PageRefresh">Refresh a Page in jQuery</button>
<script type="text/javascript">
$('#PageRefresh').click(function() {
location.reload();
});
</script>
I have a little problem with display data queried from mysql database table
the data obtained is 3d array and I would like to use it in a javascript function
Usually, data in cake php is displayed in a ctp page whose file name(excluding the extension) is the same as the controller function's.
I would normally call that page if I click on a link in the current page as
<a href='../nextpage'>Next page</a>
or
<input type='button' onclick='../nextpage'>
'nextpage' is a ctp page (nextpage.ctp) as well as a controller function name
My problem is like this
database data queried ---sent to---> current page (having a link/button)---click to open ---->nextpage
next page will again display some data queried from the database. I sure can make nextpage as a new ctp page but I would like to make nextpage as an overlay page (a popup that grays out its parent once it shows up).
Is there any to accomplish this ?
You could have an HTML link with the following markup:
Next page
which will trigger a javascript function defined as
<script>
function someJavascriptFunction(){
//do something here
}
</script>
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}
My blog has its posts links. What I need is code that will do this: when a user clicks on a post link, a parameter will be added to the link which I'll use with a get function on the other page.
This is my link - link which is visible and indexed by google:
my post link
When a user clicks on it, I need a way to add ?car=type to the link, http://www.mysite.com/post1/?car=type.
I'd like to do this with jQuery.
P.S.
I can't just add my car variable to the links in normal html, becouse Google will index them badly, the variables change every day and I'd get pages not found all over the serps.
Any idee?
Ty!
Well...
$(document).ready(function() {
$("a").click(function() {
this.href += "?car=type";
});
});
Live test case: http://jsfiddle.net/y6PrF/
If you mark the desingated links in a way such as a class (say addType):
<a href="http://www.mysite.com/post1/" class="addType" >my post link</a>
you can do something like this on document load, no need to wait for click to do it:
$(function() {
$("a.addType").attr("href",function() {return this + "?car=type";});
});
Here's a jsfiddle example: http://jsfiddle.net/nbKPu/