I want to ask for help from you guys, I have tried coding my javascript so that it doesn't display the results from the input but the results I get are actually messy, so I attach my code with the original version that I haven't edited and it's still tidy, but the input is still displayed in address bar in the web browser.
Next is my code version before revision: (JavaScript)
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
/*==================================================================
[ Simple slide100 ]*/
$('.simpleslide100').each(function(){
var delay = 7000;
var speed = 1000;
var itemSlide = $(this).find('.simpleslide100-item');
var nowSlide = 0;
$(itemSlide).hide();
$(itemSlide[nowSlide]).show();
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
setInterval(function(){
$(itemSlide).fadeOut(speed);
$(itemSlide[nowSlide]).fadeIn(speed);
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
},delay);
});
})(jQuery);
please help me also to place it in the coding that I have made, apologize that I am still a beginner and I'm confused how to do it anymore, all the help will be appreciated :)
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AN Newsletter | Subscribe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="flex-w flex-str size1 overlay1">
<div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
<div class="wrappic1">
<a href="../main/index.html">
<img src="images/icons/logo.png" alt="IMG">
</a>
</div>
<div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">
<h3 class="l1-txt1 p-b-34 respon3">
Post Box
</h3>
<p class="m2-txt1 p-b-46">
Follow me for update now!
</p>
<form class="contact100-form validate-form m-t-10 m-b-10" action="../success/success.html">
<div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex#abc.xyz">
<input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">
<button class="flex-c-m ab-t-r size2 hov1 respon5">
<i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
</button>
<div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
<span>Subcribe Now:</span>
</div>
</div>
</form>
</div>
<div class="flex-w flex-m">
<span class="m2-txt2 p-r-40">
Follow me
</span>
<a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
P.S:
please don't block me, I'm still new and I still have to learn this platform and I still have to work on my project, so I think this platform will be very useful for me to complete my project, thank you
If you are referring to browser address bar with result of your input email address that looks like this:
/success/success.html?email=xxxx
This is because you haven't specified the method of your form so form uses PHP GET, and this is normal to pass the values on other page.
If you do not want to display this data, you should specify your form submit method like this:
<form class="contact100-form validate-form m-t-10 m-b-10"
action="../success/success.html" method="POST">
Keep in mind you have to fetch data on other side as POST also.
Read more about this here.
Replace GET method with POST method.
Related
I'm trying to create a simple web app that add countries to a google sheet. And use materialize autocompletes to assist the user (which simply autocomplete the country, with no images attached). I saw a couple of examples of the materialize autocomplete, but always with a predefined autocomplete list. This is the html I used:
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete">
<label for="autocomplete-input">Country</label>
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
google.script.run.withSuccessHandler(tags).getCountry();
function tags(data) {
var availableTags = data;
$('input.autocomplete').autocomplete({
data: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>
And this is my code in google script, the function getCountry works, and returns a list of countries. But I didn't succeed in adding them to the materialize autocomplete function.
function doGet() {
var template = HtmlService.createTemplateFromFile("page");
var html = template.evaluate();
return html;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1_GtmVrdD1Es6zQZna_Mv-Rc3JkIu66-q_knQ8aqcUIc/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
function getCountry(){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
list = list.map(function(r){return r[0]; });
Logger.log(list);
var data = "{";
for (var i = 0; i < list.length; i++) {
data = data + "'" + list[i] + "': null,";
}
data = data.slice(0, -1) + "}";
Logger.log(data);
return data;
}
This is the information on https://materializecss.com/autocomplete.html
// Or with jQuery
$(document).ready(function(){
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Microsoft": null,
"Google": 'https://placehold.it/250x250'
},
});
});
Answer:
You can use web polling to update your page with a set interval such that it always retrieves updated data from the Sheet.
Code:
Piggybacking off the answer here, edit your script to include:
function polling(){
setInterval(update, 500);
}
function update(){
google.script.run.withSuccessHandler(tags).getCountry();
}
and make sure that you run the polling() function on load:
<body onload="polling()">
<!-- your body goes here -->
</body>
Full page.html:
<html>
<head>
<meta charset="utf-8">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body onload="polling()">
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete" placeholder="Country">
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<script>
function polling(){
setInterval(update, 500);
}
function update(){
google.script.run.withSuccessHandler(tags).getCountry();
}
google.script.run.withSuccessHandler(tags).getCountry();
function tags(list) {
console.log(list);
var availableTags = list;
$("#autocomplete-input").autocomplete({
source: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>
And leave your code.gs file unchanged.
References:
Stack Overflow - Creating an autocomplete function in Google Script that works with a list of values from the Google Sheet
Stack Overflow - Is it possible to import XML or JSON data from a table within a Word online document into Apps Script website as an HTML table?
Changing the getCountry() function, so it reads the data as an object and not as a string fixed it.
function doGet() {
var template = HtmlService.createTemplateFromFile("page");
var html = template.evaluate();
return html;
}
function userClicked(country){
var url = "https://docs.google.com/spreadsheets/d/1_GtmVrdD1Es6zQZna_Mv-Rc3JkIu66-q_knQ8aqcUIc/edit#gid=0";
var ss = SpreadsheetApp.openByUrl(url);
var ws = ss.getSheetByName("Data");
ws.appendRow([country]);
}
function getCountry(){
var ws = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Data");
var list = ws.getRange(1,1,ws.getRange("A1").getDataRegion().getLastRow(),1).getValues(); // contains countries
list = list.map(function(r){return r[0]; });
Logger.log(list);
var data = {};
for (var i = 0; i < list.length; i++) {
data[list[i]] = null;}
return data;
}
And the html stayed the same:
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="row">
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">work_outline</i>
<input id="autocomplete-input" type="text" class="autocomplete">
<label for="autocomplete-input">Country</label>
</div>
</div>
</div>
</div>
<div class="input-field col s12">
<button class="btn waves-effect waves-light amber accent-4" id="add_btn">Add country
<i class="material-icons right">send</i>
</button>
</div>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
google.script.run.withSuccessHandler(tags).getCountry();
function tags(data) {
var availableTags = data;
$('input.autocomplete').autocomplete({
data: availableTags
});
};
document.getElementById("add_btn").addEventListener("click", doStuff);
function doStuff() {
var ucountry = document.getElementById("autocomplete-input").value;
google.script.run.userClicked(ucountry);
document.getElementById("autocomplete-input").value = "";
};
</script>
</body>
</html>
I'm using jQuery function to add disabled class onclick, it is working fine. But I want to remove the class by clicking on other button, that is not working can anyone help me with this? This is code...
//Delay add disabled class on cart
$('.fa-shopping-cart').on('click',function(){
var $this = $(this).addClass('finsihed');
window.setTimeout(function(){
$this.addClass('disabled-button');
}, 1500); //<-- Delay in milliseconds
});
function reEnableBtn(prodId) {
alert(prodId);
// var $this = $(this).removeClass('finsihed');
// window.setTimeout(function(){
// $this.removeClass('disabled-button');
// }, 1500); //<-- Delay in milliseconds
$('.festi-cart-remove-product').removeClass('disabled-button');
};
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
Re-enable button
I hope you guys understand my question..
In the function reEnableBtn, $('.festi-cart-remove-product') doesn't exist.
Change :
$('.festi-cart-remove-product').removeClass('disabled-button');
To :
$('.fa-shopping-cart').removeClass('disabled-button');
As I came to understand your question, please check given link or snippet if this is what you want...
var $this = '#cart';
$(document).on('click','#blockr,'+$this,function(){
$($this).addClass('disabled');
})
$(document).on('click','#openr',function(){
$('#cart').removeClass('disabled');
})
.disabled{
color:#333;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="font-awesome#4.7.0" data-semver="4.7.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="jquery#3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<button class="btn btn-default" id="cart">
<i class="fa fa-shopping-cart finsihed disabled-button"></i>
</button>
<br /> <br />
<a class="btn btn-default" id="blockr" href="#!">Disabled button</a>
<a class="btn btn-default" id="openr" href="#!">Re-enable button</a>
</body>
</html>
link: http://plnkr.co/edit/3m9mKo8EQkGnjpqs54U6?p=preview
or you can comment if you want something modified in it. Hope it helps you.
I have a problem with the do-while. When I type into an input form a different number than 15, it still says 'success', but it shouldn't, because the right number is 15. How could I change the do-while to recognize when I type other number than 15? Thanks for any suggestions.
//works when type only 15
do {
var guess = prompt("Guess a number between 1 and 20");
} while (guess !=15)
alert("Success!");
//this part works when I type 15 or different number
function guessWage() {
do {
var guess = document.getElementById("guessNumber")
if (guess.value != 15) {
guess.value = false;
}
} while (guess.value === 15)
alert('you guessed the number');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>While loop</h2>
<h5><span class="badge badge-secondary">Array backwards:</span></h5>
<div class="alert alert-success" role="alert" id="resultMonthly">
</div>
<h5><span class="badge badge-secondary">Array forwards:</span></h5>
<div class="alert alert-info" role="alert" id="resultDaily">
</div>
<h5><span class="badge badge-secondary">Guess, how much full-stack dev earns</span></h5>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">$</span>
<input type="text" class="form-control" placeholder="Type the number" aria-label="Number" aria-describedby="basic-addon1" id="guessNumber">
</div>
<button onclick="guessWage()" type="button" class="btn btn-info">Guess it!</button>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="whileloop.js"></script>
</body>
</html>
Ok, I changed the string to Number with Number(var), but now it's giving me an infinite loop. I'm little bit confused. Someone knows what to add into this do-while?
function guessWage() {
do {
var guess = document.getElementById("guessNumber")
} while (Number(guess.value) !== 15)
alert('you guessed the number');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Issue App</title>
<link rel="stylesheet" type="text/css" href="wageup.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h2>While loop</h2>
<h5><span class="badge badge-secondary">Array backwards:</span></h5>
<div class="alert alert-success" role="alert" id="resultMonthly">
</div>
<h5><span class="badge badge-secondary">Array forwards:</span></h5>
<div class="alert alert-info" role="alert" id="resultDaily">
</div>
<h5><span class="badge badge-secondary">Guess, how much full-stack dev earns</span></h5>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">$</span>
<input type="text" class="form-control" placeholder="Type the number" aria-label="Number" aria-describedby="basic-addon1" id="guessNumber">
</div>
<button onclick="guessWage()" type="button" class="btn btn-info">Guess it!</button>
</div>
<!-- Scripts -->
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- JS -->
<script type="text/javascript" src="whileloop.js"></script>
</body>
</html>
Javascript uses == !=, but you should always use === and !==.
Since the former can have unpredictable results sometimes. Moreover, you are comparing a string to an integer. Try converting them beforehand using Number(var)
Basically what you are trying to achieve is not clear.. if you simply want to compare the values on button click you dont need a loop in that case.so something like..
function guessWage() {
var guess = document.getElementById("guessNumber")
if (guess.value != "15") {
// do what you want here if guess is wrong.
alert('wrong guess');
}
else
{
// do what you want if guess is right
alert('right guess');
}
}
OR
function guessWage()
{
var guess = document.getElementById("guessNumber")
if (Number(guess.value) != 15) {
// do what you want here if guess is wrong.
alert('wrong guess');
}
else
{
// do what you want if guess is right
alert('right guess');
}
}
feel free to comment about if anything is there i will update my answer.
I am using summernote js in laravel 5.2.
In a form,when user clicks on edit button, summernote editor should open for the fields.Actually it was working for a single field but when i applied it for more than one field,its not working.
my view:
<form action="{{route('account')}}" id="acc" class="ac" method="post">
<div class="col-lg-3"><label>Estado</label>
#foreach($accounts as $account)
#if($user== $account->user)
{!! $account->estado !!}
<textarea style="display:none;" name="textfield4" id="textfield4"></textarea>
<div class="col-lg-2 estado " id="estado"></div>
#endif
#endforeach
</div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<section class="col-lg-3 "><label for="textfield5">I'm Good At:</label>
#foreach($accounts as $account)
#if($user== $account->user)
{!! $account->goodat !!}
<textarea style="display:none;" name="textfield5" id="textfield5"></textarea>
<div class="col-lg-2 col-md-2 es" id="goodat"></div>
#endif
#endforeach
<br /><div><button type="button" class="btn btn-info edit">Edit</button>
<button type="submit" class="btn btn-success" id="btn-send-message" >Save</button>
<input type="hidden" value="{{Session::token()}}" name="_token">
</div>
</form>
my script:
<script>
$(document).ready(function() {
var $estado = $('#estado');
var $goodat = $('#goodat');
var edit = function() {
$estado.summernote({focus: true});
$goodat.summernote({focus: true});
};
$('.edit').on('click', edit);
$("#acc").on('submit', function(e) {
e.preventDefault();
var self = this;
// lets check some stuff
console.log($estado);
console.log($estado.summernote('code'));
console.log($('#textfield4'));
console.log($('#textfield4').val());
console.log($('#textfield4').text());
var estado = $estado.summernote('code');
$("#textfield4").val(estado); //populate text area
var goodat = $goodat.summernote('code');
$("#textfield5").val(goodat); //populate text area
self.submit();
return false;
});
});
</script>
EDIT 1:
I've found out that, after clicking on save button ( which results in null values in db)(everytime a user logins) , edit button starts working perfectly.
EDIT 2:
after placing all links and scripts in head tag ,error: $ is not defined .
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="_token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/crush.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/groups.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/Untitled-2.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/font-awesome.css')}}">
<link rel="stylesheet" type="text/css" href="{{URL::to('src/css/style.css')}}">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js" ></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="/src/js/myplace.js"></script>
<script src="{{URL::asset('src/js/script.js')}}"></script>
</head>
You wanted multiple textareas with summernote?
Take: (;
$(function() {
var $estado = $('#estado');
var $goodat = $('#goodat');
var isEditorsActive = false;
function activateEditors() {
$estado.summernote({
focus: true
});
$goodat.summernote({
focus: true
});
isEditorsActive = true;
}
function deactivateEditors() {
$estado.summernote('destroy');
$goodat.summernote('destroy');
isEditorsActive = false;
}
$('button.edit').click(function(e){
e.preventDefault();
(isEditorsActive)? deactivateEditors() : activateEditors();
});
$("form#ac").submit(function(e) {
e.preventDefault();
var $this = $(this);
if(isEditorsActive) {
var estado = $estado.summernote('code');
var goodat = $goodat.summernote('code');
$('#data-estado').html(estado);
$('#data-goodat').html(goodat);
}
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<form action="{{route('account')}}" id="ac" class="ac" method="post">
<div class="row">
<div class="col-lg-3">
<label>Estado</label>
#foreach($accounts as $account)
#if($user== $account->user)
<div class="estado" id="estado" style="width:100%">
{!! $account->estado !!}
</div>
#endif
#endforeach
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3">
<label>I'm Good At:</label>
#foreach($accounts as $account)
#if($user==$account->user)
<div class="goodat" id="goodat" style="width:100%">
{!! $account->goodat !!}
</div>
#endif
#endforeach
</div>
</div>
<button type="submit" class="btn btn-success save">Save</button>
<button class="btn btn-default edit">Edit</button>
</form>
ESTADO:
<div id="data-estado">
</div>
GOOD AT:
<div id="data-goodat">
</div>
but after this You still cannot get the data that inside these textareas - so really something is wrong with Your blade template
http://num8er.me/summernote.html
I think you could have some asynchronous issues here, since it works sometimes, and sometimes not. You are setting the value of the textareas based on the values of the summernote fields. You can't be sure though, that $estado.summernote('code') is already finished before using the value of the summernote field to set the value of textfield4 (same holds for $goodat.summernote('code') and textfield5.
When you use callbacks for the summernote events, you can prevent this behaviour and have more control.
$('#estado').summernote({
callbacks: {
onChange: function(contents, $editable) {
console.log('onChange:', contents, $editable);
$("#textfield4").val(contents); //populate text area
}
}
});
Read more here
Another thing that could be causing trouble, is the foreach loop containing elements with hardcoded id's. Since id's have to be unique this can give some unexpected results. Of course, when $user matches $account->user only once, everything is fine, but I usually don't take the risk.
UPDATE: added a jsfiddle here of a possible implementation.
I use a ASP.NET MVC 4 project with JQuery, JQuery Mobile, etc.
This is my popup dialog that is in the same page of my main page.
<div data-role="popup" id="popupDialog" data-overlay-theme="a">
<div data-role="header">
<p id="headerMessage">Recherche de recettes</p>
</div>
<div data-role="content">
#using(Html.BeginForm("GetRecipes","Recipes",FormMethod.Post)){
<input id="classicSearchInput" name="classicSearchInput" type="text" />
<div id="buttonDialog">
<button id="okBtn" data-role="button" data-ajax="false" data-inline="true" data-rel="back" data-theme="c">OK</button>
<a id="cancelDialogBtn" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
</div>
}
</div>
</div>
In my popup, when I click on the "OK" button, it's going well to the "GetRecipes" controller :
[HttpPost]
public ActionResult GetRecipes() {
String recipe = HttpContext.Request.Form["classicSearchInput"];
try{
var client = new FacebookClient((String)Session["accessToken"]);
}
catch (FacebookOAuthException foe){
Session["accessToken"] = "";
return RedirectToAction("Index", "Login");
}
catch (Exception ex){
Session["accessToken"] = "";
return RedirectToAction("Index", "Login");
}
List<Recipe> recipeList = new List<Recipe>();
using (Entities entitie = new Entities()) {
String recipeSearched = recipe.Replace("é", "e").Replace("è", "e").Replace("ê", "e").Replace("à", "a").ToLower();
recipeList = entitie.Recipes
.Include("Votings")
.Include("SocialNetworkClient")
.Where(a =>
a.title.Replace("é", "e").Replace("è", "e").Replace("ê", "e").Replace("à", "a").ToLower()
.Contains(recipeSearched))
.ToList();
ViewBag.previousPage = "/Home";
return View("~/Views/Recipes/Index.cshtml", recipeList);
}
}
I've no problem with the controller. But when the controller returns the view 'Recipes', there is a problem. It executes well the lines with #Styles and #Scripts but it doesn't execute the different stylesheets(RecipeLandscape.css, RecipePortrait.css,...) and the javascript below. It executes just the following line and that's all :
#Html.Partial("_RecipeList", Model.ToList())
/Views/Recipes/Index.cshtml :
#model IEnumerable<ICookApp.Models.Recipe>
<html>
<head>
#Styles.Render("~/Content/css")
#Scripts.Render("~/ScriptsJQuery")
#Styles.Render("~/ratingStarStyle")
#Scripts.Render("~/ratingStarScript")
<link href="#Url.Content("~/Content/css/RecipesLandscape.css")" media="screen and (orientation:landscape)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/RecipesPortrait.css")" media="screen and (orientation:portrait)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/HeaderPortrait.css")" media="screen and (orientation:portrait)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/HeaderLandscape.css")" media="screen and (orientation:landscape)" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/css/All.css" />
<meta name="viewport" content="width=device-width" />
<script>
$(document).ready(function () {
$("div[title='recipe']").each(function () {
var val = parseInt($(this).find('input[type="hidden"]').val());
var t = $(this).children(".star").length;
});
$(".star").rating('readOnly', true);
});
</script>
<title>Index</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="content">
#Html.Partial("_RecipeList", Model.ToList())
</div>
</div>
</body>
</html>
This is the strange print :
I would have to get this :
Do you have a solution ?
Thank you