I have a simple app done with jQuery Mobile, in some point I have this:
Start!
which loads a new HTML with a lot of jquery mobile pages:
<div data-role="page">
I have defined, in my external JS file, an global variable:
var startTimeQuestion;
And this method, which is inside my HTML (test_es.html):
<script>
$(document).on('pagecontainershow', function() {
console.log("Storing time..");
startTimeQuestion = new Date().getTime();
});
</script>
The problem is that when I click on the button it loads correctly the file but it seems like it don't load the JS or the function or I don't know, because when I'm going to use my startTimeQuestion variable it says UNDEFINED and it don't show in the console the 'Storing time..'. If a reload the page, it works fine.
I have tried to do an '$.(document).ready()' function for the first time I load the page but still not working. It looks like test_es.html it isn't loading my custom.css and my test.js file until I reload completely the page. So I supposed that the error is in how I call my test_es.html, it isn't this:
Start!
the correct way to do it?
Thanks.
Thanks to the comment before I found the solution, it was as simple as put the 'data-ajax' attribute to false this way:
Start!
Related
I have a script that I am using to share images. After the script (at the bottom) in the same js file I have the following:
$(document).ready(function() {
$(".shared").after('<div class="share-button"></div>');
});
new Share(".share-button", {});
For some reason the script does not work. But when I have the page up and enter the above script in, it loads and the div shows up.
Am I missing something here?
Looks like you're trying to instantiate a Share object that depends on the "share-button" elements existing, but those elements don't exist because they're added in $(document).ready(). Try this:
$(document).ready(function() {
$(".shared").after('<div class="share-button"></div>');
new Share(".share-button", {});
});
Note that the "new Share()" is inside the ready handler, after the "share-button" has been added to the page.
So I have a website I am working on just as a personal website that uses jQuery and jQuery UI
Previously I have been using hidden html code and just using jquery to show it.
But its making my html file messy so I wanted to use jquery's .load() to do the same thing but from an external file.
Right now, its set to a .click function.
For my hidden html it shows it every time when I click a particular element.When you click on a different element it. It hides the first one. I am doing it by having a div with 2 classes. The problem is when I tried to load html into a hidden div, and then show it and hide it, it only worked the first time.
Enough talk, here is my code. #1 works , #2 only works on the first click. And leaves imagearea blank every time after.
$(".jquery").click(function(){
clearImageArea();
hideThumbnails(5);
showThumbnails();
$("#1").click(function(){
$(".imagearea").html(js);
$(".jscode").show(1000);
$(".title").text("Extending jQuery");
});
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html");
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
now my hidden stuff in my html file
First my html and js code is loaded into here from jqueryEx.html and is being hidden elsewhere in my javascript via $(".hidden").hide(); and loaded then into into imagearea via .html() and shown via .show()
<div class="jquery2 hidden">
</div>
My other div looks like this which is put into imagearea by clicking on #1
<div class="jscode hidden">
<div class="block">
//lots of js code escaped out into html
</div> <!-- end of block-->
</div>
elsewhere in my JS code at the beginning I have var js=$(".jscode"); to load it into the js variable you saw earlier.
if you want to see an out of date example of what I am working on
go to www.3realsoft.com (only cs and js work on skills)
if you want to see any additional parts of my code, just ask. Most of it is there on my website though.
I got to this item in my search results, when I was trying to have a button both load and refresh the content, and the load was working but the refresh was not working.
Here's a shorter version of the solution, setting Cache to false was the key. Solution found over at this other link, but I'm posting this concept here because if Google dropped me in this item, others looking for the same will also probably find themselves here. Props to John Millikin, make sure to go over to his answer and upvote him: Stop jQuery .load response from being cached
<script type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
$('.detail-expand').click(function () {
var detailRowElement = $(this).closest('.session-row-tr').next();
var detailElement = detailRowElement.find('.detail-row-div');
var sessionId = detailElement.data("sessionId");
detailElement.empty();
detailElement.load('/Admin/WebLogPartial/' + sessionId, function () {
$.bootstrapSortable(true, 'reversed');
});
detailRowElement.show();
});
});
</script>
Anything that depends on the HTML being loaded must be done in the callback function, because the first A in AJAX stands for asynchronous.
$("#2").click(function(){
$(".jquery2").empty();
$(".jquery2").load("jqueryEx.html", function() {
var jquery2 = $(".jquery2");
$(".imagearea").html(jquery2);
$(".jquery2").show(1000);
$(".title").text("Extending Jquery Example");
});
});
I'm not really sure what you're trying to do with .html(jquery2), since the argument to .html() is supposed to be a string, not a jQuery object. Maybe you meant:
var jquery2 = $(".jquery2").html();
If I have a button that executes the code
$('#main').load('welcome.html');
and in welcome.html I have a button that executes the code
$('#main').load('otherpage.html');
the Javascript isn't executed, regardless of whether that function is on the parent file's HTML code or the child's.
How can I get a Javascript function to work from externally loaded HTML files?
EDIT
Here's a bit more of a sample...
Homepage:
<body>
<div id="main"></div>
</body>
<script>
document.onLoad(){
$('#main').load('welcome.html');
}
function show(file){
$('#main').load(file+'.html');
}
</script>
welcome.html page:
Test
...however when the Test button is clicked, test.html is not loaded into the Main div.
EDIT 2
Here is what the current state is and what the issue is - exactly.
I've uploaded the bones of the code to PasteBin.
When the 'grid' button is clicked, the content changes and the footer changes.
However, the footer, which has URLs based on Javascript, comes up with the error:
Uncaught SyntaxError: Unexpected token ILLEGAL
...when trying to access the 1i.html page.
There's a difference between test the variable and 'test' the string:
Test
Probably should be:
Test
It is important to understand that when loading script into page via AJAX that the main page has already gone through document.ready . Thus, any code you load will fire immediately.
If the code you load precedes the html it references, it will not find that html when it fires.
Placing the code after the html in remote page will resolve this issue
Check jQuery.live() and jQuery.on().
Maybe your eventhandler is wrong. When you import new markup via load() or ajax(), you have to initialize the handlers from new document. The easiest way is using jQuery.on or jQuery.live() instead of jQuery.click().
$('MYBUTTON').live('click', function(){
$('#main').load('your_url.html')
})
or use the callbackfunction to (re-)initialize the buttons event.
A better solution is this: Just add the target_url to buttons rel attribute...
<button rel="YOUR_URL.html">Open Page</button>
$('button[rel]').live('click', function(){
$('#main').load($(this).attr('rel'));
})
I have one javascript file that houses all the functions for my website, stored it a large object, like this:
var Example = {
init : function(){
alert('init');
},
page_one : function(){
alert('this is page 1');
},
page_two : function(){
alert('this is page 2');
}
}
Now I like to open a simple script tag on the different pages, and on page1 do Example.page_one(); and on page2 do Example.page_two();
But this doesn't work. When I call those in the same file as where die Example object is made, then it works, but not if I include that file in a page, and call it from there.
The Example object does show up in the window object
Can someone help me?
Well, I fixed it myself. Stupid fault.
My code was like this:
<script defer src="js/scripts.js"></script>
<script>
AdminDashboard.notificationMessages();
AdminDashboard.setupMenu();
AdminDashboard.setupFileInput('#new_slideshow_image');
AdminDashboard.setupSlideCrop();
</script>
And the problem seemed to be with defer. The object did load, but after the script fired that called to it.
Thanks for the help!
If you will create example object in your page where you have included it, it will override example object. Try to use direct functions rather than this approach.
http://www.alphenweer.nl/index.php#page:alphen-afgelopenuur.php
The first thing you will see is the first bug.
I use the function getdata() located in my index.js file to call the page, and put it in the main DIV. That could be a problem, if anyone wants to link to a certain page people still have to click on another link. So i came up with this solution (that is also located in my index.js file:
function getdataonload(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('nosub/content/'.page);
}
}
// and for the links:
..
But that doesn't seem to work properly. The div now gets filled with my main index.php file again. Why is this happening, what am i doing wrong?
And i also seem to have another bug wwith jQuery Fancybox.
For example, go to the same link, click on "Ontladingen" and then select one of the links popping up. The source of those pages are almoast identical, but its like this:
<a href="link/to/image.png" class="fancybox">
<img src="link/to/image.png" alt="example">
</a>
And then on the bottom of my page i have this piece of code:
<script type="text/javascript">
$("a.fancybox").fancybox();
</script>
Now it should work. But it isn't working. Why is that, and how can i solve that problem?
Could you please all help me with both my problems?
For first problem-
you have to build full URL at getdata('nosub/content/'.page); . It should be like 'http:// ... nosub/content/'
For the 2nd problem -
You can try to write the code as follows -
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>