Dynamic jquery address using search button - javascript

I'm trying to use http://www.asual.com/jquery/address/ for history management, this works absolutely fine when we work on "a" tags, but now I've search module which trigger when I click on a search button and I'm trying to include the search text in the address(and also the page number), so that when the user uses the backs button he/she can also see what search they have done previously. Any help will be greatly appreciated.
Edited:
Reference - http://www.asual.com/jquery/address/
I'm building AJAX application, so all the modules are loaded using AJAX and to keep a track of the history I'm using: http://www.asual.com/jquery/address/, till now all the links are "a" href's which I'm coding as Public
Now, I'm working on the search page which has a search TextBox and a searchButton, so when the user enters in the text box and clicks on searchButton, the url has to be adjusted accordingly so when the user directly enters (or comes to that URL using BACK button), the search results should be displayed, this is similar to the "SEARCH MAIL" button in gmail, please note how the url is changing, here I'm also trying to achieve the same thing.
Hope it is clear, thanks.
Regards

I bealive you're looking for something like in this example.
Simplified example:
<html>
<head>
<title>jQuery Address Form</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.address.js"></script>
<script type="text/javascript">
$.address.init(function(event) {
$('form').address();
})
.change(function(e) {
// for anything that isn't homepage
if (e.value != '/') {
// load results for url in e.value, for example:
$("#results").load(e.value);
}
})
</script>
</head>
<body>
<div class="page">
<h1>jQuery Address Form</h1>
<form action="find.php" method="get">
<label for="input">Query</label><br>
<input id="input" name="input" type="text" value="" size="60"/>
<input id="submit" name="submit" type="submit" value="Submit"/>
</form>
<div id="results">
</div>
</div>
</body>
</html>
When you submit the form, the url is changing. The change event is then handled by my code. e.value is a url in this example, so when the url is changing we're trying to load search results into the #results div.
The same change handler is used when user navigates using the "back" button in his/her browser.

There exists whole jQuery plugin for that, called jQuery BBQ: Back Button & Query Library. Try out demo, and find if that is what you need.

Related

How to pass html form information between iframes on google sites

I am relatively new to html/ javascript, and I am trying to use google sites to build a simple store, that will send orders to a google sheet. At present, I am having difficulty passing data between iframes. In the first iframe, I am testing this snippet of code:
<!DOCTYPE html>
<html>
<input type="text" id="texttest">
<button onclick="store()" type="button">Store</button>
</html>
<script type="text/javascript">
function store() {
var myinput = document.getElementById("texttest");
sessionStorage.setItem("texttest", myinput.value);
</script>
And in the second iframe, this snippet:
<!DOCTYPE html>
<html>
<p id="output"></p>
</html>
<script>
document.getElementByID("output").innerHTML = sessionStorage.getItem("texttest");
</script>
The idea is essentially for a user to scroll through the option, input in certain fields the type and quantity of the item they want, and for those selections to be collected at the end and sent to a google sheet. However, the code below is not displaying the text entered in the "texttest" field in the "output" iframe. Any ideas or suggestions would be welcome!

Check Empty Input doesn't work

I'm trying to check if the input is empty with jQuery and the code doesn't work.
That's the code:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="demo.js"></script>
</head>
<body>
<form>
<input type="text" id="name">
<input type="submit" id="btnConnect">
</form>
</body>
</html>
$('#btnConnect').click(function()
{
if($('#name').val() == '')
{
alert('Input is empty!');
}
});
Your problem has two easy solutions.
Basically, you call your script before the rest of the page loads. Your script tries to attach to #btnConnect, which doesn't exist yet.
1). Use document.ready or window.onload. The script will only execute after the whole page loads, so it should work as you meant it to.
2). Place the JS files at the bottom of the document, right before the closing body tag. Most programmers chose to put the scripts at the bottom of the page, because if you have large scripts, the user sees a blank page untill they load.
It works quite well, because most of the time JS is not required until the user begins interacting with the site. It also enables progressive rendering.
For more good JS practices, check out:
JSTheRightWay.org
Hope this helps!

GAS - Prevent button click event from opening new browser tab

I have some Google Sheets app script code that hits an API and updates a field in a sidebar based on some user input. Everything works as expected with the exception of the button used to trigger the API call from the sidebar. For some reason, clicking the button opens a new, blank tab in the browser.
My best guess is that I'm somehow implementing the google.script.run.withSuccessHandler() incorrectly but I've been unable to confirm this. Any help would be much appreciated.
Sidebar.html
This is the full sidebar file that I'm using.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
$('#narrative-from-selection').click(getNarrative);
});
function getNarrative(narrative) {
//document.getElementById('narrative-response').innerHTML = narrative.replace(new RegExp('\r?\n','g'), '<br />');
var projectName = $('#project-name').val();
var templateName = $('#template-name').val();
google.script.run
.withSuccessHandler(
function(narrative) {
$('#narrative-response').html(narrative);
})
.withUserObject(this)
.generateContentForSelected(projectName, templateName);
}
</script>
<body>
<div>
<br />
<br />
<form>
Project Name: <input type="text" name="project-name" id="project-name" onchange="google.script.run.updateProjectAndTemplateNames(this.parentNode)"><br />
Template Name: <input type="text" name="template-name" id="template-name" onchange="google.script.run.updateProjectAndTemplateNames(this.parentNode)"><br />
<button id="narrative-from-selection">Generate from Selection</button><br /><br />
Response:<br /><br />
<div id="narrative-response"></div>
</form>
</div>
</body>
</html>
Code.gs
Here is the overview of the relevant function that I'm using (the info used to hit the API is removed but I've tested that piece many times and it returns exactly what I expect it to send back).
function generateContentForSelected(projectName, templateName) {
// go do some API magic here
var narrative = "This is a test string.";
return narrative;
}
Through a ton of trial and error, I figured out what was causing the issue, though I'm still unsure why it's causing the new tab to open. Apparently, something about the way app script makes an asynchronous call using a form is a little quirky. I stripped the <form> and </form> tags out of the Sidebar.html file and everything works as expected.
If there's a better method to correct this, or if I've gone about this all wrong from the start, I'd be interested to know how to structure this more effectively. But, I did get it working at least.

