I am very new to javascript - mainly only used it to go back a page or go to a link ..
I got it working on the example page, now I'm trying to get it to work on my website ... However nothing occurs when the link is pressed...
The files exist in their linked locations. The script is copied from the example.
HEADER:
<script type="text/javascript" src="js/jquery-impromptu.min.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="css/jquery-impromptu.css" />
<script type="text/javascript">
function removeUser(id){
var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="'+ id +'" />';
$.prompt(txt,{
buttons:{Delete:true, Cancel:false},
close: function(e,v,m,f){
if(v){
var uid = f.userid;
window.location = "deletemember.php?id=" + id;
}
else{}
}
});
}
</script>
LINK :
<a href='javascript:;' onclick='removeUser(544666);'>Delete</a>
Check this demo: https://github.com/trentrichardson/jQuery-Impromptu/blob/master/demos/user_manager.html
What you should do is make a function. This function is called when a user does something, but it should contain an ID. For example:
Edit
So, as you can see you will call the function 'editUser(4)' where 4 is the ID.
Back to JS
function editUser(id){
}
In this function you add your part, and you end up with this:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../jquery-impromptu.js"></script>
<script type="text/javascript">
function removeUser(id){
var user = $('#userid'+id)
var fname = user.find('.fname').text();
var lname = user.find('.lname').text();
var txt = 'Are you sure you want to remove this user with id: '+id+'?';
$.prompt(txt,{
buttons:{Change:true, Cancel:false},
submit: function(e,v,m,f){
var flag = true;
if (v) {
window.location = "deletemember.php?id=" + id;
}
return flag;
}
});
}
</script>
<a href='javascript:;' onclick='removeUser(544666);'>Delete</a>
Now the ID is useable for your window.location.
Use window.location.href or window.location.replace:
<script type="text/javascript">
function removeUser(id) {
var txt = 'Are you sure you want to remove this user?<input type="hidden" id="userid" name="userid" value="' + id + '" />';
$.prompt(txt, {
buttons: {
Delete: true,
Cancel: false
},
close: function (e, v, m, f) {
if (v) {
var uid = f.userid;
//window.location.href = "deletemember.php?id=" + uid;
window.location.replace("deletemember.php?id=" + uid);
} else {}
}
});
}
</script>
You can read about the difference here.
Related
I made a basic form that after you put in an input and submit the cookies show "welcome" + name
I added a second cookie that when you reload the same page the above text disappears and says "welcome back" + name.
I am new to using cookies and cant get the functionality working properly.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<input id="user" type="user" name="user">
<input id = "submit" type="submit" name="submit">
</form>
<h1 id ="greeting" cookie_name ='name'></h1>
<h1 id ="welcome" cookie_name='visited'></h1>
<script
src="http://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="script/js.cookie.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</body>
</html>
--------------------------------------------------------------------------
<script>
$(document).ready(function(){
if(Cookies.get('name')===undefined){
$('form').submit(function(){
var name = $('input').val()
Cookies.set('name', name)
Cookies.set('visited', 1)
})
}else{
$('form').css('display', 'none')
$('#greeting').append('Welcome ' + Cookies.get('name') + '!')
}
})
if(Cookies.get('visited')===undefined){
$('#greeting').text('Welcome again!')
}else{
$('#greeting').text('Welcome back ' + Cookies.get('name') + '!')
}
<script>
I would actually use sessionStorage.setItem('name', name); to store items and check if items are set like this
if (sessionStorage.getItem("name"))
Check this link
If Cookies is a must this code works for me just fine:
$(document).ready(function () {
if (Cookies.get('name') === undefined) {
Cookies.set('name', 'alexis')
Cookies.set('visited', 1)
} else {
console.log('Name is already set');
}
})
if (Cookies.get('visited') === undefined) {
console.log('welcome for the first time')
} else {
console.log('welcome ' + Cookies.get('name'))
}
i have a function to display pdf on a modal popup when click on a button.
i want to integrate this on another modal popup.
but its not working.
my code to display pdf on a modal pop up on button click
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
var fileName = "AFarm.pdf";
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 540,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open: function () {
var object = "<object data=\"http://vho.org/aaargh/fran/livres4/AFarm.pdf\" type=\"application/pdf\" width=\"500px\" height=\"300px\">";
object += "If you are unable to view file, you can download from here";
object += " or download <a target = \"_blank\" href = \"AFarm.pdf/\">Adobe PDF Reader</a> to view the file.";
object += "</object>";
object = object.replace(/{FileName}/g, "Files/" + fileName);
$("#dialog").html(object);
}
});
});
});
</script>
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none">
</div>
And the below function where i want to integrate this
$('#manageApplicantModel').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var applicaitonid = button.data('id');
var modal = $(this);
$.get(getURL('ManageApplication/getApplicationDetailByid/' + applicaitonid), function (data) {
var json = new Object();
json = JSON.parse(data);
modal.find('#name').text(json.name);
modal.find('#email').text(json.email);
modal.find('#phonenum').text(json.phone);
modal.find('#propertyname').text(json.property_name);
modal.find('#applieddate').text(json.date_applied);
modal.find('#address').text(json.property_address);
modal.find('#divrequirementchecks .reqcheckslbl').empty();
$.each(json.check, function (index, value) {
//list-group-item
modal.find('#divrequirementchecks .reqcheckslbl').append(
'<li class="">'
+ value
+ '</li>');
});
modal.find('#divattacheddoc .attacheddoclst').empty();
$.each(json.documents, function (index, value) {
modal.find('#divattacheddoc .attacheddoclst').append(
'<li class="list-group-item">'
+ value.document_name
+ 'Download'
+'<br>'
+ '<a id="#mypdf" href="#" class="pull-right">View</a>'
+ '</li>');
});
});
}
);
See the view link in this function. on click on this link. i want to show that modal popup with pdf. anybody knows please help me
I wrote a blog post on this...several people got it working using this technique...let me know if it helps your case..
http://www.anujvarma.com/rendering-pdf-in-a-modal-popup-asp-net-mvc/
I'm working on a tournament bracketing system, and I found a library called "JQuery bracket" which can help a lot. But there are some problems:
I was planning to retrieve team names (and possibly match scores) from a PostgreSQL database and put them on the brackets. However, the data must be in JSON, and the parser is in Javascript. I can't seem to figure out a workaround.
Original code:
<html>
<head>
<title>jQuery Bracket editor</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="jquery.bracket.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bracket.min.css" />
<style type="text/css">
.empty {
background-color: #FCC;
}
.invalid {
background-color: #FC6;
}
</style>
<script type="text/javascript">
function newFields() {
return 'Bracket name [a-z0-9_] <input type="text" id="bracketId" class="empty" /><input type="submit" value="Create" disabled />'
}
function newBracket() {
$('#editor').empty().bracket({
save: function(data){
$('pre').text(jQuery.toJSON(data))
}
})
$('#fields').html(newFields())
}
function refreshSelect(pick) {
var select = $('#bracketSelect').empty()
$('<option value="">New bracket</option>').appendTo(select)
$.getJSON('rest.php?op=list', function(data) {
$.each(data, function(i, e) {
select.append('<option value="'+e+'">'+e+'</option>')
})
}).success(function() {
if (pick) {
select.find(':selected').removeAttr('seleceted')
select.find('option[value="'+pick+'"]').attr('selected','selected')
select.change()
}
})
}
function hash() {
var bracket = null
var parts = window.location.href.replace(/#!([a-z0-9_]+)$/gi, function(m, match) {
bracket = match
});
return bracket;
}
$(document).ready(newBracket)
$(document).ready(function() {
newBracket()
$('input#bracketId').live('keyup', function() {
var input = $(this)
var submit = $('input[value="Create"]')
if (input.val().length === 0) {
input.removeClass('invalid')
input.addClass('empty')
submit.attr('disabled', 'disabled')
}
else if (input.val().match(/[^0-9a-z_]+/)) {
input.addClass('invalid')
submit.attr('disabled', 'disabled')
}
else {
input.removeClass('empty invalid')
submit.removeAttr('disabled')
}
})
$('input[value="Create"]').live('click', function() {
$(this).attr('disabled', 'disabled')
var input = $('input#bracketId')
var bracketId = input.val()
if (bracketId.match(/[^0-9a-z_]+/))
return
var data = $('#editor').bracket('data')
var json = jQuery.toJSON(data)
$.getJSON('rest.php?op=set&id='+bracketId+'&data='+json)
.success(function() {
refreshSelect(bracketId)
})
})
refreshSelect(hash())
$('#bracketSelect').change(function() {
var value = $(this).val()
location.hash = '#!'+value
if (!value) {
newBracket()
return
}
$('#fields').empty()
$.getJSON('rest.php?op=get&id='+value, function(data) {
$('#editor').empty().bracket({
init: data,
save: function(data){
var json = jQuery.toJSON(data)
$('pre').text(jQuery.toJSON(data))
$.getJSON('rest.php?op=set&id='+value+'&data='+json)
}
})
}).error(function() { })
})
})
</script>
</head>
<body>
Pick bracket: <select id="bracketSelect"></select>
<div id="main">
<h1>jQuery Bracket editor</h1>
<div id="editor"></div>
<div style="clear: both;" id="fields"></div>
<pre></pre>
</div>
</body>
</html>
After the data is retrieved, upon display, you are going to want to add disabled to the html input element. For instance:
<input type="text" id="bracketId" class="empty" disabled>
This will render your text field uneditable.
If you are looking to do this as people are filling out their brackets, I would suggest you either add a <button> after each bracket or fire a jquery event with the mouseout() listener that adds the disabled attribute to your input fields.
i'm beginner in jQuery Plugin's coding.
I've coded a plugin to generate a Gantt's calendar but i can't succeed with interacting with it.
The code is too long to be posted so i've coded a sample of what a need in kind of interaction.
Here is a sample code that generate a counter and two buttons to increase or decrease the value of the counter.
So the question is : How can i make the button increase / decrease the counter and of course refresh display.
Thanks,
[EDIT]
I explain again what i want to do :
- The buttons are generated by the plugin.
- When they are clicked, they increase/decrease the value and refresh display
- I dont want an external action binding.
- The plugin must be standalone
[/EDIT]
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title></title>
<link rel="stylesheet" href="/styles/jquery-ui.css" type="text/css">
<script src="/scripts/jquery.js"></script>
<script src="/scripts/jquery-ui.js"></script>
<script>
(function($){
$.fn.mySample = function() {
var _myCount = 0;
this.initialize = function ()
{
this.html('<input type="button" value="--">Count : ' + _myCount + '<input type="button" value="++">');
}
return this.initialize();
}
})(jQuery);
$(document).ready(
function()
{
$('#myDiv').mySample();
}
);
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
Sorry for my first answer :)
So here is your mySample plugin working as a standalone
http://jsfiddle.net/P4p3m/2/
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<title></title>
<script src="jquery-1.11.0.min.js"></script>
<script>
(function($){
$.fn.mySample = function() {
this._counter = 0; // Your counter
this.initialize = function (config)
{
// Get the context of the outside
var context = this;
// Init the -- button
var inputMinus = document.createElement("input");
inputMinus.type = "button";
inputMinus.value = "--";
$(inputMinus).click(function(){
context.updateCounter(-1);
});
this.append(inputMinus);
// Init the display
var spanDisplay = document.createElement("span");
context.spanDisplay = spanDisplay;
$(spanDisplay).text(context._counter);
this.append(spanDisplay);
// Init the ++ button
var inputPlus = document.createElement("input");
inputPlus.type = "button";
inputPlus.value = "++";
$(inputPlus).click(function(){
context.updateCounter(+1);
});
this.append(inputPlus);
}
// Updating the counter value and the display
this.updateCounter = function(nbr){
this._counter += nbr;
$(this.spanDisplay).html(this._counter);
};
// Start the plugin
return this.initialize();
}
})(jQuery);
$(document).ready(
function()
{
$('#myDiv').mySample();
}
);
</script>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
I modified your code to add id's to better identify the buttons and a span to identify where we want to modify the count:
Here's the updated code to reflect your comments, along with the code working in a fiddle: http://jsfiddle.net/XMgz4/
(function ($) {
$.fn.mySample = function () {
var _myCount = 0;
var inputStr = '<input id="decButton" type="button" value="--">'
+ 'Count : <span id="count">' + _myCount
+ '</span><input id="incButton" type="button" value="++">';
this.html(inputStr);
this.find("#decButton").on("click", function() {
_myCount --;
$("#count").text(_myCount);
});
this.find("#incButton").on("click", function() {
_myCount ++;
$("#count").text(_myCount);
});
}
})(jQuery);
You will need to put the Count : ' + _myCount + ' inside an element.. like this:
'Count : <div id="result">' + _myCount + '</div>'
After that you will create a function to get the value of result.. like this $('#result').html()
and increase or decrease the value using onclick event of your inputs... (You must to add class or id for your inputs...)
I will suppose that the id is btnDecrease and btnIncrease... You will need to do something like this:
$('#btnDecrease').on('click', function(){
$('#result').html(parseInt($('#result').html()) - 1);
});
and
$('#btnIncrease').on('click', function(){
$('#result').html(parseInt($('#result').html()) + 1);
});
Hope it helps
I have some problems in my project. I am trying to do autocomplete with JavaScript in CodeIgniter. I already tried many options, but they don't work!
The controller:
public function getResult($referencia){
if(!empty($referencia) || isset($referencia))
{
$this->db->like('referencia', $referencia);
echo json_encode( $this->db->get('produto_servico_tbl')->result());
}
}
The autocomplete.js (created by me):
$(document).ready(function(){
$('#search').keypress(function(e){
if(e.which == 13)
{
e.preventDefault();
}
var searched = $('#search').val()
var fullurl = $('#hiddenurl').val() + 'autoComplete_v.php/autoComplete_c/getResult/' + searched
$.getJSON(fullurl,function(result){
//display suggestion code goes here
var elements = [];
$.each(result, function(i, val){
elements.push(val.referencia)
})
$('#search').autocomplete({
source : elements
})
})
})
})
The view:
<head>
<link href="<?=base_url()?>css/ui-lightness/jquery-ui-1.10.3.custom.css" media="screen" type="text/stylesheet" rel="stylesheet" />
<form>
<label for="search">Search</label>
<input id="search" type="text"/>
<input value="<?=base_url()?>" id="hiddenurl" type="hidden">
<input type="submit" value="submit"/>
</form>
<script src="<?=base_url()?>js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="<?=base_url()?>js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<script src="<?=base_url()?>js/jquery-ui-1.10.3.custom" type="text/javascript"></script>
<script src="<?=base_url()?>js/autocomplete.js" type="text/javascript"></script>
You are giving the wrong URL for the AJAX call.
Change this line:
var fullurl = $('#hiddenurl').val() + 'autoComplete_v.php/autoComplete_c/getResult/' + searched
Here $('#hiddenurl').val() is your base_url(). So the complete URL will be:
var fullurl = $('#hiddenurl').val() + 'controller_class_name/getResult/' + searched
In CodeIgniter your URL is like this:
base_url/controller_class_name/method_name/parameter1/parameter2....
Your autocomplete_v.php will produce an error. You can check how your JavaScript is working with Firebug.