Jquery .append is not working in firefox or safari but .val does.
Interestingly the same code works fine in IE.
code:
<head>
<link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script type = "text/javascript">
$(document).ready(function () {
$("#notes").change(function () {
$('#notes').val($('#notes').val() + "Test1");
$('#notes').append('Test2');
});
});
</script>
<textarea rows="10" name="Notes1" id="notes" style="width: 100%" ><?php
if (isset($_SESSION['order'])) {
echo $_SESSION['order'][0]['tNotes'];
}
</textarea>
So the above code works fine with both Test1 and Test2 being added to the textarea in Internet explorer BUT only the .val works Test1 in FF/safari and .append does not.
Why is this? any help or alternatives to get an equivalent (appends text to the place that was edited and not just to the bottom)
EDIT :
(appends text to the place that was edited and not just to the bottom)
Use val() to make it works in every browsers.
See this updated fiddle
$(document).ready(function () {
$("#notes").change(function () {
insertAtCaret($(this).prop('id'),"this");
$(this).val($('#notes').val() + "here");
});
});
Note - I use a function from this SO post :
Inserting a text where cursor is using Javascript/jquery
Textarea is an input container type, so you have to use the .val() method to set the value of your element.
.append() works in IE because IE doesn't care about standards.
Related
I am trying to reproduce some thing that works on codecademy: https://www.codecademy.com/en/courses/web-beginner-en-v6phg/2/5?curriculum_id=50a3fad8c7a770b5fd0007a1
However, when I copied down the html, css, and js files and ran it with google chrome, nothing was working. I noticed the missing <script> link to Jquery and added it, and fixed the 'add' function; however the 'remove part' never worked.
Ps. I made sure the script is correctly linked by adding an alert, which fired.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>To Do</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Checklist</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>
</html>
and jquery (js) file:
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(document.body).on('click', '.item', function(event) {
$(this).remove();
});
});
I just found out the issue to be using old version of jQuery. You are using 1.4.2, which doesn't have the .on() function.
<script type='text/javascript'
src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<!-------------------------------------------------------^^^^^
Solution: Use the latest version of jQuery 1.x, which is 1.12.
From the manual:
I would really suggest you to check the console first before posting something here.
If you sticky with old library then use .live() instead of .on(). Hope this will work for you.
$(document).ready(function() {
$('#button').click(function() {
var toAdd = $('input[name=checkListItem]').val();
$('.list').append('<div class="item">' + toAdd + '</div>');
$('input[name=checkListItem]').val('');
});
$(".item").live('click', function() {
$(this).remove();
});
});
Demo: https://jsfiddle.net/8s19ehh8/5/
In my code, there is a lot of image in a table. I want to click a photo & then the photo will popup in a large size over the screen. But I do not have much idea about javascript & jquery. I try to do this but the problem is it popup a box but don't show the picture. I know that there is a problm in script to show the picture. can u please tell me where is the wrong or give me a proper code for popup image after click.
my header link is below. is there need any other link to be added??
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
here is html part:
<div>
<td> <img class="btn" onclick="popup()" style="width:100px; height:100px; border-radius:4px;" src="upload/<?php echo $row['image'];?>"></img></td>
</div>
here is the javascript:
<script type="text/javascript">
function popup() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="upload/<?php echo $row['image'];?>"></img></div>'
});
}
</script>
can anyone please help me how to show image in the pop up box. thanks in advance.
Instead of the onclick attribute, you could assign a class popup_image to your img and attach a click handler when the DOM is ready.
I took the liberty to remove scripts and tags that were not neccessary to demonstrate the result.
$(document).ready(function() {
$(".popup_image").on('click', function() {
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="' + $(this).attr('src') + '"></img></div>'
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://w2ui.com/src/w2ui-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-1.4.2.min.css" />
<img class="btn popup_image" style="width:100px; height:100px; border-radius:4px;" src="http://lorempixel.com/g/200/200/"></img>
Replace your jquery with below any try:
<script type="text/javascript">
function popup() {
var image = $(this).attr('src');
w2popup.open({
title: 'Image',
body: '<div class="w2ui-centered"><img src="'+image+'"></img></div>'
});
}
</script>
I assume the images are displayed properly which you will click
I would recommend using Colorbox by Jack Moore. It uses JQuery, and is very customizable.
Colorbox: http://www.jacklmoore.com/colorbox/
Demo: http://www.jacklmoore.com/colorbox/example1/
If you aren't opposed to using PHP, you also may want to check out UberGallery. It uses colorbox internally and can be used simply with
<?php include_once('UberGallery.php')
UberGallery::init()->createGallery("path to dir","name of gallery");
?>
I tried to do a simple slider but that did not work, so i am copying one of code cademy, but it still qont work.
I have used 4 different browsers all have the same problem, i can type in the box but wont post, and show below.
PLEASE HELP?
Html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link type='text/css' href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
<div class="form-group">
<textarea class="form-control status-box" rows="2" placeholder="What's on your mind?"></textarea>
</div>
</form>
<div class="button-group pull-right">
<p class="counter">140</p>
Post
</div>
<ul class="posts">
</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
AMMENDED
script.js
$(document).ready() {
$('.btn').click(function() {
var post = $('.status-box').val()
$('<li>').text(post).prependTo('posts');
});
};
THANK YOU ALL, this has been corrected and it now works :)
val is a jQuery function ... you need () to invoke it so it returns the value of element. As your code stands now you are trying to set a function object as text.
You are also using incorrect selectors $('btn') and $('status-box') which are looking for non existent tags <btn> and <status-box>.
Add dot prefix for both to represent class:
$('.btn') and $('.status-box')
As well as what's been mentioned in the other answer, I don't believe your main method is ever called. If it isn't called then the event handler isn't going to be attached.
The main method would be easier set up via jquery, so instead of:
var main = function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
}
Just do:
$(function() {
$('btn').click(function() {
var post = $('status-box').val
$('<li>').text(post).prependTo('.posts');
});
});
Alternatively you could adjust your body tag as follows:
<body onload="main()">
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
I'm trying to add a help button in a Zend form using qTip 2. The button is a simple image, and I would like to open a pop-in when the image is clicked.
Here my code:
in Booostrap.php:
protected function _initView() {
...
$view->headLink()
->appendStylesheet('/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css')
->appendStylesheet('/css/jquery/jquery.qtip.min.css');
}
protected function _initJQuery() {
...
$view->jQuery()
->setLocalPath('/js/jquery/jquery-1.9.1.min.js')
->setUiLocalPath('/js/jquery/jquery-ui-1.10.1.custom.min.js')
->addJavascriptFile('/js/jquery.qtip.min.js')
->enable()
->uiEnable();
}
In my view:
<?php
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
?>
...
<img data-tooltip="thing" src="/images/repo/help-22x22.png"/>
And the rendered result in my browser:
<link href="/css/jquery/smoothness/jquery-ui-1.10.1.custom.min.css" media="screen" rel="stylesheet" type="text/css" >
<link href="/css/jquery/jquery.qtip.min.css" media="screen" rel="stylesheet" type="text/css" >
...
<script type="text/javascript" src="/js/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.10.1.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.qtip.min.js"></script>
...
<script type="text/javascript">
//<!--
$(data-tooltip!="").qtip({content: {attr: 'data-tooltip'}}); //-->
</script>
...
<img data-tooltip="truc" src="/images/repo/help-22x22.png"/>
which is what I wanted to get. Problem is, the tooltip doesn't show up. Not even is an event fired when I click on the picture, according to the Javascript console. So my idea i wrong, but I can't understand why. Any idea?
I Think that the problem is here: $(data-tooltip!="") instead of $('[data-tooltip!=""]').
An other problem is your call is before the tag img so use InlineScript ìnstead of headscript
To Finish, I think should precise de name of the tag (img) in the selector.
Try to replace
$this->headscript()->appendScript('$(data-tooltip!="").qtip({content: {attr: \'data-tooltip\'}});');
By
$this->InlineScript()->appendScript('$(\'img[data-tooltip!=""]\').qtip({content: {attr: \'data-tooltip\'}});');
Not sure but your qtip initialization has to be in doc ready:
<?php
$this->headscript()->appendScript('$(function(){// here qtip code});');
?>