How do I pass a variable through a hyperlink?

I would like to start off saying that I'm very new to programming. I am developing a site (www.example.com) that has multiple hyperlinks.
When a user visits my site I want all the links to be defaulted to the back office of another site (www.tvcmatrix.com/mhammonds) I use. How do I set the links to redirect to the query string value based on inputted text from a form that is on my site (www.example.com)?
In other words, if the url reads www.example.com/?user=abelliard, how do I make all the links on the site change to "www.tvcmatrix.com/abelliard"? If no query string is present, then I would like for the links to be www.tvcmatrix.com/mhammonds.
Here is a file on my site for the form called "form.asp"
<!DOCTYPE html>
<html>
<body>
<form action="viral.asp" method="get" name="input" target="_self">
Your TVC Matrix Associate ID: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Here is the "viral.asp" file in the "form.asp" file.
<%# language="javascript"%>
<!DOCTYPE html>
<html>
<body>
<%
var id = Request.QueryString("user");
Response.Write("Your URL is: www.mca.com/?user=" + id)
%>
</body>
</html>
Here is the last file and front end of the site called "front.asp"
I have 'viral' and 'form' down packed. The main thing I needed help with was the front end of the site that deals with the links.
I have no clue if I am even a tad bit close or way off track, but what I have isn't working at all so I know it's wrong.
<!DOCTYPE html>
<html>
<head>
<title>Main Site</title>
</head>
<body>
Click Here!
<iframe width="450" height="40" src="form.asp">
</iframe>
</body>
<script lang="javascript" type="text/javascript">
function tvcid() {
var username = document.getElementById('username');
if (username.value != "") {
tvcid = "username";
}
else {
tvcid = "mhammonds";
}
}
</script>
</html>
How do I pass a variable through a hyperlink?
For staters, you're not using a hyperlink, you're submitting a form.
Request.QueryString("user"); is looking for something on the querystring. You're using POST, which has form fields.
Use Request("user");, which will grab the value regardless of whether it's on the querystring or a POST field. If you want to force recognition of form fields only, use Request.Form("user");
Classic ASP code is executed server side when the page loads. You are submitting a form inside an iframe, and the result page is also displayed inside the iframe. This result can't change anything on the parent page because it has already been loaded. The easiest way around this would be to have all your code on the same page. I'll show you how to do this with VBS as the scripting language, it's what I'm used to, but it should be easy enough to use server side JS instead
<%# language="VBScript"%>
<%
Dim id
If Request("user") <> "" then
id = Request("user")
else
id = "mhammonds"
End if
%>
<!DOCTYPE html>
<html>
<head>
<title>Main Site</title>
</head>
<body>
Click Here!<br />
<% If Request("Submit") <> "Submit" then %>
<form method="get">
Your TVC Matrix Associate ID: <input type="text" name="user" />
<input type="submit" name="submit" value="Submit" />
</form>
<% else
Response.Write("Your URL is: www.mca.com/?user=" & id)
End If %>
</body>
</html>
If you really don't want to have to reload front.asp then you need to look at ajax, and add the relevant tag to your question

Fill input text forms on other website in iframe

I want to autofill textboxes on another website so I'm writing a short script to do this. I'm loading an iframe with a website in it and if this iframe is loaded, it should fill in the input text forms. So I wrote this in autofill.php:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>
<iframe name="autofillframe" src="https://e-services.blum.com/main/" style="width:100%; height:100%;"></iframe>
And this I wrote in fill.js:
$(document).ready(function(e) {
$('#username').val('username');
$('#kennwort').val('password');
});
Here is a fiddle
If I do it with a .php file instead of a website, it works fine.
Here's a demo without website
Can someone give me a hint?
When you load a page from a different domain into an iframe, you can't do anything to the iframe page from JavaScript in your page.
As far as the browser is concerned, the iframe is a separate window and you have no access to it. Imagine that the user had a banking page open in one window and your page open in another window. You know that the browser would not let your JavaScript code interfere with the banking page, right?
The same thing applies when the other page is in an iframe. It's still a completely separate browser window, it's just positioned so it looks like it's inside your page.
In your working example, the code works because the username and password fields are not in an iframe from a different domain. They are part of the same page that the JavaScript code is in.
If the iframe is loaded from the same domain as your main page, then you can do anything you want to it, including filling in form fields. The code would be slightly different because you need to access the iframe document instead of the main page document, but that's easy. But if the iframe is from a different domain, you are out of luck.
By pressing submit button , input value copies from input textbox to iframe textbox (or opposit of it).
you can implement it like:
test1.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
var iframe = document.getElementById('myiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('username');
doc.getElementsByName('user')[0].value = elem.value;
});
});
</script>
</head>
<body>
<input type="text" id="username">
<input type="submit" id="submit">
<iframe id="myiframe" frameborder="1" src="test2.html"></iframe>
</body>
</html>
And test2.html :
<!DOCTYPE html>
<html>
<body>
<input type="text" name="user" id="user">
</body>
</html>

Categories

Resources