how use jquery in response of ajax - ajax
i use jquery-ajax and have three file.
my file is :
jquery-1.8.3.min.js
index.html
res.html
jquery-1.8.3.min.js file is main of jquery file.
index.html code is :
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:'res.html',type:"POST",data:'',success:function(result){
$("#responsediv").html(result);
}
});
});
$(document).ready(function(){
$('#state_id').change(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<div id="responsediv">
</div>
</body>
</html>
and res.html code is :
<select id="state_id" name="state_id">
<option value="1">first</option>
<option value="2">second</option>
<option value="3">third</option>
<option value="4">forth</option>
</select>
i don't know why this code not runnig.
$(document).ready(function(){
$('#state_id').change(function(){
alert($(this).val());
});
});
this is sample and simple code . i check this on another project and face this problem.
thanks.
I think this should be here:
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:'res.html',type:"POST",data:'',success:function(result){
$("#responsediv").html(result);
}
});
$(document).on('change', '#country_id', function(){
alert($(this).val());
});
});
</script>
note:
you don't need two doc ready handlers.
try this and see if this helps.
There doesn't seem to be an element in your html that $('#country_id') would reference.
You are missing the select box for countries in your HTML. Try modifying as follows:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:'res.html',type:"POST",data:'',success:function(result){
$("#responsediv").html(result);
}
});
$('#country_id').change(function(){
alert($(this).val());
});
});
</script>
</head>
<body>
<select id="country_id">
<option value="0">Select Country...</option>
<option value="1">Country One</option>
<option value="2">Country Two</option>
</select>
<div id="responsediv">
</div>
</body>
</html>
Related
How to change datepicker format in laravel 8 using jqueryui?
I'm building an app with laravel 8 and using jqueryui, I'm having a problem with datepicker format as it's format "mm/dd/yyyy" and I want it to be "dd/mm/yyyy" just in the view not the database as it's inserted in database just right no problem.
I've tried to add data-date-format="dd/mm/yyyy" but it didn't work and also i've tried to add
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datepicker').datepicker({
format: 'dd/mm/yyyy'
});
});
</script>
but also didn't work!
Here is the input code I'm using
<input type="date" id="datepicker" class="form-control" name="first_visit_date" value="{{ $owner->first_visit_date }}" data-date-format="dd/mm/yyyy">
Am I doing something wrong?
Please try by changing the format to dateFormat.
Example code:
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy'
});
});
</script>
How to get the html of CKEditor
I am diving in the deep end of this magic world of HTML. I have the CKEditor woring and myFunction produces the alert. I need to get the HTML of the text in the editor.
I got this from another post:
CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});
I could not comment or reply to the post as I don't have enough points so I have to ask a duplicate.
I have the alert working and pasted the code in myFunction but I get the error in the console Uncaught TypeError: Cannot call method 'on' of undefined.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
alert(htmldata);
}
</script>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<button onclick="myFunction()">Click me</button>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.....
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
MrWarby
<!DOCTYPE html>
<html>
<head>
<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor
</textarea>
<script>
function myFunction()
{
alert('test');
CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});
}
CKEDITOR.replace( 'editor1' );
</script>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I've tried moving into different place but I still get the same error.
test page is at http://www.wilsea.com/ckeditor/testckeditor.html
MrWarby.
Before your SCRIPT in HEAD add two more lines: <script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="/ckeditor/ckeditor.js"></script> But change path to CkEditor script.
two jqgrid no data loaded
When I duplicate a working grid with a different id, data are not loaded in both grid.
Both grids are shown and they both query the same url. Json data is sent from php but data is not loaded into grid.
If i comment any of the grids, the other one loads data properly.
Any help greatly appreciated. I'm using jqgrid 4.4.1
Here is my code
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridInput () {
jQuery('#gridInput').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridInputPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridInput').jqGrid('navGrid','#gridInputPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript"> runOnLoad(LoadgridInput); </script>
<div id="gridInputWrapper">
<table id="gridInput"></table> <div id="gridInputPager"></div>
<div class="gridInputFooter"></div>
</div>
</div>
<div class="row-fluid">
<script type="text/javascript" language="javascript">
function LoadgridList () {
jQuery('#gridList').jqGrid({
height:100,
hoverrows:false,
viewrecords:true,
caption:" ",cellEdit: true,rowNum:10000,
scroll:1,
rowList:[30,100,500],
datatype:"json",
url:"grid.php?sec=Agility&fn=gcSandFInput_V1",
cellurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
editurl:"grid.php?sec=Agility&fn=gcSandFInput_V1",
sortname:"default",
autowidth:true,
shrinkToFit:true,
gridview:false,
pager:"#gridListPager",
postData:{oper:"grid"},
jsonReader:{repeatitems:false,root: "rows",page: "page",total: "total",records: "records",repeatitems: true,cell: "cell",id: "id",userdata: "userdata"},
colModel:[
{name:" ",index:"nope",align:"left",search:true,editable:false,width:60},{name:"04-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"11-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"12-2012",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"01-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"02-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"03-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"04-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"05-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"06-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"07-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"08-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"09-2013",index:"nope",align:"left",search:true,editable:false,width:60 },{name:"10-2013",index:"nope",align:"left",search:true,editable:false,width:60 }]})
jQuery('#gridList').jqGrid('navGrid','#gridListPager',{refresh:true,edit:false,add:false,del:false,search:true,view:false,"excel":true,"pdf":false,"csv":false,"columns":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"errorTextFormat":function(r){ return r.responseText;}},{"errorTextFormat":function(r){ return r.responseText;}}, {"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150,"closeAfterSearch":true,"multipleSearch":false},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150},{"drag":true,"resize":true,"closeOnEscape":true,"dataheight":150});
};
</script>
<script type="text/javascript" language="javascript">runOnLoad(LoadgridList);</script>
<div id="gridListWrapper">
<table id="gridList"></table> <div id="gridListPager"></div>
<div class="gridListFooter"></div>
</div>
</div>
Chosen plugin max_selected_options
I use Chosen jquery plugin and I noticed that max_selected_options is not working:
The code is this:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="chosen/chosen.css" />
</head>
<body>
<select id="assets" data-placeholder="Choose assets" class="chzn-select" multiple style="width:350px;" tabindex="4">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="chosen/chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".chzn-select").chosen();
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$('.chzn-select').chosen({ max_selected_options: 3 });
$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
$(".chzn-select").chosen().change( function () { alert("a"); } );
});
</script>
</body>
</html>
I don't understand what is incorrect to my code. This line:
$('.chzn-select').chosen({ max_selected_options: 3 });
should limit the maximum number of allowed selections. But it doesn't work. I still can select any number of items.
I noticed that also the event that should be fired on the case the maximum number of selected items is reached doesn't fire:
$(".chzn-select").bind("liszt:maxselected", function () { alert("a"); });
Do I have any error in code?
And one more question: how can I add search functionality to my list, like the search box that appears on the first example on the plugins page?
Thanks.
You call twice the chosen() method, which is why you get problems:
$(".chzn-select").chosen();
$('.chzn-select').chosen({ max_selected_options: 3 });
Remove the first one and it works. Your JS code should be:
$(document).ready(function(){
$(".chzn-select-deselect").chosen({allow_single_deselect:true});
$(".chzn-select").chosen({ max_selected_options: 3 });
$(".chzn-select").bind("chosen:maxselected", function () { alert("max elements selected"); });
$(".chzn-select").chosen().change( function () { alert("change"); } );
});
I can't prevent key presses from changing a selected option in Firefox
Using Firefox 3.5.7
The following test page should behave like Opera, Safari and Chrome.
Key presses (arrows or 1-5) should have no effect (i.e. The events should be cancelled so that the number never changes from the initial default "3").
[I have separate working code for IE too].
Many thanks to anyone who can make it work?
<html>
<head>
<title>Test</title>
<script type='text/JavaScript'>
function stop(evt)
{evt.preventDefault();
evt.stopPropagation();
};
</script>
</head>
<body>
<select onkeydown='stop(event);' onkeypress='stop(event);'>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</body>
</html>
This works for me (looks pretty evil, I haven't found any other solution on FF so far):
<html>
<head>
<title>Test</title>
<script type='text/JavaScript'>
function stop(evt) {
evt.preventDefault();
var elem = document.getElementById('mysel');
elem.blur();
setTimeout('refocus()', 0);
};
function refocus() {
document.getElementById('mysel').focus();
}
</script>
</head>
<body>
<select id="mysel" onkeydown="stop(event);">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
</body>
#icktofay: This is a simplified test page demonstrating the problem. What I am actually doing in the main code is replacing the select-box's intrinsic keystroke handling with explicit actions. #boxofrats: Yes, that is evil... but effective. Thanks.