I am using Jquery ui functions and created Drag and Drop plugins. The all i have achieved is the draggable item and droppable area and implemented this successfully.
My next step is to drop my working plugins to be drop into the ckeditor body both source or design view.
i am using this code to make drag drop.
HTML
<div class="item" id="image">
<label class="title">Image</label>
<label class="price"></label>
</div>
<div id="cart_items" class="back"></div>
JavaScript :
$("#cart_items").droppable({
accept: ".item",
//activeClass: "drop-active",
//hoverClass: "drop-hover",
drop: function(event, ui) {
var coordsp=[];
var coordsc=[];
var item = ui.draggable.html();
var itemid = ui.draggable.attr("id");
//alert(itemid);
var coordsp = $('#cart_toolbar').position();
var coordTopp = coordsp.top ;
var coordLeftp = coordsp.left;
//alert(itemid);
var coordsc = $('#'+itemid).position();
//alert(coordsc.top);
//alert(coordsc.left);
var coordTopc = coordsc.top ;
var coordLeftc = coordsc.left;
var coordLeft = coordLeftc-coordLeftp;
//var coordLeft = 0;
var coordTop = coordTopc-coordTopp;
//numControls++;
var numControls = document.getElementById('numControls');
controls_count += 1;
numControls.value = controls_count;
count += 1;
var hrml_sort_pre = '<div class="column" id="column1">';
if(itemid == "image")
{
var html = '<div class="dragbox" id="item'+count+'"><img src="<?=base_url()?>/css/move_arrow.gif" alt="no-image" class="drag-image"><h2 id="'+count+'" value="para_1" onclick="do_collapse(this);" onmouseup="do_fill_data(this.id);" onmouseover="fetch_editor_data(this.id);" > </h2><div style="float:right;margin-top:-20px;margin-right:4px"><a onclick="remove_item(\'item'+count+'\')" id="remove'+itemid+count+'" class="remove'+itemid+count+' x-button"> </a></div><div class="dragbox-content" ><div id="item_cart_'+count+'" style=" position: relative; left: 0px; top:-2px;width:100%;">';
html = html + '<a id="image_'+count+'" href="<?=base_url()?>index.php/media/index/'+count+'" ><img src="<?=base_url()?>images/na.jpg" id="temp_image_'+count+'" name="para_'+count+'" onclick="box_load(\'image_'+count+'\')" title = " " alt = "" /></a><input type="hidden" name="control_type[]" value="image" /><input type="hidden" id="input_temp_image_'+count+'" name="content[]" value="" /> <input type="hidden" name="image-para[]" value="" /></div></div></div>';
}
$("#cart_items").append(html); }}
Is there any way that we can use this to drop image html in editor and call some function on it.
Thanks in advance
You could create a CKEditor plugin that creates a button on the toolbar. This button would then inject the javascript, and then the markup for the drop area.
However, I see a major problem with this kind of implementation. Be careful when putting script tags inside the CKEditor body, as CKEditor will most likely filter this out upon submit.
Instead of creating a plugin which would inject the HTML into the body of the editor (thus creating multiple copies of the same code around the site), why not use a token, and then parse the token upon loading the content into the page?
Here's a couple of references for creating CKEditor plugins to help get you started:
CKEditor Plugin Development
Official CKEditor Plugin Creation Tutorial
The CKEditor Javascript API
Related
I'm wanting a checkbox in theme.php to trigger a function in front.php
that changes a css file from default with a white background to blue with a blue background.
Unchecking the checkbox reverts it back to default.
I've tried various different methods from having the script in theme.php to moving it to front.php using all the different jQuery functions including load, change, click, post, using if/else, appending to the header tags in front.php...
nothing works.
in theme.php
<div class="main-content">
<input type="checkbox" id="front"/>
<label for="front">FrontEnd</label>
</div>
and in front.php
const frontEnd = document.querySelector("#front");
frontEnd.addEventListener('change', function(e) {
if(frontEnd.checked){
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "css/blue.css";
document.getElementsByTagName("head")[0].appendChild(link);
}else{
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "css/default.css";
document.getElementsByTagName("head")[0].appendChild(link);
}
});
any tips on what I may be missing?
cheers.
$(document).ready(function($){
$('#test').click(function(){
$("#main-div").toggleClass('class-yellow');
});
// $('#test').prop('checked', true); //Checks it
// $('#test').prop('checked', false); //Unchecks it
});
.class-yellow {
background:yellow;
width:200px;
padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='main-div'>
<label for="test">adding style when click</label>
<input type="checkbox" id='test'>
</div>
I'm having a textbox which is "observed" by a jquery for several actions, all code being a part of a "search-as-you-type" form.
Well, everything works flawlessly on Mozilla but in Chrome, the textbox is losing focus after 1'st hit, so I have to click again in textbox to continue search. Any clue ? My experience is leading me to a bug
<div class="search-container">
<input type="text" placeholder="Search.." name="searchb" >
</div>
<script>
$('input[name="searchb"]').on('input propertychange
paste',function(){
if ($(this).val().length > 2){
document.cookie = "psearch="+this.value+";"+"path=/";
window.open("main.php?psearch="+this.value, "iframe_a");
}
});
</script>
Your search input is losing focus because the new opened window will gain focus.
Moreover, with your current code, a new window is opened each time an input with a length more than two characters is detected.
There are many solutions, here are two of them. I didn't put them into code snippets because they will not work correctly.
AJAX
You can get the generated HTML of main.php thanks to an AJAX request:
HTML
<div class="search-container">
<input type="text" placeholder="Search.." name="searchb" >
</div>
<div id="searchb-result"></div>
Javascript
$('input[name="searchb"]').on('input propertychange paste', function() {
// Empties the result container.
$('#searchb-result').empty();
if ($(this).val().length > 2) {
document.cookie = `psearch=${this.value};path=/`;
// Gets the HTML by AJAX and adds it to the result container.
$.get('main.php', `psearch=${this.value}`, (html) => {
$('#searchb-result').html(html);
});
}
});
<iframe>
You can load your URL in a <iframe> tag.
HTML
<div class="search-container">
<input type="text" placeholder="Search.." name="searchb" >
</div>
<iframe style="display:none;"></iframe>
Javascript
$('input[name="searchb"]').on('input propertychange paste', function() {
// Hides the <iframe> by default.
$('iframe').hide();
if ($(this).val().length > 2) {
document.cookie = `psearch=${this.value};path=/`;
// Updates the <iframe> source when an input is detected.
$('iframe')
.attr('src', `main.php?psearch=${this.value}`)
.show();
}
});
I rewrote the entire section without jquery , clean and a with bit of 4'th grade approach, but it works. The lost focus was the problem.
<div class="search-container">
<input type="text" placeholder="Search.." name="searchb" id="search" autofocus="autofocus">
</div>
<script>
window.name = 'parent';
search.onchange = search.oninput = search.onpaste = function() {
var sv = search.value;
if (sv.length > 3){
var search_window = window.open("main.php?psearch="+sv, "iframe_a");
parent.focus();
}
else {
document.cookie = "psearch=";"path=/";
var search_window = window.open("main.php?psearch=", "iframe_a");
parent.focus();
}
}
</script>
I am developing the app using CakePHP 1.3 Now I want to make the "Insert function" to add new user into database. I have 2 fields user & pass to insert. But I not only insert 1 user, I want insert one or multiple user (optional). If I want to add more user I will click to "add more" to add new field in view.
In cakephp, it required when we want to insert a array with multiple data. The field name will be define as:
<?php
echo $this->Form->input('Modelname.0.fieldname');
echo $this->Form->input('Modelname.1.fieldname');
?>
and in view will be:
<input type="text" id="Modelname0Fieldname" name="**data[Modelname][0][fieldname]**">
<input type="text" id="Modelname1Fieldname" name="**data[Modelname][1][fieldname]**">
My question is: Does JQuery have some function to add new element and how can I increase the index number follow the pattern above data[Modelname][0][fieldname]
Thank for your view and suggestion.
I've created this code, here it is, I've tested it and it works
http://codepen.io/anon/pen/xbxVQG
var $insertBefore = $('#insertBefore');
var $i = 0;
$('#plusButton').click(function(){
$i = $i+1;
$('<br><div class="Index">User N. ' + $i + '</div><br>Username:<br><input type="text" id="Modelname' + $i + 'Fieldname" name="**data[Modelname][' + $i + '][fieldname]**"><br>Password:<br><input type="text" id="Modelname' + $i + 'Password" name="**data[Modelname][' + $i + '][Password]**"><br>').insertBefore($insertBefore);
});
#Userlist{
border-style:solid;
width: 300px;
margin: 0 auto;
text-align:center;
padding: 0.5em;
}
.Index{
background-color:grey;
text-align:left;
}
#plusButton {
background-color:green;
color: white;
font-size:1.9em;
width: 300px;
margin: 0 auto;
text-align:center;
cursor: pointer;
}
<html>
<head>
<title>Add New Users</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form action="your-script.php" method="post" id="Userlist">
<div class="Index">User N. 0</div>
Username:<br>
<input type="text" id="Modelname0Fieldname" name="**data[Modelname][0][fieldname]**"">
<br>Password:<br>
<input type="text" id="Modelname0Password" name="**data[Modelname][0][Password]**">
<br>
<div id="insertBefore"></div>
<br><br><input type="submit" value="Add User">
</form>
<div id="plusButton">+</div>
</body>
</html>
some important notes:
1- The div who's id="insertBefore" is just to tell jQuery where to put the new duplicated fields.
2- The jQuery code works with an index variable ($i) that starts in 0 and gets incremented by 1 on each new click on the "+" button (so the first time you click, it should get to 1)
3- The original Form's code (where value is 0 by default) is printed everytime the + button is clicked, but replacing each 0 in the html code by '+$i+'
3.2 - If you make some changes to the code of your form, by this method, you should change the javascript code as well. I know it's not an elegant solution to do this, but it shouldn't be so difficult either, just remember to copy the exact html code, delete all intro's and replace all 0's with '+$i+'
4- The "Index N." div is just keeping track of the user's number, you could put your own text there, like "User Nº 0" and in the jQuery code replace the 0 with the value of $i
5- You could put a limit to the number of users (example:10) that can be added by creating an if($i<10){} variable inside the .click() function
Just write a jQuery code to append a user field. and also send data-id to the javascript.
Let say for example. in your form.
<div id="segment">
$this->Form->input('User.1.name',array('class'=>'user','data-id'=>1));
</div>
in jquery.you can have a function like this on click of add user,
var lastid = parseInt($('.user:last').attr('data-id');
var newid = lastid+1;
var input = "<input name='data[User][" + newid + "][name]' class='user' id='user-" + newid + "' data-id='" + newid + "' type='text'><br/>";
$('#segement').append(input);
Note that double check the input string, I might miss a quote or
anything.
Thanks for all answers about this, I was not test your code but I found the way to append and increase the index number too. When I have time, I will research about your code.
My code is follow this thread http://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery. He made it easily to understand.
The JS:
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div><input type="text" name="mytext[]"/>Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
and the HTML:
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div><input type="text" name="mytext[]"></div>
</div>
The demo you can see in that link above.
More thank for everybody again.
I want to insert these particular tags into the database. This is my HTML:
<div id="tags">
<input type='text' name='tags' placeholder='Type in topic tags here seperated by commas' id="tagg" />
</div>
and the jQuery part:
counter = 0;
$(function(){
$('#tags input').on('focusout',function(){
var txt= $.trim( $(this).val() ).replace(',','');
if(txt){
$(this).before('<span class="tag" name="tags[]" value="'+txt+'">'+txt+'</span>');
counter++;
if(counter==5){
$('#tags input').prop('disabled', true);
}
//$(".bgtopic").append("<input type='hidden' name='tags[]' />")
//Yet to implement the counter varibale to be visible...
}
$(this).prop('value','');
}).on('keyup',function( e ){
if(e.which==188){
$(this).focusout();
}
});
$('#tags').on('click','.tag',function(){
$(this).remove();
counter--;
$('#tags input').prop('disabled', false);
});
});
What the piece of code creates a tag when a user is creating a new post on my forum, just like the way it is here on StackOverflow. I want to be able to store the tags so that I can use them to create a tag cloud. How can I accomplish this?
you have to do an ajax request via jquery.
you can find a lot of tutorials on web how to do that (e.g. http://www.ibm.com/developerworks/opensource/library/os-php-jquery-ajax/)
I am currently developing a WordPress site which needs a custom content add/edit module. I am looking for an image upload option in wordpress, for eg. in my form there is an input field titled 'Choose Image', when the user clicks on the input field, i want the wordpress media gallery to popup and be able to choose an image from the gallery. and once the user selects an image, the full url to the image will be filled in the input field. I am sure this can be done because i have once found a code for this, but i forgot where i found it. Please help everybody
Thanks in Advance..
Here is code that will do this:
jQuery(document).ready(function() {
var orig_send_to_editor = window.send_to_editor;
jQuery('#upload_image_button').click(function() {
formfield = jQuery(this).prev('input');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.send_to_editor = function(html) {
var regex = /src="(.+?)"/;
var rslt =html.match(regex);
var imgurl = rslt[1];
formfield.val(imgurl);
tb_remove();
jQuery('#show_'+formfield.attr('name')).html('<img src="'+imgurl+'" width="" />')
window.send_to_editor = orig_send_to_editor;
}
return false;
});
});
Here is the HTML to go with it:
<input type="hidden" name="upload_image" />
<?php $post_img = get_post_meta($post->ID,'item_image',true); ?>
<input id="upload_image_button" type="button" value="<?php echo (empty($post_img)?'Upload Image':'Change Image') ?>" />
<div id="show_upload_image"><?php echo (!empty($post_img)?"<img src='$post_img' width='100' />":'')?></div>