My menu links uses a jQuery script to load various HTML scripts into a div on an index.php page. Menu item 'Info' puts in sectionInfo.html into the index.php page. This script contains a short form and can bring up an alert() to the user if they misuse the form. But when the alert is accepted the page reloads to the default index.php and then the user has to select Info from the menu again to return to where the form is. How can I re-load the correct div again from the alert?
jQuery script for the menu links:
$('.trigger').click(function(){
var url = $(this).attr('href');
$('#target').load(url)
The menu link:
<ul>
<li>
Info
</li>
</ul>
The Alert:
function validateMyForm1() {
alert("Alert goes here ");
window.location = 'href="sectionInfo.html" class="trigger"';
}
The div in the body of the index.php
<div id="target"></div>
I have checked other posts and tried various alternatives. Please help and if you down click me please tell me why as I have been down clicked often and don't know why. Thank you.
https://codereview.stackexchange.com/questions/64192/loading-div-sections-from-separate-files
calling jquery from a javascript function
Go to URL after OK button in alert is pressed
The jQuery script is part of longer script which I include in this edit: The lower part of which slide down text the html files.
$('.trigger').click(function(){
var url = $(this).attr('href');
$('#target').load(url, function() {
$('#faqs h1').each(function() {
var tis = $(this), state = false, answer = tis.next('div').hide().css('height','auto').slideUp();
tis.click(function() {
state = !state;
answer.slideToggle(state);
tis.toggleClass('active',state);
});
});
});
return false;
});
A couple of issues in your JS, in your first example you need to call preventDefault() on the event to stop the link being followed:
$('.trigger').click(function(e) {
e.preventDefault();
$('#target').load($(this).attr('href'))
});
In the second code sample your string location is entirely wrong, you just need to set the URL to go to as a string. Personally I prefer to do this using the assign() method, like this:
function validateMyForm1() {
alert("Alert goes here");
window.location.assign('sectionInfo.html');
}
Related
I have set up a pop up sign up box to show on first site arrival that is loaded using a .js file called inside the <head> tag and this all works fine.
How can i get it to re-show if a menu link is clicked?
Obviously when i link it like this below it will open the file itself containing the codes.
Mailing List
So how do i get it to carry out the function that's in popup.js when the above link is clicked?
Edit: I was able to get the pop up to show by using the below thank you all who contributed.
Mailing List
Now to complete what i'm trying to achieve is to ignore/disable the cookie being set that stops the popup from showing the next time the link is clicked.
function AlreadyBeenNewsletter()
and
function SetNewsletterCookie()
Link to the actual js file
If the JS is already included, you could use the onclick attribute. It will run JS code when a link is clicked.
Mailing List
For the second part of your question, I would create two functions. One that shows the popup without checking if the cookie is set, and another (you already have it) that checks the cookie.
Function that shows popup without checking:
function showPopup(){
var id;
id = "popupSignup";
if (jq(".popupWindow").length) {
jq(".popupWindow").prop("id", id);
} else {
jq("#aspnetForm").after('<div id="popupSignup" class="popupWindow"><a class="popupClose" href="javascript:;"></a><div class="popupDetails"></div></div><div class="backgroundPopup"></div>');
}
jq("#" + id + " .popupDetails").html('<iframe class="popupiframe" src="/user/files/newsletter.html"></iframe>');
InitialisePopup(id, 99, false, true);
ShowPopup();
CenterPopup();
}
Function that you already have popup()
jq(function popup() {
if (!AlreadyBeenNewsletter()) {
SetNewsletterCookie();
showPopup();
}
});
Then you can do the following for your link:
Mailing List
By separating the two functions apart like this you are free to show the popup without preventing it from showing again.
Im using javascript - ajax and jquery to load all contents from php files which is under (#menu a)[see below 'you.php'] without refreshing the page when navigating across the page - which works perfectly.
However, how do I create a hyperlink of somesort on content-A (which loads and shows all the contents from home.php) when clicked, it relocates & shows the user to/the contents of settings.php(B).
Please note my href hyperlinks doesn't have .php at the end. The 'general.js' file explains why.
(you.php):
<div id="menu">
Home
Settings // Content (A)
</div>
<div id="content"><div>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/general.js"></script>
(general.js):
$(document).ready(function() {
// initial content that will be loaded first upon logging in:
$('#content').load('home.php');
// handle menu clicks
$('#menu a').click(function(){
var page = $(this).attr('href');
$('#content').load('' + page + '.php');
return false;
});
});
(home.php):
<h1> welcome to homepage </h1>
Would you like to go to your settings?
Click here: <a href="settings.php>Settings</a>
Obviously the problem with doing the href hyperlink like this in home.php, is that it goes directly to the settings.php page. Which makes my general.js (ajax) and jquery file pointless.
Since the whole point of using ajax and jquery is for smooth navigation and no page refresh upon navigating around the website.
and No, I do not want to load the contents of settings.php within the contents of home.php, 'loadception' is not what I'm looking for.
This is my simple question, I would like a simple answer in php,javascript,ajax.
Any ideas?
You need to use event delegation. To better performance in my example, all links that must be loaded into "#content" have a class "open" so, in jquery you could do some like this:
$('#content').on('click', '.open', function(e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content').load('' + page + '.php'); // concat .php if it's only necessary
});
Updated
I created a demo on github: https://github.com/josemato/stackoverflow/tree/master/spa-event-delegation
I have following HTML code to add new div:
<a class="add-link" id="buttonAdd" href="#Url.Action("Foo", "Foo1", new {actiontype = "Add" })">Add New Openings</a>
When i click on Add , new div is added. I want to show that div in editable mode by default, but as there is link in html for <a> I am not able to accomplish it. I want to show first div that is added as editable .
$(document).ready(function () {
$('.container').on('click', '.add-link', function () {
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Can someone guide me please.
You need to prevent the default click behaviour:
$(document).ready(function () {
$('.container').on('click', '.add-link', function (e) {
e.preventDefault();
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Apparently this is only the first issue. They also want the code to run after the link page has been loaded!!! :)
How web pages work.
Because the web was designed to be stateless, to a web browser, each page load is separate to the last. Even if they are the same URL. The practical upshot of this is that your code gets reloaded and restarted on each page.
Based on your comments you want to add a div then apply jQuery to the accordion. You have two options.
a)
Detect the change of divs on page load and apply the change then.
b)
Run the link via an Ajax call and update just the required part of the page using informtion in the new page returned from the server.
Of these two options only the Ajax solution will allow you to retain code-control on the originating page. I would suggest the URL be changed to a method which returns a PartialPage containing just the new DIV.
In order to answer this definitively, we need more information about how you prefer to solve the problem.
If you go Ajax:
If you go with an Ajax update, I suggest you change the link to an action that just returns the new DIV in a PartialView. Then you can do something like this:
$('.container').on('click', '.add-link', function (e) {
// Stop default processing of the link
e.preventDefault();
// Load the new page (specified by the clicked link's href)
var $link = $(this);
var url = $link.attr('href');
alert(url); // for testing - remove this
// Execute a HTML GET command on the URL
$.get(url, function (html) {
// Add the new DIV "somewhere" to be determined
$('.container').append(html);
// Then do your other processing
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
});
Good Evening, This question is an extension for document.getElementById to include href I currently have a next hyperlinks and the next hyperlinks is using a javascript to overwrite the url. The first time I click the next hyperlinks, it works but when the second times I clicked it, it goes to the url which in the a tag but not the javascript. How can I make the next hyperlinks goes to the url which is in the javascript everytime I click it?
<script>
//..
function nextHyperLinks() {
document.getElementById("nextID").href = "www.google.com";
}
</script>
<HTML>
//..
next
</HTML>
If any things not clear, please let me know. Need some hints and advised, thanks.^^
Try this:
function nextHyperLinks(e) {
e.preventDefault();
document.getElementById("nextID").href = "www.google.com"; // you probably don't need this if you will anyway navigate away from the page.
window.open('http://www.google.com/', '_self');
}
var el= document.getElementsById('nextID');
el.addEventListener('click', nextHyperLinks);
and remove the inline onclick="nextHyperLinks();"
http://jsfiddle.net/45WQq/
next
I have a menu that loads a new html file in a div. The loading is done by a click event attached to the menu's <a> tags. The loading works well and I add the new load to the history by constructing a new href with a hash tag.
But when I use the back button, the URL is updated correct in the browsers address field, but the page is never loaded. If I focus the address field and press enter it loads.
This is the javascript located in the mypage.html header.
<script type="text/javascript">
$(document).ready(function() {
// replace menu link click
$(".right-menu a").live('click', function(ev) {
ev.preventDefault();
ev.stopPropagation();
window.location.href = $(this).attr('href');
$("#content-right").load('mypage'+window.location.hash.substring(1)+'.html');
return false;
});
// If page loads, load the content area according to the hash.
var hrtag = window.location.hash.substring(1);
if(hrtag=="")
hrtag='about';
$("#content-right").load('mypage'+hrtag+'.html');
window.location.hash = hrtag;
});
</script>
This is the menu
<ul class="right-menu">
<li>About</li>
<li>Screens</li>
<li>License</li>
<li>Download</li>
<li>Donate</li>
</ul>
If I load the page as mypage.html, the javascript will append the hash #about and load the div id "content-right" with mypageabout.html
If I click the menu, for example download, it will load the div id "content-right" with mypagedownload.html
In both cases, the window.location will be set to the hash version of the page, mypage.html#about and mypage.html#download to register them in the history.
If i click the menu in the following order; license, about, screens and then click the browser's back button, the address field will show; mypage.html#about, mypage.html#license but it will NOT load the pages!?!
The URLs are obviously in the history, but they don't load.
Any clue to what might be wrong here?
// Thanks
EDIT - The solution
Thanks to Andres Gallo's article I came up with this solution:
<script type="text/javascript">
$(document).ready(function() {
// Make sure the page always load #about
LoadIDWithURL('#content-right','myPageAbout.html');
window.addEventListener('hashchange',function() {
if (window.location.hash != "") {
// We have a hash, use it!
LoadIDWithURL('#content-right','MyPage'+window.location.hash.substring(1)+'.html');
} else {
// We do not have a hash, force page reload!
window.history.go(0);
}
});
});
// Load the targetID with the URL loadURL.
function LoadIDWithURL(targetID,loadURL) {
$(targetID).load(loadURL);
}
</script>
I wrote a very detailed article on this exact topic. It explains how to build exactly what you are trying to do.
Furthermore my article also explains how you can pass parameters in your links to have javascript do special things
Here is a link to the article http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/
The best method is to attach your functionality to your hashchanges rather than to you click events. This allows any changes in history to take advantage of your javascript functionalities.
This is normal behaviour when navigating between pages which differ only in their hash. You have two options:
Use the hashchange event, or an emulation of it, to detect when the user changes the hash by navigation back or forward and update the page appropriately
Use the HTML5 history API.
you can try with hashchange
$(function(){
$(window).hashchange(function(){
// some event
})
})