27727

Javascript Open Window

Question:

I'm trying to figure out how to make the javascript open the correct window.The div class .show within my javascript controls the content I want to open. However it is having trouble if multiple .show are being used.

Within one page I may have many of these .show classes and according to which one is pressed I would like that one to show.

For example

<span class="Show"><a href="#">Show</a></span> - <div class="show"> Content 1 </div> <span class="Show"><a href="#">Show</a></span> - <div class="show"> Content 2 </div>

So if I click on the top show I will see Content 1 and if I click on the second I will see content 2.

At the moment with the current code provided when clicking the first show "content 1" a window opens with Content 1. If I click the second Content 1 appears and not Content 2.

Below is the javascript.

<script type="text/javascript"> $("a").click(function () { var html = $(".show").html(); var my_window = window.open("", "mywindow1", "width=350,height=150"); $(my_window.document).find("body").html(html); }); </script>

Any help would be greatly appreciated :)

I used this fiddle to get to where I am : <a href="http://jsfiddle.net/A72TH/" rel="nofollow">http://jsfiddle.net/A72TH/</a>

Answer1:

Well this is pretty fragile but you can accomplish it as follows:

var html = $(this).parent().next("div.show").html();

The working sample is here: <kbd><a href="http://jsfiddle.net/RV86q/" rel="nofollow">http://jsfiddle.net/RV86q/</a></kbd>

Answer2:

Given your example, you'll want to first navigate to the parent element, then to the next item with a class of "show".

Here is a fiddle example: <a href="http://jsfiddle.net/A72TH/" rel="nofollow">http://jsfiddle.net/A72TH/</a>

$("a").click(function () { var html = $(this).parent().next(".show").html(); var my_window = window.open("", "mywindow1", "width=350,height=150"); $(my_window.document).find("body").html(html); });

Answer3:

Try this

$(".window").click(function () { var html = $("#"+$(this).data('id')+"").html(); var my_window = window.open("", "mywindow1", "width=350,height=150"); $(my_window.document).find("body").html(html); });

<strong><a href="http://jsfiddle.net/A72TH/3/" rel="nofollow">FIDDLE</a></strong>

Recommend

  • ActionBar three-dot dropdown opens at the wrong place
  • Access 2007 forms with parameterized RecordSource
  • Aspect advising other aspects
  • Can't get LogCat (Alcatel OneTouch Evolve)
  • Defining variable by logical subseting on time interval in data.table
  • Partial specialization of a class template in derived class affects base class
  • Angular - routerLinkActive and queryParams handling
  • Android custom URI scheme incorrectly encoded when type in browser
  • Is it possible to get the word under the mouse cursor in a ``?
  • HTML5 video only works in IE. The other browsers shows the black screen
  • Simulate click Geckofx vb,net
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • htaccess add www if not subdomain, if subdomain remove www
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • JSON response opens as a file, but I can't access it with JavaScript
  • Jquery UI tool tip close icon
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Insert into database using onclick function
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • HTML download movie download link
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Accessing IRQ description array within a module and displaying action names
  • Can Jackson SerializationFeature be overridden per field or class?
  • javascript inside java/jsp code
  • Sending data from AppleScript to FileMaker records
  • jquery mobile loadPage not working
  • Web-crawler for facebook in python
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Data Validation Drop Down Box Arrow Disappearing
  • Android Studio and gradle
  • KeystoneJS: Relationships in Admin UI not updating
  • AngularJs get employee from factory
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How do you join a server to an Active Directory (domain)?
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?