We Keep Coding

How can I search iframe content (text) using an input field that is on the parent page?

Yes, I know something like this has been asked over here before and I have searched but the one that is closest to what I'm trying to achieve doesn't have an answer ( Search iframe content with jquery and input element on parent page ) and the one that does is making use of nested iframes ( Access the content of a nested Iframe ) and I didn't quite understand the solution (VERY new with javascript so please bear with me). Honestly, it's getting a bit frustrating (it's quite late over here) so I thought I might as well ask.
I have an iframe that displays a page from my site therefore the page is from the same domain. What I would like to do is to search the iframe for some text using javascript (not jquery). The search input box, however, is on the parent page.
I've done something similar to this before by putting the search input box in the page displayed in the iframe instead ( I followed this tutorial: http://help.dottoro.com/ljkjvqqo.php ) but now I need to have the search input box on the parent page because I going to make it "sticky" so that it will follow the user as they scroll down the page. I've resized the parent page height to be the same as the length of the page in the iframe by also using javascript.
So, my question is: How can I use javascript to search text that is in the iframe by using a search input box that is on the parent page?
My HTML so far:
<input type="text" name="page_no" size="3"/>
<input type="submit" name="goto" value="Go"/>
<iframe id='iframe2' src="http://example.com/files/<?php echo $filename;?>" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("iframe2").style.height = document.getElementById("iframe2").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("iframe2").style.height = parseInt(i) + "px"; }
Not sure how to move on from there. I'd really appreciate some help.
Thanks in advance!
EDIT:
The search works now (saw that I put the javascript above the html so I put it under it to get it working) so this is what I want to do with the search results:
I intend to use the search box to enter a page number such that when the user clicks "Go" the search will look for that page and scroll the user down to where the result (that is, the page number) is.
EDIT 2: I just thought I'd mention that my page numbers are written like this: -2- for page 2, -3- for page 3, etc.

I believe this is the solution you need,
HTML:
<!--added an id of search to the input element-->
<input id="search" type="text" name="page_no" size="3"/>
<!--changed input type to button and added an id of go-->
<input id="go" type="button" name="goto" value="Go"/>
<iframe id='iframe2' src="iframe.html" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" ></iframe>
Javascript(make sure the iframe is in the same domain):
//on click event for the button with an id of go
var go = document.getElementById("go").onclick = function(){//begin function
//get the search value
var search = document.getElementById("search").value;
//get the html of the iframe(must be in the same domain)
var iframe = document.getElementById("iframe2").contentDocument.body;
/*create a new RegExp object using search variable as a parameter,
the g option is passed in so it will find more than one occurence of the
search parameter*/
var result = new RegExp(search, 'g');
//set the html of the iframe making the found items bold
iframe.innerHTML = iframe.innerHTML.replace(result,"<b>" + search + "</b>" );
};//end function
Here is a link that will explain some additional flags you can use with the RegExp object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
Below is an improved version of Javascript to scroll to Page Number.
Place it inside of your on click event for the go button. The code requires that you place an id with the page number inside of an element at the top of each page. Example <h3 id="3">Page 3</h3>.
//get the search value
var search = document.getElementById("search").value;
//get the id of the search term
var iframe = document.getElementById("iframe2");
//the url of the page loaded in the iframe
var iframeURL = "iframe.html";
//set the source of iframe appending a link to an element id
iframe.src = iframeURL + "#" + search;

Solved! Thanks Larry Lane for your help.
Here is the present Javascript. Hope it helps someone.
<script type="text/javascript">//on click event for the button with an id of go
var go = document.getElementById("go").onclick = function(){//begin function
//get the search value
var search = document.getElementById("search").value;
//put hyphens for the page number
var pagehyph = '-' + search + '-';
//get the html of the iframe(must be in the same domain)
var iframe = document.getElementById("iframe2").contentDocument.body;
//remove the hash from the iframe src if there is one
var url = document.getElementById("iframe2").src, index = url.indexOf('#');
if(index > 0) {
var url = url.substring(0, index);
}
var newurl = url + "#" + search;
/*create a new RegExp object using search variable as a parameter,
the g option is passed in so it will find more than one occurrence of the
search parameter*/
var result = new RegExp(pagehyph, 'g');
//set the html of the iframe and add a page anchor
iframe.innerHTML = iframe.innerHTML.replace(result,"<a id='" + search + "'>" + search + "</a>" );
//set new src for the iframe with the hash
document.getElementById("iframe2").src = newurl;
};//end function
</script>
As you can see from the code, I've added a page anchor so the page scrolls to the page anchor when they click 'Go'.

function myFunction(x) {
var att = document.querySelector("iframe[id=iframe2]").getAttribute(x);
alert(att);
}
<input type="text" name="page_no" size="3"/>
<input type="submit" name="goto" onclick="myFunction(document.querySelector('input[name=page_no]').value)" value="Go"/>
<hr />
<iframe id='iframe2' src="https://www.example.com" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" ></iframe>

Execute JavaScript code with PHP $_GET

