When I press "btnNew" the click event fires but the page does not navigate to newLanguagePage, instead it goes back to my initial page (index.html).
Could anyone, please, tell me what my dumb head is doing wrong?
Here's my HTML
<!DOCTYPE html>
<html>
<body>
<div id="languagesAdmin" class="mobilePage" data-role="page">
<div data-role="header">
Back
<h1>NOTHNG</h1>
Help
</div>
<div class="banner">
<div class="logo"></div><div id="languagesTopImage" class="topBannerImage"></div>
</div>
<div class="ui-corner-all custom-corners">
<h2 class="ui-bar ui-bar-e adminHeader">Languages Menu</h2>
<div class="ui-body ui-body-e">
<div data-role="fieldcontain" class="filterDisabledCheckbox">
<label for="HideDisabledLanguages">Hide disabled Languages</label>
<input type=checkbox id="HideDisabledLanguages" name="HideDisabledLanguages" value="true" checked/>
</div>
<ul data-role="listview" id="lwLanguages" class="listViewMenu"></ul>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a id="btnNew" href="#" rel="external" data-role="button" data-icon="plus">New</a></li>
<li>Delete</li>
<li>Search</li>
<li>Refresh</li>
</ul>
</div>
</div>
</div>
<div id="newLanguagePage" class="mobilePage" data-role="page">
<div data-role="header">
Back
<h1>Inter Pay Less</h1>
Help
</div>
<div class="banner">
<div class="logo"></div><div class="topBannerImage"></div>
</div>
<div class="ui-corner-all custom-corners">
<h2 class="ui-bar ui-bar-e adminHeader">Languages Menu</h2>
<div class="ui-body ui-body-e">
New Language
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Delete</li>
<li>Search</li>
<li>Refresh</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Here's the JavaScript
var strBaseWSURL = "http://www.WHATEVER.com/";
var objLanguages = new Array();
var lngLanguagesCursor = -1;
//Language Object
function _Language(data) {
this.Id = data.Id;
this.Code = data.Code;
this.Name = data.Name;
}
//LanguageAdmin_pageinit
$(document).on('pageinit', '#languagesAdmin', function () {
try {
execJQueryAjaxAndGetJSON([], strBaseWSURL + "IPLObjectsWS.asmx/GetAllLanguages", loadLanguages);
}
catch (e) {//Report the error
alert("Error fetching the languages.")
return false;
}
//New_Click
$(document).on("click", "#btnNew", function () {
$.mobile.navigate("#newLanguagePage", { transition: "slide" });
});
//Languages_onclick
$(document).on("click", "#lwLanguages li a", function () {
lngLanguagesCursor = $(this).closest("li").index();
});
});
//LanguageDetails_pageinit
$(document).on('pageinit', '#languageDetails', function () {
var objCurrentObject = objLanguages[lngLanguagesCursor];
$("#languageid").val(objCurrentObject.Id);
$("#languagecode").val(objCurrentObject.Code);
$("#languagename").val(objCurrentObject.Name);
//Save_onclick
$(document).on("click", "#btnSaveCountry", function () {
var objCurrentObject = objLanguages[lngLanguagesCursor];
var objUpdatedLanguage = new _Language();
objUpdatedLanguage.id = objCurrentObject.id;
objUpdatedLanguage.Code = $("#languagecode").val();
objUpdatedLanguage.Name = $("#languagename").val();
execJQueryAjaxAndGetJSON(objUpdatedLanguage, strBaseWSURL + "IPLObjectsWS.asmx/SaveLanguage", savedLanguage);
});
});
//__________________________________________________________________________Application Functions
//__________________________________________________________Calback functions
//Goes thru the languages and adds them to the lisview
function loadLanguages(result) {
$.each(result.d, function () {
$("#lwLanguages").append($('<li>' + this.Name + '</li>'));
objLanguages[objLanguages.length] = new _Language(this);
});
$("#lwLanguages").listview("refresh");
}
function savedLanguage(result) {
alert("The object was saved successfully!");
}
//__________________________________________________________Main functions
//Executes a Webservice Method and send the returned JSON to a callback function
function execJQueryAjaxAndGetJSON(params, strURL, callBackFunc) {
//GetCountries
$.ajax({
type: "POST",
url: strURL,
data: params,
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
success: callBackFunc,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + ": " + XMLHttpRequest.responseText + "\n" + errorThrown);
}
});
}
Related
How can I use an boolean when my dataType is html? When my controller detects that there's no data on my sql, it should throw as false in my controller which is working, I just need to throw the boolean on my ajax as false. Im aware that using an html is automatically as true which is if I use an operator. It return as true. But how can I make it as false too?
Here's my controller:
if (Reader.HasRows == true)
{
return View("TrueViewPort");
} else
{
return View("FalseViewPort");
}
Ajax:
$.ajax({
url: "UrlToController",
type: "GET",
data: {
uname: uname
},
dataType: "html",
success: (function (result) {
if (result == true) { //even if its false, it always throw here
$('#wishlist-carousel').html(result); //if data detected carousel should be called
//Something elements when the data is true
} else {
//Something elements when the data is false
$(".no-page").html(result); //if no data. no carousel should detect
}
}),
error: (function (xhr, status) {
alert(status);
})
})
EDIT:
These should appear on my TrueViewPort:
#if (Model != null && Model.Rows.Count != 0)
{
#for (int i = 0, x = 1; i < Model.Rows.Count; i++, x++)
{
<div class="item">
<div class="text-center">
<div class="card">
<div class="card-img-top">
<img src="~/images/link/#Model.Rows[i][0]" />
</div>
<br />
<br />
<div class="card-body">
#Model.Rows[i][1]
<br />
#Model.Rows[i][2]
</div>
</div>
</div>
</div>
}
}
else //When the server detected that there's no data, it should throw the else statement which is working
{
<div class="container">
<div class="text-center">
<div class="not-found-404">
404
</div>
<br />
</div>
<div class="not-found">
ITEMS NOT FOUND
</div>
<br />
<div class="not-found-title">
Don't you have any want on the shop?
</div>
<br />
<div class="not-found-content">
Looks like you still haven't putting anything on your wishlist do you?
</div>
</div>
</div>
}
And here's what appear on my screen when launching it.
Using both if else operators to ==
Using if as == true and else
My .cshtml:
<div class="container">
<div class="text-center">
<div class="true">
<div class="card">
<div class="card-body">
<div class="owl-carousel owl-theme" id="wishlist-carousel"></div>
</div>
</div>
</div>
<div class="no-page"></div>
</div>
</div>
You could use your TrueViewPort as if else statement as you can see you given your TrueViewpor with 2 different <div>
Lets assume that you have any events on your javascript
$(document).ready(function() {
$.ajax({
success: function(result) {
$(".no-page").html(result); //if no data. no carousel should detect
$('#wishlist-carousel').html(result);
//Put here your owl function
}
})
})
Then change your .cshtml to:
<div class="container">
<div class="text-center">
<div class="true">
<div class="card">
<div class="card-body">
<div class="owl-carousel owl-theme" id="wishlist-carousel"></div>
</div>
</div>
</div>
</div>
</div>
<div class="no-page"></div> //separate these one, so if there's no data, the result will go here.
Then on your TrueViewPort:
#if (Model != null && Model.Rows.Count != 0)
{
#for (int i = 0, x = 1; i < Model.Rows.Count; i++, x++)
{
//add a <style> here to hide the no-page.
}
}
else
{
//add a <style> here to hide the owl carousel
}
You could just return one view and make the judement with the count of the target data in your target div
<script src="~/lib/jquery/dist/jquery.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: "https://localhost:44332/Home/Partial",
success: function (result) {
var a = $("#test").children().length;
console.log(a);
if (a == 0) {
$(".no-page").html(result);
}
else {
$("#wishlist-carousel").html(result);
}
},
error: function (msg) {
console.log(msg);
}
})
return false;
});
</script>
<div class="container">
<div class="text-center">
<div class="true">
<div class="card">
<div class="card-body">
<div class="owl-carousel owl-theme" id="wishlist-carousel">
</div>
</div>
</div>
</div>
<div class="no-page"></div>
</div>
</div>
<div id="test">
<a>test</a>
</div>
Result1：
There's a "test" text in <div id="test"></div>
Delete the text:
How i can destroy ckeditor instance?
i have a problem ckeditor instance double. i will to destroy it.
i will check code console.log(editorID) same in the images. I see the
textarea if i add chapter1 i have 2 instance is textarea0 and
textarea1. If i add chapter2 i have 3 instance is textarea0, textarea1
and textarea2. I think this code is not destroy instance. Can you help
me for this issue? Thank you.
I'm apologize. I'm not good at English.
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if (instance) { instance.destroy(true); }
console.log(editorID);
CKEDITOR.replace(editorID);
});
}
}
If i cut out ckeditor this code is work and attribute id textarea is
true. See the code example.
$(document).ready(function() {
//CKEDITOR.replaceAll('editors');
$("#chapter").on("click",function(){
var i = $('.nav-tabs li').length;
$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
//loadEditors();
});
/* var $editors = $("textarea.editors");
if ($editors.length) {
$editors.each(function() {
var instance = CKEDITOR.instances[$(this).attr("id")];
if (instance) { $(this).val(instance.getData()); }
});
}*/
/* function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if (instance) { instance.destroy(true); }
console.log(editorID);
CKEDITOR.replace(editorID);
});
}
}*/
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/standard-all/ckeditor.js"></script>
<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Chapter 0</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chapter0">
<h3>Chapter 0</h3>
<div class="form-group">
<label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
<div class="col-sm-10">
<textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
</div>
</div>
</div>
</div>
try this
setTimeout(function () { CKEDITOR.replace('editorID'); }, 150);
I'm complete.
I add my code
$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
and change function
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if(instance) {
delete instance;
}else{
console.log(editorID);
CKEDITOR.replace(editorID);
}
});
}
}
$(document).ready(function() {
CKEDITOR.replaceAll('editors');
$("#chapter").on("click",function(){
var i = $('.nav-tabs li').length;
$('.nav-tabs li:last-child').clone().removeClass('active').appendTo(".nav-tabs").find('a').attr('href','#chapter'+i).attr('aria-controls','chapter-'+i).text("Chapter "+i);
$('.tab-pane:last-child').clone().removeClass('active').appendTo(".tab-content").attr('id','chapter'+i);
$('.tab-pane:last-child').find('textarea').first().attr('id','textarea'+i).val('textarea'+i);
$('.tab-pane:last-child').find('textarea').parent().find('div').remove();
loadEditors();
});
function loadEditors() {
var $editors = $("textarea.editors");
console.log($editors.length);
if ($editors.length) {
$editors.each(function() {
var editorID = $(this).attr("id");
var instance = CKEDITOR.instances[editorID];
if(instance) {
delete instance;
}else{
console.log(editorID);
CKEDITOR.replace(editorID);
}
});
}
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.ckeditor.com/4.5.4/basic/ckeditor.js"></script>
<div class="pull-right"><button type="button" class="btn btn-default" id="chapter"><i class="fa fa-plus"></i> Add Chapter</button></div>
<div class="clearfix"></div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Chapter 0</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="chapter0">
<h3>Chapter 0</h3>
<div class="form-group">
<label for="writter_detail_description" class="col-sm-2 control-label">detail </label>
<div class="col-sm-10">
<textarea class="form-control editors" name="writter_detail_description[]" id="textarea0" rows="10">textarea0</textarea>
</div>
</div>
</div>
</div>
I'm using navbar for tabs with jquerymobile .
as you will notice my tabs are generated through jsonp.
I'm facing a problem when trying to load a div inside a tab . internal href doesn't seem to work .
what I want to do is , for example the with list loads when I change to tab x.
<script>
function order() {
var output = [];
$.ajax({
url: "http://192.168.22.102/me1.php",
dataType: "jsonp",
jsonp: "mycallback",
success: function (data) {
jsonArray = data;
jsonArray = data;
var ch = "";
for (i = 0; i < jsonArray.length; i++) {
ch = ch + '<li>' + jsonArray[i].nom + '</li>'
}
ch = '<div data-role="navbar"><ul>' + ch + '</a></ul></div>';
var s = $(ch).appendTo('.ui-content')
alert(ch);
$('#lm').append('<div data-role="navbar"></div>').trigger('create');
}
});
}
</script>
<body onload="order('');">
<div data-role="page" id="home">
<div data-role="content" id="lm">
<div id="1">
<ul data-role="listview" data-inset="true">
<li>stuff</li>
<li>stuff</li>
<li>so</li>
<li>stuff</li>
<li>stuff</li>
</ul>
</div>
</div>
</div>
<div data-role="footer" data-postion="fixed">
<h1>Footer Text</h1>
</div>
</div>
update
I've solved the issue by adding a personal click handler
$(document).delegate('[data-role="navbar"] a', 'click', function () {
$(this).addClass('ui-btn-active');
$('.content_div').hide();
$('#' + $(this).attr('data-href')).show();
return false;});
i make JQM application which have listwiew and i want to send the choosen item text to another page to use this text to get data from server by ajax
the first page
`<div data-role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ADD Class</li>
<li>MSG</li>`<div data- role="page" id="hteacher" >
<div data-role="header" data-position="fixed">
<h1>Welcome teacher 1</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>ADD Class</li>
<li>MSG</li>
</ul>
</div>
</div>
<div data-role="content">
<p></p>
<h2>list of classes </h2>
<ul data-role="listview" id="classes_list" data-autodividers="true" data-inset="true" data-filter="true">
<script>
$( document ).delegate("#hteacher", "pagecreate", function() {
$.post("teacher_login.php", { teacher_user:teacher_user , get_classes:"1"} , function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
var str =this['class_un'];
var html = ' <li>'+ str + '</li>';
$("#classes_list").append (html).listview("refresh");
});
});
$('#classes_list').on('click','li', function () {
teacher_choose_class = $(this).text();
$.mobile.changePage("#teacher_classes");
});
});
</script>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
</div>
the second page that want to send the selected item text to it
<div data-role="page" id="teacher_classes" >
<div data-role="header" data-position="fixed">
<h1>Welcome to class A</h1>
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Take Attendance</li>
</ul>
</div>
</div>
<div data-role="content">
<p></p>
<h2>class student </h2>
<ul data-role="listview" id="student_list_class" data-autodividers="true" data-inset="true" data-filter="true">
<script>
$("#teacher_classes").live("pageshow",function(event){
alert(teacher_choose_class);
$.post("teacher_login.php", { class_un:teacher_choose_class , get_students:"1"} , function(data ,status){
var obj = jQuery.parseJSON( data );
$.each(obj,function(){
var str =this['child_name'];
var html = ' <li><img src="student1.jpg">'+ str + '</li>';
$("#student_list_class").append (html).listview("refresh");
});
});
});
</script>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>Welcome To .....</h1>
</div>
i make teacher_choose_class as global variable the problem is that the value of this variable show in the alert message but when use this variable to get data by ajax no data return
In the ajax part of your code, put an alert(data); on the return to see what you are getting back. Assuming you are getting back an array of JSON objects each with a property called child_name, try:
$("#teacher_classes").live("pageshow",function(event){
alert(teacher_choose_class);
$.post("teacher_login.php", { class_un:teacher_choose_class , get_students:"1"} , function(data ,status){
alert(data);
var obj = $.parseJSON(data);
var html = '';
$.each(obj,function(i, item){
var str =item.child_name;
html += '<li><img src="student1.jpg">'+ str + '</li>';
});
$("#student_list_class").append(html).listview("refresh");
});
});
Say I have the following HTML layout:
<div class="main">
<div class="comment">
<div class="info">
<div class="data">
<img src="image.png" class="image-click" />
</div>
</div>
</div>
<div class="open-me"></div>
<div class="comment">
<div class="info">
<div class="data">
<img src="image.png" class="image-click" />
</div>
</div>
</div>
<div class="open-me"></div>
<div class="comment">
<div class="info">
<div class="data">
<img src="image.png" class="image-click" />
</div>
</div>
</div>
<div class="open-me"></div>
</div>
... etc ...
How would I make it so that if you click the image in one of the comment classes, it shows HTML in the next open-me class?
Here's what I have so far:
$(document).ready(function() {
$(document).on("click", ".image-click", function() {
$.ajax({
url: 'show_html.php',
type: "POST",
success: function() {
$(this).find(".open-me").html(); /* this is where I'm stuck */
}
});
});
});
this inside your AJAX success method isn't referring to the clicked element anymore. For that, we can set a context variable of this:
$(document).on("click", ".image-click", function() {
var self = $(this);
$.ajax({
url: 'show_html.php',
type: "POST",
success: function(data) {
self.parents(".comment").next(".open-me").html(data);
}
});
});
You can use this to access the sibling open-me. Also, you should save a reference to $(this) outside of the .ajax().
// outside the ajax function
var that = $(this);
// inside the ajax function
that.parent(".comment").next("open-me").html();
jQuery's documentation about next() is relevant.