How to use JS in Framework7? - javascript

I create an application with framework7. Now I try to execute a javascript in my page-content, but it doesn't execute.
<div class="pages">
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
<script type="text/javascript">
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>
</div>
How can I run this javascript code ?
UPDATE
The page is loaded from an other HTML-Page.

Use Callbacks (onPageInit) to execute code

I had never heard of Framework7 before this, but after taking a look at the docs, I don't believe you are going to be able to use Javascript this way.
It would appear that for JS events, you have to scope the event inside a Framework7 constructor:
var myApp = new Framework7();
var $$ = Dom7;
$$('.alert-text').on('click', function () {
myApp.alert('Here goes alert text');
});
Of course the above example is taken directly from the F7 documentation, and is dependent on a click event, but you may be able to try out the alert event as a method of myApp and see if that works for you.

var myApp = new Framework7();
//Add callback function that will be executed when Page with data-page="about" attribute will be initialized
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});
// Option 2. Using live 'page:init' event handlers for each page (not recommended)
$$(document).on('page:init', '.page[data-page="dashboard"]', function (e) {
console.log('dashboard loaded with page:init');
createGraph();
});
Above worked me well.. although following didnt work.
myApp.onPageInit('dashboard', function (page) {
console.log('dashboard page initialized');
console.log(page);
});

If you written any javascript code inside index.html file, Put that code in
<head>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</head> like this, which is defined in index.html file
Or ,if you want write JS code for some particular html file ,
Do like this
<div class="page close-panel" data-page="item">
<div class="page-content">
<div class="content-block-title">Title</div>
</div>
<script>
alert("testoutput"); // no alert
console.log("TEST"); // no log
</script>
</div>

Related

jQuery function that dynamically load data AND also execute js?

For example we have two php pages (same domain):
index.php
data.php (that uses a jQuery script)
If I load a part of the "data.php" inside the "index.php" I have to re execute the js file from the "data.php" like this:
$( ".box" ).load("data.php .my_data", function() {
$.getScript("https://website.com/js/data.js");
});
Is there an other/better way to load a part from the external data.php and automatically execute all js that is connected with it?
data.php (this template contains no script)
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
Script on index.php:
In this example, I just show the event when clicking on the button, there are some ways to define it:
Option 1: Write the event after loading template successfully
$('.box').load('data.php').done(function (template) {
template = $(template).appendTo('body');
template.on('click', 'button', function () {
console.log('clicked!');
});
});
Option 2: Write the event outside the event which is used to load the template
$('.box').load('data.php').done(function (template) {
$(template).appendTo('body');
});
$(document).on('click', 'button', function () {
console.log('clicked!');
});
This ways require all of the scripts which are working on data.php are ready on index.php.
If you don't want to move/split the code:
data.php:
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
<script src="/js/data.js"></script>
In the file data.js, if you want to load something more but not immediately, make sure you're working with document (there are more ways but I highly recommend this):
data.js
// this code works imediately after your document has `.load` class
$(document).on('click', '.load', function () {
// this code will work if your document already has `.box` class
$('.box').load('some_data.php').done(function (template) {
console.log(template);
});
});
On the index.php, after appending the template, the code will work correctly. Nothing is automatically more.

JQUERY Ajax When I Click A Href

I am new to JavaScript, Jquery and Ajax. This is what I am trying to do:
When I click on Pro-Hashtagh, I want to display a word in Show-Id.
This Pro-Hashtagh HTML code:
<li>
Pro Hashtagh
</li>
Show-Id HTML code:
<div class="body" id="Show-Id">
</div>
Ajax Code:
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>
But when I click, nothing happens
I just created a fiddle with your code and everything seams to be fine.
https://jsfiddle.net/eh2xbxpe/
Of course you have to add Jquery to your project, that'S the only error I see.
Beside, you don't call any AJAX request in your code, you are just adding a please wait. If you are trying to reach an external ressources via AJAX, it is not the case here.
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li>
Pro Hashtagh
</li>
<div class="body" id="Show-Id">
</div>
I guess you're working on a local environment.
Something happens when you click on the link but the page reloads way to fast for you to see anything. You need to update your onclick event so it prevent the link default behavior.
$('#Pro-Hashtagh').click(function(event){
event.preventDefault();
$("#Show-Id").html(waiting);
});
try
Pro Hashtagh
and create check function in javascript
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div class="body" id="Show-Id">
</div>
<li>
Pro Hashtagh
</li>
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait> .
..</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>

How do I get click event of model form button?

