I have this HTML:
<form>
Text :<br>
<input type="text" name="nameid" id="nameid" value="">
<br><br>
<input type="submit" value="Send">
</form>
<br />
<div id="cy"></div>
And this JS
$(document).ready(function () {
$("form").submit(function (event) {
$.ajax({
type: 'GET',
url: "/MyController/MyAction2",
data: { nameid: $('#nameid').val() },
success: function (newdata) {
var cy = cytoscape({
container: document.getElementById("cy"),
elements: JSON.parse(newdata)
});
}
});
});
});
And this style :
<style>
#cy {
width: 80%;
height: 80%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
When I make position absolute, I can see the graph but the buttons and textbox become unclickable, when I make position center or fixed, textbox and buttons become clickable but then I can't see the graph. How can I see both of them? Thanks.
Related
I have an input field and I want to be able to show the length of characters being typed in but I want it to be within the input box all the way to the end of the input box. I'm not even sure where to start to do this.
Not really sure where to start.
<label class="label is-capitalized">Description One </label>
<div class="field">
<div class="control is-expanded">
<input type="text" class="input size19" placeholder="description one" v-model="keyword">
</div>
<div>
var app = new Vue ({
el: '#app',
data: {
keyword: 'hello'
}
})
A counter within the input field pulled to the right edge
this can be handled in CSS in many ways
// Instantiating a new Vue instance which has preinitialized text
var app1 = new Vue({
el: '#app1',
data: {
keyword: 'hello'
}
});
.field {
margin: 1em;
}
.input {
padding-right: 30px;
}
.input-count {
margin: -30px;
opacity: 0.8;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- App 2 -->
<div id="app1">
<div class="field">
<div class="control is-expanded">
<input type="text" class="input size19" placeholder="description one" v-model="keyword" />
<span v-if="keyword.length" class="input-count">{{keyword.length}}</span>
</div>
<div>
You'll have to use CSS to achieve this. Because you cannot get something like this within the input box:
some text in input 18
There has to another div overlapping your input box. See this:
var counter = document.getElementById ('counter'),
input = document.getElementById ('inp');
counter.innerHTML = input.value.length;
input.addEventListener ('keyup', function (e) {
counter.innerHTML = input.value.length;
});
.inline-block {
display: inline-block;
}
.relative {
position: relative;
}
.absolute {
position: absolute;
}
#counter {
top: 0;
right: 0
}
<div class='container'>
<label class="label is-capitalized">Description One </label>
<div class="field">
<div class="control is-expanded relative inline-block">
<input type="text" class='input' id="inp" placeholder="description one" />
<div id='counter' class='absolute'>
</div>
</div>
<div>
</div>
You can add additional styling if needed.
Try this
<div id="app1">
<br>
<div class="holder">
<label>
{{keyword.length}}
</label>
<input type="text" class="input size19" placeholder="description one" v-model="keyword">
</div>
CSS
holder {
position: relative;
}
.holder label {
position: absolute;
left: 200px;
top: 26px;
width: 20px;
height: 20px;
}
.holder input {
padding: 2px 2px 2px 25px;
}
Check the below fiddle for the solution
https://jsfiddle.net/zr968xy2/4/
I have a table that have checkboxes inside. after select it how to return a sum of values from table in modal before confirm the form? and how to render the ajax response from controller?
in my view
$("#envia-vendas").ajaxForm({
url: '../vendas/confirmar',
type: 'post',
success: function (data) {
$('#myModal').modal('show');
console.log(data);
},
in my controller
//dostuf
if($this->request->is('ajax')){
$sum = $sum;
$this->render('ajax/confirmado', 'ajax');
echo 'bal';
$this->set('text', 'test');
$this->set('_serialize', ['text']);
}
how to print the result in the view without reloading page?
What this fiddle does is grabs all of your inputs, then pops up a modal after the values and names have been injected for confirmation.
It should give you a good starting point. What this is setup to do is give you the confirmation screen without the need for additional server calls.
Just set your action to the route that you want to pass the information to for server interactions.
HTML
<form id="test-form" method="post" action="your/action/here">
<input type="text" name="test" value="" />
<input type="submit" name="submit-form" value="submit" />
</form>
<div class="modal">
<div class="form-info-wrapper">
</div>
<a class="confirm">Confirm Information</a>
</div>
CSS
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: #FFF;
}
JS
jQuery(document).ready(function ($){
$('body').on('click', 'input[type=submit]', function (e) {
e.preventDefault();
var data = $(this).parent('form').serializeArray();
$('.form-info-wrapper').empty();
for(_data in data)
{
$('.form-info-wrapper').append(data[_data].name + ': ' + data[_data].value);
}
$('.modal').fadeIn();
});
$('.confirm').click(function (e){
e.preventDefault();
$('#test-form').submit();
});
});
https://jsfiddle.net/ojaeacps/2/
I am having problems with the fact that my javascript background is overtaking everything and not showing any html elements. I would like it so that my button and digits show up in front of the background.
Example :
Code
window.onload = function() {
var paper = new Raphael(200, 200, 600, 600);
var backGround = paper.rect(0, 0, 600, 600);
backGround.attr({
fill: "#ffb366"
});
}
<div class= "bot">
<input type="button" value="Start" onclick="start();"/>
<span id="timers">0</span>
</div>
Try to add
.bot {
position: relative;
z-index: 1;
top: 200px;
left: 200px;
}
Instead of putting your timer button inside bot class you can create a separate div and style it with the required margins. The html code looks like below:
<div class= "bot">
</div>
<div style="top:200px;left:200px;z-index:10;position:absolute;">
<input type="button" value="Start" onclick="start();"
style="z-index:10"/>
<span id="timers">0</span>
</div>
Here is the required CSS:-
.bot {
position: absolute;
top: 200px;
left: 200px;
z-index:1;
}
And try to write the javascript as below:-
window.onload = function() {
var element=document.getElementsByClassName('bot')[0];
var paper = new Raphael(element, 600, 600);
var backGround = paper.rect(0, 0, 600, 600);
backGround.attr({
fill: "#ffb366"
});
}
It looks like, z-index property does not work if the button is inside raphael class. Good luck.
I have a search form which which takes an input and pass the data to a django view.
the form has a search button which on click opens a input box like shown in images given below:
Now when i enter something into the input and press enter, it just collapses the input box and no action occurs. It happens every time. I want it to call the function associated with form. I figured out that the problem is in the javascript but don't know how to fix it.
html:
<form class="navbar-form" role="search" method="POST" action="{% url 'search' %}">
{% csrf_token %}
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search_box">
<span class="input-group-btn">
<button name="search" type="submit" class="search-btn"> <span class="glyphicon glyphicon-search"> <span class="sr-only">Search</span> </span> </button>
</span>
</div>
</form>
javascript:
e(function() {
function t() {
var t = e('.navbar-collapse form[role="search"].active');
t.find("input").val(""), t.removeClass("active")
}
e('header, .navbar-collapse form[role="search"] button[type="reset"]').on("click keyup", function(n) {
console.log(n.currentTarget), (27 == n.which && e('.navbar-collapse form[role="search"]').hasClass("active") || "reset" == e(n.currentTarget).attr("type")) && t()
}), e(document).on("click", '.navbar-collapse form[role="search"]:not(.active) button[type="submit"]', function(t) {
t.preventDefault();
var n = e(this).closest("form"),
i = n.find("input");
n.addClass("active"), i.focus()
}), e(document).on("click", '.navbar-collapse form[role="search"].active button[type="submit"]', function(n) {
n.preventDefault();
var i = e(this).closest("form"),
s = i.find("input");
e("#showSearchTerm").text(s.val()), t()
})
}
css:
.navbar-collapse form[role="search"] input {
font-size: 18pt;
opacity: 0;
display: none;
height: 48px;
position: relative;
z-index: 2;
float: left;
}
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
z-index: 100;
border-radius: 0;
border: none;
line-height: 45px;
height: 75px;
font-size: 14px;
padding: 0px 25px;
width: 315px;
}
.navbar-collapse {float:right; padding:0px}
its because you didn't submit form
Try this to submit form..
Without AJAX
$('form#myForm').submit();
with performing AJAX
$('input#submitButton').click( function() {
$.post( 'some-url', $('form#myForm').serialize(), function(data) {
... do something with response from server
},
'json' // I expect a JSON response
);
});
$('input#submitButton').click( function() {
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: $('form#myForm').serialize(),
success: function(data) {
... do something with the data...
}
});
});
Hope this helps..
Letting you know the step by step procedure.
Set a .keyup event on the search input. $("[name='search_box']").keyup(function(e){ .... });
Check if the keycode of the pressed key is equal to 13 (enter key) if(e.keyCode==13){ ... }
If it is 13 then call the function associated with the form.
I want to display a loading image after I submit a form. Here is my current code (I am using Bootstrap):
<form method="GET" action="/search/results" id="searchform">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Search" style="min-width: 300px;" required autofocus>
</div>
<button type="submit" class="btn btn-dark btn-md">Search</button>
</div>
<br>
<div class="form-group">
<h4 class="text-muted">Scoring Type</h4>
<label class="radio-inline">
<input type="radio" name="scoring" id="standard" value="standard" checked> Standard
</label>
<!-- other radio options -->
</div>
</form>
<br>
<div class="modal">
</div>
<style>
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url("{% static 'img/loading.gif' %}")
50% 50%
no-repeat;
}
body.loading {
overflow: hidden;
}
body.loading .modal {
display: block;
}
</style>
The form submits to a page called /search/results, but I want this page to be loaded with ajax. Once it is done loading, I want to fully replace the search webpage with the webpage that contains the results. While it is loading, I want $('body').addClass('loading'); to be applied, which will display the loading icon in the way I want (I do not want any changes in css, it works how I want it to). I have looked all over the place but I cannot seem to find a solution that works for me. Thanks.
To make sure the form wont submit as normal ones:
remove method="GET";
<form action="/search/results" id="searchform">
Js:
$("#searchform").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get some values from elements on the page: */
var $form = $( this );
var url = $form.attr( "action" );
//before send
$("body").addClass("loading");
/* Send the data using post */
var posting = $.post(url , $( "#searchform" ).serialize() );
/* Alerts the results */
posting.done(function( data ) {
//use data
$("body").removeClass("loading");
});
});
use the below procedure:
var data = $("#searchform").serialize();
$('#searchform').on('submit',function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: "/search/results",
data: data,
dataType: "json",
success: function(data) {
//on success remove the image
},
error: function(){
alert('error handing here');
}
});
})