I have an iframe and in order to access parent element I implemented following code:
window.parent.document.getElementById('parentPrice').innerHTML
How to get the same result using jquery?
UPDATE: Or how to access iFrame parent page using jquery?
To find in the parent of the iFrame use:
$('#parentPrice', window.parent.document).html();
The second parameter for the $() wrapper is the context in which to search. This defaults to document.
how to access iFrame parent page using jquery
window.parent.document.
jQuery is a library on top of JavaScript, not a complete replacement for it. You don't have to replace every last JavaScript expression with something involving $.
If you need to find the jQuery instance in the parent document (e.g., to call an utility function provided by a plug-in) use one of these syntaxes:
window.parent.$
window.parent.jQuery
Example:
window.parent.$.modal.close();
jQuery gets attached to the window object and that's what window.parent is.
You can access elements of parent window from within an iframe by using window.parent like this:
// using jquery
window.parent.$("#element_id");
Which is the same as:
// pure javascript
window.parent.document.getElementById("element_id");
And if you have more than one nested iframes and you want to access the topmost iframe, then you can use window.top like this:
// using jquery
window.top.$("#element_id");
Which is the same as:
// pure javascript
window.top.document.getElementById("element_id");
in parent window put :
<script>
function ifDoneChildFrame(val)
{
$('#parentPrice').html(val);
}
</script>
and in iframe src file put :
<script>window.parent.ifDoneChildFrame('Your value here');</script>
yeah it works for me as well.
Note : we need to use window.parent.document
$("button", window.parent.document).click(function()
{
alert("Functionality defined by def");
});
It's working for me with little twist.
In my case I have to populate value from POPUP JS to PARENT WINDOW form.
So I have used $('#ee_id',window.opener.document).val(eeID);
Excellent!!!
Might be a little late to the game here, but I just discovered this fantastic jQuery plugin https://github.com/mkdynamic/jquery-popupwindow. It basically uses an onUnload callback event, so it basically listens out for the closing of the child window, and will perform any necessary stuff at that point. SO there's really no need to write any JS in the child window to pass back to the parent.
There are multiple ways to do these.
I) Get main parent directly.
for exa. i want to replace my child page to iframe then
var link = '<%=Page.ResolveUrl("~/Home/SubscribeReport")%>';
top.location.replace(link);
here top.location gets parent directly.
II) get parent one by one,
var element = $('.iframe:visible', window.parent.document);
here if you have more then one iframe, then specify active or visible one.
you also can do like these for getting further parents,
var masterParent = element.parent().parent().parent()
III) get parent by Identifier.
var myWindow = window.top.$("#Identifier")
Related
I have a script called equal-heights.js which works together with underscore.js. It equalize the divs to the size of the highest div with an animation (optional). The problem is that when I charge the page nothing happens, it starts to equalize the divs only when I resize the browser.
The initialising code on the HTML:
$(document).ready(function() {
$('.profile-panel').equalHeights({
responsive:true,
animate:true,
animateSpeed:500
});
});
You can see the equal-heights.js here: http://webdesign.igorlaszlo.com/templates/js/blogger-equal-heights-responsive.js
What should I do so that, when the page loads, the animation starts to equalize the divs automatically?
I created my own test and realized the issue is with the way the plugin has been written, namely that it only accepts one value for the class name, otherwise it will break.
This is because of the following line in the script:
className = '.'+$(this).prop('class');
What this does is that it takes the class property of your element and adds a dot (.) in front; a nice but not very scalable way of getting the current selector, because if you have multiple class names, it will only put a dot in front of the first one, so if you have...
<div class="profile-panel profile-panel-1st-row profile-panel1">
...it will transform it into...
$('.profile-panel profile-panel-1st-row profile-panel1')
...so understandably this will not work properly, as the dots are missing from the rest of the classes.
To go around this, until version 1.7, jQuery had a .selector property, that however has now been deprecated. Instead they're now suggesting to add the selector as an argument of your plugin's function as follows (and I tailored it to your situation):
First define an option called selector when calling the function:
$('.profile-panel-1st-row').equalHeights({
selector:'.profile-panel-1st-row',
// ...
});
Then setup the className variable inside the plugin as follows:
var className = options.selector;
Another thing you can do is the place the class you're using to activate the plugin as the first one for each element you want to use it on, so instead of...
<div class="profile-panel profile-panel-1st-row profile-panel1">
...do this...
<div class="profile-panel-1st-row profile-panel profile-panel1">
...then you can setup the className variable inside the plugin as follows:
var className = '.'+ $(this).prop('class').split(" ").slice(0,1);
This basically splits the class names into parts divided by space and takes the first one.
To have the best of both solutions, simply set className to the following:
var className = options.selector || '.'+ $(this).prop('class').split(" ").slice(0,1);
As to the animation, it only works on resize; that is intended, that's how the plugin has been built, you can play around with the original example of the plugin creator that I added to jsfiddle: http://jsfiddle.net/o9rjvq8j/1/
EDIT #2: If you're happy to change the plugin even more, just remove $(window).resize(function() in the if(settings.responsive === true) check and you'll have it working. ;)
if(settings.responsive === true) {
//reset height to auto
$(className).css("height","auto");
//re initialise
reInit();
}
I know that it is possible to send a user to a specific a name by using a link; however, for what I'm doing, I'd prefer not to use this link element.
Ex:
http://www.domain.com/link.php#aname
will send the user down to
<a name="aname">
Is there a method of doing this on page load, like perhaps adding a line of code to the body tag or something?
I'm using this in conjunction with PHP, so basically if a particular variable is defined, I will be sending them to the location. I know how to do the PHP side of it, just not the html side of it without the use of the link element.
Use the animate method from jquery to get a nice smoothe effect
$("#down").click(function () {
$('html,body').animate({
scrollTop: $("#b").offset().top
});
});
Example
Update: onload
$(document).ready(function () {
$('html,body').animate({
scrollTop: $("#b").offset().top
});
});
Cheers!!
Few Assumptions :
You know/declared the ID/NAME
You are sure that a NAME/ID exist
Recommendation :
Use Id along with the name.
Make sure you have unique Id for that part of page where you want to send the user to.
Add this simple javascript before the end of </body> tag OR after all ids are echo
<script type="text/javascript">window.location.hash=id;</script>
Please change id to your required id. Once the page load first the div with a declared id is created and when everything is complete the javascript will try to move the page to the specific part.
If you will use scrollto then it requires far more steps and is complicated. You will need to
measure the page height
measure the location of that id
scroll to that id if possible
Hope it works for you
If I have this html:
<div id="myDiv"></div>
and this CSS:
#myDiv{
background:url('../images/someImage.png') no-repeat;
background-size:100%;
width:44px;
height:44px;
}
I need to open a new page when the user taps on myDiv. I have an external js file where I have this:
function bindMyDiv(){
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
}
But I don't understand where to call this from the HTML, or if this is even the right way to go about this. Advice?
Try
$("#myDiv").live("tap", function(event){
alert('binding');
});
You can place this in side your onReady javascript file
EDIT:
http://jsfiddle.net/R9e6u/
Everyone here provided pretty good insight on different solutions for you to handle your script, but I don't think that anyone stopped to think SHOULD they help improve your script. "or if this is even the right way to go about this ", the answer is no. And perhaps I'm over-simplifying, but with JQM if you're trying to have a div (or any DOM element for that matter) open a new page simply wrap an anchor tag around around it (or in it, whichever is appropriate) and set your href to href="#myNewPage"and the id on the JQM page that you want to load to id="myNewPage"
jQuery Mobile's frame work is set up to automatically inject JS & AJAX into normal HTML elements to provide a smooth UX. While binding a touch event is sometime needed, this situation doesn't warrant that level of code...thats the beauty of jQuery Mobile =).
Examples of when to bind a touch event: show/hide a dom object, trigger a click for a plug-in etc.
You want to call that function on the pageinit event for the page on which it resides. You could use some other page-events from jQuery Mobile like: pagecreate, pageshow, etc. but I think pageinit is your best-bet.
The implementation would look something like this:
$(document).delegate('#page-id', 'pageinit', function () {
$("#myDiv").bind('tap',function(event, ui){
alert("binding");
})
});
OR
$(document).delegate('#page-id', 'pageinit', bindMyDiv);
You would replace #page-id with the ID of the data-role="page" element in which your div resides.
This method is preferred over event delegation for the #myDiv element because binding directly to an element creates less overhead when the event is triggered. If you use event delegation then the event has to bubble-up to the delegation root.
I have 6 different links,and each link is going to call a different Ajax function.
I'm using the <a href> tag because I want it to appear as a link....Can I use this tag to call the Ajax function? or it only works with URL links?
THANKS!
This is how I call mine. I give my elements a class name such as 'clickable' then use Jquery's click function as so.
$('.clickable').click(function() {
//do ajax
});
Then in the function, I get the id of the element as so. var id = this.id, this will get the unique id of the element.
After that I use the $.post method of Jquery, the shorthand version of ajax and complete whatever call you need to make when the user clicks that link using the id.
Of course, in my case I never use the anchor tag, I just make is a button or apply the . click to the element I wish to add the ajax call to, but you could just surround the "link" in a span or a div to simulate the same effect.
Hope this helps in some way or another.
Text
or even as they wrote, with jquery
Text
<script type="text/javascript">
$(document).load(function(){
$('#blabla').click(function(){
alert("Clicked");
});
});
</script>
Yes you can incorpore the link in the following way:
- on your link you can write ...
Here you can see further information about this topic:
What is the difference between the different methods of putting JavaScript code in an ?
You can extract the value of the href attribute and use it for your AJAX call...
(it is actually the proposed way to handle it..)
yes you can, if any client side script functions (javascript or jquery) applied than it will execute first.
var $page = el.parents('div[data-role="page"]:visible');
Being called on pageinit() is showing null for me. Does anyone know the appropriate handler to access elements height from JQM on? (As I need to run height() when the element is displayed)
Thanks.
If you want a reference to the currently displayed page in jQuery Mobile there is the $.mobile.activePage property. It stores a jQuery object of the current page.
So to get the height of the current <div data-role="page"> element you would do:
var the_height = $.mobile.activePage.height();
Or you could get the height of the <div data-role="content"> section:
var the_height = $.mobile.activePage.children('[data-role="content"]').height();
Here's a link to the page in the documentation about this (however there is almost no info for this property, you may still want to browse the page to see what jQuery Mobile has built-in): http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html
Hey I just found out that the actual issue here is that elements don't seem to have a height() until pageshow handler is called (which runs after pageinit)
so use that handler to run any events based on grabbing existing heights etc