I'm currently in the process of creating a website with various widgets that I want to be able to add/remove on the fly.
I'm using jQuery to achieve this(planning to at least).
The simplest widget is the login widget. Which looks like this:
<div id="widget1">
<div class="close"></div>
<div id="widget1_title"></div>
<div id="widget1_content">
<form method='post' action='index.php'>
<div id="widget1_username">
Username<input type='text' maxlength='16' name='user' value='' />
</div>
<div id="widget1_password">
Password<input type='password' maxlength='16' name='pass' value='' />
</div>
<div id="widget1_submit">
<input type='submit' value='LOGIN' />
</div>
</div>
</div>
This is stored in a file called login_widget.html. Since a login-widget is something that should be preloaded on the site(without the user having to bring it up) I have my index.php file looking like this:
<body>
<div id="container">
<div id="content">
<div id="sidebar">
<div id="login-sidebar"></div>
</div>
<div id="header">
<div></div>
<div></div>
<div id="header-logo"></div>
</div>
<div id="main-content">
<div id="widget1">
<div class="close"></div>
<div id="widget1_title"></div>
<div id="widget1_content">
<form method='post' action='index.php'>
<div id="widget1_username">
Username<input type='text' maxlength='16' name='user' value='' />
</div>
<div id="widget1_password">
Password<input type='password' maxlength='16' name='pass' value='' />
</div>
<div id="widget1_submit">
<input type='submit' value='LOGIN' />
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
(Originally it's in a <?php include_once('login_widget.html'); ?> ).
I then have a button set up that I press to load in the code from the file.
Here's the jQuery code:
$(document).ready(function(){
$(".close").click(function(){
$(this).parent().remove();
});
$("#login-sidebar").click(function(){
$.ajax({
url: 'login_widget.html'
}).done(function(data) {
$('#main-content').append(data);
});
});
});
And now to the problem. This works in that it posts the html-code and it shows on the site, but the problem is that the "close button" doesn't work anymore. So I can't remove the new created html-elements using the class named "close".
I'm very new to jQuery, but I figure this is one way of doing it, but I'm missing something?
Thanks in advance!
Either build your widgets as modules that bind their own events when they are created to remove themselves, or use event delegation. Event delegation would be the simplest given the very basic code that you are using thus far.
$("#main-content").on("click",".close",function(){
$(this).parent().remove();
})
Related
My question is rather simple. But I am seriously stack as I have never done moving commentary box and nor applying it before.
Here is the code of a comment box I got from a free source:
<form method='post'>
<div class="name">NAME: <input type='text' name='name' id='name' /><br /></div>
Comment:<br />
<textarea name='comment' id='comment'></textarea><br />
<input type='hidden' name='articleid' id='articleid' value='<? echo $_GET["id"]; ?>' />
<input type='submit' value='Submit' />
</form>
And now I am trying to position it so it fits nicely on my page. I managed to move it on the page by putting the whole piece of code in a div, but when it comes to Name and comment fields even I am not sure what to do. Would be great to see some insights.
I would recommend using Bootstrap to make a clean design of your form.
Add Bootstrap to your Head of your HTML page:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Then you can modify your form code to use Bootstrap containers, form-groups and form-control classes to structure and style your code. See here for more details. form-group group label's and input fields together removing the need to create custom css or use html breaks to change the structure of the page. form-control adds Bootstrap styling to the input fields.
I created an example from your code sample above using Bootstrap:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Example Form</h1>
<form>
<div class="form-group">
<label for="nameInput">Name</label> <input class="form-control" id="nameInput" placeholder="Name" type="text">
</div>
<div class="form-group">
<label for="commentInput">Comment</label>
<textarea class="form-control" id="commentInput"></textarea>
</div>
<input id='articleid' name='articleid' type='hidden' value='<? echo $_GET["id"]; ?>'>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</div>
See code pen to view the form - http://codepen.io/jamesg1/pen/ALAZKg
I am using the geocoding control plugin L.GeoSearch (https://github.com/smeijer/L.GeoSearch) and I have a form on the left sidebar of my leaflet map. The form should submit the inputs to a php file that then does the processing via XMLHttpRequest.
The coordinates have to be transferred as well and I am a little bit stuck on how to integrate the geosearch bit into the form. Can somebody help me out or give some hints?
The page: http://app.seedbomb.city/cartodb.html
This is my map code:
https://jsfiddle.net/Gopher69/oza08ja4/embedded/result/
<!-- Begin Sidebar!-->
<div id="sidebar">
<h2>Markiere deinen Standort</h2>
<div class="ss-form-container">
<div class="ss-header-image-container">
<div class="ss-header-image-image">
<div class="ss-header-image-sizer"></div>
</div>
</div>
<div class="ss-top-of-page"></div>
<div class="ss-form">
<form onsubmit="" target="_self" id="ss-form" method="POST" action="write_cartodb.php">
<ol style="padding-left: 0" class="ss-question-list" role="list">
<div role="listitem" class="ss-form-question errorbox-good">
<div class="ss-item ss-text" dir="auto">
<div class="ss-form-entry">
<label for="entry_2039516724" class="ss-q-item-label">
<div class="ss-q-title">Bildbeschreibung
</div>
<div dir="auto" class="ss-q-help ss-secondary-text"></div>
</label>
<input type="text" title="" aria-label="caption " dir="auto" id="entry_2039516724" class="ss-q-short" value="" name="beschreibung">
</div>
</div>
</div>
<div role="listitem" class="ss-form-question errorbox-good">
</br>
<input type="file" name="bild" id="uploadfiles" accept="image/*" />
</div>
</div>
</div>
</br>
</br>
<div class="ss-item ss-navigate">
<table id="navigation-table">
<tbody>
<tr>
<td dir="ltr" id="navigation-buttons" class="ss-form-entry goog-inline-block">
<input type="submit" class="jfk-button jfk-button-action " id="ss-submit" value="Senden" name="submit">
</tr>
</tbody>
</table>
</div>
</div>
<!-- End Sidebar!-->
The php processing file:
https://jsfiddle.net/Gopher69/c692kqov/embedded/result/
<?php
echo "<h1>" . $_POST["beschreibung"] . "</h1>";
echo "<h1>" . $_POST["bild"] . "</h1>";
?>
<script>
function dialResponse() {
console.log(this.responseText); //should be return value of 1
}
var oReq = new XMLHttpRequest();
oReq.onload = dialResponse;
oReq.open("get", "https://{account}.cartodb.com/api/v2/sql?q=INSERT INTO cartodb_test (caption, image_low, image_standard, image_thumb, latitude, longitude) VALUES (<?php echo $beschreibung;?>, http://app.seedbomb.city/images/<?php echo $bild;?>, http://app.seedbomb.city/images/<?php echo $bild;?>, http://app.seedbomb.city/images/<?php echo $bild;?>, 12.532534, 12.643245)&api_key=http://app.seedbomb.city/images/<?php echo $bild;?>"
", true);
oReq.send();
</script>
You can utilize Leaflet's map events, such as click or moveend, to let a user chose the position.
With those you can fill an input field in your form with the coordinates. This code will update an input field with a coordinate when clicking on the map:
map.on('click', function(e){
document.getElementById('userlocation').value = e.latlng.lat+','+e.latlng.lng;
});
Demo code here: https://jsfiddle.net/chk1/dh58ury9/
So, I'm having an issue where my $_POST variable does not work whenever I have JQuery included on the page.
If I comment out the JQuery link it works fine. I have asked a similar question before, but did not get a full answer and have used a workaround which does not work with this page.
My full code is as followed:
<?php
if(isset($_POST['home-register-submit']))
{
echo '<script>alert("Works!");</script>';
}
?>
<div id='home-register'>
<div id='home-register-title'><h4>Aanmelden</h4></div>
<hr>
<form method="POST">
<label>Voornaam:</label> <div id='home-register-input'><input type="text" name='home-register-fname'></div><br />
<label>Achternaam:</label> <div id='home-register-input'><input type='text' name='home-register-lname'></div><br />
<label>Leeftijd:</label> <div id='home-register-input'><input type='' name='home-register-age'></div><br />
<label>Telefoon:</label> <div id='home-register-input'><input type='tel' name='home-register-phone'></div><br />
<label>Email:</label> <div id='home-register-input'><input type='email' name='home-register-email'></div><br />
<button class="btn btn-default btn-sm" type='submit' name='home-register-submit'>Versturen</button>
</form>
</div>
<!-- jQuery -->
<script src="js/jquery.js"></script>
Fixed it by excluding a file called clean-blog.min.js which apparently blocked my page from using $_POST.
<form class='form-horizontal' action="<?php echo Yii::app()->createUrl('item/default /submit'); ?>" type="post">
<div class='control-group'>
<label class='control-label'><b>Title : </b></label>
<div class='controls'>
<input type='text' name='cat_title' class='cat_title' />
</div>
</div>
<div class='control-group'>
<label class='control-label'><b>Image url : </b></label>
<div class='controls'>
<input type='text' name='image_url' class='image_url' />
</div>
</div>
<div class='control-group'>
<label class='control-label'></label>
<div class='controls'>
<button type='submit' class='btn btn-info'>Save</button>
</div>
</div>
</form>
When the submit button is pressed, Yii takes me to index.php instead of the url defined in form action.
The form action url is correct.
Any suggestion will be helpful.
You have a space in the URL, so replace this...
Yii::app()->createUrl('item/default /submit');
// ^ - here is the space
...with this...
Yii::app()->createUrl('item/default/submit');
EDITED: as noted by #Cookie_J5, have a look into using the "Yii-way" of building forms: Creating Form
Try to replace
Yii::app()->createUrl('item/default/submit');
with
Yii::app()->createUrl('/item/default/submit');
To use Yii::app()->createUrl() you have to set proper path in a UrlMananger in protected/config/main.php file. As for me you can just set form action manualy. For example, set it to /item/default/submit/
Hey everybody thanks for reading .
I have a problem i don't know how to keep functioning jquery code of a page that has been loaded with ajax. The problem is that on the original page the code executes so the jquery framework has already loaded and when the ajax call comes in to load the data of the other page i get unfunctioning jquery code. The jquery code that was loaded from the ajax page dose not work .
If i was not clear ask for clarification , for more detal the code is below :
The page into which i load the jquery pages :
<?php
ob_start();
include 'includes/chk.php';
?>
<script type="text/javascript">
$(document).ready(function() {
$('#account_link').click(function(){
$.ajax({
type: "POST",
async:false,
url: "ajax/settings_account.php",
success: function(msg){
$('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
}
});
});
$('#settings_link').click(function(){
$.ajax({
type: "POST",
async:false,
url: "ajax/settings_account.php",
success: function(msg){
$('#div_container_sett_acc').replaceWith('<div id="div_container_sett_acc" style="text-align: center;">'+msg+'</div>');
}
});
});
});
</script>
<div class="ui-grid-a">
<div class="ui-block-a">
<ul data-role="listview" data-divider-theme="d" data-inset="true">
<li data-theme="c">
<a href="#settings" >
Settings
</a>
</li>
<li data-theme="c">
<a href="#account" id="account_link" >
Account
</a>
</li>
</ul>
</div>
<div id="div_container_sett_acc">greg</div>
</div>
<?php
$pagemaincontent = ob_get_contents();
ob_end_clean();
$pageHead='';
$home_page='ui-btn-active';
$pageTitle ='';
include("master.php");
?>
On of the ajax pages being loaded :
<?php
include_once ("../includes/mysql.php");
include_once ("../includes/chk.php");
?>
<div class="ui-block-b">
<div id="settings_link" data-theme="a">
<div data-role="content" data-theme="a" >
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p>Back to page "one"</p>
</div><!-- /content -->
</div><!-- /page two -->
<div id="account" data-theme="a">
<div data-role="content" data-theme="a">
<form url="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<label for="textinput1">
Boh
</label>
<input id="textinput1" placeholder="" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<label for="selectmenu1">
Choose:
</label>
<select name="selectmenu1" id="selectmenu1">
<option value="option1">
Option 1
</option>
</select>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
Choose:
</legend>
<input name="radiobuttons1" id="radio1" value="" type="radio" />
<label for="radio1">
Option
</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<legend>
Choose:
</legend>
<input name="checkbox1" id="checkbox1" type="checkbox" />
<label for="checkbox1">
Checkbox
</label>
</fieldset>
</div>
<input type="submit" value="Submit" />
</form>
</div><!-- /content -->
</div><!-- /page two -->
</div>
If someone could help me out i would be most great-full
You should use on instead of bind:
$(document).ready(function() {
$('#account_link').on('click', function() {...})
$('#settings_link').on('click', function() {...})
});
You need to have a jquery script code inside loaded content. So, there must be the same in the base page and the same included in code called by $.post
$.Posted content is not served by default $(document).ready(function()