Cakephp 3.1 Javascript - javascript

How to create a element that uses javascript without reloading the jquery.js?
I've already load it on layout.
every time, I must load it.
This is my element/contacts.ctp
(entire html)
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js">
</script>
<script type="text/javascript" src="js/bootstrap/novo.js">
</script>
<script type="text/javascript">
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
e.preventDefault();
var inpute = '<div class="entradas-'+id+'" hidden></br><select class="form-control" id="tipo." name="abc['+id+'][tipo_id]"><?php foreach($contatotipo as $tipo): ?><option value="<?= $tipo->id; ?>"><?= $tipo->nome; ?></option> <?php endforeach; ?> </select> <input class="form-control" id="contato" placeholder="Preencher" name="abc['+id+'][contato]"> <button class="btn btn-danger btn-remove" id="addcontato" type="button"> <span class="fa fa-minus"></span> </button> </br> </div>';
$(".novas").before(inpute);
$('.entradas-'+id).slideDown('slow');
return id++;
})
.on('click', '.btn-remove', function(e)
{
$(this).closest('div').slideUp();
e.preventDefault();
return false;
});
});
</script>

First, put the custom JavaScript code in a separate file. Then, wrap it inside the $(document).ready() function, like this
$(document).ready(function(){
var id = '1';
$(function(){$(document).on('click', '.btn-add', function(e){
...
}
...
});
This tells jQuery to wait with the code execution until all the elements on the page have been drawn.
Then, load all the scripts in the <head> tag:
<html>
<head>
<script type="text/javascript" src="js/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap/novo.js"></script>
<script type="text/javascript" src="js/your/custom/path.js">
</head>
Make the header the same for all your pages, and you're good to go.

Related

Jquery is not working on html echoed by php

I echo my html in the body using php.
Like this:
<body>
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</body>
In this html I have a button with the id set to button. Then, in Jquery,I have this code:
$(document).ready(function(){
$("#button").click(function(){
alert("It works");
});
});
However, It works is not getting printed. What should I do?
It also depends on where your Javascript Code is located within the DOM and also if you have jQuery included in the page in question.
Something like this could hopefully work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<title>Demo</title>
</head>
<body>
<div class="container">
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$("#button").on("click", function(e){
alert("It works");
});
});
})(jQuery);
</script>
</body>
</html>
Please note that the above Snippet is assumed to live inside a PHP File (index.php - for example).

appendTo - unrecognized expression var

Updated code, trying to change the imo number with an onclick but vesslefinder just ignores everything in the onclick. Any advivce? Even when I hard code the imo it doesn't work.
The <a> 'button' link:
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a>
script:
<script>
$(document).on('click', '#button_mssi_imo', function( event )
{
alert('Button Clicked');
var imo_data = $(this).text();
// splits the string to get the imo
var imo_data_split = imo_data.split("!")[0];
var width="700";
var height="500";
var zoom="3";
var imo = imo_data_split;
var click_to_activate=false;
});
</script>
<script type="text/javascript" src="https://www.vesselfinder.com/aismap.js"></script>
I am trying to append some JavaScript into a div when a button is clicked (To use vesselfinder). I can manage to append the start of the script, but the second I start to add var it comes back with the unrecognised expressionmessage.
Could anyone please help me to what I am doing wrong? I have also tried everything on one line that results in the same error:
Here is what I think you wanted based on the code I get from https://www.vesselfinder.com/nl/embed
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
var myWrite = document.write, html=[];
document.write=function(str) { // redefine document.write to intercept
html.push(str);
}
$(function() {
$("#myDiv").html(html.join("")); // load into the div of your choice
});
</script>
<script type="text/javascript">
var width="700";
var height="500";
var zoom="3";
var click_to_activate=false;
</script>
<script type="text/javascript"
src="https://www.vesselfinder.com/aismap.js">
</script>
<div id="myDiv"></div>
Loading on click (does not work on SO)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
function writeVessel(imo) {
var script = [];
script.push('<script>');
script.push('var imo = "' + imo + '";');
script.push('var width="700";');
script.push('var height="500";');
script.push('var zoom="3";');
script.push('var click_to_activate=false;');
script.push('<\/script>');
script.push('<script src="https://www.vesselfinder.com/aismap.js"><\/script>');
console.log(script.join("\n"))
var iFrame = window.myIframe; // $("#myIframe")[0];
iFrame.document.write(script.join("\n"));
iFrame.document.close();
}
$(function() {
$(document).on('click', '.button_mssi_imo', function(e) {
e.preventDefault(); // cancel click
var imo = $(this).text().split("!")[0];
writeVessel(imo);
});
});
</script>
</head>
<body>
<a id="button_mssi_imo" href="#" data-toggle="modal" data-target=".bs-example-modal-lg" class="btn btn-success btn-xs"><i class="fa fa-truck"></i><p hidden="">9514767!</p> Track </a><br />
<iframe id="myIframe" name="myIframe" width="800" height="800" src="about:blank"></iframe>
</body>
</html>

JQuery Post Callback filter select data

Ich have the following site with JQuery:
<html>
<head>
<title>Testpost</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sendtest = $("#sendtest");
sendtest.keyup(function(){
$.post(
"test.php",
{ nur: sendtest.val() },
function(data) {
$('#receivetest').html(data);
}
);
});
});
</script>
</head>
<body>
<input type="text" name="season" id="sendtest"/>
<div id="receivetest"></div>
</body>
</html>
And following test.php:
<?php
$nur = $_POST['nur'];
echo $nur;
?>
<p id="hello">Hello World!</p>
Now I want to see on the receivetest-div only echo $nur; !
What must I do for that?
It is not a good practice to code like this. It would be better to add a parameter in your PHP file which will hide the div when you don't need it.
However, you can hide the div like that:
$('#receivetest').find('#hello').hide();
This will keep the html of the <div id="hello"> and its content, and hide it to the client.
You can also remove the div by doing this:
$('#receivetest').find('#hello').remove();
You can the below code
<html>
<head>
<title>Testpost</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sendtest = $("#sendtest");
sendtest.keyup(function(){
$.post(
"asd.php",
{ nur: sendtest.val() },
function(data) {
$('#receivetest').html(data);
$('#receivetest').find('#hello').remove();
}
);
});
});
</script>
</head>
<body>
<input type="text" name="season" id="sendtest"/>
<div id="receivetest"></div>
</body>
</html>

How can I get the data that is sent from my html file to php and recieve and show the data

I found a program which is sending the data from the form to php file from jquery. But when I have tried to find it, it is displaying nothing. When I am clicking on the Load Data button nothing is coming. Is something wrong in the program ?
main.php
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
index.html
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Please resolve the problem. Thanks in advance
Your <script> tag for loading jQuery has an invalid href attribute.
Remove the ending slash from the address so it looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use your browser's developer tools to find out what's wrong with your clientside script, they're really handy. Hit F12.
try this code:
$(document).ready(function() {
$("#driver").click(function(event){
$.post( "main.php", { name: "Zara"})
.done(function( data ) {
$('#stage').html(data);
});
});
});
for detail see link
Please the version of this file:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
code:
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert('hi');
$("#driver").click(function(){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

How Can I Transfer Text From Input Box to Text Area?

I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!

Categories