I am a very, very beginner at coding. And I think I am close to achieving something, but just can't get it to work just right.
Our company loads our product database into a specific program that is searchable by customers in our industry. Until I figure out how to tie into the API they provide, our website lists all of our products through iframes.
Quite often I have a client asking me to provide them a direct link to a specific product number. I'd rather not try to create a separate page with an iframe specifically linked to that one product, so I've been searching online for how to accomplish all of this.
My site is promo-central.com
I built a special search page at promo-central.com/searchby.html
I am hoping for some way to be able to give my client a link to a product (SBP26 for example) in the form of something like www.promo-central.com/searchby.html?SBP26
That will then tell the iframe on that page to load the src based on that extra info in the URL.
Here's what I currently have:
Link that i'd like to work: http://promo-central.com/searchby.html?itemnum=sbp26
The URL that should be called in this situation to correctly load the iframe would be http://www.promoplace.com/ws/ws.dll/StartSrch?DistID=36182&itemnum=sbp26
Here's the code on the page:
<iframe height="100%" name="WE_Frame" id="WE_Frame" src="http://www.promoplace.com/ws/ws.dll?DistID=36182"></iframe>
<script>
(function() {
var frameBaseSRC = document.getElementById("WE_Frame").src;
var frameQueryString = document.location.href.split("itemnum=")[1];
if (frameQueryString != undefined) {
document.getElementById("WE_Frame").src = frameBaseSRC + "&itemnum=" + frameQueryString;
}
})();
</script>
To me this looks like it should work, but it doesn't work for me.
Am I way off? Or do I just have some kind of small issue?
I REALLY appreciate any help, or alternate ideas you may have.
Thanks in advance!
You are missing "StartSrch" from the base iframe src that you are trying to append the query string to. Your iframe just needs to be updated like this:
<iframe height="100%" name="WE_Frame" id="WE_Frame" src="http://www.promoplace.com/ws/ws.dll/StartSrch?DistID=36182">
Related
I'm currently learning to code in javascript and jquery so my knowledge is exceptionally poor. Im trying to edit a script(with lots of googling) that was written in tampermonkey by a friend and I assume I havent been able to find the answer through search as I have been using the incorrect terms - but dont know what they are.
this is the HTML
<span class="village_anchor contexted" data-player="9281645" data-id="804">
Black Reaper (492|489) K44
<a class="ctx" href="#"></a></span>
All I want to do is get the address that links to and then use location. to go there.
Once again, apologies for my lack of prowess and thankyou for any help.
All you have to do, is to select the spanby his class and then finds the a tag you want.
So you can write this:
var linkhref = $(".village_anchor").find("a").first().attr("href");
Then, you can do the "redirection":
document.location = linkhref;
Use this code.
var address = $('span.village_anchor.contexted a:eq(0)').attr('href');
window.location.href = address; //to open the link in same page.
Hey I have a trolling problem at my forum.
Long story short:
There is a troll who comes and posts images from a number of gore sites. In fact this person hotlinks them directly from the source. For obvious reasons, I want to put this to an end.
I was thinking of implementing a code that does the following:
Checks the source of an image before allowing it to load.
If the src of the image is a url that contains the word 'gore', the image is NOT displayed.
While I realize this isn't a permanent solution, I think this is a step in the right direction. Thoughts? Any idea how I can get started?
JQuery is really a foreign "language" to me but it seems like that's what I need.
In the code below c_post stands for the actual post, meaning this code targets only images posted inside posts. What I want the code to do is select for the word 'gore'.
$('c_post img[src*="gore"]').attr({ hide(); })
I believe you can accomplish this with a RegEx check
if ( $('c_post img').attr('src').match(/gore/) ) {
$('c_post img').attr("src", "filteredimage")
}
If the image's src attribute matches the RegExp, you'd be able rewrite the src url to a specific image of your choice.
or, if you just want to hide it you could instead do the following inside the if statement:
$('c_post img').css("display", "none")
This may seem like a dumb question. But I have no idea if it can be done. So before I start the process of making a portfolio site, I would like some pointers. Otherwise, I will just go with another design.
My question:
When using the ascencor.js plugin, everything on my site is in one file. I will therefor never go to a new url, like /contact or /about.
But then I wondered, what about google?
All of my content would be put inside different different classes, but in the same file:
<div class="floor floor-1">
<span class="text">Floor 1</span>
</div>
<div class="floor floor-2">
<span class="text">Floor 2</span>
</div>
Check the example here: http://rplambech.dk/ascencor/
So yeah, with this method, I will never change the url, so I can therefor only index one page.
Is there a way that I can change the URL without updating the site? And will I be able to go to http://rplambech.dk/ascencor/floor5 for example?
In case it's not possible, can I then at least overwrite the title of the page, each time I click to a new "page". With some PhP for example.
Or should I just go with a completely different approach? :)
From the context of your question, and its comments, you're looking for the term single-page-application.
There are many ways of doing this, some of them make use of the history object in order to support the browser's "back" and "forward" buttons.
I'd recommend you to do a search of the term "single page application" and in the meantime examine some (or all) of the following frameworks (they will ease your development and make your life easier instead of dealing with # and nasty low-level ajax calls:
backbone.js
angularJS
ember.js
It can be done using hash links, originally designed to jump to a certain div on the page are now often used to load dynamic pages on a single page
so you could link to http://rplambech.dk/ascencor/index.html#floor5 for example
and then have some javascript like
var loc = location.hash.split("#")[1];
then
if(loc == 'floor5'){
//execute goto floor 5 code
}
Using history.pushState with HTML5 as stated here.
<script type="text/javascript">
var stateObj = { foo: "bar" };
function change_my_url()
{
history.pushState(stateObj, "page 2", "bar.html");
}
var link = document.getElementById('click');
link.addEventListener('click', change_my_url, false);
</script>
URL:
<a href="#" id='click'>Click to change url to bar.html</a>
No you can't change the URL without going to the server.
JQuery does however have a cool page loader that will load a page.
How to put a whole html page in a div using jquery?
You cannot change the url "/ascencor" to "/ascensor/floor5" without refreshing the page.
But you can change to "/ascensor/#floor5" (added hash sign). I suggest you try out angularjs for more information.
I have seen this question before but I haven't found a working solution.
The question is quite easy.
If I call a page like this.
div.load('page?foo=bar');
I want to be able to retrieve foo in some way an use it in a javascript called by page. But I only manage to obtain the paramethers of the parents url.
I know I can declare variables in the parents javascript code but that is not my preffered way.
So I really hope someone has a solution to this problem.
♥ you guys
You could use something like this to parse the URI:
http://blog.stevenlevithan.com/archives/parseuri
Then you can access the parameters easily from the parent page:
// Set the link that we want to load/examine
var link = 'page?foo=bar';
// Load the link content (as per your code)
div.load(link);
// Grab whatever variables we want from the link
var uri = parseUri(link);
var foo = uri.queryKey.hasOwnProperty('foo') ? uri.queryKey.foo : false;
alert(foo);
EDIT:
As bfavaretto already commented, the content loaded in via AJAX is just a string. It's not a page that will be aware of its URI.
However, if you really want the loaded content to be able to access its URI, just make it available in the content itself. For example:
$('#my_div').load('page?foo=bar)
And in the content of "page?foo=bar":
<div class="container" data-page-uri="{{ insert uri here with php, ruby, whatever }}">
<!-- my page content -->
</div>
Now in your loaded content, you can determine the URI by finding the relevant div with the "data-page-uri" data attribute. Once you have the link, you said that you know how to grab the parameters from it...
Hope that helps.
I think you have two solutions. One, if page has a hidden div, with the data needed, the second one, probably the ajax response object has the caller url. You should study the response xhr object.
Thanks for you replies. Sorry, if it doesn't make sense I will try again, I'm probably complicating things!
I have a frameset index.html, with top.php with is just the radio stream, under that is index.php which is the full joomla website with navigation and everything.
The problem is, if users find the website via a search engine. It will take take them to just the index.php and they won't get the frameset with the top.php. I was using this code in the top.php and index.php:
if(self.location==top.location)self.location="index.html";
which works great apart from it takes the user to index.php no matter what page they were looking for via a search engine.
So I found this article (look under 'A better way' section) which shows you how to code it so if the user's content is on about-us.html, it will take you to that page but still ensure it is in the frameset.
http://scriptasylum.com/tutorials/frameredirect/frameredirect.html
I would like something like that but unfortunately with it being a Joomla website, I don't have page1.html, page2.html etc to be able to add the code and change it accordingly as per their instructions. I only have one page index.php which generates the pages dynamically 'on the fly'
So does anyone know a way I can do what I am wanting...
The frame set is at http://www.housocial.com/new/index.html
Just the joomla part http://www.housocial.com/new/index.php
Thanks again
You may extract the filename via RegExp(I'm not sure if this is what you're asking for)
if(self==top)
{
self.location="index.html?"+encodeURIComponent(location.href.match(/\w+\.html$/));
}
A more flexible solution that takes care of GET-parameters and anchors:
(
function(url,pattern,query,hash)
{
var filename=location.pathname.match(pattern);
if(filename)
{
url+=filename;
if(query && location.search)
{
url+=location.search;
}
if(hash)
{
url+=location.hash
}
location.href=url;
}
}
)('http://www.housocial.com/new/index.php/', //target-URL
/\w+\.html$/, //pattern to search for
1, //include QUERY_STRING
1 //include hash
)