Retrieve data from the server without going to a new web page - html

I use a frame from a HTML page to load some data from the server without having to leave the original web page. I simply reassign the src of the frame and the shown data gets updated.
Now I need to programatically create a div, but the width and height have to be retrieved from the server. May I use a frame to get those values, without leaving the web page, or is there a more simple and efficiente way ?
I would prefer not to use ajax, and keep my code as simple as possible, thanks

One easiest way is to call page property like this:
<script type="text/javascript">
var width = <%=this.Width %>
</script>
and declare this property in cs file like this
public int Width
{
get;
set;
}
Is it what you expected? or if you have some calculations after pages loaded, you can simply achieve it by using jquery ajax and one httphanlder.

Use jQuery. It's really simple.
A simple example:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$('#result').load('otherfile.php');​
</script>
<div id="result"> </div>
Loads otherfile.php inside the div id'ed "result". No page reload.

Thanks for the jquery example, I may use it in the future. For now I found a very simple and efficient way to solve it using a frame (I know, I know...) that really surprised me for its simplicity:
I create a form (a javascript class that manages several divs), then a little frame inside it, and the frame change the form properties and remove itself.
The key was to access the javascript variable defined in the parent from the child:
echo "<script>";
echo "parent.window.oDlg.SetSize( ".$row[ "WIDTH" ].", ".$row[ "HEIGHT" ]." );";
echo "parent.window.oDlg.SetTitle( '".trim( $row[ "TITLE" ] )."' );";
echo "</script>";

Related

send user to a specific part of the page without using link element

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

How to load a different image depending on the page content?

I want to be able to have one image that loads into static html pages based on a conditional argument; so if X="something" then src="something.jpg", if X="another" then src="another.jpg" and so on.
I can't use a database.
So I am looking for some other technique or method that can use some kind of array and load one image from that array depending on something unique within the page.
I'm guessing that jQuery might do the job or maybe using XML/XSLT but I'm no programmer so any suggestions/guidelines/pointers will be gratefully received :)
If you are willing to use jQuery, you can add the image once the DOM finishes loading.
Add a div tag in your html
<div id="test"></div>
and add the image with your logic using JavaScript
$(document).ready(){
yourLogic = true;
if (yourLogic){
('#test').prepend('<img id="imgId" src="path.png" />')
}else{
('#test').prepend('<img id="imgId" src="someOtherPath.png" />')
}
}

filling div using ajax?

I've recently created a website with a menu-bar to the left. My next step is to update the right side of the page with content based on what option you choose on the in the menu. I know you can use iframe but I was wondering if there is an alternative to it, like a more dynamic one!
Most of the menu options are input-forms, I've read about ajax-calls to fill a div but couldn't find a good tutorial on how to achieve it.
edit:
Here's a sketch http://imageshack.us/photo/my-images/16/smlithis.png/
Consider using JQuery. Handling Ajax requests is so much easier than using ordinary JS.
Documentation for the ajax function: http://api.jquery.com/jQuery.ajax/
Using the success callback (the function that is executed upon success) you can fill in your div:
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
alert('Load was performed.');
}
});
Instead of .result, point the selector to your main div. The .html() function fills your div with data, which is the data returned from the ajax request.
Edit: It's 2018. Use the Fetch API.
You can use jQuery
This is how your menu button will look like:
<a href='#' onclick='return fillDiv(1)'>GoTo1</a>
<script>
function fillDiv(pageNum){
$("#id_of_div_to_load_to").load("some_page.php",{ 'pahe_num': pageNum } );
return false;
}
</script>
It is just one of many ways to do it.
Ajax can get data from a server but it cannot fill anything. Ajax is just javascript used to communicate with the server. Javascript can take that data and insert data and create elements to fill that div.
You mean something like this:
How to update div when on select change in jquery
If you actually want to get the data dynamically from another source that would be an entire different matter.

Binding to events on parent page from iframe [duplicate]

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")

storing additional data on a html page

I want to store some additional data on an html page and on demand by the client use this data to show different things using JS. how should i store this data? in Invisible divs, or something else?
is there some standard way?
I'd argue that if you're using JS to display it, you should store it in some sort of JS data structure (depending on what you want to do). If you just want to swap one element for another though, invisible [insert type of element here] can work well too.
I don't think there is a standard way; I would store them in JavaScript source code.
One of:
Hidden input fields (if you want to submit it back to the server); or
Hidden elements on the page (hidden by CSS).
Each has applications.
If you use (1) to, say, identify something about the form submission you should never rely on it on the server (like anything that comes from the client). (2) is most useful for things like "rich" tool tips, dialog boxes and other content that isn't normally visible on the page. Usually the content is either made visible or cloned as appropriate, possibly being modified in the process.
If I need to put some information in the html that will be used by the javascript then I use
<input id="someuniqueid" type="hidden" value="..." />
Invisible divs is generally the way to go. If you know what needs to be shown first, you can improve user experience by only loading that initially, then using an AJAX call to load the remaining elements on the page.
You need to store any sort of data to be structured as HTML in an HTML structure. I would say to properly build out the data or content you intend to display as proper HTML showing on the page. Ensure that everything is complete, semantic, and accessible. Then ensure that the CSS presents the data properly. When you are finished add an inline style of "display:none;" to the top container you wish to have dynamically appear. That inline style can be read by text readers so they will not read it until the display style proper upon the element changes.
Then use JavaScript to change the style of the container when you are ready:
var blockit = function () {
var container = document.getElementById("containerid");
container.style.display = "block";
};
For small amounts of additional data you can use HTML5 "data-*" attribute
<div id="mydiv" data-rowindex="45">
then access theese fields with jQuery data methods
$("#mydiv").data("rowindex")
or select item by attribute value
$('div[data-rowindex="45"]')
attach additional data to element
$( "body" ).data( "bar", { myType: "test", count: 40 } );