We Keep Coding

Update iFrame src a click of a href

I have the following code below, and I am trying to make it so that when a user clicks the text of a video streaming website they wish to watch the video from, it will update inside of the iframe.
<iframe src="<!-- Desired URL from a href should be here -->" height="240" width="100%">
<ul class="video-links">
<li>YouTube</li>
<li>Vimeo</li>
<li>DailyMotion</li>
<li>Veoh</li>
<li>Crackle</li>
</ul>
How can I go about doing this in a way that can scale just from adding more <li> tags into our video-links ul class?

The fully working code:
<iframe id="myiframe" src="" height="240" width="100%"></iframe>
<ul class="video-links">
<li>YouTube</li>
<li>Vimeo</li>
<li>DailyMotion</li>
<li>Veoh</li>
<li>Crackle</li>
</ul>
<script>
function changeSrc(obj)
{
document.getElementById("myiframe").src = obj.href;
return false;
}
</script>
Now comes the explanation of the few edits I made to your code:
iframe tags must be closed, otherwise page will not appear correctly.
You must use JavaScript to modify the page dynamically.
You can write JavaScript functions in the script tag.
onclick is a callback, which is called when the user clicks on something in the page. We call the changeSrc function, passing this as parameter, because we want to pass the object which we are clicking.
We must return false, otherwise page will follow the link in the href attribute. There are alternatives to this, but I'm trying to be simple with my solution.
We assign an id to your iframe and get it to manage its properties, like src, so it can be set.

Here is some syntactical sugar added on to FonzTech's answer.
<iframe id="myiframe" src="" height="240" width="100%"></iframe>
<ul class="video-links">
<li data-link="https://our-unique-url-for-this-title.com">YouTube</li>
<li data-link="https://our-unique-url-for-this-title.com">Vimeo</li>
<li data-link="https://our-unique-url-for-this-title.com">DailyMotion</li>
<li data-link="https://our-unique-url-for-this-title.com">Veoh</li>
<li data-link="https://our-unique-url-for-this-title.com">Crackle</li>
</ul>
<script>
// Get a NodeList of all li elements inside .video-links
let elements = document.querySelectorAll('.video-links li')
// Loop through each item in the NodeList
elements.forEach((el) => {
// Add a click event to each item
el.addEventListener('click', () => {
// Scrape the data-link attribute from the current li element
let link = el.attributes['data-link'].value;
// Set the iframe's src attribute
document.getElementById("myiframe").src = link;
});
});
</script>
Instead of using an anchor tag's href attribute for storing data, I suggest using custom data attributes as that is what they are made for. In addition to that you don't have to keep the browser from following the link.
This solution also doesn't use inline JS which some consider to be a "bad" or "messy" practice.

Targeting anchor tag to div tag in same page

I have menu with anchor tag, on click of menu link I want to open a new jsp page into a div tag on the same as tag.
My jsp file:
<ul>
<li>Music</li>
<li>Dance</li>
</ul>
<div class="main-container" id="div_displayfrom">
</div>
Please help....Thanks in advance!!

If you want to use jQuery then you can do this:
<ul id='mainTabs'>
<li>Music</li>
<li>Dance</li>
</ul>
then you can do this in jQuery:
$('#mainTabs a').click(function(e){
e.preventDefault();
$('#div_displayfrom').load(this.getAttribute('href'));
});

Try this:
Use .load() function to load the page contents into specified div.
$('ul > li > a').click(function(){
$('#div_displayfrom').load($(this).attr('href'));
return false;
});

The short answer is that you cannot.
The behaviour you describe is that of an iframe, not a div.
You could fake it by using JavaScript (Ajax) to fetch the content and then put the fetched HTML in the div (but you would have to account for stylesheets, scripts, different URLs that relative URLs in the document will be resolved against, etc). jQuery has a load method to help with this.

