\n\n\n", "statics": {"paragraph": 1, "paragraph.text": 1, "image": 1}}
diff --git a/bench/data/groundtruth/blog_plainspot.jsonl b/bench/data/groundtruth/blog_plainspot.jsonl
new file mode 100644
index 00000000..6fd8ddcb
--- /dev/null
+++ b/bench/data/groundtruth/blog_plainspot.jsonl
@@ -0,0 +1 @@
+{"url": "http://plainblogaboutpolitics.blogspot.com/2011/12/acceptable.html?m=1", "content": "asking that very question\n\npointed out\n", "main_html": "
\nSince I've commented quite a bit on polling that as I read it shows Mitt Romney broadly acceptable to most Republican voters, I definitely need to say something about a new poll today that doesn't exactly show that. Gallup got around to actually asking that very question (\"Please tell me if you would find ___ to be an acceptable nominee for president from the Republican Party, or not\"). The answers mostly showed the weakness of the field, with six of the eight candidates asked about scoring well below 50% acceptable. But the clear most-acceptable candidate is Newt Gingrich, with a 62/34 acceptable/not acceptable ratio, while Romney is only at 54/41. \n \nThere are a lot of ways to look at this, but overall it's certainly a piece of evidence that the anti-Romney vote is, well, around 40%. Only a piece of evidence, however. It's not clear how hard these kinds of numbers might be, in either direction. On the positive side, it seems unlikely that Newt would remain over 60% once more Republicans know that he's been lobbying for Freddie Mac, and supported the individual mandate on health insurance, and made a climate change ad with Nancy Pelosi, and all the rest of it. On the other hand, it's certainly possible that the \"unacceptable\" answers are awful soft, for Romney and for everyone else. \n \nIn particular, as Greg pointed out, Romney only does three points better on the \"acceptable\" scale with moderate Republicans than does Newt. This isn't the first indication we've had that Romney isn't doing as well with moderate Republicans as one would think he should be. Whether that means he has some room to grow or that he's just not an appealing politician is, I guess, still entirely up in the air at this point. \n \nI still overall don't see a low cap on Romney's support, but of course all the evidence counts, and polling in general begins to be a little more important the closer we get to actual voting. I'll be continuing to track anything more we get on this one.\n\n
\nSince I've commented quite a bit on polling that as I read it shows Mitt Romney broadly acceptable to most Republican voters, I definitely need to say something about a new poll today that doesn't exactly show that. Gallup got around to actually asking that very question (\"Please tell me if you would find ___ to be an acceptable nominee for president from the Republican Party, or not\"). The answers mostly showed the weakness of the field, with six of the eight candidates asked about scoring well below 50% acceptable. But the clear most-acceptable candidate is Newt Gingrich, with a 62/34 acceptable/not acceptable ratio, while Romney is only at 54/41. \n \nThere are a lot of ways to look at this, but overall it's certainly a piece of evidence that the anti-Romney vote is, well, around 40%. Only a piece of evidence, however. It's not clear how hard these kinds of numbers might be, in either direction. On the positive side, it seems unlikely that Newt would remain over 60% once more Republicans know that he's been lobbying for Freddie Mac, and supported the individual mandate on health insurance, and made a climate change ad with Nancy Pelosi, and all the rest of it. On the other hand, it's certainly possible that the \"unacceptable\" answers are awful soft, for Romney and for everyone else. \n \nIn particular, as Greg pointed out, Romney only does three points better on the \"acceptable\" scale with moderate Republicans than does Newt. This isn't the first indication we've had that Romney isn't doing as well with moderate Republicans as one would think he should be. Whether that means he has some room to grow or that he's just not an appealing politician is, I guess, still entirely up in the air at this point. \n \nI still overall don't see a low cap on Romney's support, but of course all the evidence counts, and polling in general begins to be a little more important the closer we get to actual voting. I'll be continuing to track anything more we get on this one.\n\n
Kudos for adapting your views a bit as new data comes in. I think you've been a step behind on the Newt thing because your analysis is so thoroughly grounded in political theory, data and historical precedent. Sure, that stuff still matters, but in the 2012 Republican primaries, all bets are off. The GOP and their base went nuts after Obama won, pretending otherwise only weakens your analysis.
"I still overall don't see a low cap on Romney's support..."
.
Well as I say, there's no gettin' through to the terminally perceptive. ;-)
And you're right, polling does begin to be a little more important the closer we get to actual voting. But there are exceptions to that rule, for candidates who are well known. Unknowns can see late movement, as they become known (Huntsman?). But knowns, a month out from an election, are captive to events and fortune, because everybody already knows who they are. That's why you see Romney panicking the last few days. He's captive to events and fortune, things like NEWT FRICKING GINGRICH stealing his nomination, if you can believe it.
Willard is a known, and the ABR bloc is at 40% and counting. Heck, that's even bigger than I thought it was.
Anon 4:41, I don't understand -- Mitt Romney's numbers can't move much because he's so well known to the GOP base, while Gingrich's numbers have shifted by tens and dozens of points (depending on the question)? Romney is so much better known than Newt Gingrich that such widespread openness to reevaluating Gingrich doesn't suggest potential willingness to reevaluate Romney? How could that possibly be the case?
Of course the numbers are soft, but I would think they are soft more in the sense that once there is a Republican nominee and everyone starts singing from the same hymnal (see Rushbo's rhetorical gymnastics to support nominee McCain), anyone they nominate will eventually be "acceptable" to 80-90% of Republican primary voters.
This is how Alan Keyes got 27% as a carpet bagging IL Senate candidate when the original nominee was forced out by a sex scandal. Even the most ridiculous campaign by a painfully flawed replacement candidate gets 27% of Republicans. It's an utter floor.
However, that doesn't happen until there is an actual nominee - and it's during the upcoming primaries where these numbers still matter to some degree. Even still, second place?
You'd have to reference my discussion of the other day, but I'll repeat a bit of it here. Gingrich's movement is directly related to the existence of the ABR bloc. The fact that the ABR crowd is circling back around to Gingrich, the guy that they summarily rejected at the commencement of their long slog through the ABR process, is the final proof of the magnitude of the ABR bloc (and I doubt there's anybody but the terminally perceptive who need that final proof, but here it is.).
These people are coming back around, full circle, to NEWT FRICKING GINGRICH. Anybody who doesn't get the significance of this must be trapped in an impenetrable bubble somewhere.
Gingrich is one of the events and fortunes that poor Willard has to accept, because he can't move the needle on his own. And Gingrich is just fortunate that Willard is out there. This all has nothing to do with him... he's just like Willard in that way. That's why I'm expecting him to step on a landmine soon, like he does. He thinks he's standing on 3rd because he hit a triple.
Did they conduct this poll earlier in the race, when Cain/Bachmann/Perry/Trump/et al were in the lead? If they did, it might give us a clue how useful this metric really is. If, for example, Trump was considered broadly "acceptable" by GOP voters at the time of his surge, that would be evidence that this metric is pretty meaningless.
Unfortunately, no; it's the first time they've run it this cycle. And I spent some time looking for their 2008 results, but couldn't find them, so either I'm lame with the Google or they didn't do it. Both are possible!
As far as substance...Romney is about where McCain was. FWIW. And in the earlier one, Newt was 43/52, again FWIW.
I'll stick with what I said: it's evidence, but it's not anything close to definitive. As usual, the most important thing to remember is that most GOP voters have paid very little attention to the nomination race so far, and there's good reason to believe that their opinions are very soft.
Yeah, but the McCain one was from mid-2006. Notice that Obama isn't even mentioned, yet several candidates who never entered the race (Condi, Jeb, Newt, Al Gore, etc.) are included in the poll. I'd take a poll from a few weeks before the primary just a tad more seriously than one from eighteen months before.
(I got to these results simply by typing site:gallup.com "acceptable nominees" into Google. It turned up nine hits, most of them references to the recent poll.)
Anon 5:39: okay, so it's a more complicated claim: they know Newt and know they don't like him, but he looks very different against just Romney than he does against the whole field. In the former context, he's more than acceptable. Is that right?
So, that makes sense and is perfectly plausible, but isn't it circular? "We can tell ABR supporters won't change their minds about Romney, because they'll even change their minds about Gingrich rather than support Romney" partially relies on the claim it's trying to prove. This could certainly still be right -- not all circles are vicious -- but I had thought you were making the stronger claim that this provided independent evidence for the hardness of the hard core of ABR.
So, this goes back to your epistemological critique, which is both broad and deep (it's pretty hard to get out of a self-reinforcing bubble!). Liberals can't correctly interpret the information they're -- we're -- given, so it's pointless to try to reason by offering isolated facts, even in response to purely empirical questions (like this one about the strength of the ABR bloc). Rather, the best strategy is to present a coherent alternative worldview, so that we can see our bubble, and that there's something outside it.
-- Am I understanding you correctly? If so, that's a very deep puzzle about justification, and probably the best case one could make for gadfly behavior. Hm...
Not too mucb interested in what you formulate as conclusion, classicist. You can go on ahead with that, alone.
We have what we have, right in front of our faces. We don't have what we don't have in front of our faces. The only question is, are we paying attention to what we have, and what we don't have, right in front of our faces?
I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:
", "content": [{"c": "I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:", "t": "text"}]}, {"type": "paragraph", "raw_content": "
[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}
", "content": [{"c": "[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Is there any way to turn this off or any way to get around it?
", "content": [{"c": "Is there any way to turn this off or any way to get around it?", "t": "text"}]}, {"type": "paragraph", "raw_content": "
The iframe has no src attribute and the contents are set using:
", "content": [{"c": "The iframe has no", "t": "text"}, {"c": "src", "t": "code-inline"}, {"c": "attribute and the contents are set using:", "t": "text"}]}, {"type": "code", "raw_content": "frame.open();\nframe.write(html);\nframe.close();\n", "inline": false, "content": {"code_content": "frame.open();\nframe.write(html);\nframe.close();", "by": "tag_pre_code"}}]], "main_html": "
I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:
[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}
Is there any way to turn this off or any way to get around it?
The iframe has no src attribute and the contents are set using:
frame.open();\nframe.write(html);\nframe.close();\n", "statics": {"paragraph": 4, "paragraph.text": 5, "paragraph.code-inline": 1, "code": 1}, "url": "https://stackoverflow.com/questions/18327314/how-to-allow-http-content-within-an-iframe-on-a-https-site", "content": "I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:\n\n[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}\n\nIs there any way to turn this off or any way to get around it?\n\nThe iframe has no `src` attribute and the contents are set using:\n\n```\nframe.open();\nframe.write(html);\nframe.close();\n```\n", "html": "\n\n\n\n\n \n\n \n\n html - How to allow http content within an iframe on a https site - Stack Overflow\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n\n\n \n \n\n\n\n\n \n\n\n\n\n\n\n\n \n\n\n\n \n \n \n \n\n\n\n\n\n\n\n\n \n \n \n\n\n\n Skip to main content\n\t
Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframe embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.
\n
\n\n
The best solution I created is to simply use google as the ssl proxy...
Use a Third party such as embed.ly (but it it really only good for well known http APIs).
\n
Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)
\n\n
https://example.com That has a iframe linking to...
\n\n
https://example.com/utilities/redirect.html Which has a simple js redirect script like...
Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.
\n
You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.
\n
\n\n
Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).
\n\n
The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.
\n\n
Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.
\n\n Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally).\n\n
\n\n Just wanted to signal out that the "Create your own redirect script on an https page you control" method no longer works with current versions of Chrom(e|ium) and Firefox, even using JS.\n\n
If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but \u00cf found workaround here: http://foundationphp.com/tutorials/image_proxy.php
\n\n This will not work, since many pages behind iframe don't want to be embedded in an iframe and thus set X-Frame-Options Header to SAMEORIGIN. Even if you are able to bypass this using the proxy, the page would try to load something like /insecurepage.css and your browser will request yourdomain/insecurepage.css\n\n
This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.
\n\n
The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.
\n\n
Plus -- I'm a little weary of relying on Javascript redirects for anything important.
\n\n This is pretty working, but the links inside the site are getting invalid. For example, I have a domain called example.com which has a SSL. I am embedding a iframe with example.net which has no SSL. The example.com has a link like href="/path/file.html" and while clicking it, it is opening as https://example.com/path/file.html instead of http://example.net/path/file.html\n\n
\n \n Commented\n Feb 15, 2016 at 15:13\n \n \n \n \n
\n
\n
\n
\n
\n
\n 1\n
\n
\n
\n
\n\n The link cannot be relative if you would like this to work. In other words, specify the full URL within the href. If this is dynamic there are libraries to grab each segment of the URL in Javascript as well as server side.\n\n
\n\n This solution doesn't allow you to serve http content on a https site. All this does is force http requests as https requests. If the resource doesn't exist on https you'll just get a 404 error instead.\n\n
\n\n This is actually works at least for my needs.. tested it with firefox and confirmed working. My issue is source URL isn't HTTPS compliance while my own website is using HTTPS.\n\n
Using Google as the SSL proxy is not working currently,
\n\n
Why?
\n\n
If you opened any page from google, you will find there is a x-frame-options field in the header.\n
\n\n
\n
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring\n that their content is not embedded into other sites.
\n
\n\n
(Quote from MDN)
\n\n
One of the solution
\n\n
Below is my work around for this problem:
\n\n
Upload the content to AWS S3, and it will create a https link for the resource. \nNotice: set the permission to the html file for allowing everyone view it.
\n\n
After that, we can using it as the src of iframe in the https websites.\n
You will always get warnings of blocked content in most browsers when trying to display non secure content on an https page. This is tricky if you want to embed stuff from other sites that aren't behind ssl. You can turn off the warnings or remove the blocking in your own browser but for other visitors it's a problem.
\n\n
One way to do it is to load the content server side and save the images and other things to your server and display them from https.
\n\n
You can also try using a service like embed.ly and get the content through them. They have support for getting the content behind https.
\n\n if you scrape the content and show it on your site their is Always the risk of cross site scripting. So a god solution is to scrape the content on a separate url and present the data in an iframe from that url with https. In that way you prevent crosssite scripting on your mainsite and session hijacking.\n\n
You could try scraping whatever you need with PHP or another server side language, then put the iframe to the scraped content. Here's an example with PHP:
\n \n Commented\n May 11, 2014 at 6:54\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n @dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed.\n\n
\n\n This works, but its effectively double loading the content and therefore loading time as your server scrapes and then re-serves the content...\n\n
If your use case is about a few, rarely changing URLs to embed into the iframe, you can simply set up a reverse proxy for this on your own server and configure it so that one https URL on your server maps to one http URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is \"only\" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.
\n\n
If for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.
\n\n mitmproxy is a debugging tool, not production proxying system. ngrok is tunnelling service, mostly for development servers, I don't understand how it can be useful for this.\n\n
\n\n @kolen It's not about the tools, it's about the idea of using a reverse proxy for this, not mentioned in the other answers yet. Changing to Apache now, which is a much more common way to do a reverse proxy.\n\n
In this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.
\n\n i tried below <iframe src="https://www.google.ie/gwt/x?u=[http://www.mootrack.com/page/share.jsp?mapType=google&token=S1711650600yUyP315023260c762b627b44263e17f998a4272d1c]"></iframe> - it doent work for me\n\n
I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:
", "content": [{"c": "I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:", "t": "text"}]}, {"type": "paragraph", "raw_content": "
[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}
", "content": [{"c": "[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Is there any way to turn this off or any way to get around it?
", "content": [{"c": "Is there any way to turn this off or any way to get around it?", "t": "text"}]}, {"type": "paragraph", "raw_content": "
The iframe has no src attribute and the contents are set using:
", "content": [{"c": "The iframe has no", "t": "text"}, {"c": "src", "t": "code-inline"}, {"c": "attribute and the contents are set using:", "t": "text"}]}, {"type": "code", "raw_content": "frame.open();\nframe.write(html);\nframe.close();\n", "inline": false, "content": {"code_content": "frame.open();\nframe.write(html);\nframe.close();", "by": "tag_pre_code"}}, {"type": "list", "raw_content": "
", "content": {"items": [[[{"c": "stackoverflow.com/questions/9280665/\u2026", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "chiliNUT", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Aug 20, 2013 at 5:30", "t": "text"}]], [[{"c": "made an edit. The src is not set as the content is written into the iframe", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Aug 20, 2013 at 9:36", "t": "text"}]], [[{"c": "1", "t": "text"}, {"c": "Thanks for all the answers. Long story short is proxy the content.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Aug 17, 2014 at 2:50", "t": "text"}]], [[{"c": "@georgephillips would you share the code for proxying the content?", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Gintas_", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "May 5, 2017 at 20:30", "t": "text"}]]], "ordered": false}}, {"type": "title", "raw_content": "
Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframe embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.
", "content": [{"c": "Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an", "t": "text"}, {"c": "iframe", "t": "code-inline"}, {"c": "embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
The best solution I created is to simply use google as the ssl proxy...
", "content": [{"c": "The best solution I created is to simply use google as the ssl proxy...", "t": "text"}]}, {"type": "code", "raw_content": "https://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky\n", "inline": false, "content": {"code_content": "https://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky", "by": "tag_pre_code"}}, {"type": "paragraph", "raw_content": "
Tested and works in firefox.
", "content": [{"c": "Tested and works in firefox.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Use a Third party such as embed.ly (but it it really only good for well known http APIs).
Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)
https://example.com That has a iframe linking to...
https://example.com/utilities/redirect.html Which has a simple js redirect script like...
", "content": {"items": [[[{"c": "Use a Third party such as embed.ly (but it it really only good for well known http APIs).", "t": "text"}]], [[{"c": "Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)", "t": "text"}, {"c": "https://example.com", "t": "code-inline"}, {"c": " That has a iframe linking to... ", "t": "text"}, {"c": "https://example.com/utilities/redirect.html", "t": "code-inline"}, {"c": " Which has a simple js redirect script like...", "t": "text"}]]], "ordered": false}}, {"type": "code", "raw_content": "document.location.href =\"http://thenonsslsite.com\";", "inline": false, "content": {"code_content": "document.location.href =\"http://thenonsslsite.com\";", "by": "tag_code"}}, {"type": "list", "raw_content": "
Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.
You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.
", "content": {"items": [[], [[{"c": "Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.", "t": "text"}]], [[{"c": "You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than ", "t": "text"}, {"c": "it increases seo", "t": "text"}, {"c": ".", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).
", "content": [{"c": "Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).", "t": "text"}]}, {"type": "paragraph", "raw_content": "
The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.
", "content": [{"c": "The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.
", "content": [{"c": "Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.", "t": "text"}]}, {"type": "list", "raw_content": "
10
Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally).CommentedSep 3, 2014 at 1:52
10
The redirect trick seems to work in Firefox only. Chrome still denies loading the insecure content. Are there any other known workarounds?CommentedNov 25, 2014 at 15:07
49
Just wanted to signal out that the \"Create your own redirect script on an https page you control\" method no longer works with current versions of Chrom(e|ium) and Firefox, even using JS.
", "content": {"items": [[[{"c": "10", "t": "text"}, {"c": "Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally).", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Sep 3, 2014 at 1:52", "t": "text"}]], [[{"c": "10", "t": "text"}, {"c": "The redirect trick seems to work in Firefox only. Chrome still denies loading the insecure content. Are there any other known workarounds?", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Nov 25, 2014 at 15:07", "t": "text"}]], [[{"c": "49", "t": "text"}, {"c": "Just wanted to signal out that the \"Create your own redirect script on an https page you control\" method no longer works with current versions of Chrom(e|ium) and Firefox, even using JS.", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "kako-nawao", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 10, 2015 at 15:39", "t": "text"}]], [[{"c": "18", "t": "text"}, {"c": "This answer is invalid to date, any other solutions", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 9, 2017 at 22:15", "t": "text"}]], [[{"c": "28", "t": "text"}, {"c": "The answer should have an option to be labeled as 'deprecated'. It creates confusion unless you read all the comments.", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Nitin", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "May 16, 2017 at 19:44", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
Based on generality of this question, I think, that you'll need to setup your own HTTPS proxy on some server online. Do the following steps:
", "content": [{"c": "Based on generality of this question, I think, that you'll need to setup your own HTTPS proxy on some server online. Do the following steps:", "t": "text"}]}, {"type": "list", "raw_content": "
Prepare your proxy server - install IIS, Apache
Get valid SSL certificate to avoid security errors (free from startssl.com for example)
Write a wrapper, which will download insecure content (how to below)
", "content": {"items": [[[{"c": "Prepare your proxy server - install IIS, Apache", "t": "text"}]], [[{"c": "Get valid SSL certificate to avoid security errors (free from startssl.com for example)", "t": "text"}]], [[{"c": "Write a wrapper, which will download insecure content (how to below)", "t": "text"}]], [[{"c": "From your site/app get ", "t": "text"}, {"c": "https://yourproxy.com/?page=http://insecurepage.com", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but \u00cf found workaround here: http://foundationphp.com/tutorials/image_proxy.php
", "content": [{"c": "If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but \u00cf found workaround here: http://foundationphp.com/tutorials/image_proxy.php", "t": "text"}]}, {"type": "list", "raw_content": "
1
This will not work, since many pages behind iframe don't want to be embedded in an iframe and thus set X-Frame-Options Header to SAMEORIGIN. Even if you are able to bypass this using the proxy, the page would try to load something like /insecurepage.css and your browser will request yourdomain/insecurepage.css
", "content": {"items": [[[{"c": "1", "t": "text"}, {"c": "This will not work, since many pages behind iframe don't want to be embedded in an iframe and thus set X-Frame-Options Header to SAMEORIGIN. Even if you are able to bypass this using the proxy, the page would try to load something like /insecurepage.css and your browser will request ", "t": "text"}, {"c": "yourdomain/insecurepage.css", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "antidote", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Jul 25, 2019 at 12:46", "t": "text"}]], [[{"c": "This solution worked perfectly for me. Found directions for IIS here: ", "t": "text"}, {"c": "techcommunity.microsoft.com/t5/iis-support-blog/\u2026", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Rob10e", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 5, 2021 at 16:33", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
I know this is an old post, but another solution would be to use cURL, for example:
", "content": [{"c": "I know this is an old post, but another solution would be to use cURL, for example:", "t": "text"}]}, {"type": "paragraph", "raw_content": "
This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.
", "content": [{"c": "This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.
", "content": [{"c": "The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Plus -- I'm a little weary of relying on Javascript redirects for anything important.
", "content": [{"c": "Plus -- I'm a little weary of relying on Javascript redirects for anything important.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
This is pretty working, but the links inside the site are getting invalid. For example, I have a domain called example.com which has a SSL. I am embedding a iframe with example.net which has no SSL. The example.com has a link like href=\"/path/file.html\" and while clicking it, it is opening as https://example.com/path/file.html instead of http://example.net/path/file.html
The link cannot be relative if you would like this to work. In other words, specify the full URL within the href. If this is dynamic there are libraries to grab each segment of the URL in Javascript as well as server side.CommentedJul 13, 2016 at 19:55
1
css of the target site under iframe is broken . Please checkCommentedFeb 28, 2019 at 9:21
This way somehow works but css doesnt work at all.CommentedNov 1, 2023 at 9:04
", "content": {"items": [[[{"c": "4", "t": "text"}, {"c": "This is pretty working, but the links inside the site are getting invalid. For example, I have a domain called ", "t": "text"}, {"c": "example.com", "t": "code-inline"}, {"c": " which has a SSL. I am embedding a iframe with ", "t": "text"}, {"c": "example.net", "t": "code-inline"}, {"c": " which has no SSL. The ", "t": "text"}, {"c": "example.com", "t": "code-inline"}, {"c": " has a link like ", "t": "text"}, {"c": "href=\"/path/file.html\"", "t": "code-inline"}, {"c": " and while clicking it, it is opening as ", "t": "text"}, {"c": "https://example.com/path/file.html", "t": "code-inline"}, {"c": " instead of ", "t": "text"}, {"c": "http://example.net/path/file.html", "t": "code-inline"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Sibidharan", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 15, 2016 at 15:13", "t": "text"}]], [[{"c": "1", "t": "text"}, {"c": "The link cannot be relative if you would like this to work. In other words, specify the full URL within the href. If this is dynamic there are libraries to grab each segment of the URL in Javascript as well as server side.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Jul 13, 2016 at 19:55", "t": "text"}]], [[{"c": "1", "t": "text"}, {"c": "css of the target site under iframe is broken . Please check", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 28, 2019 at 9:21", "t": "text"}]], [[{"c": "This way somehow works but css doesnt work at all.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Nov 1, 2023 at 9:04", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
add <meta http-equiv=\"Content-Security-Policy\" content=\"upgrade-insecure-requests\"> in head
This solution doesn't allow you to serve http content on a https site. All this does is force http requests as https requests. If the resource doesn't exist on https you'll just get a 404 error instead.
This is actually works at least for my needs.. tested it with firefox and confirmed working. My issue is source URL isn't HTTPS compliance while my own website is using HTTPS.CommentedDec 14, 2017 at 3:41
Working like charm in chrome Version 76.0.3809.132 (Official Build)CommentedSep 9, 2019 at 7:10
This solution chang http to https and do not add content from http site to https site.CommentedJan 31, 2021 at 16:46
1
Not working anymore.CommentedMar 15, 2022 at 13:13
", "content": {"items": [[[{"c": "37", "t": "text"}, {"c": "This solution doesn't allow you to serve http content on a https site. All this does is force http requests as https requests. If the resource doesn't exist on https you'll just get a 404 error instead.", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Felix", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 20, 2017 at 21:12", "t": "text"}]], [[{"c": "1", "t": "text"}, {"c": "This is actually works at least for my needs.. tested it with firefox and confirmed working. My issue is source URL isn't HTTPS compliance while my own website is using HTTPS.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Dec 14, 2017 at 3:41", "t": "text"}]], [[{"c": "Working like charm in chrome Version 76.0.3809.132 (Official Build)", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Sep 9, 2019 at 7:10", "t": "text"}]], [[{"c": "This solution chang http to https and do not add content from http site to https site.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Jan 31, 2021 at 16:46", "t": "text"}]], [[{"c": "1", "t": "text"}, {"c": "Not working anymore.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Mar 15, 2022 at 13:13", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
Using Google as the SSL proxy is not working currently,
", "content": [{"c": "Using Google as the SSL proxy is not working currently,", "t": "text"}]}, {"type": "title", "raw_content": "
If you opened any page from google, you will find there is a x-frame-options field in the header.\n
", "content": [{"c": "If you opened any page from google, you will find there is a", "t": "text"}, {"c": "x-frame-options", "t": "code-inline"}, {"c": "field in the header.", "t": "text"}]}, {"type": "image", "raw_content": "", "content": {"url": "https://i.sstatic.net/uEYnJ.png", "data": null, "alt": "Google response header", "title": null, "caption": null}}, {"type": "paragraph", "raw_content": "
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring\n that their content is not embedded into other sites.
", "content": [{"c": "The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a", "t": "text"}, {"c": "", "t": "code-inline"}, {"c": ",", "t": "text"}, {"c": "", "by": "tag_pre_code"}}, {"type": "list", "raw_content": "
3
How will you handle images, included JS and CSS files, hyperlinks, and AJAX requests?
@dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed.
Doesnt load css from external page.CommentedNov 1, 2023 at 9:12
", "content": {"items": [[[{"c": "3", "t": "text"}, {"c": "How will you handle images, included JS and CSS files, hyperlinks, and AJAX requests?", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "dotancohen", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "May 11, 2014 at 6:54", "t": "text"}]], [[{"c": "@dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed.", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Grant", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Jun 10, 2014 at 2:57", "t": "text"}]], [[{"c": "1", "t": "text"}, {"c": "This works, but its effectively double loading the content and therefore loading time as your server scrapes and then re-serves the content...", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "ChristoKiwi", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Jan 12, 2015 at 0:56", "t": "text"}]], [[{"c": "Doesnt load css from external page.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Nov 1, 2023 at 9:12", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
Use your own HTTPS-to-HTTP reverse proxy.
", "content": [{"c": "Use your own HTTPS-to-HTTP reverse proxy.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
If your use case is about a few, rarely changing URLs to embed into the iframe, you can simply set up a reverse proxy for this on your own server and configure it so that one https URL on your server maps to one http URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is \"only\" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.
", "content": [{"c": "If your use case is about a few, rarely changing URLs to embed into the", "t": "text"}, {"c": "iframe", "t": "code-inline"}, {"c": ", you can simply set up a reverse proxy for this on your own server and configure it so that one", "t": "text"}, {"c": "https", "t": "code-inline"}, {"c": "URL on your server maps to one", "t": "text"}, {"c": "http", "t": "code-inline"}, {"c": "URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is \"only\" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
If for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.
", "content": [{"c": "If for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.", "t": "text"}]}, {"type": "list", "raw_content": "
1
mitmproxy is a debugging tool, not production proxying system. ngrok is tunnelling service, mostly for development servers, I don't understand how it can be useful for this.
@kolen It's not about the tools, it's about the idea of using a reverse proxy for this, not mentioned in the other answers yet. Changing to Apache now, which is a much more common way to do a reverse proxy.
", "content": {"items": [[[{"c": "1", "t": "text"}, {"c": "mitmproxy", "t": "code-inline"}, {"c": " is a debugging tool, not production proxying system. ", "t": "text"}, {"c": "ngrok", "t": "code-inline"}, {"c": " is tunnelling service, mostly for development servers, I don't understand how it can be useful for this.", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "kolen", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Jul 3, 2018 at 15:52", "t": "text"}]], [[{"c": "@kolen It's not about the tools, it's about the idea of using a reverse proxy for this, not mentioned in the other answers yet. Changing to Apache now, which is a much more common way to do a reverse proxy.", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "tanius", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Oct 12, 2019 at 18:30", "t": "text"}]], [[{"c": "This solution worked perfectly for me. Found directions for IIS here: ", "t": "text"}, {"c": "techcommunity.microsoft.com/t5/iis-support-blog/\u2026", "t": "text"}, {"c": "\n\u2013\u00a0", "t": "text"}, {"c": "Rob10e", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Feb 5, 2021 at 16:31", "t": "text"}]]], "ordered": false}}, {"type": "paragraph", "raw_content": "
Try to use protocol relative links.
", "content": [{"c": "Try to use protocol relative links.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
In this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.
", "content": [{"c": "In this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Where you are trying to use it.CommentedMay 18, 2020 at 4:16
2
Doesn't work for me. And </frame> should be </iframe>.CommentedDec 31, 2021 at 5:21
i tried below <iframe src=\"https://www.google.ie/gwt/x?u=[http://www.mootrack.com/page/share.jsp?mapType=google&token=S1711650600yUyP315023260c762b627b44263e17f998a4272d1c]\"></iframe> - it doent work for meCommentedMar 27, 2024 at 4:33
", "content": {"items": [[[{"c": "Where you are trying to use it.", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "May 18, 2020 at 4:16", "t": "text"}]], [[{"c": "2", "t": "text"}, {"c": "Doesn't work for me. And ", "t": "text"}, {"c": "", "t": "code-inline"}, {"c": " should be ", "t": "text"}, {"c": "", "t": "code-inline"}, {"c": ".", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Dec 31, 2021 at 5:21", "t": "text"}]], [[{"c": "i tried below ", "t": "text"}, {"c": "", "t": "code-inline"}, {"c": " - it doent work for me", "t": "text"}, {"c": "Commented", "t": "text"}, {"c": "Mar 27, 2024 at 4:33", "t": "text"}]]], "ordered": false}}, {"type": "title", "raw_content": "
\nNot the answer you're looking for? Browse other questions tagged
", "content": {"title_content": "Not the answer you're looking for? Browse other questions tagged", "level": "2"}}, {"type": "list", "raw_content": "
Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframe embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.
The best solution I created is to simply use google as the ssl proxy...
Use a Third party such as embed.ly (but it it really only good for well known http APIs).
Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)
https://example.com That has a iframe linking to...
https://example.com/utilities/redirect.html Which has a simple js redirect script like...
Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.
You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.
Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).
The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.
Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.
10
Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally).CommentedSep 3, 2014 at 1:52
10
The redirect trick seems to work in Firefox only. Chrome still denies loading the insecure content. Are there any other known workarounds?CommentedNov 25, 2014 at 15:07
49
Just wanted to signal out that the \"Create your own redirect script on an https page you control\" method no longer works with current versions of Chrom(e|ium) and Firefox, even using JS.
If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but \u00cf found workaround here: http://foundationphp.com/tutorials/image_proxy.php
1
This will not work, since many pages behind iframe don't want to be embedded in an iframe and thus set X-Frame-Options Header to SAMEORIGIN. Even if you are able to bypass this using the proxy, the page would try to load something like /insecurepage.css and your browser will request yourdomain/insecurepage.css
This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.
The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.
Plus -- I'm a little weary of relying on Javascript redirects for anything important.
Cheers!
4
This is pretty working, but the links inside the site are getting invalid. For example, I have a domain called example.com which has a SSL. I am embedding a iframe with example.net which has no SSL. The example.com has a link like href=\"/path/file.html\" and while clicking it, it is opening as https://example.com/path/file.html instead of http://example.net/path/file.html
The link cannot be relative if you would like this to work. In other words, specify the full URL within the href. If this is dynamic there are libraries to grab each segment of the URL in Javascript as well as server side.CommentedJul 13, 2016 at 19:55
1
css of the target site under iframe is broken . Please checkCommentedFeb 28, 2019 at 9:21
This way somehow works but css doesnt work at all.CommentedNov 1, 2023 at 9:04
add <meta http-equiv=\"Content-Security-Policy\" content=\"upgrade-insecure-requests\"> in head
This solution doesn't allow you to serve http content on a https site. All this does is force http requests as https requests. If the resource doesn't exist on https you'll just get a 404 error instead.
This is actually works at least for my needs.. tested it with firefox and confirmed working. My issue is source URL isn't HTTPS compliance while my own website is using HTTPS.CommentedDec 14, 2017 at 3:41
Working like charm in chrome Version 76.0.3809.132 (Official Build)CommentedSep 9, 2019 at 7:10
This solution chang http to https and do not add content from http site to https site.CommentedJan 31, 2021 at 16:46
1
Not working anymore.CommentedMar 15, 2022 at 13:13
Using Google as the SSL proxy is not working currently,
Why?
If you opened any page from google, you will find there is a x-frame-options field in the header.\n
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring\n that their content is not embedded into other sites.
(Quote from MDN)
One of the solution
Below is my work around for this problem:
Upload the content to AWS S3, and it will create a https link for the resource. \nNotice: set the permission to the html file for allowing everyone view it.
After that, we can using it as the src of iframe in the https websites.\n
Does this still work? Because I can't seem to get S3 to serve an https link ATM.
You will always get warnings of blocked content in most browsers when trying to display non secure content on an https page. This is tricky if you want to embed stuff from other sites that aren't behind ssl. You can turn off the warnings or remove the blocking in your own browser but for other visitors it's a problem.
One way to do it is to load the content server side and save the images and other things to your server and display them from https.
You can also try using a service like embed.ly and get the content through them. They have support for getting the content behind https.
if you scrape the content and show it on your site their is Always the risk of cross site scripting. So a god solution is to scrape the content on a separate url and present the data in an iframe from that url with https. In that way you prevent crosssite scripting on your mainsite and session hijacking.
You could try scraping whatever you need with PHP or another server side language, then put the iframe to the scraped content. Here's an example with PHP:
@dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed.
Doesnt load css from external page.CommentedNov 1, 2023 at 9:12
Use your own HTTPS-to-HTTP reverse proxy.
If your use case is about a few, rarely changing URLs to embed into the iframe, you can simply set up a reverse proxy for this on your own server and configure it so that one https URL on your server maps to one http URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is \"only\" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.
If for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.
1
mitmproxy is a debugging tool, not production proxying system. ngrok is tunnelling service, mostly for development servers, I don't understand how it can be useful for this.
@kolen It's not about the tools, it's about the idea of using a reverse proxy for this, not mentioned in the other answers yet. Changing to Apache now, which is a much more common way to do a reverse proxy.
In this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.
Where you are trying to use it.CommentedMay 18, 2020 at 4:16
2
Doesn't work for me. And </frame> should be </iframe>.CommentedDec 31, 2021 at 5:21
i tried below <iframe src=\"https://www.google.ie/gwt/x?u=[http://www.mootrack.com/page/share.jsp?mapType=google&token=S1711650600yUyP315023260c762b627b44263e17f998a4272d1c]\"></iframe> - it doent work for meCommentedMar 27, 2024 at 4:33
\nNot the answer you're looking for? Browse other questions tagged
", "statics": {"paragraph": 48, "paragraph.text": 59, "paragraph.code-inline": 11, "code": 9, "list": 16, "list.text": 176, "title": 5, "list.code-inline": 13, "image": 2}, "url": "https://stackoverflow.com/questions/18327314/how-to-allow-http-content-within-an-iframe-on-a-https-site", "content": "I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:\n\n[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}\n\nIs there any way to turn this off or any way to get around it?\n\nThe iframe has no `src` attribute and the contents are set using:\n\n```\nframe.open();\nframe.write(html);\nframe.close();\n```\n\n- stackoverflow.com/questions/9280665/\u2026 \u2013 chiliNUT Commented Aug 20, 2013 at 5:30\n- made an edit. The src is not set as the content is written into the iframe Commented Aug 20, 2013 at 9:36\n- 1 Thanks for all the answers. Long story short is proxy the content. Commented Aug 17, 2014 at 2:50\n- @georgephillips would you share the code for proxying the content? \u2013 Gintas_ Commented May 5, 2017 at 20:30\n\n## 10 Answers\n\nNote: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an `iframe` embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.\n\nThe best solution I created is to simply use google as the ssl proxy...\n\n```\nhttps://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky\n```\n\nTested and works in firefox.\n\nOther Methods:\n\n- Use a Third party such as embed.ly (but it it really only good for well known http APIs).\n- Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method) `https://example.com` That has a iframe linking to... `https://example.com/utilities/redirect.html` Which has a simple js redirect script like...\n\n```\ndocument.location.href =\"http://thenonsslsite.com\";\n```\n\n\n- Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.\n- You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo .\n\nUnless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).\n\nThe real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.\n\nNote, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.\n\n- 10 Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally). Commented Sep 3, 2014 at 1:52\n- 10 The redirect trick seems to work in Firefox only. Chrome still denies loading the insecure content. Are there any other known workarounds? Commented Nov 25, 2014 at 15:07\n- 49 Just wanted to signal out that the \"Create your own redirect script on an https page you control\" method no longer works with current versions of Chrom(e|ium) and Firefox, even using JS. \u2013 kako-nawao Commented Feb 10, 2015 at 15:39\n- 18 This answer is invalid to date, any other solutions Commented Feb 9, 2017 at 22:15\n- 28 The answer should have an option to be labeled as 'deprecated'. It creates confusion unless you read all the comments. \u2013 Nitin Commented May 16, 2017 at 19:44\n\n33\n\nBased on generality of this question, I think, that you'll need to setup your own HTTPS proxy on some server online. Do the following steps:\n\n- Prepare your proxy server - install IIS, Apache\n- Get valid SSL certificate to avoid security errors (free from startssl.com for example)\n- Write a wrapper, which will download insecure content (how to below)\n- From your site/app get https://yourproxy.com/?page=http://insecurepage.com\n\nIf you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but \u00cf found workaround here: http://foundationphp.com/tutorials/image_proxy.php\n\n- 1 This will not work, since many pages behind iframe don't want to be embedded in an iframe and thus set X-Frame-Options Header to SAMEORIGIN. Even if you are able to bypass this using the proxy, the page would try to load something like /insecurepage.css and your browser will request yourdomain/insecurepage.css \u2013 antidote Commented Jul 25, 2019 at 12:46\n- This solution worked perfectly for me. Found directions for IIS here: techcommunity.microsoft.com/t5/iis-support-blog/\u2026 \u2013 Rob10e Commented Feb 5, 2021 at 16:33\n\nI know this is an old post, but another solution would be to use cURL, for example:\n\nredirect.php:\n\n```\n\n```\n\nThis is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.\n\nThe upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.\n\nPlus -- I'm a little weary of relying on Javascript redirects for anything important.\n\nCheers!\n\n- 4 This is pretty working, but the links inside the site are getting invalid. For example, I have a domain called `example.com` which has a SSL. I am embedding a iframe with `example.net` which has no SSL. The `example.com` has a link like `href=\"/path/file.html\"` and while clicking it, it is opening as `https://example.com/path/file.html` instead of `http://example.net/path/file.html` \u2013 Sibidharan Commented Feb 15, 2016 at 15:13\n- 1 The link cannot be relative if you would like this to work. In other words, specify the full URL within the href. If this is dynamic there are libraries to grab each segment of the URL in Javascript as well as server side. Commented Jul 13, 2016 at 19:55\n- 1 css of the target site under iframe is broken . Please check Commented Feb 28, 2019 at 9:21\n- This way somehow works but css doesnt work at all. Commented Nov 1, 2023 at 9:04\n\nadd `` in head\n\nreference: http://thehackernews.com/2015/04/disable-mixed-content-warning.html\n\nbrowser compatibility: http://caniuse.com/\\#feat=upgradeinsecurerequests\n\n- 37 This solution doesn't allow you to serve http content on a https site. All this does is force http requests as https requests. If the resource doesn't exist on https you'll just get a 404 error instead. \u2013 Felix Commented Feb 20, 2017 at 21:12\n- 1 This is actually works at least for my needs.. tested it with firefox and confirmed working. My issue is source URL isn't HTTPS compliance while my own website is using HTTPS. Commented Dec 14, 2017 at 3:41\n- Working like charm in chrome Version 76.0.3809.132 (Official Build) Commented Sep 9, 2019 at 7:10\n- This solution chang http to https and do not add content from http site to https site. Commented Jan 31, 2021 at 16:46\n- 1 Not working anymore. Commented Mar 15, 2022 at 13:13\n\nUsing Google as the SSL proxy is not working currently,\n\n### Why?\n\nIf you opened any page from google, you will find there is a `x-frame-options` field in the header.\n\nThe X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a `` , `\n```\n\n- 3 How will you handle images, included JS and CSS files, hyperlinks, and AJAX requests? \u2013 dotancohen Commented May 11, 2014 at 6:54\n- @dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed. \u2013 Grant Commented Jun 10, 2014 at 2:57\n- 1 This works, but its effectively double loading the content and therefore loading time as your server scrapes and then re-serves the content... \u2013 ChristoKiwi Commented Jan 12, 2015 at 0:56\n- Doesnt load css from external page. Commented Nov 1, 2023 at 9:12\n\nUse your own HTTPS-to-HTTP reverse proxy.\n\nIf your use case is about a few, rarely changing URLs to embed into the `iframe` , you can simply set up a reverse proxy for this on your own server and configure it so that one `https` URL on your server maps to one `http` URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is \"only\" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.\n\nIf for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.\n\n- 1 `mitmproxy` is a debugging tool, not production proxying system. `ngrok` is tunnelling service, mostly for development servers, I don't understand how it can be useful for this. \u2013 kolen Commented Jul 3, 2018 at 15:52\n- @kolen It's not about the tools, it's about the idea of using a reverse proxy for this, not mentioned in the other answers yet. Changing to Apache now, which is a much more common way to do a reverse proxy. \u2013 tanius Commented Oct 12, 2019 at 18:30\n- This solution worked perfectly for me. Found directions for IIS here: techcommunity.microsoft.com/t5/iis-support-blog/\u2026 \u2013 Rob10e Commented Feb 5, 2021 at 16:31\n\nTry to use protocol relative links.\n\nYour link is http://example.com/script.js, use:\n\n```\n\n```\n\nIn this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.\n\nSeen in: https://developer.mozilla.org/es/docs/Seguridad/MixedContent/arreglar_web_con_contenido_mixto\n\n- 3 only works if the resource is available as https. \u2013 dansch Commented Dec 3, 2020 at 18:35\n\nAll you need to do is just use Google as a Proxy server.\n\nhttps://www.google.ie/gwt/x?u=[YourHttpLink].\n\n```\n\n```\n\nIt worked for me.\n\nCredits:- https://www.wikihow.com/Use-Google-As-a-Proxy\n\n- Where you are trying to use it. Commented May 18, 2020 at 4:16\n- 2 Doesn't work for me. And `` should be `` . Commented Dec 31, 2021 at 5:21\n- i tried below `` - it doent work for me Commented Mar 27, 2024 at 4:33\n\n## Not the answer you're looking for? Browse other questions tagged\n\n## or ask your own question .\n", "html": "\n\n\n\n\n \n\n \n\n html - How to allow http content within an iframe on a https site - Stack Overflow\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n\n\n\n \n \n\n\n\n\n \n\n\n\n\n\n\n\n \n\n\n\n \n \n \n \n\n\n\n\n\n\n\n\n \n \n \n\n\n\n Skip to main content\n\t
Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframe embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.
\n
\n\n
The best solution I created is to simply use google as the ssl proxy...
Use a Third party such as embed.ly (but it it really only good for well known http APIs).
\n
Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)
\n\n
https://example.com That has a iframe linking to...
\n\n
https://example.com/utilities/redirect.html Which has a simple js redirect script like...
Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.
\n
You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.
\n
\n\n
Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).
\n\n
The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.
\n\n
Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.
\n\n Great answer, thanks. Just to let you know in chrome the JS redirect method does not work just prevents the change (as it does when you try load it normally).\n\n
\n\n Just wanted to signal out that the "Create your own redirect script on an https page you control" method no longer works with current versions of Chrom(e|ium) and Firefox, even using JS.\n\n
If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but \u00cf found workaround here: http://foundationphp.com/tutorials/image_proxy.php
\n\n This will not work, since many pages behind iframe don't want to be embedded in an iframe and thus set X-Frame-Options Header to SAMEORIGIN. Even if you are able to bypass this using the proxy, the page would try to load something like /insecurepage.css and your browser will request yourdomain/insecurepage.css\n\n
This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.
\n\n
The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.
\n\n
Plus -- I'm a little weary of relying on Javascript redirects for anything important.
\n\n This is pretty working, but the links inside the site are getting invalid. For example, I have a domain called example.com which has a SSL. I am embedding a iframe with example.net which has no SSL. The example.com has a link like href="/path/file.html" and while clicking it, it is opening as https://example.com/path/file.html instead of http://example.net/path/file.html\n\n
\n \n Commented\n Feb 15, 2016 at 15:13\n \n \n \n \n
\n
\n
\n
\n
\n
\n 1\n
\n
\n
\n
\n\n The link cannot be relative if you would like this to work. In other words, specify the full URL within the href. If this is dynamic there are libraries to grab each segment of the URL in Javascript as well as server side.\n\n
\n\n This solution doesn't allow you to serve http content on a https site. All this does is force http requests as https requests. If the resource doesn't exist on https you'll just get a 404 error instead.\n\n
\n\n This is actually works at least for my needs.. tested it with firefox and confirmed working. My issue is source URL isn't HTTPS compliance while my own website is using HTTPS.\n\n
Using Google as the SSL proxy is not working currently,
\n\n
Why?
\n\n
If you opened any page from google, you will find there is a x-frame-options field in the header.\n
\n\n
\n
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring\n that their content is not embedded into other sites.
\n
\n\n
(Quote from MDN)
\n\n
One of the solution
\n\n
Below is my work around for this problem:
\n\n
Upload the content to AWS S3, and it will create a https link for the resource. \nNotice: set the permission to the html file for allowing everyone view it.
\n\n
After that, we can using it as the src of iframe in the https websites.\n
You will always get warnings of blocked content in most browsers when trying to display non secure content on an https page. This is tricky if you want to embed stuff from other sites that aren't behind ssl. You can turn off the warnings or remove the blocking in your own browser but for other visitors it's a problem.
\n\n
One way to do it is to load the content server side and save the images and other things to your server and display them from https.
\n\n
You can also try using a service like embed.ly and get the content through them. They have support for getting the content behind https.
\n\n if you scrape the content and show it on your site their is Always the risk of cross site scripting. So a god solution is to scrape the content on a separate url and present the data in an iframe from that url with https. In that way you prevent crosssite scripting on your mainsite and session hijacking.\n\n
You could try scraping whatever you need with PHP or another server side language, then put the iframe to the scraped content. Here's an example with PHP:
\n \n Commented\n May 11, 2014 at 6:54\n \n \n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n @dotancohen you're right, it isn't a perfect solution, but I think it is the best for this situation. Some sites you won't run into the problems you discussed.\n\n
\n\n This works, but its effectively double loading the content and therefore loading time as your server scrapes and then re-serves the content...\n\n
If your use case is about a few, rarely changing URLs to embed into the iframe, you can simply set up a reverse proxy for this on your own server and configure it so that one https URL on your server maps to one http URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is \"only\" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.
\n\n
If for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.
\n\n mitmproxy is a debugging tool, not production proxying system. ngrok is tunnelling service, mostly for development servers, I don't understand how it can be useful for this.\n\n
\n\n @kolen It's not about the tools, it's about the idea of using a reverse proxy for this, not mentioned in the other answers yet. Changing to Apache now, which is a much more common way to do a reverse proxy.\n\n
In this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.
\n\n i tried below <iframe src="https://www.google.ie/gwt/x?u=[http://www.mootrack.com/page/share.jsp?mapType=google&token=S1711650600yUyP315023260c762b627b44263e17f998a4272d1c]"></iframe> - it doent work for me\n\n
", "content": [{"c": "Joe asked on 18 Dec 2009, 03:31 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.
I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:
", "content": [{"c": "I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms. I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:", "t": "text"}]}, {"type": "table", "raw_content": "
In the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.
", "content": [{"c": "In the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "Hi Joe, That could be a problem indeed when creating the controls dynamically. If this is not a must-have requirement, then you can use the approach from this kb article on related RadComboBox controls in the advanced form of RadScheduler: http://www.telerik.com/support/kb/aspnet-ajax/scheduler/related-load-on-demand-radcomboboxes-in-the-advanced-form-of-radscheduler.aspx All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "answered on 22 Dec 2009, 08:15 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Peter,
\nUnfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice....
\nI tried implementing your suggestion, but I ran into 2 stumbling blocks.
\n1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. \n2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\")\u00a0 which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class.
\nSo I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event.
\nThanks.\n
", "content": [{"c": "Peter, Unfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice.... I tried implementing your suggestion, but I ran into 2 stumbling blocks. 1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. 2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\") which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class. So I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event. Thanks.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\nI think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:
", "content": [{"c": "Hi Joe, I think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:", "t": "text"}]}, {"type": "code", "raw_content": "
", "content": [{"c": "Let us know how it goes. All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "answered on 06 Jan 2010, 11:11 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Peter,
\nThanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help.
\nWhen the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel?
\nHere is my JS for reference:
", "content": [{"c": "Peter, Thanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help. When the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel? Here is my JS for reference:", "t": "text"}]}, {"type": "table", "raw_content": "
", "content": [{"c": "answered on 07 Jan 2010, 09:39 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Peter,
\nI never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work.
\nI did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working.
\nThanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n
", "content": [{"c": "Peter, I never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work. I did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working. Thanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\nCan you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form.
\nThanks
\nMilind
", "content": [{"c": "Hi, Can you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form. Thanks Milind", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\nDid you try the code from the post on12/25/2009? Do you experience any problems with the following code?:
", "content": [{"c": "Hello Milind, Did you try the code from the post on12/25/2009? Do you experience any problems with the following code?:", "t": "text"}]}, {"type": "code", "raw_content": "
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
", "content": [{"c": "Kind regards, Peter the Telerik team Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "answered on 12 Nov 2011, 02:17 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
What I think is going on here is: (though not exactly related to the topic header)
\nYou have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data)
So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events)
\nLets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".\u00a0
", "content": [{"c": "What I think is going on here is: (though not exactly related to the topic header) You have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data) So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events) Lets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".", "t": "text"}]}, {"type": "code", "raw_content": "
I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?
", "content": [{"c": "I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?", "t": "text"}]}, {"type": "paragraph", "raw_content": "
I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.
I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:
\nUnfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice....
\nI tried implementing your suggestion, but I ran into 2 stumbling blocks.
\n1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. \n2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\")\u00a0 which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class.
\nSo I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event.
\nThanks.\n
0
Hi Joe,
\nI think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:
\nThanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help.
\nWhen the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel?
\nI never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work.
\nI did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working.
\nThanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n
0
\n answered on 01 Sep 2010,\u00a006:20 AM
Hi,
\nCan you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form.
\nThanks
\nMilind
0
Hello Milind,
\nDid you try the code from the post on12/25/2009? Do you experience any problems with the following code?:
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
What I think is going on here is: (though not exactly related to the topic header)
\nYou have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data)
So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events)
\nLets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".\u00a0
I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?
Thanks
Milind Shevade
", "statics": {"paragraph": 39, "paragraph.text": 39, "table": 2, "title": 1, "code": 5, "image": 3}, "url": "https://www.telerik.com/forums/radcombobox-selectedindexchanged-inside-advanced-edit-template", "content": "Joe asked on 18 Dec 2009, 03:31 PM\n\nI have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms. I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:\n\n| RadComboBox\u00a0resource\u00a0=\u00a0(RadComboBox)e.Container.FindControl( \"ResourceInput\" ); |\n|---|\n| resource.Skin\u00a0=\u00a0_skin; |\n| resource\u00a0=\u00a0LoadResources(resource); |\n| resource.SelectedIndexChanged\u00a0+=\u00a0 new RadComboBoxSelectedIndexChangedEventHandler(resource_SelectedIndexChanged); |\n| |\n\nIn the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.\n\nThanks!\n\n## 9 Answers , 1 is accepted\n\n0\n\nHi Joe, That could be a problem indeed when creating the controls dynamically. If this is not a must-have requirement, then you can use the approach from this kb article on related RadComboBox controls in the advanced form of RadScheduler: http://www.telerik.com/support/kb/aspnet-ajax/scheduler/related-load-on-demand-radcomboboxes-in-the-advanced-form-of-radscheduler.aspx All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.\n\n0\n\nanswered on 22 Dec 2009, 08:15 PM\n\nPeter, Unfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice.... I tried implementing your suggestion, but I ran into 2 stumbling blocks. 1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. 2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\") which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class. So I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event. Thanks.\n\n0\n\nHi Joe, I think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:\n\n```\n\n \n \n```\n\n```\nprotected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)\n {\n if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)\n {\n RadComboBox resource = new RadComboBox();\n resource.Items.Add(new RadComboBoxItem(\"a\"));\n resource.Items.Add(new RadComboBoxItem(\"b\"));\n resource.Items.Add(new RadComboBoxItem(\"c\"));\n resource.OnClientSelectedIndexChanged = \"OnClientSelectedIndexChanged\";\n resource.AutoPostBack = true;\n\n Panel basicPanel = (Panel)e.Container.FindControl(\"BasicControlsPanel\");\n basicPanel.Controls.Add(resource);\n\n Label selectedValueLbl = new Label();\n if (selectedValue.Value != null)\n selectedValueLbl.Text = selectedValue.Value;\n basicPanel.Controls.Add(selectedValueLbl);\n selectedValue.Value = null;\n }\n }\n```\n\nLet us know how it goes. All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.\n\n0\n\nanswered on 06 Jan 2010, 11:11 PM\n\nPeter, Thanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help. When the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel? Here is my JS for reference:\n\n| function LoadProjects(sender,\u00a0eventArgs)\u00a0{ |\n|---|\n| var selectedValue\u00a0= document .getElementById( '\"\u00a0+\u00a0lblResourceValue.ClientID\u00a0+\u00a0\"' ); |\n| selectedValue.value\u00a0=\u00a0eventArgs.get_item().get_text(); |\n| alert(selectedValue.value); |\n| } |\n\nThanks again!\n\n0\n\nanswered on 07 Jan 2010, 09:39 PM\n\nPeter, I never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work. I did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working. Thanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n\n0\n\nanswered on 01 Sep 2010, 06:20 AM\n\nHi, Can you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form. Thanks Milind\n\n0\n\nHello Milind, Did you try the code from the post on12/25/2009? Do you experience any problems with the following code?:\n\n```\nprotected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)\n {\n if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)\n {\n RadComboBox resource = new RadComboBox();\n resource.Items.Add(new RadComboBoxItem(\"a\"));\n resource.Items.Add(new RadComboBoxItem(\"b\"));\n resource.Items.Add(new RadComboBoxItem(\"c\"));\n resource.OnClientSelectedIndexChanged = \"OnClientSelectedIndexChanged\";\n resource.AutoPostBack = true;\n\n Panel basicPanel = (Panel)e.Container.FindControl(\"BasicControlsPanel\");\n basicPanel.Controls.Add(resource);\n\n Label selectedValueLbl = new Label();\n if (selectedValue.Value != null)\n selectedValueLbl.Text = selectedValue.Value;\n basicPanel.Controls.Add(selectedValueLbl);\n selectedValue.Value = null;\n }\n }\n```\n\nKind regards, Peter the Telerik team Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items\n\n0\n\nGuss\n\nTop achievements\n\nRank 2\n\nVeteran\n\nanswered on 12 Nov 2011, 02:17 PM\n\nWhat I think is going on here is: (though not exactly related to the topic header) You have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data) So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events) Lets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".\n\n```\nprotected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)\n{\nRadTextBox txtChildren = (RadTextBox)e.Container.FindControl(\"AttrChildren\")\ntxtChildren.Visible = false;\nRadComboBox rcbChildren = new RadComboBox();\nrcbRegister.Label = \"Select Child:\"\nrcbChildren.Width = Unit.Pixel(250);\nrcbChildren.DataValueField = \"childIdFromDataSet\";\nrcbChildren.DataTextField = \"childTextFromDataSet\";\nrcbChildren.Attributes.Add(\"theclientid\", txtChildren.ClientID.ToString());\nrcbChildren.OnClientSelectedIndexChanged = \"OnChildrenSelectedIndexChanged\";\n//...........\n//create you DataTable,HasTable,2DArray here, and use your parameters (Parent's value in this example)\n//........\n//da.Fill(dt)//...........\nrcbChildren.DataSource = dt;\nrcbChildren.DataBind();\nif (txtChildren.Text != \"\") {\nrcbChildren.SelectedValue = txtChildren.Text;\nrcbChildren.Text = rcbRegister.txtChildren.Text;\n}\ntxtChildren.Parent.Controls.Add(rcbChildren);\n}\n}\n```\n\nAnd your Javascript function\n\n```\nfunction OnChildrenSelectedIndexChanged(sender, eventArgs) {\nvar newvalue = eventArgs.get_item().get_value();\nvar passedclientid = sender.get_attributes().getAttribute(\"theclientid\");\nvar field1 = document.getElementById(passedclientid);\nvar field2id = passedclientid + \"_text\";\nvar field2 = document.getElementById(field2id);\nfield1.value = newvalue;\nfield2.value = newvalue;\n}\n```\n\n0\n\nanswered on 14 May 2016, 09:51 AM\n\nHello,\n\nI referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?\n\nThanks\n\nMilind Shevade\n", "html": "\n\n\n\n \n\n \n \n \n \n \n \n \n\n\n\n\n \n\n\n\n RadComboBox SelectedIndexChanged inside Advanced Edit Template in UI for ASP.NET AJAX | Telerik Forums\n\n\n \n \n\n\n\n \n\n \n\n \n\n\n\n\n\n\n\n\n \n\n \n\n\n\n \n\n \n \n\n \n\n\n\n \n \n \n\n\n\n\n
I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.
I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:
Peter, \n \nUnfortunately, this is a requirement. I would much rather if it wasn't, but not my choice.... \n \nI tried implementing your suggestion, but I ran into 2 stumbling blocks. \n \n1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class. Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. \n2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control. I tried adding the javascript through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%= CountriesRadComboBox.ClientID %>\") which I don't have since the control only exists in the Template class. \n \nSo I might be pretty much stuck on this approach. Is there any other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow get access to the controls within the AdvancedForm Template through that event. \n \nThanks.\n
\n
\n\n
\n \n
\n
\n
\n \n
\n\n
\n
\n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n\n
0
\n\n
\n \n
\n\n
\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Peter\n
\n Telerik team\n
\n
\n \n
\n
\n
\n
\n
\n
\n answered on 25 Dec 2009, 01:07 PM\n
\n
\n
\n\n \n
\n
\n
\n
\n\n
Hi Joe, \n \nI think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same: \n \n
\n
<scripttype=\"text/javascript\">
\n
function OnClientSelectedIndexChanged(sender, eventArgs) {
\n
var selectedValue = document.getElementById(\"selectedValue\");
Peter, \n \nThanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help. \n \nWhen the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field is still null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel? \n \nHere is my JS for reference: \n \n
\n
\n
\n \n
\n
function LoadProjects(sender, eventArgs) {
\n
\n
\n
var selectedValue = document.getElementById('\" + lblResourceValue.ClientID + \"');
Peter, \n \nI never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work. \n \nI did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method working. \n \nThanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n
\n \n \nKind regards, \n Peter \nthe Telerik team\n\n
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
What I think is going on here is: (though not exactly related to the topic header) \n \nYou have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data) \n \nSo, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events) \n\n \nLets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time from the database (dynamic), based on a value from \"Parent\". \n \n
I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?
", "content": [{"c": "Joe asked on 18 Dec 2009, 03:31 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.
I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:
", "content": [{"c": "I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms. I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:", "t": "text"}]}, {"type": "table", "raw_content": "
In the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.
", "content": [{"c": "In the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "Hi Joe, That could be a problem indeed when creating the controls dynamically. If this is not a must-have requirement, then you can use the approach from this kb article on related RadComboBox controls in the advanced form of RadScheduler: http://www.telerik.com/support/kb/aspnet-ajax/scheduler/related-load-on-demand-radcomboboxes-in-the-advanced-form-of-radscheduler.aspx All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "answered on 22 Dec 2009, 08:15 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Peter,
\nUnfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice....
\nI tried implementing your suggestion, but I ran into 2 stumbling blocks.
\n1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. \n2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\")\u00a0 which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class.
\nSo I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event.
\nThanks.\n
", "content": [{"c": "Peter, Unfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice.... I tried implementing your suggestion, but I ran into 2 stumbling blocks. 1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. 2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\") which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class. So I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event. Thanks.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\nI think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:
", "content": [{"c": "Hi Joe, I think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:", "t": "text"}]}, {"type": "code", "raw_content": "
", "content": [{"c": "Let us know how it goes. All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "answered on 06 Jan 2010, 11:11 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Peter,
\nThanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help.
\nWhen the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel?
\nHere is my JS for reference:
", "content": [{"c": "Peter, Thanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help. When the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel? Here is my JS for reference:", "t": "text"}]}, {"type": "table", "raw_content": "
", "content": [{"c": "answered on 07 Jan 2010, 09:39 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
Peter,
\nI never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work.
\nI did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working.
\nThanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n
", "content": [{"c": "Peter, I never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work. I did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working. Thanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\nCan you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form.
\nThanks
\nMilind
", "content": [{"c": "Hi, Can you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form. Thanks Milind", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\nDid you try the code from the post on12/25/2009? Do you experience any problems with the following code?:
", "content": [{"c": "Hello Milind, Did you try the code from the post on12/25/2009? Do you experience any problems with the following code?:", "t": "text"}]}, {"type": "code", "raw_content": "
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
", "content": [{"c": "Kind regards, Peter the Telerik team Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items", "t": "text"}]}, {"type": "paragraph", "raw_content": "
", "content": [{"c": "answered on 12 Nov 2011, 02:17 PM", "t": "text"}]}, {"type": "paragraph", "raw_content": "
What I think is going on here is: (though not exactly related to the topic header)
\nYou have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data)
So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events)
\nLets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".\u00a0
", "content": [{"c": "What I think is going on here is: (though not exactly related to the topic header) You have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data) So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events) Lets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".", "t": "text"}]}, {"type": "code", "raw_content": "
I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?
", "content": [{"c": "I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?", "t": "text"}]}, {"type": "paragraph", "raw_content": "
I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.
I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:
\nUnfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice....
\nI tried implementing your suggestion, but I ran into 2 stumbling blocks.
\n1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. \n2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\")\u00a0 which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class.
\nSo I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event.
\nThanks.\n
0
Hi Joe,
\nI think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:
\nThanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help.
\nWhen the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel?
\nI never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work.
\nI did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working.
\nThanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n
0
\n answered on 01 Sep 2010,\u00a006:20 AM
Hi,
\nCan you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form.
\nThanks
\nMilind
0
Hello Milind,
\nDid you try the code from the post on12/25/2009? Do you experience any problems with the following code?:
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
What I think is going on here is: (though not exactly related to the topic header)
\nYou have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data)
So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events)
\nLets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".\u00a0
I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?
Thanks
Milind Shevade
", "statics": {"image": 5, "paragraph": 41, "paragraph.text": 41, "table": 2, "title": 1, "code": 5}, "url": "https://www.telerik.com/forums/radcombobox-selectedindexchanged-inside-advanced-edit-template", "content": "Top achievements\n\nRank 1\n\nJoe asked on 18 Dec 2009, 03:31 PM\n\nI have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms. I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:\n\n| RadComboBox\u00a0resource\u00a0=\u00a0(RadComboBox)e.Container.FindControl( \"ResourceInput\" ); |\n|---|\n| resource.Skin\u00a0=\u00a0_skin; |\n| resource\u00a0=\u00a0LoadResources(resource); |\n| resource.SelectedIndexChanged\u00a0+= new RadComboBoxSelectedIndexChangedEventHandler(resource_SelectedIndexChanged); |\n| |\n\nIn the SelectedIndexChanged events I don't have access to e.Container.FindControl. So I need to know how to find those controls in that event.\n\nThanks!\n\n## 9 Answers , 1 is accepted\n\n0\n\nHi Joe, That could be a problem indeed when creating the controls dynamically. If this is not a must-have requirement, then you can use the approach from this kb article on related RadComboBox controls in the advanced form of RadScheduler: http://www.telerik.com/support/kb/aspnet-ajax/scheduler/related-load-on-demand-radcomboboxes-in-the-advanced-form-of-radscheduler.aspx All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.\n\n0\n\nanswered on 22 Dec 2009, 08:15 PM\n\nPeter, Unfortunately, this is a requirement.\u00a0I would\u00a0much rather if it wasn't, but not my choice.... I tried implementing your suggestion, but I ran into 2 stumbling blocks. 1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class.\u00a0Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. 2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control.\u00a0I tried\u00a0adding the javascript\u00a0through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%=\u00a0CountriesRadComboBox.ClientID\u00a0%>\") which I don't have since\u00a0the control only exists\u00a0in\u00a0the Template\u00a0class. So I might be pretty much stuck on this approach. Is there any\u00a0other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow\u00a0get access to the controls within the AdvancedForm Template through that event. Thanks.\n\n0\n\nHi Joe, I think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same:\n\n```\n\n \n \n```\n\n```\nprotected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)\n {\n if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)\n {\n RadComboBox resource = new RadComboBox();\n resource.Items.Add(new RadComboBoxItem(\"a\"));\n resource.Items.Add(new RadComboBoxItem(\"b\"));\n resource.Items.Add(new RadComboBoxItem(\"c\"));\n resource.OnClientSelectedIndexChanged = \"OnClientSelectedIndexChanged\";\n resource.AutoPostBack = true;\n\n Panel basicPanel = (Panel)e.Container.FindControl(\"BasicControlsPanel\");\n basicPanel.Controls.Add(resource);\n\n Label selectedValueLbl = new Label();\n if (selectedValue.Value != null)\n selectedValueLbl.Text = selectedValue.Value;\n basicPanel.Controls.Add(selectedValueLbl);\n selectedValue.Value = null;\n }\n }\n```\n\nLet us know how it goes. All the best, Peter the Telerik team Instantly find answers to your questions on the new Telerik Support Portal. Watch a video on how to optimize your support resource searches and check out more tips on the blogs.\n\n0\n\nanswered on 06 Jan 2010, 11:11 PM\n\nPeter, Thanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help. When the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field\u00a0is still\u00a0null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel? Here is my JS for reference:\n\n| function LoadProjects(sender,\u00a0eventArgs)\u00a0{ |\n|---|\n| var selectedValue\u00a0= document .getElementById( '\"\u00a0+\u00a0lblResourceValue.ClientID\u00a0+\u00a0\"' ); |\n| selectedValue.value\u00a0=\u00a0eventArgs.get_item().get_text(); |\n| alert(selectedValue.value); |\n| } |\n\nThanks again!\n\n0\n\nanswered on 07 Jan 2010, 09:39 PM\n\nPeter, I never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work. I did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method\u00a0working. Thanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n\n0\n\nanswered on 01 Sep 2010, 06:20 AM\n\nHi, Can you post your code here ? I am finding it tough to add combobox at runtime in radscheduler advance edit form. Thanks Milind\n\n0\n\nHello Milind, Did you try the code from the post on12/25/2009? Do you experience any problems with the following code?:\n\n```\nprotected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)\n {\n if (e.Container.Mode == SchedulerFormMode.AdvancedEdit || e.Container.Mode == SchedulerFormMode.AdvancedInsert)\n {\n RadComboBox resource = new RadComboBox();\n resource.Items.Add(new RadComboBoxItem(\"a\"));\n resource.Items.Add(new RadComboBoxItem(\"b\"));\n resource.Items.Add(new RadComboBoxItem(\"c\"));\n resource.OnClientSelectedIndexChanged = \"OnClientSelectedIndexChanged\";\n resource.AutoPostBack = true;\n\n Panel basicPanel = (Panel)e.Container.FindControl(\"BasicControlsPanel\");\n basicPanel.Controls.Add(resource);\n\n Label selectedValueLbl = new Label();\n if (selectedValue.Value != null)\n selectedValueLbl.Text = selectedValue.Value;\n basicPanel.Controls.Add(selectedValueLbl);\n selectedValue.Value = null;\n }\n }\n```\n\nKind regards, Peter the Telerik team Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items\n\n0\n\nGuss\n\nTop achievements\n\nRank 2\n\nVeteran\n\nanswered on 12 Nov 2011, 02:17 PM\n\nWhat I think is going on here is: (though not exactly related to the topic header) You have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data) So, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events) Lets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during\u00a0the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time\u00a0from the database (dynamic), based on a value from \"Parent\".\n\n```\nprotected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)\n{\nRadTextBox txtChildren = (RadTextBox)e.Container.FindControl(\"AttrChildren\")\ntxtChildren.Visible = false;\nRadComboBox rcbChildren = new RadComboBox();\nrcbRegister.Label = \"Select Child:\"\nrcbChildren.Width = Unit.Pixel(250);\nrcbChildren.DataValueField = \"childIdFromDataSet\";\nrcbChildren.DataTextField = \"childTextFromDataSet\";\nrcbChildren.Attributes.Add(\"theclientid\", txtChildren.ClientID.ToString());\nrcbChildren.OnClientSelectedIndexChanged = \"OnChildrenSelectedIndexChanged\";\n//...........\n//create you DataTable,HasTable,2DArray here, and use your parameters (Parent's value in this example)\n//........\n//da.Fill(dt)//...........\nrcbChildren.DataSource = dt;\nrcbChildren.DataBind();\nif (txtChildren.Text != \"\") {\nrcbChildren.SelectedValue = txtChildren.Text;\nrcbChildren.Text = rcbRegister.txtChildren.Text;\n}\ntxtChildren.Parent.Controls.Add(rcbChildren);\n}\n}\n```\n\nAnd your Javascript function\n\n```\nfunction OnChildrenSelectedIndexChanged(sender, eventArgs) {\nvar newvalue = eventArgs.get_item().get_value();\nvar passedclientid = sender.get_attributes().getAttribute(\"theclientid\");\nvar field1 = document.getElementById(passedclientid);\nvar field2id = passedclientid + \"_text\";\nvar field2 = document.getElementById(field2id);\nfield1.value = newvalue;\nfield2.value = newvalue;\n}\n```\n\n0\n\nanswered on 14 May 2016, 09:51 AM\n\nHello,\n\nI referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?\n\nThanks\n\nMilind Shevade\n", "html": "\n\n\n\n \n\n \n \n \n \n \n \n \n\n\n\n\n \n\n\n\n RadComboBox SelectedIndexChanged inside Advanced Edit Template in UI for ASP.NET AJAX | Telerik Forums\n\n\n \n \n\n\n\n \n\n \n\n \n\n\n\n\n\n\n\n\n \n\n \n\n\n\n \n\n \n \n\n \n\n\n\n \n \n \n\n\n\n\n
I have Advanced Edit and Insert Form Templates built completely through code-behind for a RadScheduler. I am trying to implement cascading RadComboBoxes inside those forms.
I don't know how to find the controls in the forms from the SelectedIndexChanged events. In the FormCreated method when building the forms, I have the following:
Peter, \n \nUnfortunately, this is a requirement. I would much rather if it wasn't, but not my choice.... \n \nI tried implementing your suggestion, but I ran into 2 stumbling blocks. \n \n1. If I implement the ItemsRequested method in my custom AdvancedFormTemplate class, I no longer have visibility to the originating class, which is a SharePoint web part. In the custom toolpane for the web part, the user is able to select the location of the datasource. So all of that information is stored as properties in my web part class. Therefore, I am not able to load the RadComboBox through an ItemsRequested event in the custom Template class because I don't have access to the web part toolpane properties that give me the datasource. That's why I was trying to implement a SelectedIndexChanged event from the main web part class - added during the FormCreated scheduler method. \n2. I am not able to add javascript code to the page through the custom Template class. In the example the javascript is added directly to the ascx control, but I am not using that control. I tried adding the javascript through the main web part class, but in the LoadCountries() function I need to have access to this: $find(\"<%= CountriesRadComboBox.ClientID %>\") which I don't have since the control only exists in the Template class. \n \nSo I might be pretty much stuck on this approach. Is there any other way I might accomplish my goal? I think I am pretty much there implementing the SelectedIndexChanged event the way I originally tried if I could somehow get access to the controls within the AdvancedForm Template through that event. \n \nThanks.\n
\n
\n\n
\n \n
\n
\n
\n \n
\n\n
\n
\n \n \n
\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n\n
0
\n\n
\n \n
\n\n
\n\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Peter\n
\n Telerik team\n
\n
\n \n
\n
\n
\n
\n
\n
\n answered on 25 Dec 2009, 01:07 PM\n
\n
\n
\n\n \n
\n
\n
\n
\n\n
Hi Joe, \n \nI think there is a workaround which you can use for this case. How about handling OnClientSelectedIndexChanged to store the selected items's value or text in a hidden field. Then when FormCreated is fired again after selecting a combobox item, you can get the selected value from the hidden field and use it to populate the second combobox. Here is an example which updates a label, but the concept is the same: \n \n
\n
<scripttype=\"text/javascript\">
\n
function OnClientSelectedIndexChanged(sender, eventArgs) {
\n
var selectedValue = document.getElementById(\"selectedValue\");
Peter, \n \nThanks for the great information, as always. I have implemented your approach. However, I am having 1 small issue. I know it's not related to the RadComboBox or the RadScheduler, but I'm hoping you can still help. \n \nWhen the OnClientSelectedIndexChanged event is fired, the value is pulled out of the RadComboBox and placed into the hidden field. I have set a JS Alert to verify. But during the FormCreated event, the value of the hidden field is still null. I'm not sure if it's a viewstate issue (unlikely as I have other controls that don't have the problem). Or if it's an AJAX/UpdatePanel/Javascript interaction problem. The hidden field is inside the update panel, as is the scheduler and hence the combo's. I'm not very experienced with Javascript so I don't know what else I might need to do. Do I need to somehow call a refresh or update on the UpdatePanel? \n \nHere is my JS for reference: \n \n
\n
\n
\n \n
\n
function LoadProjects(sender, eventArgs) {
\n
\n
\n
var selectedValue = document.getElementById('\" + lblResourceValue.ClientID + \"');
Peter, \n \nI never did find an answer to this. I tried every trick in the book, changed control types, tried refreshing the update panel, tried adding a button to call a server side event and pull the value and nothing seemed to work. \n \nI did however identify an alternate solution. Now that I am an expert with custom Advanced Form Templates :), I realized I could add hidden labels to that form. Then populate the values from my custom web part to those labels during FormCreated. That allowed me all the parameters I needed to run a standard SelectedIndexChanged event from the custom form class itself. I was able to get that method working. \n \nThanks again for all your help and advice with such a complex setup and advanced functionality. Much appreciated!\n
\n \n \nKind regards, \n Peter \nthe Telerik team\n\n
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
What I think is going on here is: (though not exactly related to the topic header) \n \nYou have an attribute in RadScheduler, for which you do not want the default text control, but your own control, like a Combobox that could be populated with data as needed (parameterized data, based on other data) \n \nSo, first, do not create a resource, that comboboxes that is created by default, is way to difficult to manipulate on server side, rather use a attribute, which could be hidden (and populated with another controls events) \n\n \nLets assume you have a the following attibutes \"Parent\" and \"Children\". You know what \"Parent\"'s value is, before or during the FormCreated event, and you want \"Children\" to be a combobox with items retrieved each time from the database (dynamic), based on a value from \"Parent\". \n \n
I referred your answer above copied and pasted the code in my web page. The page gets compiled without error but the combobox which is added is not visible in edit or insert mode. I have set viewstate to false, is it because of that ?
\u4f60\u53ef\u4ee5\u4f7f\u7528 [pandas](https://wenku.csdn.net/doc/6412b725be7fbd1778d4940f?spm=1055.2569.3001.10083&kwd=pandas) \u7684 `read_[excel](https://wenku.csdn.net/doc/640n8f90vm?spm=1055.2569.3001.10083&kwd=excel)()` \u65b9\u6cd5\uff0c\u5e76\u7ed3\u5408 c h u n k s i z e \u53c2\u6570\u6765\u5206\u6279\u8bfb\u5165 Excel \u6587\u4ef6\u3002c h u n k s i z e \u53c2\u6570\u6307\u5b9a\u4e86\u6bcf\u6b21\u8bfb\u5165\u7684\u884c\u6570\uff0c\u53ef\u4ee5\u6839\u636e\u4f60\u7684\u9700\u6c42\u8fdb\u884c\u8c03\u6574\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u793a\u4f8b\u4ee3\u7801\uff1a\n\n```[python](https://wenku.csdn.net/doc/6412b46ebe7fbd1778d3f92a?spm=1055.2569.3001.10083&kwd=python)\n[import](https://wenku.csdn.net/doc/5cpc346q6x?spm=1055.2569.3001.10083&kwd=import) pandas as pd\n\n# \u6bcf\u6b21\u8bfb\u5165 1000 \u884c\u6570\u636e\nchunksize = 1000\n# Excel \u6587\u4ef6\u8def\u5f84\nexcel_path = 'example.xlsx'\n\n# \u904d\u5386\u6bcf\u4e2a\u5206\u5757\u6570\u636e\nfor chunk in pd.read_excel(excel_path, chunksize=chunksize):\n# \u5904\u7406\u5f53\u524d\u5206\u5757\u6570\u636e\n[print](https://wenku.csdn.net/doc/6401acb5cce7214c316ecd5e?spm=1055.2569.3001.10083&kwd=print)(chunk.head())\n```\n\n\u4e0a\u8ff0\u4ee3\u7801\u5c06 Excel \u6587\u4ef6\u6309\u7167\u6bcf\u6b21\u8bfb\u53d6 1000 \u884c\u6570\u636e\u8fdb\u884c\u5206\u5757\uff0c\u7136\u540e\u904d\u5386\u6bcf\u4e2a\u5206\u5757\u5e76\u5bf9\u5176\u8fdb\u884c\u5904\u7406\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u8981\u4fee\u6539 c h u n k s i z e \u53c2\u6570\u7684\u503c\u3002
", "content": [{"c": "\u4f60\u53ef\u4ee5\u4f7f\u7528 [pandas](https://wenku.csdn.net/doc/6412b725be7fbd1778d4940f?spm=1055.2569.3001.10083&kwd=pandas) \u7684 `read_[excel](https://wenku.csdn.net/doc/640n8f90vm?spm=1055.2569.3001.10083&kwd=excel)()` \u65b9\u6cd5\uff0c\u5e76\u7ed3\u5408", "t": "text"}, {"c": "c h u n k s i z e", "t": "equation-inline"}, {"c": "\u53c2\u6570\u6765\u5206\u6279\u8bfb\u5165 Excel \u6587\u4ef6\u3002", "t": "text"}, {"c": "c h u n k s i z e", "t": "equation-inline"}, {"c": "\u53c2\u6570\u6307\u5b9a\u4e86\u6bcf\u6b21\u8bfb\u5165\u7684\u884c\u6570\uff0c\u53ef\u4ee5\u6839\u636e\u4f60\u7684\u9700\u6c42\u8fdb\u884c\u8c03\u6574\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u793a\u4f8b\u4ee3\u7801\uff1a\n\n```[python](https://wenku.csdn.net/doc/6412b46ebe7fbd1778d3f92a?spm=1055.2569.3001.10083&kwd=python)\n[import](https://wenku.csdn.net/doc/5cpc346q6x?spm=1055.2569.3001.10083&kwd=import) pandas as pd\n\n# \u6bcf\u6b21\u8bfb\u5165 1000 \u884c\u6570\u636e\nchunksize = 1000\n# Excel \u6587\u4ef6\u8def\u5f84\nexcel_path = 'example.xlsx'\n\n# \u904d\u5386\u6bcf\u4e2a\u5206\u5757\u6570\u636e\nfor chunk in pd.read_excel(excel_path, chunksize=chunksize):\n# \u5904\u7406\u5f53\u524d\u5206\u5757\u6570\u636e\n[print](https://wenku.csdn.net/doc/6401acb5cce7214c316ecd5e?spm=1055.2569.3001.10083&kwd=print)(chunk.head())\n```\n\n\u4e0a\u8ff0\u4ee3\u7801\u5c06 Excel \u6587\u4ef6\u6309\u7167\u6bcf\u6b21\u8bfb\u53d6 1000 \u884c\u6570\u636e\u8fdb\u884c\u5206\u5757\uff0c\u7136\u540e\u904d\u5386\u6bcf\u4e2a\u5206\u5757\u5e76\u5bf9\u5176\u8fdb\u884c\u5904\u7406\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u8981\u4fee\u6539", "t": "text"}, {"c": "c h u n k s i z e", "t": "equation-inline"}, {"c": "\u53c2\u6570\u7684\u503c\u3002", "t": "text"}]}, {"type": "paragraph", "raw_content": "
\u4f60\u53ef\u4ee5\u4f7f\u7528 [pandas](https://wenku.csdn.net/doc/6412b725be7fbd1778d4940f?spm=1055.2569.3001.10083&kwd=pandas) \u7684 `read_[excel](https://wenku.csdn.net/doc/640n8f90vm?spm=1055.2569.3001.10083&kwd=excel)()` \u65b9\u6cd5\uff0c\u5e76\u7ed3\u5408 c h u n k s i z e \u53c2\u6570\u6765\u5206\u6279\u8bfb\u5165 Excel \u6587\u4ef6\u3002c h u n k s i z e \u53c2\u6570\u6307\u5b9a\u4e86\u6bcf\u6b21\u8bfb\u5165\u7684\u884c\u6570\uff0c\u53ef\u4ee5\u6839\u636e\u4f60\u7684\u9700\u6c42\u8fdb\u884c\u8c03\u6574\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u793a\u4f8b\u4ee3\u7801\uff1a\n\n```[python](https://wenku.csdn.net/doc/6412b46ebe7fbd1778d3f92a?spm=1055.2569.3001.10083&kwd=python)\n[import](https://wenku.csdn.net/doc/5cpc346q6x?spm=1055.2569.3001.10083&kwd=import) pandas as pd\n\n# \u6bcf\u6b21\u8bfb\u5165 1000 \u884c\u6570\u636e\nchunksize = 1000\n# Excel \u6587\u4ef6\u8def\u5f84\nexcel_path = 'example.xlsx'\n\n# \u904d\u5386\u6bcf\u4e2a\u5206\u5757\u6570\u636e\nfor chunk in pd.read_excel(excel_path, chunksize=chunksize):\n# \u5904\u7406\u5f53\u524d\u5206\u5757\u6570\u636e\n[print](https://wenku.csdn.net/doc/6401acb5cce7214c316ecd5e?spm=1055.2569.3001.10083&kwd=print)(chunk.head())\n```\n\n\u4e0a\u8ff0\u4ee3\u7801\u5c06 Excel \u6587\u4ef6\u6309\u7167\u6bcf\u6b21\u8bfb\u53d6 1000 \u884c\u6570\u636e\u8fdb\u884c\u5206\u5757\uff0c\u7136\u540e\u904d\u5386\u6bcf\u4e2a\u5206\u5757\u5e76\u5bf9\u5176\u8fdb\u884c\u5904\u7406\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u8981\u4fee\u6539 c h u n k s i z e \u53c2\u6570\u7684\u503c\u3002
\u9605\u8bfb\u5168\u6587
\u76f8\u5173\u63a8\u8350
\u5927\u5bb6\u5728\u770b
\u6700\u65b0\u63a8\u8350
", "statics": {"title": 4, "paragraph": 4, "paragraph.text": 7, "paragraph.equation-inline": 3}, "url": "https://blog.csdn.net/moon_sky1999/article/details/52744845", "content": "# pandas \u5206\u6279\u8bfb\u5165execl\n\n\u65f6\u95f4: 2023-06-29 20:05:48\n\n\u6d4f\u89c8: 99\n\n\u4f60\u53ef\u4ee5\u4f7f\u7528 [pandas](https://wenku.csdn.net/doc/6412b725be7fbd1778d4940f?spm=1055.2569.3001.10083&kwd=pandas) \u7684 \\`read_[excel](https://wenku.csdn.net/doc/640n8f90vm?spm=1055.2569.3001.10083&kwd=excel)()\\` \u65b9\u6cd5\uff0c\u5e76\u7ed3\u5408 $c h u n k s i z e$ \u53c2\u6570\u6765\u5206\u6279\u8bfb\u5165 Excel \u6587\u4ef6\u3002 $c h u n k s i z e$ \u53c2\u6570\u6307\u5b9a\u4e86\u6bcf\u6b21\u8bfb\u5165\u7684\u884c\u6570\uff0c\u53ef\u4ee5\u6839\u636e\u4f60\u7684\u9700\u6c42\u8fdb\u884c\u8c03\u6574\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u793a\u4f8b\u4ee3\u7801\uff1a\n\n\\`\\`\\`[python](https://wenku.csdn.net/doc/6412b46ebe7fbd1778d3f92a?spm=1055.2569.3001.10083&kwd=python)\n[import](https://wenku.csdn.net/doc/5cpc346q6x?spm=1055.2569.3001.10083&kwd=import) pandas as pd\n\n\\# \u6bcf\u6b21\u8bfb\u5165 1000 \u884c\u6570\u636e\nchunksize = 1000\n\\# Excel \u6587\u4ef6\u8def\u5f84\nexcel_path = 'example.xlsx'\n\n\\# \u904d\u5386\u6bcf\u4e2a\u5206\u5757\u6570\u636e\nfor chunk in pd.read_excel(excel_path, chunksize=chunksize):\n\\# \u5904\u7406\u5f53\u524d\u5206\u5757\u6570\u636e\n[print](https://wenku.csdn.net/doc/6401acb5cce7214c316ecd5e?spm=1055.2569.3001.10083&kwd=print)(chunk.head())\n\\`\\`\\`\n\n\u4e0a\u8ff0\u4ee3\u7801\u5c06 Excel \u6587\u4ef6\u6309\u7167\u6bcf\u6b21\u8bfb\u53d6 1000 \u884c\u6570\u636e\u8fdb\u884c\u5206\u5757\uff0c\u7136\u540e\u904d\u5386\u6bcf\u4e2a\u5206\u5757\u5e76\u5bf9\u5176\u8fdb\u884c\u5904\u7406\u3002\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u8981\u4fee\u6539 $c h u n k s i z e$ \u53c2\u6570\u7684\u503c\u3002\n\n\u9605\u8bfb\u5168\u6587\n\n## \u76f8\u5173\u63a8\u8350\n\n## \u5927\u5bb6\u5728\u770b\n\n## \u6700\u65b0\u63a8\u8350\n", "html": "\npandas \u5206\u6279\u8bfb\u5165execl - CSDN\u6587\u5e93 \n \n \n \n\n \n \n \n \n\n \n\n \n\n \n\n \n
An array can be initialized with an array\n literal, which is a short-hand method of writing one or more values as\n an array collection.
", "content": [{"c": "An array can be initialized with an array\n literal, which is a short-hand method of writing one or more values as\n an array collection.", "t": "text"}]}, {"type": "paragraph", "raw_content": "
An array literal is written as a list of values,\n separated by commas, and surrounded by a pair of square brackets.
", "content": [{"c": "An array literal is written as a list of values,\n separated by commas, and surrounded by a pair of square brackets.", "t": "text"}]}, {"type": "code", "raw_content": "
// Using type inference:
var snowfall =[2.4,3.6,3.4,1.8,0.0]
\n
// Being explicit with the type:
var temp:[Int]=[33,31,30,38,44]
\n ", "inline": false, "content": {"code_content": "// Using type inference:\nvar snowfall = [2.4, 3.6, 3.4, 1.8, 0.0]\n\n\n// Being explicit with the type:\nvar temp: [Int] = [33, 31, 30, 38, 44]", "by": "tag_pre"}}]], "main_html": "
An array can be initialized with an array\n literal, which is a short-hand method of writing one or more values as\n an array collection.
An array literal is written as a list of values,\n separated by commas, and surrounded by a pair of square brackets.
An array stores an ordered collection of values\n of the same data type.
\n
Use the initializer syntax, [Type](), to create an empty array\n of a certain type.
\n
\n
\n \n
\n
\n
var scores =[Int]()
\n
// The array is empty: []
\n
\n
\n
\n
\n
\n
\n
\n Initialize with Array Literal
\n
\n
\n
\n
\n
An array can be initialized with an array\n literal, which is a short-hand method of writing one or more values as\n an array collection.
\n
An array literal is written as a list of values,\n separated by commas, and surrounded by a pair of square brackets.
\n
\n
\n \n
\n
\n
// Using type inference:
var snowfall =[2.4,3.6,3.4,1.8,0.0]
\n
// Being explicit with the type:
var temp:[Int]=[33,31,30,38,44]
\n
\n
\n
\n
\n
\n
\n
Index
\n
\n
\n
\n
\n
An index refers to an item\u2019s position within an\n ordered list. Use the subscript syntax, array[index], to retrieve an\n individual element from an array.
\n
Note: Swift arrays are\n zero-indexed, meaning the first element has index 0.
\n
\n
\n \n
\n
\n
var vowels =["a","e","i","o","u"]
\n
print(vowels[0])// Prints: a
print(vowels[1])// Prints: e
print(vowels[2])// Prints: i
print(vowels[3])// Prints: o
print(vowels[4])// Prints: u
\n
\n
\n
\n
\n
\n
\n
.count Property
\n
\n
\n
\n
\n
The .count property returns the number\n of elements in an array.
\n
\n
\n \n
\n
\n
var grocery =["\ud83e\udd53","\ud83e\udd5e","\ud83c\udf6a","\ud83e\udd5b","\ud83c\udf4a"]
\n
print(grocery.count)
\n
// Prints: 5
\n
\n
\n
\n
\n
\n
\n
.append() Method and += Operator
\n
\n
\n
\n
\n
The .append() method can be called on\n an array to add an item to the end of the array.
\n
The +=\n addition assignment operator can be used to add the elements of another\n array to the existing array.
In Swift, a for-in loop can be used to iterate\n through the items of an array.
\n
This is a powerful tool for working with and\n manipulating a large amount of data.
\n
\n
\n \n
\n
\n
var employees =["Michael","Dwight","Jim","Pam","Andy"]
\n
for person in employees {
print(person)
}
\n
// Prints: Michael
// Prints: Dwight
// Prints: Jim
// Prints: Pam
// Prints: Andy
\n
\n
\n
\n
\n
\n
\n
Swift Sets
\n
\n
\n
\n
\n
We can use a set to store unique elements of the\n same data type.
\n
\n
\n \n
\n
\n
var paintingsInMOMA:Set=["The Dream","The Starry Night","The False Mirror"]
\n
\n
\n
\n
\n
\n
\n
Empty Sets
\n
\n
\n
\n
\n
An empty set is a set that contains no values\n inside of it.
\n
\n
\n \n
\n
\n
var team =Set<String>()
\n
print(team)
// Prints: []
\n
\n
\n
\n
\n
\n
\n
Populated Sets
\n
\n
\n
\n
\n
To create a set populated with values, use the\n Set keyword before the\n assignment operator.
\n
The values of the set must be contained within\n brackets [] and separated with\n commas ,.
\n
\n
\n \n
\n
\n
var vowels:Set=["a","e","i","o","u"]
\n
\n
\n
\n
\n
\n
\n
.insert()
\n
\n
\n
\n
\n
To insert a single value into a set, append .insert() to a set and place the\n new value inside the parentheses ().
\n
\n
\n \n
\n
\n
var cookieJar:Set=["Chocolate Chip","Oatmeal Raisin"]
\n
// Add a new element
cookieJar.insert("Peanut Butter Chip")
\n
\n
\n
\n
\n
\n
\n
\n
\n .remove() and .removeAll() Methods
\n
\n
\n
\n
\n
To remove a single value from a set, append .remove() to a set with the value\n to be removed placed inside the parentheses ().
\n
To remove every single value from a set at once,\n append .removeAll() to a set.\n
\n
\n
\n \n
\n
\n
var oddNumbers:Set=[1,2,3,5]
\n
// Remove an existing element
oddNumbers.remove(2)
\n
// Remove all elements
oddNumbers.removeAll()
\n
\n
\n
\n
\n
\n
\n
.contains()
\n
\n
\n
\n
\n
Appending .contains() to an existing set\n with an item in the parentheses () will return a true or false value that states whether\n the item exists within the set.
\n
\n
\n \n
\n
\n
var names:Set=["Rosa","Doug","Waldo"]
\n
print(names.contains("Lola"))// Prints: false
\n
if names.contains("Waldo"){
print("There's Waldo!")
}else{
print("Where's Waldo?")
}
// Prints: There's Waldo!
\n
\n
\n
\n
\n
\n
\n
Iterating\n Over a Set
\n
\n
\n
\n
\n
A for-in loop can be used to iterate\n over each item in a set.
\n
\n
\n \n
\n
\n
var recipe:Set=["Chocolate chips","Eggs","Flour","Sugar"]
\n
for ingredient in recipe {
print("Include \\(ingredient) in the recipe.")
}
\n
\n
\n
\n
\n
\n
\n
.isEmpty Property\n
\n
\n
\n
\n
\n
Use the built-in property .isEmpty to check if a set has no\n values contained in it.
\n
\n
\n \n
\n
\n
var emptySet =Set<String>()
\n
print(emptySet.isEmpty)// Prints: true
\n
var populatedSet:Set=[1,2,3]
\n
print(populatedSet.isEmpty)// Prints: false
\n
\n
\n
\n
\n
\n
\n
.count Property\n
\n
\n
\n
\n
\n
The property .count returns the number of\n elements contained within a set.
\n
\n
\n \n
\n
\n
var band:Set=["Guitar","Bass","Drums","Vocals"]
\n
print("There are \\(band.count) players in the band.")
// Prints: There are 4 players in the band.
\n
\n
\n
\n
\n
\n
\n
\n .intersection() Operation
\n
\n
\n
\n
\n
The .intersection() operation\n populates a new set of elements with the overlapping elements of two\n sets.
\n
\n
\n \n
\n
\n
var setA:Set=["A","B","C","D"]
var setB:Set=["C","D","E","F"]
\n
var setC = setA.intersection(setB)
print(setC)// Prints: ["D", "C"]
\n
\n
\n
\n
\n
\n
\n
.union() Operation\n
\n
\n
\n
\n
\n
The .union() operation populates a new\n set by taking all the values from two sets and combining them.
\n
\n
\n \n
\n
\n
var setA:Set=["A","B","C","D"]
var setB:Set=["C","D","E","F"]
\n
var setC = setA.union(setB)
print(setC)
// Prints: ["B", "A", "D", "F", "C", "E"]
\n
\n
\n
\n
\n
\n
\n
\n .symmetricDifference() Operation
\n
\n
\n
\n
\n
The .symmetricDifference() operation\n creates a new set with all the non-overlapping values between two sets.\n
\n
\n
\n \n
\n
\n
var setA:Set=["A","B","C","D"]
var setB:Set=["C","D","E","F"]
\n
var setC = setA.symmetricDifference(setB)
print(setC)
// Prints: ["B", "E", "F", "A"]
\n
\n
\n
\n
\n
\n
\n
\n .subtracting() Operation
\n
\n
\n
\n
\n
The .subtracting() operation removes\n the values of one second set from another set and stores the remaining\n values in a new set.
\n \n \n\n\n\n"}
diff --git a/bench/data/groundtruth/code_20_dev_to.jsonl b/bench/data/groundtruth/code_20_dev_to.jsonl
new file mode 100644
index 00000000..6f893ba5
--- /dev/null
+++ b/bench/data/groundtruth/code_20_dev_to.jsonl
@@ -0,0 +1 @@
+{"url": "https://dev.to/radzion/building-a-react-guitar-scale-visualizer-interactive-pentatonic-patterns-3hi6", "content": "\ud83d\udc19 GitHub| \ud83c\udfae Demo\n\nDiscover how to build an interactive guitar fretboard that visualizes Major and Minor pentatonic scales using React and TypeScript. This step-by-step guide will walk you through creating an intuitive widget that helps guitarists learn and practice these essential scales. You can explore the live demo at pentafret.com or dive into the complete source code on GitHub.\n\n## Project Overview\n\nOur application allows users to explore guitar scales interactively by selecting a root note and scale type. The app then visualizes the corresponding notes across 15 frets on the fretboard. For a detailed walkthrough of the app's foundation and the core fretboard rendering implementation, check out this post where we cover those topics in depth.\n\n## Understanding Pentatonic Scale Patterns\n\nOne of the most powerful aspects of pentatonic scales is their symmetrical nature - the pattern remains identical for both Major and Minor scales, with only the root note position shifting. For example, compare the G Major pentatonic with the E Minor pentatonic scales - you'll notice the same finger patterns, just starting from different positions. This means that once you master the 5 basic pentatonic patterns, you can apply them to both Major and Minor scales by simply moving the patterns to different positions on the fretboard. This versatility makes pentatonic scales an incredibly efficient learning tool for guitarists, as the same finger patterns can be used to play in any key, Major or Minor.\n\n## Implementing Scale Pattern Relationships\n\nTo enhance the learning experience, we want to highlight the relationship between Major and Minor pentatonic scales that share the same pattern. When a user selects either a Major or Minor pentatonic scale, we display a clickable subtitle that shows its relative counterpart (e.g., \"same pattern as E Minor pentatonic\" for G Major pentatonic). Clicking this subtitle instantly switches to the related scale, allowing users to visually understand how the same pattern can be used for both scales.\n\n```\nimport { UnstyledButton } from \"@lib/ui/buttons/UnstyledButton\"\nimport { useChangeScale, useScale } from \"./state/scale\"\nimport { chromaticNotesNames } from \"@product/core/note\"\nimport { PentatonicScale, scaleNames } from \"@product/core/scale\"\nimport styled from \"styled-components\"\nimport { getColor } from \"@lib/ui/theme/getters\"\nimport { getRelativePentatonic } from \"@product/core/scale/getRelativePentatonic\"\n\nconst Button = styled(UnstyledButton)`\n &:hover {\n color: ${getColor(\"textPrimary\")};\n }\n`\n\nexport const PentatonicSubtitle = ({ scale }: { scale: PentatonicScale }) => {\n const { rootNote } = useScale()\n\n const changeScale = useChangeScale()\n\n const relativePentatonic = getRelativePentatonic({\n scale,\n rootNote,\n })\n\n return (\n \n )\n}\n```\n\n## Calculating Relative Scales\n\nThe `getRelativePentatonic` function is the core calculation engine behind this feature. For any given scale, it determines its relative counterpart by shifting the root note by three semitones - up when converting from Minor and down for Major. For instance, this is how we determine that G Major and E Minor share the same pattern.\n\n```\nimport { match } from \"@lib/utils/match\"\nimport { chromaticNotesNumber } from \"../note\"\nimport { getPairComplement } from \"@lib/utils/pair/getPairComplement\"\nimport { scalePatterns, pentatonicScales, PentatonicScale } from \"./index\"\n\ntype Pentatonic = {\n scale: PentatonicScale\n rootNote: number\n}\n\nexport const getRelativePentatonic = ({\n scale,\n rootNote,\n}: Pentatonic): Pentatonic => {\n const [semitones] = scalePatterns[\"minor-pentatonic\"]\n const direction = match(scale, {\n \"minor-pentatonic\": () => 1,\n \"major-pentatonic\": () => -1,\n })\n\n const relativeNote =\n (rootNote + semitones * direction + chromaticNotesNumber) %\n chromaticNotesNumber\n\n const relativeScale = getPairComplement(pentatonicScales, scale)\n\n return {\n scale: relativeScale,\n rootNote: relativeNote,\n }\n}\n```\n\n## Musical Note Representation\n\nIn our application, we represent musical notes using a zero-based numbering system. Each note is assigned a number from 0 to 11, where A is 0, A\\# (or Bb) is 1, B is 2, C is 3, and so forth.\n\n```\nimport { scalePatterns } from \"../scale\"\n\nexport const naturalNotesNames = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"]\n\nexport const chromaticNotesNames = scalePatterns.minor.reduce(\n (acc, step, index) => {\n const note = naturalNotesNames[index]\n\n acc.push(note)\n\n if (step === 2) {\n acc.push(`${note}#`)\n }\n\n return acc\n },\n [] as string[],\n)\n\nexport const chromaticNotesNumber = chromaticNotesNames.length\n\nexport const isNaturalNote = (note: number) =>\n chromaticNotesNames[note].length === 1\n```\n\n## Visualizing Scale Patterns\n\nTo present the scale patterns in an organized and visually appealing way, we create a `PentatonicPatterns` component. This component displays a collection of essential scale shapes, each representing a different position on the fretboard. It shows a title with the current scale name (e.g., \"G Major Pentatonic Patterns\") and renders multiple `PentatonicPattern` components, one for each shape in the selected scale:\n\n```\nimport { range } from \"@lib/utils/array/range\"\nimport { scaleNames, PentatonicScale, scalePatterns } from \"@product/core/scale\"\nimport { Text } from \"@lib/ui/text\"\nimport { chromaticNotesNames } from \"@product/core/note\"\nimport { useScale } from \"../state/scale\"\nimport { VStack } from \"@lib/ui/css/stack\"\nimport { PentatonicPattern } from \"./PentatonicPattern\"\n\nexport const PentatonicPatterns = ({ scale }: { scale: PentatonicScale }) => {\n const { rootNote } = useScale()\n\n const noteName = chromaticNotesNames[rootNote]\n const scaleName = scaleNames[scale]\n\n const title = `${noteName} ${scaleName} Pentatonic Patterns`\n\n return (\n \n \n \n {title}\n \n \n {scalePatterns[scale].length} Essential Shapes for Guitar Solos\n \n \n {range(scalePatterns[scale].length).map((index) => (\n \n ))}\n \n )\n}\n```\n\n## Rendering Individual Patterns\n\nEach pattern is rendered using the `PentatonicPattern` component, which creates an interactive fretboard visualization for a specific position. The component takes a pattern index and scale type as props, calculates the note positions using `getPentatonicPattern` , and renders them on a fretboard. Root notes are highlighted to help guitarists identify key reference points while practicing:\n\n```\nimport { IndexProp } from \"@lib/ui/props\"\nimport { useScale } from \"../state/scale\"\nimport { PentatonicScale, scaleNames } from \"@product/core/scale\"\nimport { chromaticNotesNames } from \"@product/core/note\"\nimport { stringsCount, tuning } from \"../../guitar/config\"\nimport { Fretboard } from \"../../guitar/fretboard/Fretboard\"\nimport { Note } from \"../../guitar/fretboard/Note\"\nimport { VStack } from \"@lib/ui/css/stack\"\nimport { Text } from \"@lib/ui/text\"\nimport { getNoteFromPosition } from \"@product/core/note/getNoteFromPosition\"\nimport { getPentatonicPattern } from \"./getPentatonicPattern\"\n\nexport const PentatonicPattern = ({\n index: patternIndex,\n scale,\n}: IndexProp & { scale: PentatonicScale }) => {\n const { rootNote } = useScale()\n\n const notes = getPentatonicPattern({\n index: patternIndex,\n scale,\n rootNote,\n stringsCount,\n tuning,\n })\n\n const noteName = chromaticNotesNames[rootNote]\n const scaleName = scaleNames[scale]\n\n const title = `${noteName} ${scaleName} Pentatonic Pattern #${patternIndex + 1}`\n\n return (\n \n \n {title}\n \n \n {notes.map((position) => {\n const note = getNoteFromPosition({ tuning, position })\n\n return (\n \n )\n })}\n \n \n )\n}\n```\n\n## Fretboard Position System\n\nTo reference a note's position on the fretboard, we need two pieces of information: the string number (zero-based, from top to bottom) and the fret number (where -1 represents an open string, and 0 represents the first fret):\n\n```\nexport type NotePosition = {\n // 0-based index of the string\n string: number\n // -1 if the note is open\n // 0 if the note is on the 1st fret\n fret: number\n}\n```\n\n## Pattern Generation Algorithm\n\nThe `getPentatonicPattern` function builds each scale shape using a systematic approach. First, it determines the starting note by adding up the scale intervals based on the pattern index. Then, it follows a specific traversal strategy: starting from the lowest string (6th), it places two notes per string, working its way up to the highest string (1st). For each new note, it calculates the fret position by either using the first note of the pattern or by adding the appropriate interval to the previous note's position. When moving to a new string, the algorithm applies a shift of 4 or 5 frets (depending on the string) to maintain the pattern's shape:\n\n```\nimport { scalePatterns } from \"@product/core/scale\"\nimport { sum } from \"@lib/utils/array/sum\"\nimport { match } from \"@lib/utils/match\"\nimport { getRelativePentatonic } from \"@product/core/scale/pentatonic/getRelativePentatonic\"\nimport { PentatonicScale } from \"@product/core/scale\"\nimport { getLastItem } from \"@lib/utils/array/getLastItem\"\nimport { range } from \"@lib/utils/array/range\"\nimport { getNoteFret } from \"@product/core/guitar/getNoteFret\"\nimport { chromaticNotesNumber } from \"@product/core/note\"\nimport { NotePosition } from \"@product/core/note/NotePosition\"\n\ntype Input = {\n index: number\n scale: PentatonicScale\n rootNote: number\n stringsCount: number\n tuning: number[]\n}\n\nexport const getPentatonicPattern = ({\n index,\n scale,\n rootNote,\n stringsCount,\n tuning,\n}: Input) => {\n const pattern = scalePatterns[\"minor-pentatonic\"]\n\n const minorRootNote = match(scale, {\n \"minor-pentatonic\": () => rootNote,\n \"major-pentatonic\": () =>\n getRelativePentatonic({ scale, rootNote }).rootNote,\n })\n\n const firstNote =\n (minorRootNote + sum(pattern.slice(0, index))) % chromaticNotesNumber\n\n const result: NotePosition[] = []\n\n range(stringsCount * 2).forEach((index) => {\n const string = stringsCount - Math.floor(index / 2) - 1\n\n const openNote = tuning[string]\n\n const previousPosition = getLastItem(result)\n\n const getFret = () => {\n if (!previousPosition) {\n return getNoteFret({ openNote, note: firstNote })\n }\n\n const step = pattern[(index + index - 1) % pattern.length]\n\n const fret = previousPosition.fret + step\n\n if (index % 2 === 0) {\n const shift = string === 1 ? 4 : 5\n\n return fret - shift\n }\n\n return fret\n }\n\n result.push({\n string,\n fret: getFret(),\n })\n })\n\n if (result.some((position) => position.fret < -1)) {\n return result.map((position) => ({\n ...position,\n fret: position.fret + chromaticNotesNumber,\n }))\n }\n\n return result\n}\n```\n\n## Handling Edge Cases\n\nSometimes, our pattern calculation might result in negative fret positions (less than -1), which aren't playable on a guitar. In such cases, we shift the entire pattern up by an octave (12 frets) to keep it in a playable range. For example, in the G Minor pentatonic pattern shown below, we move all notes 12 frets higher to maintain the same pattern shape in a more practical position:\n\n## Conclusion\n\nWith these components and algorithms in place, we've created an interactive learning tool that helps guitarists visualize and practice pentatonic scales across the fretboard. The application handles the complexities of musical theory and fretboard geometry, allowing players to focus on mastering these essential patterns in any key they choose.\n", "main_html": "
Discover how to build an interactive guitar fretboard that visualizes Major and Minor pentatonic scales using React and TypeScript. This step-by-step guide will walk you through creating an intuitive widget that helps guitarists learn and practice these essential scales. You can explore the live demo at pentafret.com or dive into the complete source code on GitHub.
\n Project Overview\n
Our application allows users to explore guitar scales interactively by selecting a root note and scale type. The app then visualizes the corresponding notes across 15 frets on the fretboard. For a detailed walkthrough of the app's foundation and the core fretboard rendering implementation, check out this post where we cover those topics in depth.
\n Understanding Pentatonic Scale Patterns\n
One of the most powerful aspects of pentatonic scales is their symmetrical nature - the pattern remains identical for both Major and Minor scales, with only the root note position shifting. For example, compare the G Major pentatonic with the E Minor pentatonic scales - you'll notice the same finger patterns, just starting from different positions. This means that once you master the 5 basic pentatonic patterns, you can apply them to both Major and Minor scales by simply moving the patterns to different positions on the fretboard. This versatility makes pentatonic scales an incredibly efficient learning tool for guitarists, as the same finger patterns can be used to play in any key, Major or Minor.
\n Implementing Scale Pattern Relationships\n
To enhance the learning experience, we want to highlight the relationship between Major and Minor pentatonic scales that share the same pattern. When a user selects either a Major or Minor pentatonic scale, we display a clickable subtitle that shows its relative counterpart (e.g., \"same pattern as E Minor pentatonic\" for G Major pentatonic). Clicking this subtitle instantly switches to the related scale, allowing users to visually understand how the same pattern can be used for both scales.
The getRelativePentatonic function is the core calculation engine behind this feature. For any given scale, it determines its relative counterpart by shifting the root note by three semitones - up when converting from Minor and down for Major. For instance, this is how we determine that G Major and E Minor share the same pattern.
In our application, we represent musical notes using a zero-based numbering system. Each note is assigned a number from 0 to 11, where A is 0, A# (or Bb) is 1, B is 2, C is 3, and so forth.
To present the scale patterns in an organized and visually appealing way, we create a PentatonicPatterns component. This component displays a collection of essential scale shapes, each representing a different position on the fretboard. It shows a title with the current scale name (e.g., \"G Major Pentatonic Patterns\") and renders multiple PentatonicPattern components, one for each shape in the selected scale:
Each pattern is rendered using the PentatonicPattern component, which creates an interactive fretboard visualization for a specific position. The component takes a pattern index and scale type as props, calculates the note positions using getPentatonicPattern, and renders them on a fretboard. Root notes are highlighted to help guitarists identify key reference points while practicing:
To reference a note's position on the fretboard, we need two pieces of information: the string number (zero-based, from top to bottom) and the fret number (where -1 represents an open string, and 0 represents the first fret):
exporttypeNotePosition={\n // 0-based index of the string\n string:number\n // -1 if the note is open\n // 0 if the note is on the 1st fret\n fret:number\n}\n
\n Pattern Generation Algorithm\n
The getPentatonicPattern function builds each scale shape using a systematic approach. First, it determines the starting note by adding up the scale intervals based on the pattern index. Then, it follows a specific traversal strategy: starting from the lowest string (6th), it places two notes per string, working its way up to the highest string (1st). For each new note, it calculates the fret position by either using the first note of the pattern or by adding the appropriate interval to the previous note's position. When moving to a new string, the algorithm applies a shift of 4 or 5 frets (depending on the string) to maintain the pattern's shape:
Sometimes, our pattern calculation might result in negative fret positions (less than -1), which aren't playable on a guitar. In such cases, we shift the entire pattern up by an octave (12 frets) to keep it in a playable range. For example, in the G Minor pentatonic pattern shown below, we move all notes 12 frets higher to maintain the same pattern shape in a more practical position:
\n Conclusion\n
With these components and algorithms in place, we've created an interactive learning tool that helps guitarists visualize and practice pentatonic scales across the fretboard. The application handles the complexities of musical theory and fretboard geometry, allowing players to focus on mastering these essential patterns in any key they choose.
Discover how to build an interactive guitar fretboard that visualizes Major and Minor pentatonic scales using React and TypeScript. This step-by-step guide will walk you through creating an intuitive widget that helps guitarists learn and practice these essential scales. You can explore the live demo at pentafret.com or dive into the complete source code on GitHub.
", "content": [{"c": "Discover how to build an interactive guitar fretboard that visualizes Major and Minor pentatonic scales using React and TypeScript. This step-by-step guide will walk you through creating an intuitive widget that helps guitarists learn and practice these essential scales. You can explore the live demo at pentafret.com or dive into the complete source code on GitHub.", "t": "text"}]}, {"type": "image", "raw_content": "", "content": {"url": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F90o1ol47yupltzsb6zew.jpeg", "data": null, "alt": "5 Pentatonic Patterns", "title": null, "caption": null}}, {"type": "title", "raw_content": "
Our application allows users to explore guitar scales interactively by selecting a root note and scale type. The app then visualizes the corresponding notes across 15 frets on the fretboard. For a detailed walkthrough of the app's foundation and the core fretboard rendering implementation, check out this post where we cover those topics in depth.
", "content": [{"c": "Our application allows users to explore guitar scales interactively by selecting a root note and scale type. The app then visualizes the corresponding notes across 15 frets on the fretboard. For a detailed walkthrough of the app's foundation and the core fretboard rendering implementation, check out this post where we cover those topics in depth.", "t": "text"}]}, {"type": "image", "raw_content": "", "content": {"url": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fopi5wg2zxu0kzhuakz1w.jpeg", "data": null, "alt": "Select Root Note and Scale Type", "title": null, "caption": null}}, {"type": "title", "raw_content": "
One of the most powerful aspects of pentatonic scales is their symmetrical nature - the pattern remains identical for both Major and Minor scales, with only the root note position shifting. For example, compare the G Major pentatonic with the E Minor pentatonic scales - you'll notice the same finger patterns, just starting from different positions. This means that once you master the 5 basic pentatonic patterns, you can apply them to both Major and Minor scales by simply moving the patterns to different positions on the fretboard. This versatility makes pentatonic scales an incredibly efficient learning tool for guitarists, as the same finger patterns can be used to play in any key, Major or Minor.
", "content": [{"c": "One of the most powerful aspects of pentatonic scales is their symmetrical nature - the pattern remains identical for both Major and Minor scales, with only the root note position shifting. For example, compare the G Major pentatonic with the E Minor pentatonic scales - you'll notice the same finger patterns, just starting from different positions. This means that once you master the 5 basic pentatonic patterns, you can apply them to both Major and Minor scales by simply moving the patterns to different positions on the fretboard. This versatility makes pentatonic scales an incredibly efficient learning tool for guitarists, as the same finger patterns can be used to play in any key, Major or Minor.", "t": "text"}]}, {"type": "image", "raw_content": "", "content": {"url": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjc98f3u8fq9hpj1wbsn.jpeg", "data": null, "alt": "G Major Pentatonic", "title": null, "caption": null}}, {"type": "title", "raw_content": "
To enhance the learning experience, we want to highlight the relationship between Major and Minor pentatonic scales that share the same pattern. When a user selects either a Major or Minor pentatonic scale, we display a clickable subtitle that shows its relative counterpart (e.g., \"same pattern as E Minor pentatonic\" for G Major pentatonic). Clicking this subtitle instantly switches to the related scale, allowing users to visually understand how the same pattern can be used for both scales.
", "content": [{"c": "To enhance the learning experience, we want to highlight the relationship between Major and Minor pentatonic scales that share the same pattern. When a user selects either a Major or Minor pentatonic scale, we display a clickable subtitle that shows its relative counterpart (e.g., \"same pattern as E Minor pentatonic\" for G Major pentatonic). Clicking this subtitle instantly switches to the related scale, allowing users to visually understand how the same pattern can be used for both scales.\n", "t": "text"}]}, {"type": "code", "raw_content": "import{UnstyledButton}from\"@lib/ui/buttons/UnstyledButton\"\nimport{useChangeScale,useScale}from\"./state/scale\"\nimport{chromaticNotesNames}from\"@product/core/note\"\nimport{PentatonicScale,scaleNames}from\"@product/core/scale\"\nimportstyledfrom\"styled-components\"\nimport{getColor}from\"@lib/ui/theme/getters\"\nimport{getRelativePentatonic}from\"@product/core/scale/getRelativePentatonic\"\n\nconstButton=styled(UnstyledButton)`\n &:hover {\n color: ${getColor(\"textPrimary\")};\n }\n`\n\nexportconstPentatonicSubtitle=({scale}:{scale:PentatonicScale})=>{\n const{rootNote}=useScale()\n\n constchangeScale=useChangeScale()\n\n constrelativePentatonic=getRelativePentatonic({\n scale,\n rootNote,\n })\n\n return (\n <ButtononClick={()=>changeScale(relativePentatonic)}>\n (same pattern as {chromaticNotesNames[relativePentatonic.rootNote]}{\"\"}\n {scaleNames[relativePentatonic.scale]} pentatonic)\n </Button>\n )\n}\n", "inline": false, "content": {"code_content": "import { UnstyledButton } from \"@lib/ui/buttons/UnstyledButton\"\nimport { useChangeScale, useScale } from \"./state/scale\"\nimport { chromaticNotesNames } from \"@product/core/note\"\nimport { PentatonicScale, scaleNames } from \"@product/core/scale\"\nimport styled from \"styled-components\"\nimport { getColor } from \"@lib/ui/theme/getters\"\nimport { getRelativePentatonic } from \"@product/core/scale/getRelativePentatonic\"\n\nconst Button = styled(UnstyledButton)`\n &:hover {\n color: ${getColor(\"textPrimary\")};\n }\n`\n\nexport const PentatonicSubtitle = ({ scale }: { scale: PentatonicScale }) => {\n const { rootNote } = useScale()\n\n const changeScale = useChangeScale()\n\n const relativePentatonic = getRelativePentatonic({\n scale,\n rootNote,\n })\n\n return (\n \n )\n}", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
The getRelativePentatonic function is the core calculation engine behind this feature. For any given scale, it determines its relative counterpart by shifting the root note by three semitones - up when converting from Minor and down for Major. For instance, this is how we determine that G Major and E Minor share the same pattern.
", "content": [{"c": "The", "t": "text"}, {"c": "getRelativePentatonic", "t": "code-inline"}, {"c": "function is the core calculation engine behind this feature. For any given scale, it determines its relative counterpart by shifting the root note by three semitones - up when converting from Minor and down for Major. For instance, this is how we determine that G Major and E Minor share the same pattern.\n", "t": "text"}]}, {"type": "code", "raw_content": "import{match}from\"@lib/utils/match\"\nimport{chromaticNotesNumber}from\"../note\"\nimport{getPairComplement}from\"@lib/utils/pair/getPairComplement\"\nimport{scalePatterns,pentatonicScales,PentatonicScale}from\"./index\"\n\ntypePentatonic={\n scale:PentatonicScale\n rootNote:number\n}\n\nexportconstgetRelativePentatonic=({\n scale,\n rootNote,\n}:Pentatonic):Pentatonic=>{\n const[semitones]=scalePatterns[\"minor-pentatonic\"]\n constdirection=match(scale,{\n \"minor-pentatonic\":()=>1,\n \"major-pentatonic\":()=>-1,\n })\n\n constrelativeNote=\n (rootNote+semitones*direction+chromaticNotesNumber)%\n chromaticNotesNumber\n\n constrelativeScale=getPairComplement(pentatonicScales,scale)\n\n return{\n scale:relativeScale,\n rootNote:relativeNote,\n }\n}\n", "inline": false, "content": {"code_content": "import { match } from \"@lib/utils/match\"\nimport { chromaticNotesNumber } from \"../note\"\nimport { getPairComplement } from \"@lib/utils/pair/getPairComplement\"\nimport { scalePatterns, pentatonicScales, PentatonicScale } from \"./index\"\n\ntype Pentatonic = {\n scale: PentatonicScale\n rootNote: number\n}\n\nexport const getRelativePentatonic = ({\n scale,\n rootNote,\n}: Pentatonic): Pentatonic => {\n const [semitones] = scalePatterns[\"minor-pentatonic\"]\n const direction = match(scale, {\n \"minor-pentatonic\": () => 1,\n \"major-pentatonic\": () => -1,\n })\n\n const relativeNote =\n (rootNote + semitones * direction + chromaticNotesNumber) %\n chromaticNotesNumber\n\n const relativeScale = getPairComplement(pentatonicScales, scale)\n\n return {\n scale: relativeScale,\n rootNote: relativeNote,\n }\n}", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
In our application, we represent musical notes using a zero-based numbering system. Each note is assigned a number from 0 to 11, where A is 0, A# (or Bb) is 1, B is 2, C is 3, and so forth.
", "content": [{"c": "In our application, we represent musical notes using a zero-based numbering system. Each note is assigned a number from 0 to 11, where A is 0, A# (or Bb) is 1, B is 2, C is 3, and so forth.\n", "t": "text"}]}, {"type": "code", "raw_content": "import{scalePatterns}from\"../scale\"\n\nexportconstnaturalNotesNames=[\"A\",\"B\",\"C\",\"D\",\"E\",\"F\",\"G\"]\n\nexportconstchromaticNotesNames=scalePatterns.minor.reduce(\n (acc,step,index)=>{\n constnote=naturalNotesNames[index]\n\n acc.push(note)\n\n if (step===2){\n acc.push(`${note}#`)\n }\n\n returnacc\n },\n []asstring[],\n)\n\nexportconstchromaticNotesNumber=chromaticNotesNames.length\n\nexportconstisNaturalNote=(note:number)=>\n chromaticNotesNames[note].length===1\n", "inline": false, "content": {"code_content": "import { scalePatterns } from \"../scale\"\n\nexport const naturalNotesNames = [\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\"]\n\nexport const chromaticNotesNames = scalePatterns.minor.reduce(\n (acc, step, index) => {\n const note = naturalNotesNames[index]\n\n acc.push(note)\n\n if (step === 2) {\n acc.push(`${note}#`)\n }\n\n return acc\n },\n [] as string[],\n)\n\nexport const chromaticNotesNumber = chromaticNotesNames.length\n\nexport const isNaturalNote = (note: number) =>\n chromaticNotesNames[note].length === 1", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
To present the scale patterns in an organized and visually appealing way, we create a PentatonicPatterns component. This component displays a collection of essential scale shapes, each representing a different position on the fretboard. It shows a title with the current scale name (e.g., \"G Major Pentatonic Patterns\") and renders multiple PentatonicPattern components, one for each shape in the selected scale:
", "content": [{"c": "To present the scale patterns in an organized and visually appealing way, we create a", "t": "text"}, {"c": "PentatonicPatterns", "t": "code-inline"}, {"c": "component. This component displays a collection of essential scale shapes, each representing a different position on the fretboard. It shows a title with the current scale name (e.g., \"G Major Pentatonic Patterns\") and renders multiple", "t": "text"}, {"c": "PentatonicPattern", "t": "code-inline"}, {"c": "components, one for each shape in the selected scale:\n", "t": "text"}]}, {"type": "code", "raw_content": "import{range}from\"@lib/utils/array/range\"\nimport{scaleNames,PentatonicScale,scalePatterns}from\"@product/core/scale\"\nimport{Text}from\"@lib/ui/text\"\nimport{chromaticNotesNames}from\"@product/core/note\"\nimport{useScale}from\"../state/scale\"\nimport{VStack}from\"@lib/ui/css/stack\"\nimport{PentatonicPattern}from\"./PentatonicPattern\"\n\nexportconstPentatonicPatterns=({scale}:{scale:PentatonicScale})=>{\n const{rootNote}=useScale()\n\n constnoteName=chromaticNotesNames[rootNote]\n constscaleName=scaleNames[scale]\n\n consttitle=`${noteName}${scaleName} Pentatonic Patterns`\n\n return (\n <VStackgap={60}>\n <VStackgap={8}>\n <Text\n centerHorizontally\n weight={800}\n size={32}\n color=\"contrast\"\n as=\"h2\"\n >\n {title}\n </Text>\n <Text\n centerHorizontally\n weight={700}\n size={20}\n color=\"supporting\"\n as=\"h4\"\n >\n {scalePatterns[scale].length} Essential Shapes for Guitar Solos\n </Text>\n </VStack>\n {range(scalePatterns[scale].length).map((index)=>(\n <PentatonicPatternkey={index}index={index}scale={scale}/>\n ))}\n </VStack>\n )\n}\n", "inline": false, "content": {"code_content": "import { range } from \"@lib/utils/array/range\"\nimport { scaleNames, PentatonicScale, scalePatterns } from \"@product/core/scale\"\nimport { Text } from \"@lib/ui/text\"\nimport { chromaticNotesNames } from \"@product/core/note\"\nimport { useScale } from \"../state/scale\"\nimport { VStack } from \"@lib/ui/css/stack\"\nimport { PentatonicPattern } from \"./PentatonicPattern\"\n\nexport const PentatonicPatterns = ({ scale }: { scale: PentatonicScale }) => {\n const { rootNote } = useScale()\n\n const noteName = chromaticNotesNames[rootNote]\n const scaleName = scaleNames[scale]\n\n const title = `${noteName} ${scaleName} Pentatonic Patterns`\n\n return (\n \n \n \n {title}\n \n \n {scalePatterns[scale].length} Essential Shapes for Guitar Solos\n \n \n {range(scalePatterns[scale].length).map((index) => (\n \n ))}\n \n )\n}", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
Each pattern is rendered using the PentatonicPattern component, which creates an interactive fretboard visualization for a specific position. The component takes a pattern index and scale type as props, calculates the note positions using getPentatonicPattern, and renders them on a fretboard. Root notes are highlighted to help guitarists identify key reference points while practicing:
", "content": [{"c": "Each pattern is rendered using the", "t": "text"}, {"c": "PentatonicPattern", "t": "code-inline"}, {"c": "component, which creates an interactive fretboard visualization for a specific position. The component takes a pattern index and scale type as props, calculates the note positions using", "t": "text"}, {"c": "getPentatonicPattern", "t": "code-inline"}, {"c": ", and renders them on a fretboard. Root notes are highlighted to help guitarists identify key reference points while practicing:\n", "t": "text"}]}, {"type": "code", "raw_content": "import{IndexProp}from\"@lib/ui/props\"\nimport{useScale}from\"../state/scale\"\nimport{PentatonicScale,scaleNames}from\"@product/core/scale\"\nimport{chromaticNotesNames}from\"@product/core/note\"\nimport{stringsCount,tuning}from\"../../guitar/config\"\nimport{Fretboard}from\"../../guitar/fretboard/Fretboard\"\nimport{Note}from\"../../guitar/fretboard/Note\"\nimport{VStack}from\"@lib/ui/css/stack\"\nimport{Text}from\"@lib/ui/text\"\nimport{getNoteFromPosition}from\"@product/core/note/getNoteFromPosition\"\nimport{getPentatonicPattern}from\"./getPentatonicPattern\"\n\nexportconstPentatonicPattern=({\n index:patternIndex,\n scale,\n}:IndexProp&{scale:PentatonicScale})=>{\n const{rootNote}=useScale()\n\n constnotes=getPentatonicPattern({\n index:patternIndex,\n scale,\n rootNote,\n stringsCount,\n tuning,\n })\n\n constnoteName=chromaticNotesNames[rootNote]\n constscaleName=scaleNames[scale]\n\n consttitle=`${noteName}${scaleName} Pentatonic Pattern #${patternIndex+1}`\n\n return (\n <VStackgap={40}>\n <TextcenterHorizontallycolor=\"contrast\"as=\"h3\"weight=\"700\"size={18}>\n {title}\n </Text>\n <Fretboard>\n {notes.map((position)=>{\n constnote=getNoteFromPosition({tuning,position})\n\n return (\n <Note\n key={`${position.string}-${position.fret}`}\n {...position}\n kind={rootNote===note?\"primary\":\"regular\"}\n />\n )\n })}\n </Fretboard>\n </VStack>\n )\n}\n", "inline": false, "content": {"code_content": "import { IndexProp } from \"@lib/ui/props\"\nimport { useScale } from \"../state/scale\"\nimport { PentatonicScale, scaleNames } from \"@product/core/scale\"\nimport { chromaticNotesNames } from \"@product/core/note\"\nimport { stringsCount, tuning } from \"../../guitar/config\"\nimport { Fretboard } from \"../../guitar/fretboard/Fretboard\"\nimport { Note } from \"../../guitar/fretboard/Note\"\nimport { VStack } from \"@lib/ui/css/stack\"\nimport { Text } from \"@lib/ui/text\"\nimport { getNoteFromPosition } from \"@product/core/note/getNoteFromPosition\"\nimport { getPentatonicPattern } from \"./getPentatonicPattern\"\n\nexport const PentatonicPattern = ({\n index: patternIndex,\n scale,\n}: IndexProp & { scale: PentatonicScale }) => {\n const { rootNote } = useScale()\n\n const notes = getPentatonicPattern({\n index: patternIndex,\n scale,\n rootNote,\n stringsCount,\n tuning,\n })\n\n const noteName = chromaticNotesNames[rootNote]\n const scaleName = scaleNames[scale]\n\n const title = `${noteName} ${scaleName} Pentatonic Pattern #${patternIndex + 1}`\n\n return (\n \n \n {title}\n \n \n {notes.map((position) => {\n const note = getNoteFromPosition({ tuning, position })\n\n return (\n \n )\n })}\n \n \n )\n}", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
To reference a note's position on the fretboard, we need two pieces of information: the string number (zero-based, from top to bottom) and the fret number (where -1 represents an open string, and 0 represents the first fret):
", "content": [{"c": "To reference a note's position on the fretboard, we need two pieces of information: the string number (zero-based, from top to bottom) and the fret number (where -1 represents an open string, and 0 represents the first fret):\n", "t": "text"}]}, {"type": "code", "raw_content": "exporttypeNotePosition={\n // 0-based index of the string\n string:number\n // -1 if the note is open\n // 0 if the note is on the 1st fret\n fret:number\n}\n", "inline": false, "content": {"code_content": "export type NotePosition = {\n // 0-based index of the string\n string: number\n // -1 if the note is open\n // 0 if the note is on the 1st fret\n fret: number\n}", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
The getPentatonicPattern function builds each scale shape using a systematic approach. First, it determines the starting note by adding up the scale intervals based on the pattern index. Then, it follows a specific traversal strategy: starting from the lowest string (6th), it places two notes per string, working its way up to the highest string (1st). For each new note, it calculates the fret position by either using the first note of the pattern or by adding the appropriate interval to the previous note's position. When moving to a new string, the algorithm applies a shift of 4 or 5 frets (depending on the string) to maintain the pattern's shape:
", "content": [{"c": "The", "t": "text"}, {"c": "getPentatonicPattern", "t": "code-inline"}, {"c": "function builds each scale shape using a systematic approach. First, it determines the starting note by adding up the scale intervals based on the pattern index. Then, it follows a specific traversal strategy: starting from the lowest string (6th), it places two notes per string, working its way up to the highest string (1st). For each new note, it calculates the fret position by either using the first note of the pattern or by adding the appropriate interval to the previous note's position. When moving to a new string, the algorithm applies a shift of 4 or 5 frets (depending on the string) to maintain the pattern's shape:\n", "t": "text"}]}, {"type": "code", "raw_content": "import{scalePatterns}from\"@product/core/scale\"\nimport{sum}from\"@lib/utils/array/sum\"\nimport{match}from\"@lib/utils/match\"\nimport{getRelativePentatonic}from\"@product/core/scale/pentatonic/getRelativePentatonic\"\nimport{PentatonicScale}from\"@product/core/scale\"\nimport{getLastItem}from\"@lib/utils/array/getLastItem\"\nimport{range}from\"@lib/utils/array/range\"\nimport{getNoteFret}from\"@product/core/guitar/getNoteFret\"\nimport{chromaticNotesNumber}from\"@product/core/note\"\nimport{NotePosition}from\"@product/core/note/NotePosition\"\n\ntypeInput={\n index:number\n scale:PentatonicScale\n rootNote:number\n stringsCount:number\n tuning:number[]\n}\n\nexportconstgetPentatonicPattern=({\n index,\n scale,\n rootNote,\n stringsCount,\n tuning,\n}:Input)=>{\n constpattern=scalePatterns[\"minor-pentatonic\"]\n\n constminorRootNote=match(scale,{\n \"minor-pentatonic\":()=>rootNote,\n \"major-pentatonic\":()=>\n getRelativePentatonic({scale,rootNote}).rootNote,\n })\n\n constfirstNote=\n (minorRootNote+sum(pattern.slice(0,index)))%chromaticNotesNumber\n\n constresult:NotePosition[]=[]\n\n range(stringsCount*2).forEach((index)=>{\n conststring=stringsCount-Math.floor(index/2)-1\n\n constopenNote=tuning[string]\n\n constpreviousPosition=getLastItem(result)\n\n constgetFret=()=>{\n if (!previousPosition){\n returngetNoteFret({openNote,note:firstNote})\n }\n\n conststep=pattern[(index+index-1)%pattern.length]\n\n constfret=previousPosition.fret+step\n\n if (index%2===0){\n constshift=string===1?4:5\n\n returnfret-shift\n }\n\n returnfret\n }\n\n result.push({\n string,\n fret:getFret(),\n })\n })\n\n if (result.some((position)=>position.fret<-1)){\n returnresult.map((position)=>({\n ...position,\n fret:position.fret+chromaticNotesNumber,\n }))\n }\n\n returnresult\n}\n", "inline": false, "content": {"code_content": "import { scalePatterns } from \"@product/core/scale\"\nimport { sum } from \"@lib/utils/array/sum\"\nimport { match } from \"@lib/utils/match\"\nimport { getRelativePentatonic } from \"@product/core/scale/pentatonic/getRelativePentatonic\"\nimport { PentatonicScale } from \"@product/core/scale\"\nimport { getLastItem } from \"@lib/utils/array/getLastItem\"\nimport { range } from \"@lib/utils/array/range\"\nimport { getNoteFret } from \"@product/core/guitar/getNoteFret\"\nimport { chromaticNotesNumber } from \"@product/core/note\"\nimport { NotePosition } from \"@product/core/note/NotePosition\"\n\ntype Input = {\n index: number\n scale: PentatonicScale\n rootNote: number\n stringsCount: number\n tuning: number[]\n}\n\nexport const getPentatonicPattern = ({\n index,\n scale,\n rootNote,\n stringsCount,\n tuning,\n}: Input) => {\n const pattern = scalePatterns[\"minor-pentatonic\"]\n\n const minorRootNote = match(scale, {\n \"minor-pentatonic\": () => rootNote,\n \"major-pentatonic\": () =>\n getRelativePentatonic({ scale, rootNote }).rootNote,\n })\n\n const firstNote =\n (minorRootNote + sum(pattern.slice(0, index))) % chromaticNotesNumber\n\n const result: NotePosition[] = []\n\n range(stringsCount * 2).forEach((index) => {\n const string = stringsCount - Math.floor(index / 2) - 1\n\n const openNote = tuning[string]\n\n const previousPosition = getLastItem(result)\n\n const getFret = () => {\n if (!previousPosition) {\n return getNoteFret({ openNote, note: firstNote })\n }\n\n const step = pattern[(index + index - 1) % pattern.length]\n\n const fret = previousPosition.fret + step\n\n if (index % 2 === 0) {\n const shift = string === 1 ? 4 : 5\n\n return fret - shift\n }\n\n return fret\n }\n\n result.push({\n string,\n fret: getFret(),\n })\n })\n\n if (result.some((position) => position.fret < -1)) {\n return result.map((position) => ({\n ...position,\n fret: position.fret + chromaticNotesNumber,\n }))\n }\n\n return result\n}", "by": "tag_pre_code"}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAMklEQVQ4jWNgGHGAEYn9nwg12ACKPiaKnEOETbhcSTSgugsHv4GjYKSB0ZxCHqB6eQgAWBUIC4Akc0gAAAAASUVORK5CYII=", "alt": null, "title": null, "caption": null}}, {"type": "image", "raw_content": "", "content": {"url": null, "data": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABmJLR0QA/wD/AP+gvaeTAAAAQ0lEQVQ4jWNgGAVI4D8Uk6SOidquGPwGsiCxiQkvfOA/AwMNXDgKRgJgRGLjSoeMOMSx6qNpTkF3Cak5h5GBYSgUDgB4OQkSobdiFwAAAABJRU5ErkJggg==", "alt": null, "title": null, "caption": null}}, {"type": "title", "raw_content": "
Sometimes, our pattern calculation might result in negative fret positions (less than -1), which aren't playable on a guitar. In such cases, we shift the entire pattern up by an octave (12 frets) to keep it in a playable range. For example, in the G Minor pentatonic pattern shown below, we move all notes 12 frets higher to maintain the same pattern shape in a more practical position:
", "content": [{"c": "Sometimes, our pattern calculation might result in negative fret positions (less than -1), which aren't playable on a guitar. In such cases, we shift the entire pattern up by an octave (12 frets) to keep it in a playable range. For example, in the G Minor pentatonic pattern shown below, we move all notes 12 frets higher to maintain the same pattern shape in a more practical position:", "t": "text"}]}, {"type": "image", "raw_content": "", "content": {"url": "https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8w0q8lj8oholwy4rsqg8.jpeg", "data": null, "alt": "Moving Pattern an octave higher", "title": null, "caption": null}}, {"type": "title", "raw_content": "
With these components and algorithms in place, we've created an interactive learning tool that helps guitarists visualize and practice pentatonic scales across the fretboard. The application handles the complexities of musical theory and fretboard geometry, allowing players to focus on mastering these essential patterns in any key they choose.
", "content": [{"c": "With these components and algorithms in place, we've created an interactive learning tool that helps guitarists visualize and practice pentatonic scales across the fretboard. The application handles the complexities of musical theory and fretboard geometry, allowing players to focus on mastering these essential patterns in any key they choose.", "t": "text"}]}]], "html": "\n\n\n \n \n Building a React Guitar Scale Visualizer: Interactive Pentatonic Patterns - DEV Community\n \n \n \n \n \n\n\n\n \n\n\n\n\n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n\n\n\n
Discover how to build an interactive guitar fretboard that visualizes Major and Minor pentatonic scales using React and TypeScript. This step-by-step guide will walk you through creating an intuitive widget that helps guitarists learn and practice these essential scales. You can explore the live demo at pentafret.com or dive into the complete source code on GitHub.
Our application allows users to explore guitar scales interactively by selecting a root note and scale type. The app then visualizes the corresponding notes across 15 frets on the fretboard. For a detailed walkthrough of the app's foundation and the core fretboard rendering implementation, check out this post where we cover those topics in depth.
One of the most powerful aspects of pentatonic scales is their symmetrical nature - the pattern remains identical for both Major and Minor scales, with only the root note position shifting. For example, compare the G Major pentatonic with the E Minor pentatonic scales - you'll notice the same finger patterns, just starting from different positions. This means that once you master the 5 basic pentatonic patterns, you can apply them to both Major and Minor scales by simply moving the patterns to different positions on the fretboard. This versatility makes pentatonic scales an incredibly efficient learning tool for guitarists, as the same finger patterns can be used to play in any key, Major or Minor.
To enhance the learning experience, we want to highlight the relationship between Major and Minor pentatonic scales that share the same pattern. When a user selects either a Major or Minor pentatonic scale, we display a clickable subtitle that shows its relative counterpart (e.g., \"same pattern as E Minor pentatonic\" for G Major pentatonic). Clicking this subtitle instantly switches to the related scale, allowing users to visually understand how the same pattern can be used for both scales. \n
The getRelativePentatonic function is the core calculation engine behind this feature. For any given scale, it determines its relative counterpart by shifting the root note by three semitones - up when converting from Minor and down for Major. For instance, this is how we determine that G Major and E Minor share the same pattern. \n
In our application, we represent musical notes using a zero-based numbering system. Each note is assigned a number from 0 to 11, where A is 0, A# (or Bb) is 1, B is 2, C is 3, and so forth. \n
To present the scale patterns in an organized and visually appealing way, we create a PentatonicPatterns component. This component displays a collection of essential scale shapes, each representing a different position on the fretboard. It shows a title with the current scale name (e.g., \"G Major Pentatonic Patterns\") and renders multiple PentatonicPattern components, one for each shape in the selected scale: \n
Each pattern is rendered using the PentatonicPattern component, which creates an interactive fretboard visualization for a specific position. The component takes a pattern index and scale type as props, calculates the note positions using getPentatonicPattern, and renders them on a fretboard. Root notes are highlighted to help guitarists identify key reference points while practicing: \n
To reference a note's position on the fretboard, we need two pieces of information: the string number (zero-based, from top to bottom) and the fret number (where -1 represents an open string, and 0 represents the first fret): \n
\n\n
\n
exporttypeNotePosition={\n // 0-based index of the string\n string:number\n // -1 if the note is open\n // 0 if the note is on the 1st fret\n fret:number\n}\n
The getPentatonicPattern function builds each scale shape using a systematic approach. First, it determines the starting note by adding up the scale intervals based on the pattern index. Then, it follows a specific traversal strategy: starting from the lowest string (6th), it places two notes per string, working its way up to the highest string (1st). For each new note, it calculates the fret position by either using the first note of the pattern or by adding the appropriate interval to the previous note's position. When moving to a new string, the algorithm applies a shift of 4 or 5 frets (depending on the string) to maintain the pattern's shape: \n
Sometimes, our pattern calculation might result in negative fret positions (less than -1), which aren't playable on a guitar. In such cases, we shift the entire pattern up by an octave (12 frets) to keep it in a playable range. For example, in the G Minor pentatonic pattern shown below, we move all notes 12 frets higher to maintain the same pattern shape in a more practical position:
With these components and algorithms in place, we've created an interactive learning tool that helps guitarists visualize and practice pentatonic scales across the fretboard. The application handles the complexities of musical theory and fretboard geometry, allowing players to focus on mastering these essential patterns in any key they choose.
Look at songperformer.net in the theory section, it has lots of different tunings, even a sequencer, you can also overlay scales/modes/chord tones across the fretboard, it's free to use, I wrote it.
There are quite a few fretboard visualisers out there, I wrote the one in songperformer.net, using JavaScript, no frameworks. For fun you should add audio, colour coding, left and right handed, allow selection of number of frets, different tunings and instruments, show on keyboards at the same time and allow multiple scales/ modes to overlay, circle of fifths and AI integration for music theory help. I did this embedded in a WASM app so no server trips required. Use SVG, then you will have scalable graphics too. \n
![\"David](\"https://i.sstatic.net/x8KIt.jpg?s=64\")
![\"georgephillips's](\"https://www.gravatar.com/avatar/e7e8748f7897c2d9a3da0afe4deb6d14?s=64&d=identicon&r=PG\")
![\"Matthew](\"https://i.sstatic.net/gYsgh.jpg?s=64\")
![\"panpernicek's](\"https://www.gravatar.com/avatar/b5daa0ecd0b3a18fb5228d7d97a1adae?s=64&d=identicon&r=PG&f=y&so-version=2\")
![\"David](\"https://www.gravatar.com/avatar/fc076ee04b5dc9fbef2d3766c2c5c320?s=64&d=identicon&r=PG&f=y&so-version=2\")
![\"Community's](\"https://www.gravatar.com/avatar/a007be5a61f6aa8f3e85ae2fc18dd66e?s=64&d=identicon&r=PG\")
![\"user2523022's](\"https://www.gravatar.com/avatar/48eac5453415ba24bd7b2aee1b69513e?s=64&d=identicon&r=PG\")
![\"Google](\"https://i.sstatic.net/uEYnJ.png\")
![\"AWS\"](\"https://i.sstatic.net/5oGoh.png\")
![\"JW.'s](\"https://www.gravatar.com/avatar/ca45063da41a9f3aa9028295d8b66d89?s=64&d=identicon&r=PG\")
![\"David](\"https://i.sstatic.net/xvLnU.jpg?s=64\")
![\"Talha](\"https://i.sstatic.net/FCaN9.png?s=64\")
![\"Addeladde's](\"https://www.gravatar.com/avatar/09fee7df79a993faccf13f379a36b5a6?s=64&d=identicon&r=PG\")
![\"Grant's](\"https://www.gravatar.com/avatar/b0e225959e52aed4de541899b4a68b6c?s=64&d=identicon&r=PG\")
![\"tanius's](\"https://www.gravatar.com/avatar/7ae8b0fc66eaeea19cbf9be759db5abf?s=64&d=identicon&r=PG\")
![\"sesperanto's](\"https://i.sstatic.net/k2t7A.jpg?s=64\")
![\"Subhan's](\"https://i.sstatic.net/d9A5n.jpg?s=64\")
![\"Star](\"https://lh4.googleusercontent.com/-MmLfOcLEjxs/AAAAAAAAAAI/AAAAAAAAAF4/uwYmMMvn95k/photo.jpg?sz=64\")
![\"\"](\"/forums/images/avatarimages/94dd90f7-4eeb-4369-8e56-8f101e514374gussprofilepic_m.jpg\")
", "content": {"url": "https://www.test.com/forums/images/avatarimages/94dd90f7-4eeb-4369-8e56-8f101e514374gussprofilepic_m.jpg", "data": null, "alt": null, "title": null, "caption": null}}, {"type": "paragraph", "raw_content": "![](\"/forums/images/forum-gamification/rank-02.svg\"){kind=icon}
", "content": {"url": "https://www.test.com/forums/images/forum-gamification/rank-02.svg", "data": null, "alt": null, "title": null, "caption": null}}, {"type": "paragraph", "raw_content": "![](\"/forums/images/forum-gamification/general-veteran.svg\")
", "content": {"url": "https://www.test.com/forums/images/forum-gamification/general-veteran.svg", "data": null, "alt": null, "title": null, "caption": null}}, {"type": "paragraph", "raw_content": "![\"\"](\"/forums/images/avatarimages/default.gif\")
![](\"/forums/images/forum-gamification/rank-01.svg\"\n){kind=icon}
\n ![](\"/forums/images/forum-gamification/support-officer.svg\")
\n ![](\"/forums/images/forum-gamification/rank-02.svg\"\n){kind=icon}
\n ![](\"/forums/images/forum-gamification/general-veteran.svg\"\n)
\n ![](\"/forums/images/forum-gamification/rank-01.svg\"){kind=icon}
", "content": {"url": "https://www.test.com/forums/images/forum-gamification/rank-01.svg", "data": null, "alt": null, "title": null, "caption": null}}, {"type": "paragraph", "raw_content": "![\"\"](\"https://img2024.cnblogs.com/blog/35695/202412/35695-20241201073014811-1847930772.jpg\")
\n \n ![\"\u8fd4\u56de\u4e3b\u9875\"](\"/skins/custom/images/logo.gif\"){kind=logo}
![\"\"](\"https://img2024.cnblogs.com/blog/35695/202412/35695-20241201072501456-2052907165.jpg\")
\n \n ![\"pdf\"](\"https://img-home.csdnimg.cn/images/20241231044930.png\")
![](\"https://img-home.csdnimg.cn/images/20250102104920.png\")
![\"xlsx\"](\"https://img-home.csdnimg.cn/images/20241231045042.png\")
![\"zip\"](\"https://img-home.csdnimg.cn/images/20241231045053.png\")
![\"rar\"](\"https://img-home.csdnimg.cn/images/20241231044955.png\")
![\"xls\"](\"https://img-home.csdnimg.cn/images/20241231045031.png\")
![\"docx\"](\"https://img-home.csdnimg.cn/images/20241231044901.png\")
![\"recommend-type\"](\"https://img-home.csdnimg.cn/images/20241231044947.png\"){kind=icon}
![\"recommend-type\"](\"https://img-home.csdnimg.cn/images/20241226111658.png\"){kind=icon}
![\"recommend-type\"](\"https://csdnimg.cn/download_wenku/file_type_ask_c1.png\"){kind=icon}
![](\"https://static-assets.codecademy.com/Courses/Course-Cards/pillars.svg\"\n)
![\"DEV](\"https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png\"\n){kind=logo}
\n![\"Radzion](\"https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F398917%2F42ea7ace-c813-40fb-b9ab-763db118f7a5.png\")
\n ![](\"https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg\")
\n \n \n \n ![](\"https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg\")
\n \n \n \n ![](\"https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg\")
\n \n \n \n ![](\"https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg\")
\n \n \n \n ![](\"https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg\")
\n \n \n![\"5](\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F90o1ol47yupltzsb6zew.jpeg\")
![\"Select](\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fopi5wg2zxu0kzhuakz1w.jpeg\")
![\"G](\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmjc98f3u8fq9hpj1wbsn.jpeg\")
![\"Moving](\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8w0q8lj8oholwy4rsqg8.jpeg\")
![\"highcenburg](\"https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F126345%2Fd5f433e7-5a8e-42d0-839c-dc202da0f759.jpeg\")
\n \n\n\n ![\"\"](\"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F126345%2Fd5f433e7-5a8e-42d0-839c-dc202da0f759.jpeg\")
\n ![\"\"](\"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F398917%2F42ea7ace-c813-40fb-b9ab-763db118f7a5.png\")
\n ![\"dan_campbell_8a72ca0ca1d2](\"https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2929273%2F30d23a67-a610-4f1b-9e34-dc495f898b92.jpg\")
\n ![\"\"](\"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2929273%2F30d23a67-a610-4f1b-9e34-dc495f898b92.jpg\")
\n ![\"Image](\"https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7cq6sf1qe7g8g8g7x8iu.png\")
![\"coolerhansen](\"https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1797258%2F200f484a-7e65-4db1-8513-0856708a26d0.jpg\")
\n ![\"\"](\"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1797258%2F200f484a-7e65-4db1-8513-0856708a26d0.jpg\")
\n ![\"rakannimer](\"https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F82967%2F4f782d95-92d5-4bf2-8b94-a73f94a33d5c.jpeg\")
\n ![\"\"](\"https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F82967%2F4f782d95-92d5-4bf2-8b94-a73f94a33d5c.jpeg\")
\n ![\"rimi_jalil2002](\"https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2561030%2Fcf967d4d-36f7-4c0b-a137-994fc7613a17.png\")
\n ![\"abhay_yt_52a8e72b213be229](\"https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2581382%2F49400f07-f922-42e7-baec-371c84455f08.jpg\")
\n ![\"kafeel_ahmad](\"https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F920309%2Fadb29bf4-2cd0-4c21-b6ba-24cbd1a344d8.png\")
\n ![\"DEV](\"https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png\"\n)
\n ![\n \n](\"https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fproxy%2F1%2A1SHwuZ9jDtg0meMFi_Nzbw.jpeg\"){kind=link}
Kudos for adapting your views a bit as new data comes in. I think you've been a step behind on the Newt thing because your analysis is so thoroughly grounded in political theory, data and historical precedent. Sure, that stuff still matters, but in the 2012 Republican primaries, all bets are off. The GOP and their base went nuts after Obama won, pretending otherwise only weakens your analysis.
ReplyDelete"I still overall don't see a low cap on Romney's support..."
ReplyDelete.
Well as I say, there's no gettin' through to the terminally perceptive. ;-)
And you're right, polling does begin to be a little more important the closer we get to actual voting. But there are exceptions to that rule, for candidates who are well known. Unknowns can see late movement, as they become known (Huntsman?). But knowns, a month out from an election, are captive to events and fortune, because everybody already knows who they are. That's why you see Romney panicking the last few days. He's captive to events and fortune, things like NEWT FRICKING GINGRICH stealing his nomination, if you can believe it.
Willard is a known, and the ABR bloc is at 40% and counting. Heck, that's even bigger than I thought it was.
Anon 4:41, I don't understand -- Mitt Romney's numbers can't move much because he's so well known to the GOP base, while Gingrich's numbers have shifted by tens and dozens of points (depending on the question)? Romney is so much better known than Newt Gingrich that such widespread openness to reevaluating Gingrich doesn't suggest potential willingness to reevaluate Romney? How could that possibly be the case?
ReplyDeleteOf course the numbers are soft, but I would think they are soft more in the sense that once there is a Republican nominee and everyone starts singing from the same hymnal (see Rushbo's rhetorical gymnastics to support nominee McCain), anyone they nominate will eventually be "acceptable" to 80-90% of Republican primary voters.
ReplyDeleteThis is how Alan Keyes got 27% as a carpet bagging IL Senate candidate when the original nominee was forced out by a sex scandal. Even the most ridiculous campaign by a painfully flawed replacement candidate gets 27% of Republicans. It's an utter floor.
However, that doesn't happen until there is an actual nominee - and it's during the upcoming primaries where these numbers still matter to some degree. Even still, second place?
THIS IS EXCELLENT NEWS FOR MITT ROMNEY!
You'd have to reference my discussion of the other day, but I'll repeat a bit of it here. Gingrich's movement is directly related to the existence of the ABR bloc. The fact that the ABR crowd is circling back around to Gingrich, the guy that they summarily rejected at the commencement of their long slog through the ABR process, is the final proof of the magnitude of the ABR bloc (and I doubt there's anybody but the terminally perceptive who need that final proof, but here it is.).
ReplyDeleteThese people are coming back around, full circle, to NEWT FRICKING GINGRICH. Anybody who doesn't get the significance of this must be trapped in an impenetrable bubble somewhere.
Gingrich is one of the events and fortunes that poor Willard has to accept, because he can't move the needle on his own. And Gingrich is just fortunate that Willard is out there. This all has nothing to do with him... he's just like Willard in that way. That's why I'm expecting him to step on a landmine soon, like he does. He thinks he's standing on 3rd because he hit a triple.
You lefties should really be paying me for this commentary. ;-)
ReplyDeleteWho do we make the check out to?
ReplyDeleteDid they conduct this poll earlier in the race, when Cain/Bachmann/Perry/Trump/et al were in the lead? If they did, it might give us a clue how useful this metric really is. If, for example, Trump was considered broadly "acceptable" by GOP voters at the time of his surge, that would be evidence that this metric is pretty meaningless.
ReplyDeleteUnfortunately, no; it's the first time they've run it this cycle. And I spent some time looking for their 2008 results, but couldn't find them, so either I'm lame with the Google or they didn't do it. Both are possible!
ReplyDeleteJon:
ReplyDeletehttp://www.gallup.com/poll/23764/nearly-republicans-would-find-mccain-acceptable-nominee.aspx
http://www.gallup.com/poll/28162/giuliani-would-acceptable-nominee-nearly-republicans.aspx
Wow. I am officially way lame.
ReplyDeleteAs far as substance...Romney is about where McCain was. FWIW. And in the earlier one, Newt was 43/52, again FWIW.
I'll stick with what I said: it's evidence, but it's not anything close to definitive. As usual, the most important thing to remember is that most GOP voters have paid very little attention to the nomination race so far, and there's good reason to believe that their opinions are very soft.
Yeah, but the McCain one was from mid-2006. Notice that Obama isn't even mentioned, yet several candidates who never entered the race (Condi, Jeb, Newt, Al Gore, etc.) are included in the poll. I'd take a poll from a few weeks before the primary just a tad more seriously than one from eighteen months before.
ReplyDelete(I got to these results simply by typing site:gallup.com "acceptable nominees" into Google. It turned up nine hits, most of them references to the recent poll.)
Anon 5:39: okay, so it's a more complicated claim: they know Newt and know they don't like him, but he looks very different against just Romney than he does against the whole field. In the former context, he's more than acceptable. Is that right?
ReplyDeleteSo, that makes sense and is perfectly plausible, but isn't it circular? "We can tell ABR supporters won't change their minds about Romney, because they'll even change their minds about Gingrich rather than support Romney" partially relies on the claim it's trying to prove. This could certainly still be right -- not all circles are vicious -- but I had thought you were making the stronger claim that this provided independent evidence for the hardness of the hard core of ABR.
So, this goes back to your epistemological critique, which is both broad and deep (it's pretty hard to get out of a self-reinforcing bubble!). Liberals can't correctly interpret the information they're -- we're -- given, so it's pointless to try to reason by offering isolated facts, even in response to purely empirical questions (like this one about the strength of the ABR bloc). Rather, the best strategy is to present a coherent alternative worldview, so that we can see our bubble, and that there's something outside it.
-- Am I understanding you correctly? If so, that's a very deep puzzle about justification, and probably the best case one could make for gadfly behavior. Hm...
Not too mucb interested in what you formulate as conclusion, classicist. You can go on ahead with that, alone.
ReplyDeleteWe have what we have, right in front of our faces. We don't have what we don't have in front of our faces. The only question is, are we paying attention to what we have, and what we don't have, right in front of our faces?
The terminally perceptive aren't, for sure. ;-)