First sorry if my English is bad I am french x)
So I have an issue with something.
I want to get the ID of the div which I clicked on. Here's my script :
Data sent with PHP thanks to AJAX :
$id = $donnees['id'];
echo '<div class="message" id="'. $id. '">';
echo '<div class="sanction"><div class="bannir"><img src="img/ban.png" alt="ban" class="ban"></div>';
echo '<div class="supprimer"><img src="img/sup.png" alt="supprimer" class="sup"></div></div>';
echo '<div class="pseudo">' .$donnees['pseudo']. '</div>';
echo '<div class="contenu">' .$message.'</div>';
echo '</div>';
Jquery :
$('#display').on('click', '.supprimer', function(){
var id = (this).parent().attr('id');
alert(id);
});
I don't know if you understand what I want, but if someone has an idea :)
Use
$(this).prop('id');
to get the id property.
Related
I have a checkBox in Yii and I use ajax in it. What I want to do is the use one 'url' parameter when the checkBox is checked and another different when it is unchecked.
For example, when checked:
'url'=> CController::createUrl('/item/add'),
When unchecked
'url'=> CController::createUrl('/item/remove'),
What is the best approach for it? Of course I do not want to check the state of the view checkBox from the controller.
Thank you
I know I would do jQuery, like:
var url = '';
if($('#chbInput').val() == 1)
{
//do something when checked
url = '<?php echo CController::createUrl('/item/add') ?>';
...
}
else
{
url = '<?php CController::createUrl('/item/remove') ?>';
...
}
Solved this way:
<input type="checkbox" id="chk">
<?php
$url1 = $this->createUrl('/item/add');
$url2 = $this->createUrl('/item/remove');
$js = '
$(\'#chk\').change(function(){
$.post(this.checked ? "'.$url1.'" : "'.$url2.'", function(data) {
$("#items").html(data);
});
});
';
Yii::app()->clientScript->registerScript('chk', $js);
?>
I am quite new to jquery mobile so this might be a trivial question. The fact that documentation is not centralized for jquery mobile is making me post this on stackoverflow.
Currently, I am trying to load a listview and every item of the listview has the following structure. The options button is a controlgroup button with variable number of buttons below it, again received from the JSON.
Currently there are about 250 objects and they are obtained from the server over an 85 KB JSON. Due to the dynamic nature of the content caching data is a bit tricky.
I am running into a problem wherein its taking almost 15 seconds to load this page. To find out the reason causing it I added timestamp values within the for loops that create the list items dynamically.
Interestingly the main bottleneck - which is upto 12 out of the 14 seconds is taken while creating the HTML for the controlgroup.
Here is an image of the options button to give you an idea about the HTML
I am keen to know why rendering dynamic control groups on list items is causing so much delay. I do not know how to cache the controlgroup since, the grouped buttons are also dynamic and are received from the JSON.
<
I look forward to your feedback on this,
Thanks
Rajat
EDIT Code Snippet Added. I use this routine to generate every list item
foreach ($jsonArray AS $item) {
Show the adapter
echo '<li>';
if($item['reactionCount'] > 0) {
echo ' <a href="/planner/reactionbox/id:'. $item['jobId'] . '">';
if(isset($item['requiresAction'])) {
echo ' <span class="ui-li-count redBubble" style="background:#088A08"> </span>';
} else {
echo ' <span class="ui-li-count redBubble" style="background:#6E6E6E"> </span>';
}
} else {
echo ' <a href="/planner/job-details/id:'. $item['jobId'] .'" name=\"job' . $item['jobId'] . '\">';
}
echo '<img style="float:left; padding: 11px 0px 0px 11px; width: 66px; vertical-align:middle;"
src="' . (($item['imageUrl'] != '') ? $item['imageUrl'] : '/img/website/profilephotodummy.png') . '" alt="dummyphoto" />
<h3>' . $item['firstLine'] . '</h3>
<p><strong>' . $item['secondLine'] . '</strong></p>
<p>' . $item['thirdLine'] . '</p>
<p class="ui-li-aside"><strong>' . $item['optionalLine'] . '</strong></p>
</a>';
if(isset($item['actions'])) {
echo '<div data-role="controlgroup" data-type="horizontal" style="margin-left: 15px;" data-mini="true">
<select data-native-menu="false" data-theme="b" data-inline="true" data-mini="true" data-icon="gear" onchange="doJobAction(\'' . $currentUrl . '/\'+this.value); this.selectedIndex=0;">
<option>' . __d('website','opties',true) . '';
foreach ($item['actions'] AS $value) {
# for every action from the JSON generate an action button dynamically ...
if($value == 'annuleer_opdracht') {
echo '<option value=" ' . $currentUrl . '/cancelJob:' . $flexbox['jobId'] . ' ">annuleer</option>';
} else if($value == 'zoek_opnieuw') {
echo '<option value="' . $currentUrl . '/newSearchJob:' . $flexbox['jobId'] . '">zoek opnieuw</option>';
} else if($value == 'publiceer_externe') {
echo '<option value="' . $currentUrl . '/openForFreelancer:' . $flexbox['jobId'] . '">publiceer externe</option>';
}
}
echo '</option></select></div>';
}
echo '</li>';
}
Hi, I use a php code to view the all comments to any post from my sql and I want to add a submit button to every comment in order to delete it without refreshing the page, I mean using AJAX i don't know how to write that codes and connect it with html codes i want add submit like this :
<form>
<input type="submit" id="deletecomment">
</form>
and connected it with AJAX and delete.php page to delete the comment (ajax,delete.php)???????
this is my codes
$result = mysql_query ("select * from post_comments WHERE link ='$getlink' order by link asc");
while ($row = mysql_fetch_array($result)) {
$id = $row['id'];
$link = $row['link'];
$time = $row['time'];
$content = nl2br($row['content']);
$name = ($row['link'] != '') ? '<h3 style="color:blue">'.$row['name'].'</h3>' : $row['name'];
$imge = $row['imge'];
echo '
<div class="commentuserbackground">
<img src="'.$imge.'" width="30px" height="30px">
<div id="comment-'.$id.'" class="username1">'.$name.'</div>
<div class="username2">'.$content.'</div><div class="commenttime"><h4 style="color:#5a5a5a">'.$time.'</h4>
</div></div>';
}
If you already have the jquery lib included in your html, you could do something like this:
# html page
<button data-id="1" class="delete_comment" /> # no need to wrap in form
# At the bottom of the body tag
$(".delete_comment").click(function(e){
e.preventDefault();
var $button = $(this), $comment = $button.parent(), id = $button.data("id");
$.ajax({
type: 'DELETE',
url: "/path/to/comment/" + id,
success: function(){ $comment.remove(); }
});
});
I'm working on a delete function in a web app where clicking on a button deletes a row in my db. This is pretty straight forward and it works, but I want the user to be able to confirm the delete first before the form is submitted.
Here's the markup for the form as it is now:
echo '<li class="fave-item">';
echo '<div class="tasted-this box-center">';
echo '<form class="delete-fave">';
echo '<input type="hidden" name="user_id" value="'.$faves_result['user_id'].'" />';
echo '<input type="hidden" name="beer_id" value="'.$faves_result['beer_id'].'" />';
echo '<button class="icon delete" data-icon="x" />';
echo '</form>';
echo '</div>';
echo '</li>';
And here's the ajax submit func.:
$('.delete-fave').on('submit', function(){
$.ajax({
type: "POST",
url: "deletefave.php",
data: $(this).serialize(),
success: $.proxy(function(json) {
$(this).closest('li.fave-item').remove();
},this)
});
return false;
});
This is what I want to happen before the submit:
$('button.delete').click(function(){
$(this).parent().addClass('delete-fave');
$(this).addClass('ready');
return false;
});
When I tested this I removed the class from the form to achieve this order of events:
Click 'button.delete' adds class 'delete-fave' to form (making it active)
'button.delete' gets a 'ready' class
Clicking again on button with the 'ready' class submits form.
I haven't been able to merge these functions so I hope you can help me out!
The $('.delete-fave').on('submit'... function is defined BEFORE the class is added to the button.delete parent, so it's not going to work.
To get it to work just redefine the function again AFTER adding the class.
JSFiddle recreating your problem: http://jsfiddle.net/rowlandrose/XAeCh/5/
JSFiddle solving your problem: http://jsfiddle.net/rowlandrose/XAeCh/4/
how can I check if there is a message in the message queue? for example how can I do something like :
<script type="text/javascript">
var message='<jdoc:include type="message" />'
if(message!="")
{
alert(message);
}
</script>
I am using joomla 2.5.
Thank you
So, the problem is really needing to strip the HTML from the message variable. Several things to note:
Joomla! could be returning multiple messages.
Alert are a blocking event for browsers... do you really want to do that?
First up you could place the messages in a JSON block by using some basic PHP.
<?php
$jAp = JFactory::getApplication();
$messagesJSON = json_encode($jAp->getMessageQueue());
?>
Then later in your template you could echo the messages JSON array into your Javascript similar to your original attempt.
<script type="text/javascript">
var messageJSON = <?php echo $messagesJSON; ?>
... then loop through the JSON block
This way you end up with just the text and type of the message and not the particular formatting of the current style/override.
i could not understand your question but you can get msg queue like this
$mainframe= JFactory::getApplication();
$messages = $mainframe->getMessageQueue();
if (is_array($messages)) {
echo '<ul id="system-messages">';
foreach($messages as $msg) {
echo '<li class="' . $msg['type'] . '">' . $msg['message'] . '</li>';
}
echo '</ul>';
}