i created a form element like that:
<form id="TextForm1" name="TextForm1">
<input type="text" id="Text1" name="Text1" value="" placeholder="" />
</form>
But it isn´t working in my .html site. I can´t type in something.. But if i embed it with an iframe it works perfectly.. I am using a scrolling script "iscroll" in my content area. But i can´t figure out why it isn´t working with it.
Does anyone have an idea? Thanks
You are using jQuery so you can use click event like:
Check Out The Working Demo
$(yourElement).click(function()
{
// your code
});
I changed two functions of your code to this and removed the onclick event from the inputs:
JavaScript:
$('#buttonCm').click(function(){
var cmEingabe = document.getElementById("cm");
var cm = cmEingabe.value;
var cmNeu = cm - 3;
$('#Liste').append('<br/>' + '<br/>' + '-' + ' '+ 'Bauteil passend zu ' + cmNeu +'cm' + ' ' +'Breite');
$('#Form1').fadeOut(700);
$('#Form2').delay(700).fadeIn(700);
});
$('#buttonCm2').click(function(){
var cmEingabe2 = document.getElementById("cm2");
var cm2 = cmEingabe2.value;
$('#Liste').append('<br/>' + '<br/>' + '-' + ' '+ 'Bauteil passend zu ' + cm2 +'cm' + ' ' +'Höhe');
$('#Form3').fadeOut(700);
$('#Liste').delay(700).fadeIn(700);
});
HTML:
<input type="button" id="buttonCm" name="buttonCm" value="auswählen" />
<input type="button" id="buttonCm2" name="buttonCm2" value="auswählen" />
I hope this might help you. But I could not find the script in your code to check how you had bind the iScroll plugin. Because iScroll it self prevent some events. But most probably if any form fields not responding after you bind iScroll means this is the solution which I used to overcome.
input fields not responding after added 'iscroll'-PhoneGap
Related
I have blocks of HTML like this that repeat tons of time in my code:
<div>
<label for="producer">Producer:</label>
<select id="producer" ng-model="producer" ng-options="producer.name for producer in producers">
<option value="">-- Choose Producer --</option>
</select>
</div>
So I want to make a directive (??) where I could instead do this:
<gsBoundSelect gsLabel="Producer:" gsDefaultOption="-- Choose Producer --"
ng-model="producer"
ng-options="producer.name for producer in producers" />
The for/id fields could just be a random generated string.
I've been reading up on directives but I can't quite figure out exactly how to do this so that I can pass in parameters like this. The examples I've seen all want a bound scope variable passed in vs an attribute.
It seems like I need both a link function and a template, but I'm confused how to do that. Thanks.
Found enough data through various books to get something working. Not sure if it's the best way, but it definitely works:
module.directive('gsBoundSelect', function ($compile) {
function generateUUID() {
...
}
return {
restrict: 'E',
link: function (scope, element, attrs) {
var lblId = generateUUID();
var content = [
'<div>',
' <label for="' + lblId + '">' + attrs.gsLabel + '</label>',
' <select id="' + lblId + '" ng-model="' + attrs.ngModel + '" ng-options="' + attrs.ngOptions + '">',
' <option value="">-- ' + attrs.gsDefaultOption + ' --</option>',
' </select>',
'</div>'].join('');
// We need to transform the content into a jqLite object
var jqLiteElem = angular.element(content);
$compile(jqLiteElem)(scope);
element.replaceWith(jqLiteElem);
}
};
});
As a side-note...I discovered the element directives added must be closed with a full tag, not the shorter syntax like I showed in my example. So the above works with this HTML:
<gsBoundSelect gsLabel="Producer:" gsDefaultOption="-- Choose Producer --"
ng-model="producer"
ng-options="producer.name for producer in producers">
</gsBoundSelect>
Hope this is not a duplicate because i didn't find question like this.
I'm using jQRangeSlider for date range. The slider works showing min and max date and changing as i move it. I want to pull the date and save it into MySQL database. I need the dates like this:
<input type="text" name="min" />
<input type="text" name="max" />
So far i didn't have any luck in making it work.
I have this:
<script>
$("#slider").dateRangeSlider();
</script>
and this:
// Date slider
var dateValues = $("#dateSlider").dateRangeSlider("values");
console.log(dateValues.min.toString() + " " + dateValues.max.toString());
any help is appreciated
You'll need an event handler that triggers when the slider changes
$("#slider").on("valuesChanging", function(e, data){
console.log("from: " + data.values.min + ", to: " + data.values.max);
});
FIDDLE
am working with codeigniter and trying to submit a form and then closing it with javascript…
i have a popup function…that i call from the parent page:
Click
and here is the function:
function reject_popup(url, name, width, height){
var top = parseInt((screen.availHeight / 2) - (height / 2));
var left = parseInt((screen.availWidth / 2) - (width / 2));
var features = "location=1, status=1, scrollbars=1, width=" + width + ", height=" + height + ", top=" + top + ", left=" + left;
window.open(url, name, features);}
and it opens this form:
<?php echo form_open('state/validate_rejection/'.$file_results->sender_id.'/'.$this->session->userdata('id').'/'.$file_results->id, array('name'=>'rejection_form', 'id'=>'rejection_form', 'onsubmit'=>'window.forms[0].submit();self.close();')); ?>
<p>
<label>Write the reason of Rejection?<span class='req'>* Required</label>
<textarea name="remarks" rows="8" max-width:380px " autofocus required></textarea>
</p>
<input type="button" class="button" value="cancel" />
<input name="submit_rejection" id="submit_rejection" type="submit" class="button" value="Send" />
as you can see the form action is a url that goes to a controller/method :
here is the method i use:
function validate_rejection(){
$this->form_validation->set_rules('remarks', 'Remarks', 'trim|required');
if($this->form_validation->run() == TRUE){
$sender_id = $this->uri->segment(3) ? $this->uri->segment(3) : 0;
$user_id = $this->uri->segment(4) ? $this->uri->segment(4) : 0;
$file_id = $this->uri->segment(5) ? $this->uri->segment(5) : 0;
//here a function from codigniter model is called, and returns true if query succeded, false if it failed
$rejection = $this->files_model->reject_file($sender_id, $user_id, $file_id);
if($rejection == TRUE){
$this->session->set_flashdata('rejection_succ', 'Rejected Successfully');
//redirect('home');
}
else{
$this->session->set_flashdata('rejection_fail', 'Rejection of file Failed');
}
}
else{
$this->session->set_flashdata('remarks_validation_errors', validation_errors());
}
}
nd if the form is submitted successfully or failed it will set a flashdata
NOW I WANT THAT WHEN THE FORM IS SUBMITTED TO CHECK IF FORM IS FINISHED, RELOAD THE PARENT PAGE AND CLOSE THE POPUP….
Can anyone please help me achieve that…it is also a javascript case, but as long as i am working with codeigniter i thought that this will be the best place to post this thread?
note: sorry for bad formatting...im a new user and i didnt see code blocks :S
If I were you I would use jQuery Dialog - http://jqueryui.com/dialog/#modal-form .Why reinventing warm water if it already exist. The only thing you will have to add is to refresh the page.
After submitting form successfully & setting flashdata add following line to your controller/method that
echo "<script type='text/javascript'>window.close();window.opener.top.location.reload();</script>";
<span class="edt">ddddd</span>
<span class="edt">ssss</span>
<span class="edt">aaaaa</span>
<a id="edit">edit</a>
$('#edit').click(function(){
$('.edt').html("<input type=\"text\" id=\"\" value=\"\" /> ")
});
what i want to do is get the html part of span tag in input created by jquery. i knw the better solution will be to pass the html by id in variable but the span tags are dynamically created on page load.
This would loop through each edt class and replace the content of the span with and input element with same value as the content it is replacing.
$('#edit').click(function(){
$('.edt').each(function() {
var value = $(this).text();
$(this).html('<input type="text" id="" value="'+value+'" />');
});
});
If the #edit element is created dynamically you should delegate the event.
$(document).on('click', '#edit', function(){
$('span').html(function(index, oldHTML){
return '<input type="text" id="id'+ index +'" value="'+ oldHTML +'" />';
})
});
http://jsfiddle.net/yHbsa/
It seems you want to edit the element's content, some suggestions:
Focus on the input (programatically) and on blur event replace the inputs with their values.
If handler should be executed once, use one method instead of on.
If you are using HTML5 doctype you can also use contenteditable attribute instead of replacing elements.
Is this what you are trying to achieve? DEMO
Click on some input elements generated to see binded event.
$('#content').on("click", "#edit", function () {
$.each($('.edt'), function (i, k) {
$(k).removeClass("edt");
k.innerHTML = "<input type='text' id='' value='" + k.innerHTML + "' />";
});
});
$('#content').on("click", "input", function () {
alert("Some event.");
});
I noticed that in Firefox I can add a #MyAnchor tag to the action attribute like...
<form action="#MyAnchor">
<input type="text" name="a" />
<input type="text" name="b" />
<input type="submit" />
</form>
and when the form is submitted, the anchor automatically shows up in the URL like
mypage.aspx?a=1&b=2#MyAnchor
However, this doesn't work on IE. Is there anyway I can find a happy medium for both browsers?
Just a guess, but have you tried using the page + the anchor name.
<form action="mypage.aspx#MyAnchor">
I've used this to retain the fragment across postbacks:
var f = document.forms[0];
var index = f.action.indexOf("#");
if(index>0)
f.action = f.action.substr(0,index) + "#" + tabId;
else
f.action += "#" + tabId;
You can deal with this either on the client side or on the server side:
On the server side: add a hidden element with the anchor as the value and do a redirect on an URL build on the server.
On the client side: jQuery for instance allows you to serialize a form's parameters into a URL; you would just need to append the anchor and assign this to window.location.