I have a bit of coding that displays div's when requested through a link, now I want to be able to link to that page, and execute the JavaScript with the parameter given through the url in PHP.
The JavaScript displays and closes div's when requested through links.
Link example:
Click here for div1
Click here for div2
Click here for div3
JavaScript code:
$('.selectType').on('click', function(e){
e.preventDefault();
var targetDiv = $($(this).attr('href'));
if(!targetDiv.is(':visible')){
$('.hide').slideUp();
targetDiv.slideDown();
}else{
$('.hide').slideUp();
}
});
css for div:
.hide{display:none;}
div code:
<div id="div1" class="hide">Text in div1</div>
<div id="div2" class="hide">Text in div2</div>
<div id="div3" class="hide">Text in div3</div>
I want to give the URL a link like so:
http://www.example.com/pages/index.php?pageid=div2
When that page is visited, the JavaScript will execute as if the link "Click here for div2" was pressed, so that div2 pops up.
I have no idea where to get started, as in, I do know how to grab the $_GET['pageid'] variable, but no clue how to combine it with the JavaScript into displaying the requested div.
Thanks ahead!

First change your hide/show into a function to save repeating code... ie:
var toggleSelectType = function(target) {
var targetDiv = $(target);
if (!targetDiv.is(':visible')) {
$('.hide').slideUp();
targetDiv.slideDown();
} else {
$('.hide').slideUp();
}
};
$('.selectType').on('click', function(e){
e.preventDefault();
toggleSelectType($(this).attr('href'));
});
Add a function that helps you grab query string values such as:
(How can I get query string values in JavaScript?) ** credit
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Then when the page loads check for the value of pageid and run your function:
var pageId = getParameterByName('pageid');
toggleSelectType('#'+pageId);

button doesn't dissapear onClick (JavaScript)

I have the following code for making the button not visible and it works for a second and then button comes again. The links on navigates on the same page
I have tried "return false;" but then my navigation doesn't work.
What to do for keeping the button hidden?
JavaScript
function btn_hide(){
document.getElementById("btn_shfaqe").style.display="none";
}
html
test1

You have to do two things; Return the function and return false, like this:
javascript
function btn_hide(){
document.getElementById("btn_shfaqe").style.display="none";
return false;
}
html
test1
Here's a DEMO
EDIT according to comment
You are better off hiding the button serverside, but if you really want to use javascript you can do this on page load:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
window.onload = function() {
var vid_id = getParameterByName('vid_id');
if (vid_id == 0 || vid_id == 5) {
document.getElementById("btn_shfaqe").style.display="none";
}
}

It is an anchor tag . I will navigate you to another page .
If you don't want to navigate to another page you may use
javascript:void(0)
as
<a href="javascript:void(0)" onclick="btn_hide();">

