When ever I click submit button, page just get refreshed. However this code works everywhere.
The form id is #pager. Code that is note working as expected is
$("#pager").submit(function(e){
console.log("Hi!!!")
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<style>
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<script>
// The Edit and
function actionFormatter(value, row, index) {
return [
'<a class="edit ml10" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-edit"></i>',
'</a>',
'<a class="remove ml10" href="javascript:void(0)" title="Remove">',
'<i class="glyphicon glyphicon-remove"></i>',
'</a>'
].join(' ');
}
$.ajax({
type:"GET",
crossDomain: true,
beforeSend: function (request)
{
request.setRequestHeader("Content-Type", "application/json");
},
url: "http://localhost:5000/api/members/",
processData: false,
success: function(msg) {
console.log(msg);
$('#memberTable').bootstrapTable({
data: msg
});
}
});
$(function () {
$('#memberTable').on('all.bs.table', function (e, name, args) {
console.log(args);
})
.on('check.bs.table', function (e, row) {
console.log(row);
})
});
window.actionEvents = {
'click .edit': function (e, value, row, index) {
console.log(row);
},
'click .remove': function (e, value, row, index) {
console.log(row);
}
};
$("#pager").submit(function(e){
console.log("Hi!!!")
});
</script>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Member Data</h2>
<p>
<br>
<table id="memberTable" data-search="true"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name" data-sortable="true" >Name</th>
<th data-field="phone">Phone</th>
<th data-field="date" data-sortable="true">Date</th>
<th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>
</tr>
</thead>
</table>
</p>
<br>
</div></div>
<div class="row">
<div class="col-sm-12">
<form id = "pager">
<textarea class="form-control" rows="3" id="textArea"></textarea>
<span class="help-block"></span>
<button type="submit" id="sendButton" class="form-control btn btn-primary">Send</button>
</form>
</div>
</div></div>
</body>
</html>
Looks like there are two problems here. The first is that you need to prevent the default form behavior so that the page doesn't redirect.
The second is that you need to instantiate your listener after the document is ready. At the moment your listener gets added before the DOM is ready so it's never actually running. This should solve both problems.
$(function() {
$("#pager").submit(function(e) {
e.preventDefault();
console.log("Hi!!!")
});
// You should probably put the rest of your Javascript in here too, so it doesn't run until the DOM is fully ready.
});
You can read more about event.preventDefault here. And document.ready here.
Related
I am trying to get the selected data from table, I am using bootstrap and jquery. After selecting checkbox and click on Add to Cart button I have to get the selected data from table. Below is my code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<script type="text/javascript">
var checkedRows = [];
$('#eventsTable').on('.bs-checkbox', function (e, row) {
checkedRows.push({id: row.id, name: row.name, forks: row.forks});
console.log(checkedRows);
});
$('#eventsTable').on('uncheck.bs.table', function (e, row) {
$.each(checkedRows, function(index, value) {
if (value.id === row.id) {
checkedRows.splice(index,1);
}
});
console.log(checkedRows);
});
$("#add_cart").click(function() {
$("#output").empty();
console.log(checkedRows);
$.each(checkedRows, function(index, value) {
$('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
});
});
</script>
</head>
<body>
<div style="position: absolute;bottom: 42px; padding-left:10px; ">
<table id="eventsTable"
data-toggle="table"
data-height="300"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<button id="add_cart">Add to card</button>
<ul id="output"></ul>
</div>
</body>
</html>
When I click on my button none of my jquery functions are calling.
I have referred :
Getting values of selected table rows in bootstrap using jquery
Kindly help me to resolve this. Thanks in advance.
The problem is casued by the fact that your js loads before the DOM is ready.
You can do one of two things:
Put your script tag with the event handlers in it before
</body>
Add a document ready event around your code
$(document).ready(function(){
// your code here
});
Use #add_cart click function like this
$(document).ready(function(){
$("#add_cart").click(function() {
$("#output").empty();
$("tbody tr").each(function() {
if($(this).hasClass("selected")){
$('#output').append($('<li>'+$(this).find("td:eq(1)").text()+' | '+$(this).find("td:eq(2)").text()+'</li>'));
}
});
});
});
I am trying to create a form, after clicking on submit i should get a popup with entered values for confirmation with edit and submit buttons.
I see lots of examples but nothing is exact.
help is appreciated.
this is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.8.2.custom.css">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function(){
$("#list").click(function() {
var cun = $("#list").val();
$.ajax({
type: "POST",
url: "http://localhost/prakash/popup form/view.php",
data: {'data':cun},
success: function(data){
//redirect to id using response
//window.location.replace("http://yoursite.com/products/" + response);
$('.display').html(data);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#add").click(function() {
var cun = $("#dis").val();
$.ajax({
type: "POST",
url: "http://localhost/prakash/popup form/add.php",
data: {'data':cun},
success: function(data){
//redirect to id using response
//window.location.replace("http://yoursite.com/products/" + response);
$('.display').html(data);
}
});
});
});
</script>
<script>
$(function(){
// jQuery UI Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: false,
buttons: {
"Submit Form": function() {
document.testconfirmjq.submit();
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
$('form#testconfirmjq').submit(function(e){
e.preventDefault();
$("p#dialog-name").html($("input#name").val());
$('#dialog').dialog('open');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div align="center" data-role="main" class="ui-content">
Add New
Show List
</div>
<div class="display" align="center" display="inline">
<table id="dis" border="0">
<form id="testconfirmjq" method="POST" action="insert.php">
<tr><td>Name</td><td> <input type="text" name="name" id="name"></td></tr>
<tr><td>Age</td><td><input type="text" name="age" id="datepicker-13" size="30"></td></tr>
<tr><td>City</td><td> <input type="text" name="city"></td></tr>
<tr><td><input id="button" type="submit" name="send" value="Submit"></td></tr>
</form>
</table>
You entered your Name as:
If this is correct, click Submit Form.
To edit, click Cancel.
This code may be help you
function send(){
var name = document.getElementById('name').value;
var r = confirm(name);
if (r == true) {
//apply with your function(it will be excuted)
return true;
} else {
return false;
}
return false;
}
<form action="demo.php" onsubmit="return send()">
<input type="text" id="name">
<input type="button" value="send">
</form>
I apply FineUploader to an element, then clone it. The new element will open the file upload dialog, but won't upload a file. How can this be accomplished?
http://jsfiddle.net/o4z7mtrd/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"></script>
<!-- <script src="/lib/plugins_3rd/fine-uploader-5.2.1/fine-uploader.js" type="text/javascript"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/fineuploader.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#mytable').find('tr div.upload').each(function(i,v){
console.log(this)
new qq.FineUploaderBasic({
button: this,
request: {
endpoint: 'update.php'
},
});
});
$('#add').click(function(){
$('#clone').clone(true).removeAttr('id').appendTo('#mytable');
});
});
</script>
<style type="text/css">
#clone {display:none;}
</style>
</head>
<body>
<table id="mytable">
<tr id="clone">
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
<tr>
<td class="proposal-td">
<div class="upload" title="Upload">
<img src="/lib/templates/back/images/upload.png" alt="Upload">
</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
</body>
</html>
The cloned element needs to be binded to the file upload button since this refers to that specific element only. You also don't need to have duplicated HTML code. See this working example.
HTML
<table id="mytable">
<tr class="row">
<td class="proposal-td">
<div class="upload" title="Upload">Upload</div>
</td>
</tr>
</table>
<button id="add">Add new</button>
JS
function bindUploader($element) {
new qq.FineUploaderBasic({
button: $element[0],
request: {
endpoint: '/echo/json/'
},
callbacks: {
onUpload: function (id, name) {
alert('uploaded');
}
}
});
return $element;
}
$(function () {
bindUploader($('#mytable').find('.upload'));
var $row = $('#mytable .row').clone(true);
$('#add').click(function () {
var $clone = $row.clone(true);
bindUploader($clone.find('.upload'));
$clone.appendTo('#mytable');
});
});
http://jsfiddle.net/moogs/o4z7mtrd/5/
Basically I have a page that has a drop down <select> listing a number of items / models which when selected triggers an AJAX call to dynamically display a form with all the details pertaining to that model to allow editing and updating.
<script type="text/javascript">
function item_loader(x) {
req = $.ajax({
type: "GET",
url: x,
datatype: "html",
success: function(data){
$('#item_table').html(data);
}
});
}
</script>
Within the form I have a "preview" button which displays dialog popup giving a preview of how the item will be displayed.
<script>
$(function(){
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
});
</script>
Everything works as intended when the page is loaded or refreshed, but the dialog portion breaks when the original content is dynamically updated/changed via AJAX. Doing research on this I'm finding old references suggesting modifying the code to use live(), but have read that is deprecated and to use on()? I am still fairly new to all of this and from the examples I've found on the net going through trial and error has always ended up in error. Hoping someone can share a resource or possibly offer some assistance. Thank you.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>Basic Page</title>
<script type="text/javascript" src="/JS/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="/JS/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="/JS/tinymce/tinymce.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/intranet-theme/jquery-ui-1.10.4.custom.css"/>
<script type="text/javascript">
function item_loader(x) {
req = $.ajax({
type: "GET",
url: x,
datatype: "html",
success: function(data){
$('#item_table').html(data);
}
});
}
</script>
<script>
$(function(){
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
});
</script>
</head>
<body bgcolor='#FFFFFF'>
<form>
<select name="period_select" id="item_dropdown" onChange="javascript:item_loader(this.value);">
<option value="Item_AJAX.php?Model_ID=0"> Choose Model</option>
<option value="Item_AJAX.php?Model_ID=404">AEROCOOL 100</option>
</select>
</form>
<div id="item_table" align="center">
<!-- Start of AJAX Dynamic Content -->
<form method="POST" enctype="multipart/form-data" action="" name="model_item">
<input name="Start_Special" type="hidden" value="2014-06-01"/>
<input name="Model_ID" type="hidden" value="model_id"/>
<table border="1" width="800">
<tr>
<td colspan="3" align="center">
[Form displaying item details for editing]
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" name="Update_Model" value="Save Model Info"/>
<input type="submit" name="Update_Listing" value="Update Listing"/>
<input type="submit" name="Delete" value="Remove Item"/>
<button type="button" id="opener">Preview</button>
<div id="wrapper" align="center">
<!-- Start of Hidden diolog Content -->
[Hidden Preview Content]
<!-- End of Hidden dialog Content -->
</div>
</td>
</tr>
</table>
</form>
<!-- End of AJAX Content -->
</div>
</body>
</html>
Either you can rebind in success method of ajax:
success: function(data){
$('#item_table').html(data);
$("#wrapper").dialog({
autoOpen:false,
width:780,
height:800,
title: 'Item Preview'
});
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
}
or you can try with event delegation:
$("#wrapper").on("click", "#opener", function() {
$("#wrapper").dialog("open");
});
i guess you have #opener in #wrapper element. if not then try to delegate to the closest parent or to $(document).
Change:
$("#opener").click(function() {
$("#wrapper").dialog("open");
});
To:
$(document).on("click", "#opener", function() {
$("#wrapper").dialog("open");
});
$("#elem").click() only binds to the elements currently on the page. Placing the event on the document itself will allow the event to work on newly created elements.
I want to make a webpage in which three different contents show/hide when a button is clicked. The code is shown below.
I want the same page to show three contents:
only a search bar when button 'search' is clicked,
only the result of the search after a search is done or when the button 'results' is clicked, and
only the visualization of the search when one specific outcome of the results is chosen, or when the button 'visualization' is clicked.
Right now I only know how to show the results in different pages, not in the same one hiding what I don't want.
Code is below.
Thanks
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="docs-assets/ico/favicon.png">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link href="css/jumbotron-narrow.css" rel="stylesheet">
<link href="css/jquery.dataTables.css" rel="stylesheet">
<link rel="shortcut icon" type="image/ico" href="" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery-2.0.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.sprintf.js"></script>
<script type="text/javascript" language="javascript" src="js/libs/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
//xmakeTable("treaty");
});
makeTable = function(query) {
var q = encodeURIComponent(query)
$('#example').dataTable({
"oLanguage": {"sSearch": "Filter results:"},
"bProcessing": true,
"bDestroy":true,
"sAjaxSource": $.sprintf('http://leela.sscnet.ucla.edu/voteview/searchdt?q=%s',q),
"aoColumns":[{"mData":"id", "sWidth": "20px", "sTitle":"ID"},
{"mData":"chamber", "sWidth": "10px", "sTitle":"Chamber"},
{"mData":"date", "sWidth": "85px", "sTitle":"Date"},
{"mData":"yea","sTitle":"Vote","sWidth":"80px"},
{"mData":"descriptionShort", "sWidth": "200px","sTitle":"Description"}],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td:eq(0)', nRow).html(
$.sprintf('%s',aData['id'],aData['id'])).attr("title","Click to explore this vote");
$('td:eq(3)', nRow).html(
$.sprintf('%s-%s',aData['yea'],aData['no']));
$('td:eq(4)', nRow).attr("title",aData['description'])
return nRow; }
});
}
searchvotes = function() {
$('#example').empty();
makeTable($('#qqtext').val());
};
</script>
</head>
<body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
<li>Home</li>
<li class="active">Search</li>
<li>Contact</li>
</ul>
<h3 class="text-muted">VoteView</h3>
</div>
<div class="jumbotron">
<div class="container">
<div>
<h3 align="center">Search for Roll Calls</h3>
<div class="col-sm-12">
<input type="search" class="form-control" placeholder="Search" id="qqtext" onchange="searchvotes()"></input>
</div>
</div>
<br>
<div>
<div class="table-responsive">
<table id="example" class="table table-striped"></table>
</div>
</div>
<div>
<div class="col-lg-14 col-md-14 portfolio-item" id="example">
</div>
</div>
</div>
</div>
<div align="center">
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-search"></span><br><font color="white">Search</font>
</button>
<button type="button" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-list"></span><br><font color="white">Results</font>
</button>
<button type="button" class="btn btn-warning btn-lg">
<span class="glyphicon glyphicon-eye-open"></span><br><font color="white">Visualize</font>
</button>
</div>
<br>
<hr>
<p></p>
<footer>
<p>Example</p>
</footer>
</div>
</body>
</html>
If one tries a search with this code, the code should show results, but not the way I expect.
Thanks
Probably not the solution but some hint to get there. Given this:
<ul>
<li class="collapsable"><h2>Release 3.0</h2>
<ul>
<li><h3>Allgemeine Übersicht</h3>
<p>Text ....
</li>
</ul>
</li>
....
</ul>
I do:
<script type="text/javascript">
jQuery(document).ready( function () {
jQuery('.collapsable').click(function () {
jQuery(this).children('ul').first().toggle("slow");
});
});
</script>
And
<style>
li.collapsable ul {
display: none;
}
</style>
A Click on the headline opens the <ul> and closes it again on next click (Actually, there is a lot of text in there and thus the list is very long)
Firstly add an Id to your buttons to make things a bit easier
<button id="btnSearch" type="button" class="btn btn-warning btn-lg" />
<button id="btnResult" type="button" class="btn btn-warning btn-lg" />
<button id="btnVisual" type="button" class="btn btn-warning btn-lg" />
then make sure that you have the three mark-up sections on the page wrapped inside it's own div with an Id on each div.
<div id="search">
...
</div>
<div id="result">
...
</div>
<div id="visual">
...
</div>
In your JavaScript, set-up page for the initial conditions and handle the clicks on the buttons as required. In your search and visualisation functions just show and hide the appropriate div(s) for the conditions your require using JQuery's show() and hide() functions.
It may go something like this - just tweaks this snippet as required, to suit your actual scenario.
function reset() {
$('#search').show();
$('#result').hide();
$('#visual').hide();
}
function init() {
var self = this;
// button clicks
$('#search').click(function () {
self.reset();
});
$('#results').click(function () {
self.search();
});
$('#visual').click(function () {
self.visualize();
});
}
function search() {
// Do search and set results table contents
$('#search').hide();
$('#result').show();
}
function visualize() {
// Do visualisation and set content
$('#result').hide();
$('#visual').show();
}
$(document).ready( function () {
this.reset();
this.init();
)};
You need to use toggle() It will hide element if its current status is visible and show if it is currently hidden:
$('.collapsable').click(function () {
$(this).children('ul').first().toggle();
});