Develop Reference

Javascript variable not acting global

I'm just learning Javascript after starting out in PHP.
I'm trying some basic stuff, but for some reason the below code doesn't act as I expect. I have researched it, and from what I can tell it should work.
<script type="text/javascript">
showIndex=4;
function test(){
showIndex++;
alert(showIndex);
}
</script>
I am calling the script with an image:
<div style="display:inline-block;margin-left:25px;">';
<a href="" onclick="test()" ><img src="_images/next.png" width="100" /> </a>
</div>
It runs fine the first time, but when I hit the button again, it still has the initial variable plus one. (which makes me think it's acting as a local variable...)
It seem so straight forward... what am I doing wrong?

Remove the <a> and have the event on the image, it's refreshing the page. You don't need to have it wrapped in an <a> tag for a onclick event:
<img src="_images/next.png" onclick="test()" width="100" />

The empty link just reloads the page. You can insert # in it:
<div style="display:inline-block;margin-left:25px;">
<a href="#" onclick="test()" >www </a>
</div>
Then everything works as intended.

The empty href attribute on the <a> tag is messing you up. Either remove the href attribute, or change it to # or javascript:void(0)
Alternatively, you can call your method from the href attribute like this
<div style="display:inline-block;margin-left:25px;">';
<a href="javascript:test()" ><img src="_images/next.png" width="100" /> </a>
</div>

jquery mobile asp new page in iframe

Well I have most of the problem figured out. But there is still a slight problem. The <iframe src="" doesn't seem to be behaving, it won't pick up the url in my data-popupurl="product.asp?itemid=[catalogid].
Anyone know why?
<script>
$( document ).on( "pageinit", "#page1", function() {
$(".popupInfoLink").on("click", function(){
var url = $(this).data("popupurl");
$( "#popupInfo iframe" ).attr("src", url);
});
});
</script>
<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="product.asp?itemid=[catalogid]"><img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="pot" border="0" /></a>
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
<iframe src="" width="800px" height="800px"></iframe>
</div>
You can see my problem here:
https://www.kitchenova.com/mobile
Just run a search for lets say "cookie" then click on a product. A blank pop-up comes up where the product.asp?itemid=[catalogid] should be loading.

You can use the jQM popup widget with an iFrame.
Here is a DEMO
The link around the img now links to the popup id. I added a custom data attribute called data-popupurl that has the url for the iFrame and I added a class for a click handler as you will probably have multiple thumbnails on a page (NOTE: the data attribute could just hold the catalog id, or you could use another way to get the url):
<a class="popupInfoLink" href="#popupInfo" data-rel="popup" data-position-to="window" data-popupurl="http://www.houzz.com/photos/6147609/T-Fal-I-Hoffmann-Stock-Pot-8-Qt--contemporary-cookware-and-bakeware-"><img src= "http://st.houzz.com/simgs/a1419d6702561831_3-4003/contemporary-cookware-and-bakeware.jpg" width="320" height="300" alt="pot" border="0" /></a>
<div data-role="popup" id="popupInfo" data-overlay-theme="a" data-theme="d" data-tolerance="15,15" class="ui-content">
<iframe src="" width="400px" height="400px"></iframe>
</div>
The script simply responds to a click on the link by reading the url for the popup and then setting the iFrame src to that url. In your case the url would be product.asp?itemid=[catalogid]
$( document ).on( "pageinit", "#page1", function() {
$(".popupInfoLink").on("click", function(){
var url = $(this).data("popupurl");
$( "#popupInfo iframe" ).attr("src", url);
});
});

Have a look at the target attribute of the anchor (a) tag.
Here is the W3 Schools documentation.
<img src= "/thumbnail.asp?file=[THUMBNAIL]&maxx=200&maxy=0" width="320" height="300" alt="[name]" border="0">
By the way, I strongly urge you not to do this. People don't like that, because they don't have a way of knowing that's the behavior before they do it. If people really want to open it in a new window or tab, then they can right click and do that.
Keep one question per post is the Stack Overflow policy. But the best way to learn is by jumping in and doing tutorials. Don't ask questions until you've gotten seriously stuck. Part of learning to program is learning to figure things out on your own.

So you don't want to pop open a new window, you want a dialog frame to appear overlayed on top of your other content?
Have a look at the PopupControlExtender from the Ajax Control Toolkit. I don't know how well it will work in a jQuery Mobile environment, but it's worth a look.
Sample code.
<asp:Button runat="server" ID="Btn1" Text="Click Here For More Info" />
<ajaxToolkit:PopupControlExtender ID="PopEx" runat="server" TargetControlID="Btn1" PopupControlID="Panel1" Position="Bottom" />
<asp:Panel runat="server" id="Panel1">
Here is some more info!
</asp:Panel>
Or since you're using jQuery Mobile, why don't you stick with what they already provide for this? Have a look at jQuery Mobile panels or jQuery Mobile popups.

capture target link on iframe

Ok, thank you first of all his attention. I have three iframes in 3 different html documents. Organized in this way:
In iframemain.html I have:
<iframe src="iframeparent.html" width="100%" height="600">
</iframe>
In iframeparent.html I have:
<iframe src="iframeson.html" width="90%" height="350" name="_parent">
</iframe>
In iframeson.html I have:
<iframe src="http://anywebsite.com/samplepage.html" width="80%" height="300">
</iframe>
I did this because http://anywebsite.com/samplepage.html links are loaded into main window (iframemain.html), and not what I want, I wish I could capture the target and load the content iframeparent.html without afect to iframemain.html
I clarify that I have no control over the content of: http://anywebsite.com/samplepage.html, but it is annoying that your links loaded into the main window, so I would like all of those links are loaded in the same iframe or much in the iframeparent.html
Is this possible with Javascript or Jquery?. Thanks for your answers.

See if I have understood this correctly
You want to frame a page http://anywebsite.com/samplepage.html on iframemain.
That page has a bunch of links with target="_parent" or worse, "_top"
You want the page you have framed to not target iframemain but to have all links stay in that frame.
If the links target _parent, then your solution is correct. If they target _top, you would need to use a proxy on the server. It would break if they change the way they target links (using javascript or base target for example) but the idea is that you have
<iframe src="yourproxy.php?url=http://anywebsite.com/samplepage.html" width="80%" height="300"></iframe>
and in there, replace all _top and/or _parent with _self
But show some examples of the links (you can change the URL to protect your client) so we can help better

show only one div within an iframe (javascript, JQuery...)

First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>

With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks

$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..

Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.

Can I get some help decoding this bit of a Facebook page?

I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.

According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.