Rectangle 27 48

If your XML is a String, Then you can do the following:

String xml = ""; //Populated XML String....

DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse(new InputSource(new StringReader(xml)));
Element rootElement = document.getDocumentElement();

If your XML is in a file, then Document document will be instantiated like this:

Document document = builder.parse(new File("file.xml"));

The document.getDocumentElement() returns you the node that is the document element of the document (in your case <config>).

Once you have a rootElement, you can access the element's attribute (by calling rootElement.getAttribute() method), etc. For more methods on java's org.w3c.dom.Element

More info on java DocumentBuilder & DocumentBuilderFactory. Bear in mind, the example provided creates a XML DOM tree so if you have a huge XML data, the tree can be huge.

Update Here's an example to get "value" of element <requestqueue>

protected String getString(String tagName, Element element) {
        NodeList list = element.getElementsByTagName(tagName);
        if (list != null && list.getLength() > 0) {
            NodeList subList = list.item(0).getChildNodes();

            if (subList != null && subList.getLength() > 0) {
                return subList.item(0).getNodeValue();
            }
        }

        return null;
    }

You can effectively call it as,

String requestQueueName = getString("requestqueue", element);

@Blaise Doughan, you could. I just used DOM to support legacy java that are still active out there.

Fair enough, if someone is still on JDK 1.4 then your approach is reasonable. If they are on 1.5 or later then the javax.xml.xpath library is much easier. I hate to see people doing things the hard way when a better way exists.

Agreed there are developers using JDK 1.4, and that your solution is appropriate to JDK 1.4. If, however they are using JDK 1.5 or above the javax.xml.xpath library is more appropriate. There are many developers with JDK 1.5 and 1.6 as baselines.

How to retrieve element value of XML using Java? - Stack Overflow

java xml
Rectangle 27 23

If you are just looking to get a single value from the XML you may want to use Java's XPath library. For an example see my answer to a previous question:

import javax.xml.parsers.DocumentBuilder;
import javax.xml.parsers.DocumentBuilderFactory;
import javax.xml.xpath.XPath;
import javax.xml.xpath.XPathConstants;
import javax.xml.xpath.XPathFactory;

import org.w3c.dom.Document;
import org.w3c.dom.NodeList;

public class Demo {

