window.onload= function(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('src/'.page);
}
}
After the window loads, i want the page to look in the URL, see if there is a # is set, and if so, i want to grab the page and display it inside a DIV. So for example, a link would be link. So when somenone clicks on the link, the page thinks and grabs the data from contact.php, and puts it inside the div. But now, this isn't working. No errors, no warnings, no nothing. Help please? Thanks!
Edit: Getdata:
function getdata(file){
openloading(); // loading message
$('#content').fadeOut('slow', function () { // Content is the div where all the content must be in
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn('slow');
})
})
updateusersonline();
}
And updateusersonline() directly too:
function updateusersonline(){
$.get('src/usersonline.php', function(data3) {
$('#usersonline').html(data3);
})
getdata('src/'.page); should be getdata('src/' + page);
Related
Inside an iframe I have the following script:
$("a").on("click", function (e) {
e.preventDefault();
if (e.target.href) {
let link = e.target.href;
$.ajax({
url: "/newOrigin",
data: {
"link": link
},
type: "POST",
success: function (response) {
parent.document.getElementById("oframe").srcdoc = response.site;
parent.document.getElementById("oLink").href = link;
},
error: function (error) {
console.log(error);
}
});
}
});
Which does not work. The prevent default doesnt do it's job, meaning the event itself isnt being triggered. I believe the issue is with the second line in the ajax success function, since the code below works perfectly fine (srcdoc changes and console is logged).
$("a").on("click", function (e) {
e.preventDefault();
if (e.target.href) {
let link = e.target.href;
$.ajax({
url: "/newOrigin",
data: {
"link": link
},
type: "POST",
success: function (response) {
parent.document.getElementById("oframe").srcdoc = response.site;
console.log("Hello");
},
error: function (error) {
console.log(error);
}
});
}
});
oLink is the id of an a tag element (hyperlink) and oframe is the id of another iframe inside the parent of the iframe where this code is.
Does anyone know why this is happening?
EDIT: The site has two iframes and each have a title above them(with each title having an href of the page displayed in each iframe). When a link is clicked in the first iframe, an ajax request is sent with the link and the response has the html of that page which is sent to be displayed in the 2nd iframe (1st line in success function). I now want to change the href of the words above the 2nd iframe to be the link of the link clicked in the 1st iframe. So the two titles and two iframes are inside the same parent component (same level) and the script is inside the first iframe.
The html used is base.html + index.html from here (iframes and titles in index.html): https://github.com/MohamedMoustafaNUIG/AnnotatorVM/tree/master/app/templates
EDIT2: Apparently, the success function is isolated from the rest of the code, meaning it doesnt have access to the "link" variable. I solved this by returning the link in the response and accessing it from there. But the event is still not triggering :(
I have a list of links which when clicked should open a modal window with some information. I am using e.preventDefault(); to prevent the default action of the browser and then add my own custom code to load my own data in the modal. The content loads just fine but after a few seconds the whole website whose link I clicked get loaded inside the modal.
It only happens with links from a specific website.
The links from that website should be the first one that I click. Clicking on other links first resolves this issue.
Here is my code:
$('a.modal-link').on('click', openModal);
function openModal(evt) {
evt.preventDefault();
var link = $(this).attr("href");
var text = $(this).text();
safeModal(link, text);
};
function safeModal(linkUrl, linkText) {
var link = linkUrl;
var page = window.location.href.split('?')[0];
var text = linkText;
var ajaxURL = "http://example.com/script.php";
$.ajax({
type: "POST"
, url: ajaxURL
, data: {
link: link
, page: page
}
, success: function (markup) {
$(".feed-modal .modal-body").html(markup);
}
})
};
I can also provide the link to the actual website, so you can see the issue yourself (I may not have explained it properly).
UPDATE: I am adding the link. Try clicking on the first headline and you will see the issue. After that, reload the webpage and then click on the sixth link. Now, close the modal and click on the first link again. Everything should work perfectly this time.
UPDATE: The syntax error doesn't exist. I made it in the question by mistake. :)
This code has a syntax error (delete })):
success: function (markup) {
$(".feed-modal .modal-body").html(markup);
}) //delete this
}
The whole function should be:
function safeModal(linkUrl, linkText) {
var link = linkUrl;
var page = window.location.href.split('?')[0];
var text = linkText;
var ajaxURL = "http://example.com/script.php";
$.ajax({
type: "POST"
, url: ajaxURL
, data: {
link: link
, page: page
}
, success: function (markup) {
$(".feed-modal .modal-body").html(markup);
//}) without this
}
})
};
Working DEMO
I have created a shell like html page which loads other pages into div on link clicks.The issue i am having is to rewrite the url with out a page re-load.
Also checking for hash events to add and rewrite them.
Firstly the links;
<a href = "myexample" onclick="menuPage(this);return false;" >
//result www.mywebsite.com/myexample
function loadPage(){
var tempURL = window.location.hash.substring(1);
$(".nav li").removeClass("active");
$("a[data-role="+tempURL+"]").parent().addClass('active');
if(!tempURL){
$('#pages').animate({opacity: '0.0'},function(){
$("a[data-role='Home']").parent().addClass('active');
$.get('Home/index.html', function(response){
$('#pages').html(response);
scrollOnTop();
$('#pages').animate({opacity: '1.0'});
})
});
}else{
$('#pages').animate({opacity: '0.0'},function(){
jQuery.post(tempURL, function(response){
$('#pages').html(response);
ga('send',{ // google
'hitType': 'pageview',
'title': 'mywebsite',
'location':'http://www.mywebsite.com/'+ tempURL,
'page': '/'+ tempURL
});
document.title = $(response).filter('title').text();
scrollOnTop();
$('#pages').animate({opacity: '1.0'});
tempURL = "";
})
});
}
}
$(window).on("hashchange", function () {
loadPage();
});
function menuPage(obj){
menu = "#" + obj.getAttribute("href");
window.location = menu;
return false;
}
function scrollOnTop(){
jQuery("html, body").scrollTop(0);
}
//The above works 100% expected:**
So lets say i click link or enter the url www.myexample.com/#item1 this will take me to that page all good but lets say i click or type in www.myexample.com/item1 with out hash this will take to the page but all broken as there is a folder named "item1" with an index file in it...
Essentially i would like to add hash into the url:
Once i add to the .htaccess file anything along the lines of : RewriteRule
^([A-Za-z0-9-]+)/?$ # [NC,NE,R=301]
or variations.
This just messes up.
I'm finding it a bit difficult to understand what your code is doing. A jsfiddle or equivalent might help.
It looks like loadPage is only executed when the url hash changes? And an anchor with href of www.myexample.com/item1 doesn't result in a hash change.
My guess is you want to bind a click event to your anchors, so you can intercept the click and run your own custom code (load page snippet without refresh), instead of the browser default behaviour of requesting the url (www.myexample.com/item1) from the server.
Something like:
$('a').click(function() {
/* Your code here. E.g... */
$('#pages').animate({opacity: '0.0'},function(){
$("a[data-role='Home']").parent().addClass('active');
$.get('Home/index.html', function(response){
$('#pages').html(response);
scrollOnTop();
$('#pages').animate({opacity: '1.0'});
})
});
// Returning false prevents browser default behaviour
// Some people don't like it - see http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/
return false;
});
My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.
But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.
Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.
I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).
(Any code/direction is appreciated)
Create a partial view (so that layout isnt rendered twice) and add the action to controller
public function actionViewmodal($id)
{
return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}
Then within my index I did the following
$(document).ready(function() {
$('a').click(function() {
pageurl = $(this).attr('href');
var Id = jQuery(this).attr('id');
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : 'http://localhost:8888/directory/viewmodal?id='+Id,
success: function(response) {
if(response) {
$('.modal_some_wrapper').html(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
Could someone example how myunidays website works with modal and URL change?
i am using jquery ajax to load a section of page with another page content/html. \
$(function() {
app.xhr = $.ajax({
url: url,
dataType: "html",
cache: false,
success : function(html)
{
app.html = $(html);
setTimeout(function(){
app.insertPageData();
app.xhr = null;
},100)
},
error : function()
{
alert("Not Found")
}
})
insertPageData : function()
{
$('div.data').html(app.html.find(".content").html())
}
});
So here is the problem specific to IE. app.html contains the HTML of the page and i need to extract one specific div html from the page which is not working with IE.
is there any other way to extract HTML from HTML??
Thanks / Gursimron
Do you have an id or class on the div you want? Also, by extract do you mean that's all you want, or do you mean that you want to remove it from the HTML?
If you want to remove the the div, and assuming you have an id, you can do this:
app.html.remove('#id-of-div');
If all you want is just the div and nothing else, then you would do this:
app.html = app.html.find('#id-of-div');