The target attribute specifies where to open the linked document.Following are the valid attribute values,
_blank - Opens the linked document in a new window or tab
_self - Opens the linked document in the same frame as it was clicked (this is default)
_parent - Opens the linked document in the parent frame
_top - Opens the linked document in the full body of the window framename Opens the linked document in a named frame
See How do I load an HTML page in a <div> using JavaScript? to load the page in the div.

try like this:
<ul>
<li>Music</li>
....
</ul>
<div class="main-container" id="div_displayfrom">

Following anchor on another page and triggering href

So I want to click on a link of a page which redirects to another one that has 3 different div's which trigger scripts on their href. I am not being able to do this. I tried using anchors but it does not trigger the href...
1st page
<a href="second_page.html#anchor">
2nd page
<div>
<a id="header" href="javascript:showonly('header');" name="anchor">
</div>

You need an onload handler in the head section of your second page which catches the hash and runs your action(s). Something like this should work:
<script type="text/javascript">
window.onload = function(){
if( window.location.hash == '#anchor' ) showonly('header');
}
</script>
You dont need the <a id="header" href="javascript:showonly('header');" name="anchor"> in your markup for this to work

Content is being loaded successfully via ajax. but not showing

I am playing around with djax when I click an anchor tag the url changes and when I view the page source it also changes but the page itself did not change its contents even if I view the page source it has change up any ideas why?
Here's a snippet of the markup
<body>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</body>
When I click that the url changes but the result is not showing but when I view the page source it displays the proper markup(or should I say the markup of thankyou.jsp)
here is the code that Is js code
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});

I've had the exact same problem as you and discovered your question while I was looking for an answer. It may be too late for you but according to your markup I believe you ran into the same problem as me which is actually on the issue-list of the plugins Github site (at least right now).
You need to place your updateable div inside a wrapping div. For some reason exchanging content seems not to work for direct children of body. See https://github.com/beezee/djax/issues/22
So your HTML should look like this
<body>
<div id="djaxWrap>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</div>
</body>
While jQuery remains the same
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});

window.location not work properly

Hi all I am navigating from one html page to another as:
window.location = "test.html";
In test.html I have header as:
<script type="application/javascript">
function redirect()
{
alert("inside redirect:");
//window.location = url;
//history.back();
history.go(-1);
return false;
}
</script>
<div data-role="navbar">
<ul>
<li> Go Back</li>
<li> <a onclick="redirect()" data-icon="back" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Back1</a></li>
</ul>
</div>
But here both back buttons (Go Back and Back1) are not working. If I use $.mobile.changePage('test.html') to navigate between pages then both Back buttons work. Why they are not with windows.location?
I want to develop this application for B-Grade browser which are not support ajax. Therefore I cant use $.mobile.changePage('test.html').
Any help will be appreciated. Thanks.

This Blackberry OS 5 browser has lots of issue. Initially i also tried to do what you are doing right now. But later i think so you will have to think of some other approach which is better. Here is how i solved it
First of all add these lines before loading the jquery-mobile script like this
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
Then i used the Single Html concept. In this concept i had to load my script just once and i could make use of jquery-mobile's changePage. When i had many html pages then i has to wait for some seconds as loading and unloading of scripts took place. Avoid that, Its unnecessarry.
Have all the pages with in the same Html like this
<div data-role="page" id="page1">
<div data-role="page" id="page2">
.
.
.
Then after that you can easily do a changePage like this
$.mobile.changePage("#page1", {
transition : "slide"
});
I hope you take the right approach.

Why not use window.location.replace("test.html");

try:
window.location.href = "test.html";
OR:
window.location.assign("test.html");
SEE REFERENCE

In jQuery mobile you can turn of ajax by setting some initiation variables. You need to load this script before you load jQuery mobile
$(document).bind("mobileinit", function(){
//apply overrides here
$.mobile.ajaxEnabled = false;
});
With ajax turned off you can now still use your $.mobile.changePage().
Now to create a back button all you have to do is give the link an attribute of data-rel="back"
<li>Go Back</li>