    public static void main(String[] args) {
        DocumentBuilderFactory domFactory = DocumentBuilderFactory.newInstance();
        try {
            DocumentBuilder builder = domFactory.newDocumentBuilder();
            Document dDoc = builder.parse("E:/test.xml");

            XPath xPath = XPathFactory.newInstance().newXPath();
            Node node = (Node) xPath.evaluate("/Request/@name", dDoc, XPathConstants.NODE);
            System.out.println(node.getNodeValue());
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

Why does this not work on JDK1.4?

can we achieve the same using JAXB?Will it be better than this approach?

Why are you casting to a NodeList but assigning it to a Node?

@ziggy, XPath never existed in JDK 1.4.

How to retrieve element value of XML using Java? - Stack Overflow

java xml
Rectangle 27 14

public static String getTagValue(String xml, String tagName){
    return xml.split("<"+tagName+">")[1].split("</"+tagName+">")[0];
}
Document doc = Jsoup.parse(xml, "", Parser.xmlParser());
for (Element e : doc.select("Request")) {
    System.out.println(e);
}

How to retrieve element value of XML using Java? - Stack Overflow

java xml
Rectangle 27 1

if you need to pass simple data to your newly created iFrame, you can use query string in src of your iFrame. when creating your iFrame:

var winLoc = window.location.href; //I think this is what you want to send to your iFrame and populate field value

iframe.src = chrome.runtime.getURL('popup.html?'+winLoc );

in your iFrame script split url:

var activeUrl = location.href.split('?')[1];  
//activeUrl now contains passed data

this way you can concatenate as many "simple" data as you like

javascript - Set element value in iFrame - Chrome Extension - Stack Ov...

javascript iframe google-chrome-extension
Rectangle 27 1

Because you want to set a value inside your Iframe created dynamically in a webpage in Chrome and you need to do this using only javascript you need to refer to postMessage to dispatch your data from the main page to the Iframe.

In this page you see an Iframe pointing to a different domain so you cannot act directly on the content inside for security reasons (refers to CORS). Using the postMessage you can send data to your Iframe simply:

myIframe.postMessage(dataToSendToIframe, 'http://localhost:63342');

On the other side, the Iframe (because you can controll it) must contain or be like to:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
    <script>
        window.onload = function() {
            document.getElementById('titleH1').textContent = 'Iframe on different domain: ' + window.location.href;
            var inputUrl = document.getElementById('url');
            function receiveMessage(e) {
                var origin = e.origin || e.originalEvent.origin;
                // verify the message arrive from the right origin, if not reject
                if (e.origin !== "http://localhost:33232")
                    return;
                document.getElementById(e.data.inputId).value = e.data.inputValue;
            }
            window.addEventListener('message', receiveMessage);
        }
    </script>
</head>
<body>
<h1 id="titleH1">Iframe on different domain</h1>
<form method="post">
    <input id="url" type="text">
</form>
</body>
</html>

In the Iframe you can see the listener for incoming messages:

function receiveMessage(e) {

You, in the listener, have to use the domain/origin to controll if accept or not the incoming message.

In the following a snapshot (from main page I write something in the input field and press the button and so a postmessage sends this data to the iframe running on a different domain setting the input field):

javascript - Set element value in iFrame - Chrome Extension - Stack Ov...

javascript iframe google-chrome-extension
Rectangle 27 4

There are a number of different ways to do this. You might want to check out XStream or JAXB. There are tutorials and the examples.

How to retrieve element value of XML using Java? - Stack Overflow

java xml
Rectangle 27 1

There are two general ways of doing that. You will either create a Domain Object Model of that XML file, take a look at this

and the second choice is using event driven parsing, which is an alternative to DOM xml representation. Imho you can find the best overall comparison of these two basic techniques here. Of course there are much more to know about processing xml, for instance if you are given XML schema definition (XSD), you could use JAXB.

How to retrieve element value of XML using Java? - Stack Overflow

java xml
Rectangle 27 41

The less complicated answer is to use .contents() to get at the iframe. Interestingly, though, it returns a different value from what I get using the code in my original answer, due to the padding on the body, I believe.

$('iframe').contents().height() + 'is the height'

This is how I've done it for cross-domain communication, so I'm afraid it's maybe unnecessarily complicated. First, I would put jQuery inside the iFrame's document; this will consume more memory, but it shouldn't increase load time as the script only needs to be loaded once.

Use the iFrame's jQuery to measure the height of your iframe's body as early as possible (onDOMReady) and then set the URL hash to that height. And in the parent document, add an onload event to the iFrame tag that will look at the location of the iframe and extract the value you need. Because onDOMReady will always occur before the document's load event, you can be fairly certain the value will get communicated correctly without a race condition complicating things.

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

...and in the parent document:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Hi Andrew so far very good help here. contents() works great, but I still need to test it with a bandwidth throttler. Maybe you can use the innerHeight() property. I have a problem in FF (OSX) using your solution putting the height in the hash. FF seems to keep on loading the getDocumentHeight() function in an infinitive loop? Safari is fine..

Interesting. I've added a check that prevents the setting of the hash if there's already a value there. You may need to tweak this if you are loading Help.php with a hash value (e.g. <iframe src="../Help.php#introduction" />)

By the way, Assuming you can adjust for the difference in height, you probably needn't use the hash to communicate out of the iframe. If you do use the hash method, putting a sleep(5) in your Help.php should also be a good way of testing for any race conditions. If the iframe does somehow fire onLoad before onDOMReady, it should show up here.

not work in ie11 , firefox40

jquery get height of iframe content when loaded - Stack Overflow

jquery iframe height onload
Rectangle 27 2

To retrieve the pubDate content you can use the casper.fetchText function, but it has a drawback that it concatenates all text nodes into one string:

casper.echo(casper.fetchText("pubDate"));

would print

To actually retrieve the text separately you can use casper.getElementsInfo which works on multiple elements and provides the text property. A simple mapping afterwards generates an array that you can work on afterwards:

var pubDates = casper.getElementsInfo("pubDate").map(function(elementInfo){
    return elementInfo.text; // or even `return new Date(elementInfo.text)`
});

But since you only want the latest one and RSS feed are sorted newest to oldest, you can simply use the first one (note the lack of an s in getElementInfo):

var pubDate = casper.getElementInfo("pubDate").text;

You previous approach would have worked, if you would have done this in the page context. The clientutils module is only accessible in the page context (inside casper.evaluate).

var pubDate = this.evaluate(function(){
    return __utils__.getElementByXPath('//pubDate').innerText;
});

Note that __utils__ has two underscores on both sides. Also you cannot pass DOM elements from page context out to casper context, but you can pass strings and other primitive objects. Therefore I returned the innerText property of the DOM element. The documentation says this:

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

javascript - Extract XML element value from a RSS feed - Stack Overflo...

javascript xml xpath rss casperjs
Rectangle 27 1

innerDoc.getElementById("imageLoc").hide();

...is failing because DOM elements don't have a function called hide on them. That's a jQuery thing.

You can wrap the element in a jQuery instance:

$(innerDoc.getElementById("imageLoc")).hide();

This fires off the second alert, but doesnt do anything to the control.

I've added how I loaded the iFrame

@NewAmbition: Still doesn't tell us anything about the content of the iframe, which is important given you're saying that the code above isn't doing anything to that content.

asp.net - Using jQuery to get a value from an element in an iFrame - S...

jquery asp.net iframe
Rectangle 27 2

for one thing, your markup would be bad as you've got duplicate id attributes. But the answer to your problem is pretty simple. Basically you just retrieve the value from the child element with name="ip_id" and manipulate the SRC attribute of an iframe inside a modal, then show it. I haven't tested this, but try something likeso:

<a  class='pop'>                  
    Check
    <input name='ip_id' type='hidden' value='94.45.43.42'> 
</a>

<a class='pop' data-toggle='popover' data-trigger='focus'>                  
    Check
    <input name='ip_id' type='hidden' value='83.218.164.204'> 
</a>            

<div class="modal fade" id="popWin">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">
          Popup
        </h4>
        <div id="err"></div>
      </div>
      <div class="modal-body">
        <iframe id="formWin" src="" style="width:500px; height:500px; border:0px; overflow: hidden; scrolling="yes">
        </iframe>            
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script type="text/javascript">
$(document).ready(function(){

    $('.pop').click(function(){
        var srcVal = 'http://ip-score.com/checkip/' + $(this).find('[name="ip_id"]').val()
        $('#formWin').attr('src', srcVal);
        $('#popWin').modal('show');
    });

});
</script>

UPDATED : It's ugly as sin, but since you asked for it, this works:

$(document).ready(function(){
    var src = 'http://ip-score.com/checkip/'+$(this).children("#ip_id").val();
$('[data-toggle=popover]').popover({
    html : true, 
    content: function () {  
        return $('<iframe height="200" width="200"></iframe>').attr('src', src)

    },

    placement: 'bottom'
});
});

IP address is not added to. In the iframe is displayed on the link without IP Now src =ip-score.com/checkip , without IP

javascript - Display iframe in Bootstrap popup - Stack Overflow

javascript twitter-bootstrap iframe popup
Rectangle 27 88

The IFRAME element may be a security risk if your site is embedded inside an IFRAME on hostile site. Google "clickjacking" for more details. Note that it does not matter if you use <iframe> or not. The only real protection from this attack is to add HTTP header X-Frame-Options: DENY and hope that the browser knows its job.

In addition, IFRAME element may be a security risk if any page on your site contains an XSS vulnerability which can be exploited. In that case the attacker can expand the XSS attack to any page within the same domain that can be persuaded to load within an <iframe> on the page with XSS vulnerability. This is because content from the same origin (same domain) is allowed to access the parent content DOM (practically execute JavaScript in the "host" document). The only real protection methods from this attack is to add HTTP header X-Frame-Options: DENY and/or always correctly encode all user submitted data (that is, never have an XSS vulnerability on your site - easier said than done).

That's the technical side of the issue. In addition, there's the issue of user interface. If you teach your users to trust that URL bar is supposed to not change when they click links (e.g. your site uses a big iframe with all the actual content), then the users will not notice anything in the future either in case of actual security vulnerability. For example, you could have an XSS vulnerability within your site that allows the attacker to load content from hostile source within your iframe. Nobody could tell the difference because the URL bar still looks identical to previous behavior (never changes) and the content "looks" valid even though it's from hostile domain requesting user credentials.

If somebody claims that using an <iframe> element on your site is dangerous and causes a security risk, he does not understand what <iframe> element does, or he is speaking about possibility of <iframe> related vulnerabilities in browsers. Security of <iframe src="..."> tag is equal to <img src="..." or <a href="..."> as long there are no vulnerabilities in the browser. And if there's a suitable vulnerability, it might be possible to trigger it even without using <iframe>, <img> or <a> element, so it's not worth considering for this issue.

However, be warned that content from <iframe> can initiate top level navigation by default. That is, content within the <iframe> is allowed to automatically open a link over current page location (the new location will be visible in the address bar). The only way to avoid that is to add sandbox attribute without value allow-top-navigation. For example, <iframe sandbox="allow-forms allow-scripts" ...>. Unfortunately, sandbox also disables all plugins, always. For example, Youtube content cannot be sandboxed because Flash player is still required to view all Youtube content. No browser supports using plugins and disallowing top level navigation at the same time.

html - Why are iframes considered dangerous and a security risk? - Sta...

html security iframe
Rectangle 27 88

The IFRAME element may be a security risk if your site is embedded inside an IFRAME on hostile site. Google "clickjacking" for more details. Note that it does not matter if you use <iframe> or not. The only real protection from this attack is to add HTTP header X-Frame-Options: DENY and hope that the browser knows its job.

In addition, IFRAME element may be a security risk if any page on your site contains an XSS vulnerability which can be exploited. In that case the attacker can expand the XSS attack to any page within the same domain that can be persuaded to load within an <iframe> on the page with XSS vulnerability. This is because content from the same origin (same domain) is allowed to access the parent content DOM (practically execute JavaScript in the "host" document). The only real protection methods from this attack is to add HTTP header X-Frame-Options: DENY and/or always correctly encode all user submitted data (that is, never have an XSS vulnerability on your site - easier said than done).

That's the technical side of the issue. In addition, there's the issue of user interface. If you teach your users to trust that URL bar is supposed to not change when they click links (e.g. your site uses a big iframe with all the actual content), then the users will not notice anything in the future either in case of actual security vulnerability. For example, you could have an XSS vulnerability within your site that allows the attacker to load content from hostile source within your iframe. Nobody could tell the difference because the URL bar still looks identical to previous behavior (never changes) and the content "looks" valid even though it's from hostile domain requesting user credentials.

If somebody claims that using an <iframe> element on your site is dangerous and causes a security risk, he does not understand what <iframe> element does, or he is speaking about possibility of <iframe> related vulnerabilities in browsers. Security of <iframe src="..."> tag is equal to <img src="..." or <a href="..."> as long there are no vulnerabilities in the browser. And if there's a suitable vulnerability, it might be possible to trigger it even without using <iframe>, <img> or <a> element, so it's not worth considering for this issue.

However, be warned that content from <iframe> can initiate top level navigation by default. That is, content within the <iframe> is allowed to automatically open a link over current page location (the new location will be visible in the address bar). The only way to avoid that is to add sandbox attribute without value allow-top-navigation. For example, <iframe sandbox="allow-forms allow-scripts" ...>. Unfortunately, sandbox also disables all plugins, always. For example, Youtube content cannot be sandboxed because Flash player is still required to view all Youtube content. No browser supports using plugins and disallowing top level navigation at the same time.

html - Why are iframes considered dangerous and a security risk? - Sta...

html security iframe
Rectangle 27 2

or add id (for example languageId) to the hidden element and try

alert(parent.document.getElementById("languageId").value);

javascript - Getting parent value in an iframe? - Stack Overflow

javascript jquery html html5
Rectangle 27 2

or add id (for example languageId) to the hidden element and try

alert(parent.document.getElementById("languageId").value);

javascript - Getting parent value in an iframe? - Stack Overflow

javascript jquery html html5
Rectangle 27 1

Retrieve two values from a modal dialog:

With {{theme}} in the modal dialog, I get the value of the buttons. Outside the modal dialog, it do not work.

In the main window, you can get what was selected in the dialog window like this:

<!DOCTYPE html>
<html>

<head>
  <!-- For html5 (default is UTF-8) -->
  <meta charset="UTF-8"> 
  <!-- For Bootstrap -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- For Bootstrap -->

  <title>Test</title>

  <!--Bootstrap3 -->
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  <!-- app.css -->
  <link href="app.css" rel="stylesheet">
</head>

<body ng-app="myApp">

<div ng-controller="MainWindowCtrl">
  <button class="btn btn-default" ng-click="open()">Open modal dialog window</button>
  <div ng-show="main_data.theme">Theme from the modal dialog was: {{main_data.theme}}</div>
  <div ng-show="main_data.border">Border from the modal dialog was: {{main_data.border}}</div>
</div>

<!-- Angular 1.3.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>

<!-- Angular UI-Bootstrap 0.12 -->
<script src="angular-ui-bootstrap-0.12.js"></script>

<!-- app.js -->
<script src="app.js"></script>
</body>
</html>
var app = angular.module("myApp", ['ui.bootstrap']);

app.controller('MainWindowCtrl', ['$scope', '$modal', function($scope, $modal) {

  $scope.open = function() {

    $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'DialogWindowCtrl',
    })

    .result.then(function(dialog_data) {
      $scope.main_data = dialog_data;
      //equivalent to: $scope.main_data = {theme: 'selected theme', border: 'selected border'}
    });

  };

}]);

app.controller('DialogWindowCtrl', ['$scope', '$modalInstance',  function($scope, $modalInstance) {

  var dialogWindow = $modalInstance;

  $scope.dialog_data = {
    theme: 'theme1',
    border: 'solid'
  };

  $scope.setTheme = function(theme) {
    $scope.dialog_data.theme = theme;
  }

  $scope.ifThemeIs = function(theme) {
    return $scope.dialog_data.theme === theme;
  }

  $scope.setBorder = function(border) {
    $scope.dialog_data.border = border;
  }

  $scope.ifBorderIs = function(border) {
    return $scope.dialog_data.border === border;
  }

  $scope.ok = function () {
    dialogWindow.close($scope.dialog_data);  //***PASS DATA TO MAIN WINDOW***
  };

  $scope.cancel = function () {
    dialogWindow.dismiss('cancel');
  };

}]);
<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>

<div class="modal-body">
  <h4>Theme:</h4>
  <div class="btn-group btn-theme">
    <button class="btn btn-default btn-theme-label" 
           ng-click="setTheme('theme1')"
           ng-class="{active: ifThemeIs('theme1')}">Light</button> 
    <button class="btn btn-default btn-theme-label"
           ng-click="setTheme('theme2')"
           ng-class="{active: ifThemeIs('theme2')}">Dark</button>
    <button class="btn btn-default btn-theme-label" 
           ng-click="setTheme('theme3')"
           ng-class="{active: ifThemeIs('theme3')}">Grey</button>
  </div>
  <div>Current theme choice: {{dialog_data.theme}}</div>

  <h4>Border:</h4>
  <div class="btn-group btn-theme">
    <button class="btn btn-default btn-theme-label" 
           ng-click="setBorder('solid')"
           ng-class="{active: ifBorderIs('solid')}">Solid</button>
    <button class="btn btn-default btn-theme-label" 
           ng-click="setBorder('dashed')"
           ng-class="{active: ifBorderIs('dashed')}">Dashed</button>
  </div>
  <div>Current border choice: {{dialog_data.border}}</div>
</div>

<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

@ 7stud, works like a charm! Thank you so much. Ive learned the modal has also its own controller right?

@mm1975, Yes. I edited my post and changed some of the variable names around to make it clearer what is going on, but briefly: 1) You use ng-click to set the value of a variable on the dialog's $scope. 2) When the dialog's OK button is clicked, the value of the variable is passed to the dialog's close() function. The value is then retrieved in the other controller using the .result property for the dialog. The value is then attached to another $scope object, whereupon the value can be retrieved on your main html page.

Thank you! One more question: Ive tried to add one more selection in the dialog, called 'border'. How do get the result in the modalInstance.result.then(function(selectedTheme) {..}. Ive tried to do this with (selectedTheme, selectedBorder) but it doesnt work. Thanks

@mm1975, Instead of passing just the single value $scope.dialog.theme to $modalInstance.close(), you can pass the whole object, e.g. $modalInstance.close($scope.dialog). Then in the dialog window, you can use ng-click to set as many key/value pairs on $scope.dialog as you want. I'll post an example, which also highlights the button that was clicked.

angularjs - Change class of an element with a radio button in a modal ...

angularjs angularjs-directive
Rectangle 27 2

Instead of setting the src attribute of the iframe to the PDF, set it to a wrapper HTML-file, which contains a simple div:

<!DOCTYPE html>
<html style="height:100%;">
<head>
</head>
<body style="height:100%;">
    <div id="divContents" style="height:100%;"></div>
</body>
</html>

In javascript the contents of the div is set to an object element. Unfortunately slightly different versions are needed to work reliable on all browsers (tested on IE, Firefox and Chrome):

var embed = '<object type="application/pdf" width="100%" height="100%"';
if (msie) {
    embed += '><param name="src" value="' + pdf + '"/>';
}
else if (chrome) {
    embed += ' src="' + pdf + '">';
}
else {
    embed += ' data="' + pdf + '">';
}
embed += '</object>';
$("#divContents").html(embed);

I've finally found the actual cause of the failure in Chrome: It's the Accept-Ranges:bytes field, without it Chrome will not work when the data attribute is used.

  • So if your server is capable of supporting the Accept-Ranges field, you should make sure it is returned to the client. In that case you can use the pdfobject library to display the PDF in a frame or div.
  • If not, you can use the code above to display the PDF in a frame or div.

Chrome and Firefox are not displaying most PDF documents in an iframe ...

firefox pdf google-chrome iframe
Rectangle 27 2

Instead of setting the src attribute of the iframe to the PDF, set it to a wrapper HTML-file, which contains a simple div:

<!DOCTYPE html>
<html style="height:100%;">
<head>
</head>
<body style="height:100%;">
    <div id="divContents" style="height:100%;"></div>
</body>
</html>

In javascript the contents of the div is set to an object element. Unfortunately slightly different versions are needed to work reliable on all browsers (tested on IE, Firefox and Chrome):

var embed = '<object type="application/pdf" width="100%" height="100%"';
if (msie) {
    embed += '><param name="src" value="' + pdf + '"/>';
}
else if (chrome) {
    embed += ' src="' + pdf + '">';
}
else {
    embed += ' data="' + pdf + '">';
}
embed += '</object>';
$("#divContents").html(embed);

I've finally found the actual cause of the failure in Chrome: It's the Accept-Ranges:bytes field, without it Chrome will not work when the data attribute is used.

  • So if your server is capable of supporting the Accept-Ranges field, you should make sure it is returned to the client. In that case you can use the pdfobject library to display the PDF in a frame or div.
  • If not, you can use the code above to display the PDF in a frame or div.

Chrome and Firefox are not displaying most PDF documents in an iframe ...

firefox pdf google-chrome iframe
Rectangle 27 1

The code you've posted appears to be syntactically correct, and the conditional statement in the callback is obviously coming through as true (hence the alert) - which must mean that it's unable to retrieve the value of the element.

Im pretty sure this is because jQuery is being initialised when the document (DOM) is ready, so the injected HTML doesn't actually exist at that point - it's injected in to the DOM later; dynamically.

I can't seem to find any jConfirm examples that utilise HTML forms like that; so I'm going to go out on a limb and assume this is the issue.

There is a very good discussion about this issue on the jQuery website. You essentially need to reload the DOM so jQuery becomes aware of all the elements it's working with. It can cause alsorts of issues when embedding HTML in pages dynamically, where event handlers are concerned you can just use $.live() (as demonstrated here) however accessing the values of such elements appears to be a much more complicated affair!

If this is the case then a simple little workaround would be to do something like this...

var title; //in global scope.. yucky!

/* set a -live- event listener to fire whenever 
** postTitle is modified; dumping the value in to
** our global var */
$('#postTitle').live('change',function(r){
    title = $(this).val();
});

/* then just access the 'title' var */

All this simply does is have an event listener that is attached to any elements that have the id of 'postTitle' regardless of when they were inserted in to the DOM. Whenever a 'postTitle' is changed this event listener is called and dumps the new value in to a global variable; i.e - allowing you to access it anywhere in scope - so your whole codebase. (I wouldn't usually advocate global variables - but in this case it's more a proof of concept/troubleshooting step ;))

As this may not be the issue though, try and see if you can access the value through a developer console. (firebug etc) Then try checking different browsers and see if it's a universal behaviour. I think the most likely problem is going to be the DOM though; in which case I can't think of many ways of working around it without using global vars. (Well, no simple ways)

jquery - jConfirm access value from injected HTML element - Stack Over...

jquery
Rectangle 27 1

I have a debugging CSS tier that gives an outline to elements with invalid or obsolete code. While not exactly an answer someone may find it helpful as I was trying to find a way to visually ensure that any content embedded with an iframe had an allowfullscreen="true" attribute/value. This work-around uses a sibling selector and it works well-enough.

iframe:not([allowfullscreen]) + *::after
{
 background-color: #f00;
 border: #f00 solid 4px;
 color: #fff;
 content: 'Missing allowfullscreen attribute on iframe!' !important;
 font-size: 24px;
 padding: 4px;
}

If you're looking to position relative to the iframe my next recommendation would be to set the iframe's parent position to position: relative; and then set position: absolute; on a third element to match the iframe's rendering. Lastly you could finally apply the ::after on that third element.

css - Is it somehow possible to style an iframes before/after pseudo-e...

css iframe styling pseudo-element css-content