I think my problem is a little complicated . I use Laravel as my framework and have a HTML table that shows the posts list and has some TD (like post_title , post_content ,post_author ,...) . each post_title is an <a> tag that when clicked, a modal is opened and has some text field (to show title, authorName, publishedDate ...) and a textarea (to show the post content) .
My first problem was passing these elements to modal (after Many searches I finally found the solution) and my current problem is that with this way of passing variables I just can show the post content as long as it is just simple text . If the text has some style (bold ,italic ..) I can't pass it to modal . It's because for some quotation marks for tags like <b>ggg</b>...any idea about that?
This is the way I pass elements :
<td class="td4"> <!--the td that shows title and is a link to open modal-->
<!--===================================================modal-->
{{$article->title}}
and my javascript:
$('a.saha').click(function(e){
var essay_id = $(this).attr('id');
var title= $(this).data('title');
var body = $(this).data('body');
$("#article_id").val(essay_id);
$("#onvan").val(title);
tinymce.editors[0].setContent(body);///my textarea
});
when I have just simple text as body, it shows title (the tag) something like this : post1
but when I have styled text or image in my body it shows some thing like :
an article the name <b "id="18" data-toggle="modal"..
any help? thanks a lot
You need to encode the HTML so it doesn't mess with things using the htmlspecialchars function.
So
<a title="{{ htmlspecialchars($article->title) }}">
ok it works finally ... :)
I should just write :
data-body="<?php echo htmlspecialchars($article->body) ;?>"
instesd of :
data-body="<?php echo $article->body; ?>"
Related
I am having a problem about getting id from mysql table to modal.
I got a datatable that contain data from mysql table. i put a "UPDATE" button to edit data. UPDATE button opens modal in same page. The button code is ;
<a data-toggle='modal' class='btn btn-success btn-setting' href='#myModal1'>UPDATE</a>
It works perfectly and opens modal very well. But the problem starts from there.
I need to target and post the id to modal content. To do this I have to do something like **href='something.php?id={id}'**
I have href='#myModal1'> so I couldn't do it.
What I have tried ?
I have tried **href='#myModal1?kid={$list["kid"]}'**
When I mouse over the button I can see that it is getting the id but when I click the button the modal is not opening.
Also I have tried to search google. I think lots of people are fixing this with javascript which I dont know :) Any help will be awesome. Thanks !
Create one class (any class name). For ex, i created 'UpdateButton' in <a> tag.
Create one 'data-OrderID' (or any name). For ex, i created 'data-OrderID' in <a> tag. Pass value of your ID in this attribute. Use in <script> tag below.
<a href='#myModal1' class='btn btn-success btn-setting UpdateButton' data-OrderID="<?echo $YourIdHere;?>" data-toggle='modal'>
UPDATE
</a>
Now, in <script> tag, i used 'UpdateButton' class to call modal. And, 'data-OrderID' to pass value to something.php page
<script>
$('.UpdateButton').click(function(){
var Id=$(this).attr('data-OrderID');
$.ajax({url:"something.php?Id="+Id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
something.php (modal)
<?
echo $Id = $_GET['Id'];
?>
It works for me. Hope for you too.
Check Here for more info.
Add a data attribute in html as bellow I used "data-exid"
<a data-toggle='modal' data-exid='[YOUR ID]' class='btn btn-success btn-setting' href='#myModal1'>UPDATE</a>
and try bellow code for model box start event
jQuery('#myModal1').on('show.bs.modal', function(event) {
var button = jQuery(event.relatedTarget) // Button that triggered the modal
var exId = button.data('exid') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or 0other methods instead.
/*Add this line in local*/
var modal = jQuery(this)
modal.find('#logId').val(-1)
modal.find('#logId').val(exId)});
Here "#logId" is an id of hidden box in a model
this is kind of a weird question to put into words so apologies.
I am making a website with a timeline that has multiple data points. On click, each datapoint will open a unique popout window with content corresponding to the datapoint.
If I were to name each datapoint numerically, like ".datapoint-1" ".datapoint-2" and so-fourth, could I write a jQuery loop that would replace just making an individual click function for each datapoint and the corresponding popout window?
Right now I'm just showing and hiding divs (I know a lightbox would be an alternative method but I'm doing this for prototyping/learning experience)
Here's an example of the code for just the first popout window:
$('.datapoint').click(function(){
$(".popout").toggle();
});
Thanks in advance!
What I would use is a combination of class and a custom attribute like
$('.datapoint').click(function() {
var popout = $(this).data('popout');
$(".popout-" + popout).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="datapoint" data-popout="1">1</div>
<div class="popout popout-1">p-1</div>
<div class="datapoint" data-popout="2">2</div>
<div class="popout popout-2">p-2</div>
Here as you can see the class datapoint is used to have the click handler(or you can target the elements using the attribtue selector 'div[data-popuot]'), then the attribute data-popout is used to target a specific popout element
If your javascript is in a .php file, you can just write a for loop in php like this:
<script>
<?
for ($x=0; $x<=10; $x++) {
echo "$(\'.datapoint-".$x."\').click(function(){";
echo "$(\".popout\").toggle();";
echo "})\;";
}
?>
</script>
I did not check my syntax but I hope this gives you an idea. There may be an alternative pure javascript way of doing it but I don't know what it is off the top of my head.
I'm trying to create a script to dynamically add a title attribute to individual URLs.
The idea is as follows:
User pastes HTML with links into text area (Text area A)
User adds a list of titles and URL's into another text area (Text area B) in the following format:
Title attribute - HREF
Title attribute - HREF
Script then goes through Text area B and appends the title attribute to the relevant link in text area A.
Can anyone guide me on the best way to do this? I don't really know where to start.
Do you want someting like this?
http://jsfiddle.net/ghahvbf4/2/
HTML<br/>
<textarea id="areaA"></textarea><br/>
List<br/>
<textarea id="areaB"></textarea>
<br/>
<div id="myCont" style="height:0;overflow:hidden"></div>
<button id="change">add</button><br/>
Result<br/>
<textarea id="result""></textarea>
$(document).ready(function(){
$("#change").click(function(){
$("#myCont").html($("#areaA").val());
$titles = $("#areaB").val().split("\n");
$counter = 0;
$("#myCont a").each(function(x,element){
if($titles[$counter]!=null){
$(element).attr("title",$titles[$counter]);
}
$counter++
})
$("#result").val( $("#myCont").html());
})
})
After much Googling, I resort to the chance at ridicule and moderation on Stack Exchange.
What I am trying to do sounds simple enough. I want to make a <div> id/class that will link automatically create a link to itself via some kind of scripting.
Let me put down some pseudocode, before I make it sound more complicated than it is:
#Let div.link = xxx.html
#Let div.pic = xxx.png/jpg
for div in HTMLdocument:
if div.class == "autolink":
div = "<img src=\"mysite/" + div.pic + ">"
Now, obviously that's Python pseudocode, but I am familiar(ish) with PHP and Javascript. Basically, I want to make the div generate an HTML link without having to actually type out the tags and links for every given div on a web page. I want to be able to type, in my index.html:
<html>
<head></head>
<body>
<div class = "1"></div>
<div class = "2"></div>
</body>
</html>
and then to be presented with a page that has the two divs linked, imaged, and, preferably, formatted.
Like I said, the problem seems simple, but I can't seem to get it to work right, in any language. This seems like a thing that would be very useful for begiiner web designers.
PERSONAL NOTE:
I would preferably like to see a solution in PHP or Javascript, but if you are good with Django and want to show me how to get it done in that, I would be just as grateful!
=========================================
EXAMPLE:
Let's say you have a browser based RPG, and you want to show your player's inventory. The Inventory page would display the items in a players inventory, complete with a link and image, based on whatever was in that user's inventory page. It would look like this (this is VERY rough output, Statements tagged in #these# are not code, and should be interpereted as what they describe):
<h1>User's Inventory:</h1>
<p><div class = "item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "item_2">#Link to page of 'item_2', image of 'item_2'#</div></p>
The above would display, roughly, a header that said "User's Inventory", and then display a linked image of item_1, followed by a newline and then a linked image of item_2, where said items would be in a separate file OR a list that lists all the items and their respective links and images.
You can use jquery, and when page dom is loaded, you cycle through each div that has the class autolink and do your manipulations (add your desired html into each div). You can use the id of each div to place data inside. You can use a prefix to that id values for different types of data. For example, im using "inventory_" as a prefix.
<h1>User's Inventory:</h1>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_2', image of 'item_2'#</div></p>
then jquery on document ready:
<script type="text/javascript">
$(document).ready(function ()
{
// define your website here
var mysite = "http://www.example.com/";
// this will cycle through each div with class autolink. using `this` to reffer to each.
$(".autolink").each(function () {
// we get for div with id="inventory_item_1" ...
var mylink = $(this).attr('id').replace("inventory_",""); // ... a value item_1
var myimagesrc = $(this).attr('id').replace("inventory_","image_"); // ... image_item_1
$(this).html('<img src="'+mysite+'images/'+myimagesrc+'.jpg">');
// the above will add html code of this format:
// <img src="http://www.example.com/images/image_item_1.jpg">
});
});
</script>
try it here:
http://jsfiddle.net/5APhT/2/
I'll give a sample in php. Here is an example if you already have a set of links to use
<?php
//Create a multidimensional array to store all you need to create links
$links['1'][]="http://www.yahoo.com";
$links['1'][]="yahoo.com";
$links['2'][]="http://www.facebook.com";
$links['2'][]="yahoo.com";
$links['3'][]="http://www.google.com";
$links['3'][]="yahoo.com";
foreach($links as $class => $innerArray){
$link=innerArray[0];
$linktext=innerArray[1];
echo "<div class='$class'><a href='$link'>$linktext</a></div>";
}
?>
This creates the divs for you so you don't have to add them in advance.
You can add images in the same manner
im trying to refresh a div on the page using jquery after a click function:
$('.finishTag').live('click', function() {
$('#Qtopics').hide();
//refresh #hiddenTopic here im stuck here :))
$('#hiddenTopic').show();
});
EDIT:
i mean refresh the div once!! and then show it because its hidden at this point!!!
<div id="hiddentTopic">
<?php
while ($Qtopic = mysql_fetch_array($getTopics)){
echo "<a href='google.com' class='topicBullet'>".$Qtopic['name']."</a>";
}
?>
</div>
If I understood it right, you wanna reload content, generated by php part. It's impossible because php is a server-side part while javascript - client-side. What you neeed is to make file server.php, move php part there and then use $('#hiddenTopic').load("server.php"); As #gowri said before.
use load
$('#hiddenTopic').load("server.php");
check your id that is with t
hiddentTopic
please change it
hiddenTopic
like this
working demo
http://jsfiddle.net/JLyay/1/
and this is not a refresh this is called hide and show
IF you want to change the formating of div you can do that using any css class like this: $('divId').addClass('class_name');
to add data you can pick the div using divid and update its innet paragraph aur heading text like this:
$('div1 p').html('blah blah any text … ');
$('h2').text('blah blah blah blah …');
$('START!').prependTo('#divID'); (it write START before div)
$('END!').appendTo('#divID'); (it write END after div)
hope this ll help you.