On my django web app, I have a webpage and when a button is clicked a modal form is opened. On this form there are a few fields and a save button. When the save button is pressed, I want to do something, like printing an alert. Here is what I tried:
Model form code:
<div class="container-content">
<div class="infor-experience col-lg-2 more_info">
{% if request.user|isEmployer %}
<div class="add-to-list">{% include "layout/addtolistmodal.html" %}</div>
<div class="connect-now bottom">{% include "layout/bidmodal.html" %}</div>
{% endif %}
<!-- more code below here -->
Javascript block in same HTML file as modal above:
<script type="text/javascript">
// Add to short list handler
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
</script>
Basically, what I want to do is when the user clicks save on the add-to-list modal, print the alert "TEST".
From my understanding the reason its not working is because it cannot find '.add-to-list' but what I should use instead?
Just attach your click event to already present element which seems to be div.infor-experience, since your modal html gets appended after DOM load. Also, make sure your script renders in web browser if you have provided any conditions for them to render.
$('.infor-experience').on('click', '.submit', function(e) {
alert("TEST");
})
It might be that positioning of your script. At the time of its execution the DOM may not be ready or exist yet.
You could wrap your DOM related codes like so:
$(document).ready(init);
function init(){
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
})
}
Try this instead
$(document).ready(function () {
$('.add-to-list').on('click', '.submit', function(e) {
alert("TEST");
});
});
you should add the code under $(document).ready() so that it waits for whole DOM to load and then attaches the method instead doing so before loading of DOM.

modifying main view from inside partial view

I have a main view that let's say has the following:
<div id='test'>Some Text</div>
<div id='placeholder'></div>
then using ajax I'm replacing the contents of 'placeholder' with a partial view that looks like this:
<div id='ajaxContent'>
// new content
</div>
<script>
$(document).ready(function() {
console.log($('#test').text());
$('#test').css('color','red');
});
</script>
so in my script I'm trying to change the color of the text in div 'test' to red, but I keep getting 'undefined' in the console. How do I access the test div in the main view from the partial view coming into the main view through ajax?
If they're ending up on the same page, shouldn't the html elements be able to see each other?
Your JavaScript fragment is simply removed by jQuery on html(...) call. A similar issue can be found here: jQuery .load() / .ajax() not executing javascript in returned HTML after appended
Thus, you have to insert partial data in this manner (assuming you have your partial respone in result variable):
$(result).find('#ajaxContent').appendTo('#placeholder');
$(result).find('script').appendTo('#placeholder');
Also, as #RolandBertolom said before, you don't need ready() in your partial response in JavaScript.
You actually do not need to use $(document).ready. It's just useless. But it shouldn't break anything. As well as you can access any element on the page from script inserted anywhere in the same document. So problem is somewhere out your question's scope.
Try:
run $('#test').text() from console.
replace $('#test').text() with $('body') or something else in your script.
...
Be deductive when you debugging! ;-)
you should not be using $(document).ready again because you document will already loaded with main page so again using it wont help.
try like this:
suppose this is your test.php:
<script>
jQuery(document).ready(function() {
$.ajax({
type:'post',
url:'submit.php',
success:function(data) {
$('#placeholder').append(data);
}
});
});
</script>
<div id='test'>Some Text</div>
<div id='placeholder'></div>
//this is your submit.php the content to replace
<?php
echo "<div id='ajaxContent'>
</div>
<script>
$(function(){
console.log($('#test').text());
$('#test').css('color','red');
});
</script>";
?>
NOTE: what i exactly mean here is use:
$(function(){
console.log($('#test').text());
$('#test').css('color','red');
});
in script.

Replace content of div through jQuery

I have a file login.ejs which start with <div id="loginPage"> and then contains a login form. I then have a file index.ejs with a <div id="container"> id. I want to be able to click a link outside of the container-div which would replace the content of the container-div with the content of the loginPage div. In my index.ejs I have:
<p><b>Admin</b></p>
and I have a script in index.js:
function events() {
// register events
$('#admin').click(function()
{
$('#container').html('#loginPage');
return false;
});
}
But I cannot get it to work, anyone that could give some ideas please?
you need to do like as below , first get html like $('#loginPage').html() and than assign this html to container .
$('#admin').click(function()
{
$('#container').html($('#loginPage').html());
return false;
});
to be precise use the load function:
$('#admin').click(function(e){
e.preventDefault();
$('#container').load('login.ejs #loginPage');
});//--------------------^^^^^^^^--^^^^^^^^^^-----loads the <div id="loginPage">
//---------------------------------------------from the login.ejs

Categories