Try this fot javascript :
<script>
function visibilite() {
var targetElement = document.getElementById(\'div_connexion\');
targetElement.style.display = "none";
}
</script>
and this in the html :
<div id="div_connexion"><a class="connexion" href="javascript:visibilite();">Connexion</a></div>
I have this on my website and when I click on the div it desapear until the user refresh the page.

The links on navigates on the same page I have tried "return false;" but then my navigation doesn't work.
You want to hide the link and still be able to navigate?
There are two ways of solving the problem:
Server-side: add a parameter to your url, like so: ?tip=fin&vid_id=0&hideButton=1 and on server side apply the display: none; style to your element if it is set. If you're using PHP, something along the lines of the following should do the trick:
<?php if (isset($_GET['hideButton'])) { echo 'style="display: none;"'; }
Client-side: write some flag value to localStorage when button is clicked. When the page is loaded, check if the flag is set. If it is set - hide the anchor.
// Onclick handler:
myButton.addEventListener('click', function () {
localStorage.setItem('hideButton', 'yes');
}, false);
// Onload handler:
window.addEventListener('load', function () {
if (localStorage.getItem('hideButton') === 'yes') {
myButton.style.display = 'none';
}
});
Using one of these ways will hide the link while keeping navigation working. You don't even need to hide the button in the onclick event handler.

Please try with thw below code snippet.
<head runat="server">
<title></title>
<script type="text/javascript">
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
function btn_hide() {
document.getElementById("btn_shfaqe").style.display = "none";
}
</script>
</head>
<body>
<div>
<button id="btn_shfaqe" style="display: none">
jayesh</button>
test1
<script type="text/javascript">
if (getParameterByName("tip") == "") {
document.getElementById("btn_shfaqe").style.display = "";
}
</script>
</div>
</body>
</html>

How do I call event on a dynamically added element with JQuery

I am building an Application with PhoneGap. The application has content pulled from an outside resource. Within the content I pull, there are URLs. Since I load the content in my html dynamically, the href does not exist when the page is created. What I need is a way to find that dynamically added href once the content is loaded, and call a function on it when clicked.
Here is part of the html page where the content is placed, specifically in the #page-content div:
<div data-role="content">
<div id="page-title"></div>
<div id="page-region"></div>
<div id="page-content"></div>
</div>
Once the page is loaded with the content, the html page changes to this:
<div data-role="content" class="ui-content" role="main">
<div id="page-title">Mtg: Switchboard and Panelboard Basics: A Tour of the Eaton Hayward Facility<br></div>
<div id="page-region">Oakland/East Bay<br></div>
<div id="page-content"><p>THURSDAY February 20, 2014<br>
OEB Industry Applications Chapter<br>
- construction, differences, functions, features …<br>
Speakers: Joseph Burnett, Jason Maffioli, Kendyl Brown, and Bob Salter, Eaton<br>
Time: Light Dinner at 5:30 PM; Short Presentation at 6:00PM; Tours at 6:30 PM<br>
Cost: none<br>
Place:<br>
Web: www.ThisIsTheUrlINeed.com </p>
<p>We will discuss Basics of switchboard construction, functions and features, some of the basic “dos and don’ts” related to Switchboard specification, differences between Switchboards and Panelboards, some of the differences and similarities between switchboards and <span id="more-4060"></span>switchgear, and application limitations. The short presentation will be followed by a tour where attendees can see first-hand the basic building blocks, and how panelboards and switchboards are built.</p>
<br></div>
</div>
The function I wrote/found to try and grab the href is:
$('#page-content').on('click','a', function(){
console.log(this);
currentPage = $(this).attr('href');
window.open(currentPage, '_blank', 'location=yes')
});
Nothing appears in the console.log when I run it. I read that .on should be used for situations like this, so I am stumped as to what to do next.
Edit, here is the function I am using to populate the html page:
function IE_navigate(index) {
Bindex = index;
$.mobile.changePage('#eventPage', 'slidefade');
$.each(data, function(i,item){
if (i == Bindex) {
//Clear if page was previously populated
//Populate page
$('#page-title').html(item.title + "<br />");
$('#page-region').html(item.Region + "<br />");
$('#page-content').html(item.fullInfo + "<br />");
return false
}
});
};
Edit: SOLUTION Thanks to a combination of the two answers below (and all the help from everyone else!) here is how I was able to get this problem to work:
function IE_navigate(index) {
Bindex = index;
$.mobile.changePage('#eventPage', 'slidefade');
$.each(data, function(i,item){
if (i == Bindex) {
//Clear if page was previously populated
//Populate page
$('#page-title').html(item.title + "<br />");
$('#page-region').html(item.Region + "<br />");
$('#page-content').html(item.fullInfo + "<br />");
$(this).ready(function(e) {
$('#page-content').on('click','a', function(e){
e.preventDefault();
console.log(this)
currentPage = $(this).attr('href');
window.open(currentPage, '_system', 'location=yes')
});
});
// return false;
return false
}
});
};
Basically, the function needed to come after the content was loaded. My original method of implementation was not differentiating between the content before or after it was populated. Thanks again everyone!

you need to preventDefault action.
I have tried with sample data.
Demo: http://jsfiddle.net/a6NJk/642/
Jquery:
$('#page-content').on('click','a', function(e){
e.preventDefault();
console.log(this);
currentPage = $(this).attr('href');
window.open(currentPage, '_blank', 'location=yes')
});
//this function for generating dynamic html
$("#bb").click(function(){
$("#page-content").append("Web: www.ThisIsTheUrlINeed.com ");
})

The function you wrote/found to try and grab the href must be run after the page is populated with external content.
e.g
$.ajax({
url: 'http://external/foobar.html',
success: function( data, status, xhr ) {
// stuff data in #page-content and so on
// ...and when the anchor is in DOM;
$('#page-content').find('a').click(function(){
dooTheDoo($this.attr('href'));
});
}
})

Add querystring to another page using Javascript?

To start, I am a complete beginner to Javascript and any language for that matter. I am using wordpress for my website.
I have a website that has images loaded according to a query string.
Ex.
www.mysite.com/page1 no image
www.mysite.com/page1?sponsor=calbest logo of calbest
www.mysite.com/page1?sponsor=pfcu logo of pfcu
My question is: how can I keep the current query string even when visiting other pages?
For example, I start off at www.mysite.com/page1?sponsor=calbest and want to click a link to another page. How can I ensure that I arrive at www.mysite.com/page2?sponsor=calbest without having to write it directly in HTML?
The reason I need this is so that I can update page1 or others and add various sponsors to the pages so they have a "personalized" webpage.
Is there a Javascript function that could just add the query string in use to any link I click?

This is a "Jquery" way to do it:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type='text/javascript'>
$(function(){
getParameterByName = function(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
var sponsor = getParameterByName('sponsor') || 'calbest';
$('a.sponsor').each(function( index ) {
$(this).attr("href", $(this).attr("href")+ "?sponsor="+ sponsor);
});
});
</script>
</head>
<body>
<a class="sponsor" href="http://www.google.com">Google</a>
<a class="sponsor" href="http://www.yahoo.com">Yahoo</a>
<a class="sponsor" href="http://stackoverflow.com">Stackoverflow</a>
MS Not Sponsored
</body>
</html>
Not forgetting where I got the getParameterByName