I found this link which works with jquery but not with jquery-mobile multiselect
Link to other post
Any ideas where i might be going wrong. As soon as i add multiple="multiple" i get no results showing. Also if i have it missing i dont get the jquery mobile theme but i do get my list populated
html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>
</title>
<link rel="stylesheet" href="css/logout-button.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/my.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/jquery.cookies.2.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index4">
<div data-theme="a" data-role="header">
<a data-role="button" data-direction="reverse" data-rel="back" data-transition="slide"
data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">
Back
</a>
<h3>
Event Details
</h3>
</div>
<div data-role="content">
<form id="eventForm" name="eventForm">
<div data-role="fieldcontain">
<script type="text/javascript">
$(document).on("pagebeforeshow", "#index4", function() {
$(function(){
var items="";
$.getJSON("event-details.php",function(data){
$.each(data,function(index,item)
{
items+="<option value='"+item.email+"'>"+item.username+"</option>";
});
$("#a1_title").html(items);
$("#a1_title").trigger("change");
});
});
});
</script>
<select id="a1_title" multiple="multiple">
</select>
</div>
<div data-role="fieldcontain">
<label for="manual">Add Emails</label>
<textarea cols="40" rows="8" name="emails" id="emails"></textarea>
</div>
<input type="submit" value="Submit" id="submitEventButton">
</form>
</div>
</div>
</body>
</html>
my php
require_once("../backend/functions.php");
dbconn();
$id = $CURUSER["id"];
$res = "SELECT email,username FROM users left join cal_contacts on cal_contacts.contactid = users.id WHERE cal_contacts.userid = $id";
$res1 = mysql_query($res);
$data = array();
while($row = mysql_fetch_array($res1))
{
$data[] = $row;
}
echo json_encode($data);
jQuery Mobile is a little bit different the a classic multiple select box.
You didn't do anything wrong, you were lacking one additional attribute. Without it jQuery Mobile multiple select can't be created successfully.
Additional needed attribute is this one:
data-native-menu="false"
Working example: http://jsfiddle.net/Gajotres/dEXac/
$(document).on('pagebeforeshow', '#index', function(){
// Add a new select element
$('<select>').attr({'name':'select-choice-1','id':'select-choice-1','multiple':'multiple', 'data-native-menu':'false'}).appendTo('[data-role="content"]');
$('<option>').html('Select option!').appendTo('#select-choice-1');
$('<option>').attr({'value':'1'}).html('Value 1').appendTo('#select-choice-1');
$('<option>').attr({'value':'2'}).html('Value 2').appendTo('#select-choice-1');
// Enhance new select element
$('select').selectmenu();
});
One more thing, you don't need to use:
$("#a1_title").trigger("change");
It is a overkill in your case, you only need to enhance one dynamic select, do it like this:
$('select').selectmenu();
To find out more take a look at my other article: jQuery Mobile: Markup Enhancement of dynamically added content
Related
I am attempting to require '_header.php'; and require '_footer.php'; so I can create a dynamic body for my site.
However none of the CSS will work in the body or in the footer. CSS will only work for the header.
Why is this happening and how could it be solved?
require '_header.php';
$form_to_echo = '<div class="form_wrap"><form id="registration" action="new_user.php" method="post">
<div class="i_group"><span class="s_name">Класа:</span>
<input type="radio" id="_rad_rnk_class_h" name="rank_class" value="H"'.$_frm_selected_rank_class_h.'><label for="_rad_rnk_class_h">Хоби</label>
<input type="radio" id="_rad_rnk_class_t" name="rank_class" value="T"'.$_frm_selected_rank_class_t.'><label for="_rad_rnk_class_t">Трофеј</label>
</div>
<input type="text" id="cell_phone" name="cell_number" placeholder="Мобилен телефон" value="'.$_POST['cell_number'].'">
</div>
<div class="i_group"><span class="s_name">Крвна група:</span><br><br>
<input type="radio" id="_rad_bld_typ_a" name="blood_type" value="A"'.$_frm_selected_bld_typ_a.'><label for="_rad_bld_typ_a">A</label>
<input type="radio" id="_rad_bld_typ_b" name="blood_type" value="B"'.$_frm_selected_bld_typ_b.'><label for="_rad_bld_typ_b">B</label>
<input type="radio" id="_rad_bld_typ_ab" name="blood_type" value="AB"'.$_frm_selected_bld_typ_ab.'><label for="_rad_bld_typ_ab">AB</label>
<input type="radio" id="_rad_bld_typ_o" name="blood_type" value="O"'.$_frm_selected_bld_typ_o.'><label for="_rad_bld_typ_o">O</label>
</div>
<div class="i_group">
<input type="submit" name="submit" class="submit" value="Pегистрирај">
</div></form></div>';
if ($error_count_up != 0) {
echo $form_to_echo;
}
require '_footer.php';
When I copy and paste the code in HTML it works just fine...
<!DOCTYPE html>
<html>
<head lang="mk">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<title>;</title>
<style type="text/css">
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--<script src="script.js"></script> -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
$( "#datepicker" ).datepicker( "option", "dateFormat", "dd-mm-yy" );
} );
</script>
</head>
<body>
<div id="showcase">
<div id="sw_img1"></div>
<div class="img_fade"></div>
<div class="main_wrapper">
<div id="logo"></div>
<ul id="top_nav">
<li>Правилник</li>
<li>Контакт</li>
</ul>
</div>
</div>
<div class="test1">test</div>
</body>
</html>
Try using include...
PHP: include
you use:
<link rel="stylesheet" type="text/css" href="style.css">
so, style.css should be in the same folder where the URL is executed (not where the .php file is placed)
for example, if you visit 'example.com/dir1/dir2/mypage.htmlthenstyle.cssshould be indir2`
i advice to use the root urls for styles,scripts, images, like this:
.......................... href='/style.css' .........
and put style.css in root example.com/ folder.
I have a problem. I have made a HTML and PHP page with jQuery, jQuery-ui, jQuery mobile, then kineticjs. When switching to another page, do not refresh the whole page. I also tried using <meta http-equiv="refresh" content="URL=aa.php"> but did not work.
In that page I am also using php to get result from that PHP. Here is the code from my php page :
<?php
if ( isset($_POST['address']) && isset($_POST['prefix']) && isset($_POST['levels']) ) {
require_once 'convert.php';
$network = new Network($ip, $prefix, $levels);
print_html($network);
exit();
}
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="URL=aa.php">
<title>aa</title>
<link rel="stylesheet" href="css/jquery-ui.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/kinetic-v4.3.2-beta.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h3>aa</h3>
</div>
<div data-role="content">
<h3>aa</h3>
<br />
<div>
<label for="address">Address:</label>
<input type="text" id="address">
<select id="prefix">
<?php for ( $i = 49; $i < 64; $i++ ) : ?>
<option value="<?php echo $i; ?>">/<?php echo $i; ?></option>
<?php endfor; ?>
</select>
<label for="subnet">Total Subnets: </label>
<input type="text" id="subnets">
<button class="btn" id="build"> Build It </button>
</div>
<div id="network"></div>
</div>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#build").click(function(){
var subnets = parseInt( $("#subnets").val() );
var address = $("#address").val();
var prefix = $("#prefix").val();
var levels = $("#subnets").val();
$.post("aa.php", {address:address, prefix:prefix, levels:levels}, function(response){
$("#network").html(response);
$("#network > .branch").show();
$("#network .open-children").click(function(){
$(this).text('-');
$(this).parent().children(".branch").toggle();
return false;
});
});
});
});
</script>
</body>
</html>
whether the problem comes from too many javascript?
Meta refresh should work so:
<meta http-equiv="refresh" content="0;url=aa.php">
You can use it without JS.
<noscript><meta http-equiv="refresh" content="0;URL='?nojs=1'"></noscript>
Check if you have any errors in console and remove them. Also you should detect if you have mobile or PC version of browser and include either jquery-1.9.1.js or jquery.mobile-1.3.0.js
you can also use
window.location
with setInterval or setTimeout it'll do the same. But you can't have any JS errors.
you can use this javascript code for refresh your page:
document.location.reload();
or change your location if you want:
document.location = "http://google.com";
Try this,
<meta http-equiv="refresh" content="0;url=aa.php">
I have been trying to save tinymce editor textarea content to a .txt file for a while but without success yet.
This is my html file code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TinyMCE example</title>
<meta name="description" content="HTML5 Basic template">
<meta name="author" content="R Dickinson">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/scripts.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>test tinymce save</h1>
</header>
<nav>
</nav>
<section>
<form method="post" action="test.php">
<p>
<textarea name="content" style="width:50%"></textarea>
<input type="submit" value="Save" />
</p>
</form>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Now test.php
<?php
/*
* test.php
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test tiny mce</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
</head>
<body>
<?php
echo(stripslashes($_POST['content']));
?>
<?php
$file = "data.txt";
$fp = fopen($file, 'w');
$data =(stripslashes($_POST['content']));
fwrite($fp, $data);
fclose($fp);
?>
</body>
</html>
I'm grateful for helpful replies to fix this-many thanks :-)
Update
Following the first answer below I have added triggerSave as:
<script language="Javascript">
function submitForm() {
tinyMCE.triggerSave();
document.forms[0].submit();
}
</script>
and
<form method="post" action="test.php">
<p>
<textarea name="content" style="width:50%"></textarea>
<!--<input type="submit" value="Save" />-->
Submit Form
</p>
but still no success...More help gratefully received
UPDATE 2
Here is my jQuery TinyMCE version:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample WebPage</title>
<meta name="description" content="HTML5 Basic template">
<meta name="author" content="R Dickinson-see sitepoint etc">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/scripts.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
<!-- Load jQuery build -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Enter the main heading, usually the same as the title.</h1>
</header>
<nav>
</nav>
<section>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
The question itself comes down to :
How to save HTML content of TinyMCE into a file.
Well, first of all, you need:
1) Get content of editor
2) Send this content to PHP script
3) Implement some function that would save that content into a file
Getting content
Make sure you are getting it the way it should work.
For example,
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('SubmitBtn');
btn.onclick = function(){
//This MUST alert HTML content of editor.
alert( tinyMCE.activeEditor.getContent() );
}
}
</script>
<input type="button" id="SubmitBtn" value="Get HTML content"/>
Sending content to PHP script
All you need to do is to send value of the method tinyMCE.activeEditor.getContent() to PHP script.
Well, you should use Jquery-AJAX for that.
Assume that you included jquery.js into script tag in the head section, the next step would be sending JavaScript variable to PHP script
It would be similar to this one:
<script type="text/javascript">
$(function(){
var url = "path_to_your_php_script.php";
$("#SomeSubmitButton").click(function(){
//"content" will PHP variable
$.post(url, { "content" : tinyMCE.activeEditor.getContent() }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
});
</script>
PHP script
Since we were sending "content" this one will be populated in $_POST superglobal
<?php
if ( isset($_POST['content']) ){
//This is what you want - HTML content from tinyMCE
//just treat this a string
if ( save_html_to_file($_POST['content'], '/some_file.html') ){
//Print 1 and exit script
die(1);
} else {
die('Couldnt write to stream');
}
}
/**
*
* #param string $content HTML content from TinyMCE editor
* #param string $path File you want to write into
* #return boolean TRUE on success
*/
function save_html_to_file($content, $path){
return (bool) file_put_contents($path, $content);
}
So after execution this you should get back alert with message of success.
You should update your TinyMCE instances before submitting your form. Use this javascript:
tinyMCE.triggerSave();
I usually put this in a function and call it on onsubmit event of form.
There is already different questions around this topic in Stackoverflow.
I've got this piece of script, and I'm trying to hide two divs (#black and #yname) if a certain variable or session is set in PHP, so is there a simple way to do so?
Here's my code:
input.php
<!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" />
<style type="text/css">
#import "stil.css";
</style>
<title>Untitled Document</title>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="postme.js"></script>
</head>
<body>
<div id="wrap">
<div id="chat">
<div id="main">
</div>
<div id="input">
<form name="form"action="test.php" method="post">
<input type="text" name="tekst" id="msg" size="72" />
<input type="submit" name="dugme" value="posalji" id="dugme" />
</form>
</div>
</div>
</div>
<div id="black">
</div>
<div id="yname">
<form name="yname">
<input type="text" name="tekst2" />
<input type="button" name="dugme2" value="Enter" onclick="send()"/>
</div>
</body>
</html>
postme.js
function send(){
$.post('sesion.php',{name:yname.tekst2.value},function(val){
}
});
}
sesion.php
<?php
session_start();
$data=$_POST['name'];
$_SESSION['name']=$data;
$sesion_n=$_SESSION['name'];
echo $sesion_n;
?>
So basically, what I want to do is to check if $sesion_n variable is set, and if it's set, I want my send() function to hide divs #black and #yname.
In addition, is there a way to use val value with jquery somehow for example to alert it or to assign that value to a javascript variable?
function send(){
$.post('sesion.php',{name:yname.tekst2.value},function(val){
if(val) {
$('#black').hide();
$('#yname').hide();
}
}
});
}
well i didnt get your question completely but you can use hide() method to hide any div in jquery...
I am having trouble to embed an autosuggest script into my existing php file (wordpress). Below is the code and here is the desired result http://www.emposha.com/demo/fcbkcomplete_2/
In addition, the tags system of stackoverflow is great, I am looking something like this one :D
Howvere, instead of the text field I get a select field. It might be something with javascript, I dont know...
The code:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>FCBKcomplete Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8">
</script>
<script src="jquery.fcbkcomplete.js" type="text/javascript" charset="utf-8">
</script>
</head>
<body id="test">
<h1>FCBKcomplete Demo</h1>
<div id="text">
</div>
<form action="submit.php" method="POST" accept-charset="utf-8">
<select id="select3" name="select3">
<option value="test1">sleep</option>
<option value="test3">sport</option>
<option value="test3">freestyle</option>
</select>
<br/>
<br/>
<input type="submit" value="Send">
</form>
<script type="text/javascript">
$(document).ready(function(){
$("#select3").fcbkcomplete({
json_url: "data.txt",
addontab: true,
height: 2
});
});
</script>
<div id="testme"></div>
</body>
Well, that's a select tag in your HTML there instead of input type="text". What did you expect to happen?