When I changed the page, the javascript did not execute.
index.html
$("#login").submit(function(e){
e.preventDefault();
$.mobile.changePage('main.html', {
reverse : false,
changeHash : false,
allowSamePageTransition : true,
reloadPage:true,
transition: "flow"
});
});
main.html
<script type="text/javascript">
$(document).ready(function () {
alert("Test");
});
</script>
The above javascript in main.html does not execute upon page change; can anyone explain why this is and how to fix it?
It's because change page will cause reload of pages and JQM is not getting the head section of recently loaded page in the DOM so any scripts in the <head> of the document will not be included.
Hence, you can put all of your JS into an external file and include it on each HTML page of the site that you required.
You can also place your JavaScript code inside the data-role="page" element and you JS will be included.
Related
How can I add jQuery code inside magento2 pages? For example I have a "Contact us" page. So I can edit the content inside contact us page by
Login to Admin panel
admin -> content -> Pages -> Contact us
I want to add some jQuery code.
So I write
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
<script>
jQuery(function($){
$(".mybox").on("click", function(){
MY CODE *******
});
});
</script>
Here the problem is: I have to call <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
Otherwise it will not work. How can I solve this?
ie. How can i add jquery code in wysiwig editor
Magento 2 Uses Require js
Try using
<script>
require([
'jquery'
], function ($) {
$(".mybox").on("click", function () {
console.log('your code starts here');
console.log('your code ends here');
});
});
</script>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="Chat_Box_Files/Script_Files/AJAX.js"></script>
</head>
// JavaScript Document
$(document).ready(function(){
// load index page when the page loads
Load_ajax_page("http://betaserver.bioprotege-inc.net/chat_selector/Chat_Box_Files/Script_Files/Applet_Files/Index.html");
$("#ChatMaster").click(function(){
Load_ajax_page("#");
});
});
function Load_ajax_page(url){
//before we make a ajax request we have to show the loading image
$("#Applets").html('<center>Loading... Please Wait...</center>');
//this is a jquery method to make a ajax request
$.post(url,"",function (data){
//this is the place where the data is returned by the request
//remove loading and add the data
$("#Applets").html(data);
});
}
<div id="Applets">
</div>
http://jsfiddle.net/N278r/
here is my fiddle of it all in action, but it wont display the content from the html file, it used to idk what I have done wrong?
It looks like you are using ASP.NET on the server. You can add the following line to your source pages:
Response.AppendHeader("Access-Control-Allow-Origin", "*");
BACKGROUND: I'm trying to use .load() to build a site from several
pages, where a user can click a button to load the next page's
content using .load().
PROBLEM: The .load() only works on the first click (loads
content from pagetwo.html), then doesn't load any
content for pages after that.
CODE:
My start page markup looks like this:
<head>
<script src="script.js"></script>
</head>
<body>
<div class="content">
<p>This is page 1.</p>
<button id="pageone">next</button>
</div>
</body>
Then my pages 2-5 contain only partial HTML, to be loaded
into div.content:
Page 2:
<p>This is page 2.</p>
<button id="pagetwo">next</button>
Page 3:
<p>This is page 3.</p>
<button id="pagethree">next</button>
Etc.
My jQuery script.js is loaded only once, with the full start page html:
$(document).ready(function() {
//load pages
$('button#pageone').click(function () {
$("div.content").load("page-two.html");
});
$('button#pagetwo').click(function () {
$("div.content").load("page-three.html");
});
$('button#pagethree').click(function () {
$("div.content").load("page-four.html");
});
});
Any ideas on why only the first .load() request works?
The ID #pagetwo and on onwards are newly introduced elements to the DOM after the first initial $(document).ready(). Thus, you'd have to access it differently there after:
$(document).on('click', 'button#pageone', function() {
$("div.content").load("page-two.html");
});
$(document).on('click', 'button#pagetwo', function() {
$("div.content").load("page-three.html");
});
$(document).on('click', 'button#pagethree', function() {
$("div.content").load("page-four.html");
});
The .on() handler will listen to any new elements through the entire document (As it starts at root) at any one stage. Your initial code was looking for elements that were present on just page load.
To read more about it, See the documentation about the .on() handler regarding new elements at "Direct and delegated events".
I'm trying to load a google+ 1 button on a page, the goal is to have the buttons markup inserted into the page via ajax and then make the call for the button to be rendered.
The button renders fine when the page is loaded first time around. The problem arises when the markup is fetched from /displaycode.php and then the render call is made again.
REFRESH
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
$('#live-preview').empty();
$("#live-preview").load('/displaycode.php #code');
gapi.plusone.go();
return false;
});
gapi.plusone.go();
});
</script>
<div id="live-preview"><div id="code"><div class="g-plusone"></div></div></div>
</div>
A demo of the problem can be viewed here http://32px.co/googleplusdemo.php . Thanks for any help in advance.
Render method
Use explicit render: https://developers.google.com/+/plugins/+1button/#example-explicit-render
gapi.plusone.render('live-preview')
instead of:
gapi.plusone.go();
Also needs "{"parsetags": "explicit"}" set:
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
Edit
You further have to make sure to call render after the jQuery load is complete. So the element is really in the DOM.
$(function() {
$("#btn").click(function(e) {
e.preventDefault();
$('#live-preview').empty(); // Not necessary
$("#live-preview").load('/displaycode.php #code', function() {
gapi.plusone.render('live-preview');
});
});
gapi.plusone.render('live-preview');
});
Could any one give an example, how to use Jquery in Controller Page. MVC3 -ASP.NET(How To put various tags like )
I want to show a simple alert before rendering a view in Controller.
Thank you.
Hari Gillala
Normally scripts are part of the views. Controllers shouldn't be tied to javascript. So inside a view you use the <script> tag where you put javascript. So for example if you wanted to show an alert just before rendering a view you could put the following in the <head> section of this view:
<script type="text/javascript">
alert('simple alert');
</script>
As far as jQuery is concerned, it usually is used to manipulate the DOM so you would wrap all DOM manipulation functions in a document.ready (unless you include this script tag at the end, just before closing the <body>):
<script type="text/javascript">
$(function() {
// ... put your jQuery code here
});
</script>
If you are talking about rendering partial views with AJAX that's another matter. You could have a link on some page that is pointing to a controller action:
#Html.ActionLink("click me", "someAction", null, new { id = "mylink" })
and a div container somewhere on the page:
<div id="result"></div>
Now you could unobtrusively AJAXify this link and inject the resulting HTML into the div:
$(function() {
$('#mylink').click(function() {
$('#result').load(this.href, function() {
alert('AJAX request finished => displaying results in the div');
});
return false;
});
});